@extends('layouts.main')

@section('content')
<div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">

    <div class="p-5 border-t border-gray-100 dark:border-gray-800 sm:p-6 grid grid-cols-1 gap-5 sm:grid-cols-2">
        <form method="POST" action="{{ route('submenu.update') }}">
            <input type="text" name="id" value="{{ $data->id }}" hidden>
            @method('PATCH')
            @csrf
            <div class="space-y-5">
                <div class="grid grid-cols-1 gap-5 sm:grid-cols-1">
                    <div class="sm:col-span-1">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                            Menu<span class="text-error-500">*</span>
                        </label>
                        <select name="menu_id" id="menu" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:focus:ring-indigo-500 dark:focus:border-indigo-500">
                            @foreach ($menus as $menu)
                                <option value="{{ $menu->id }}" {{ $data->menu_id == $menu->id ? 'selected' : '' }}>
                                    {{ $menu->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="grid grid-cols-1 gap-5 sm:grid-cols-1">
                    <div class="sm:col-span-1">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                            Sequence<span class="text-error-500">*</span>
                        </label>
                        <input type="number" id="sequence" name="sequence" required value="{{ $data->sequence ?? '' }}"  class="dark:bg-dark-900 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800" />
                    </div>
                </div>
                <div class="grid grid-cols-1 gap-5 sm:grid-cols-1">
                    <div class="sm:col-span-1">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                            Name<span class="text-error-500">*</span>
                        </label>
                        <input type="text" id="name" name="name" required value="{{ $data->name ?? '' }}" placeholder="Enter your first name" class="dark:bg-dark-900 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800" />
                    </div>
                </div>
                <div class="grid grid-cols-1 gap-5 sm:grid-cols-1">
                    <div class="sm:col-span-1">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                            Route<span class="text-error-500">*</span>
                        </label>
                        <input type="text" id="route" name="route" required value="{{ $data->route ?? '' }}" placeholder="Enter route" class="dark:bg-dark-900 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800" />
                    </div>
                </div>

                <div>
                    <div class="mt-5 flex justify-end gap-3">
                        <div class="mt-5 flex gap-3">
                            <a href="{{ route('submenu') }}" class="btn b-solid btn-disable-solid py-2 text-sm dk-theme-card-square w-24 text-center">
                                Cancel
                            </a>
                            <button type="submit" class="btn b-solid btn-primary-solid py-2 text-sm dk-theme-card-square w-24">
                                Save
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection