{{-- resources/views/menus/create.blade.php --}}
<x-app-layout>
    <x-slot name="header">
        <h2 class="fs-4 fw-semibold text-dark">
            Add Menu / Submenu
        </h2>
    </x-slot>

    @if(session('success'))
        <div class="alert alert-success mb-3">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger mb-3">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Add Menu / Submenu</h5>
        </div>

        <div class="card-body">
            <form action="{{ route('menus.store') }}" method="POST">
                @csrf

                {{-- Parent Menu --}}
                <div class="mb-3">
                    <label class="form-label">Parent Menu (optional)</label>
                    <select name="parent_id" class="form-select">
                        <option value="">-- Main Menu --</option>
                        @foreach($menus as $menu)
                            <option value="{{ $menu->id }}" {{ old('parent_id') == $menu->id ? 'selected' : '' }}>
                                {{ $menu->title }}
                            </option>
                        @endforeach
                    </select>
                    <small class="text-muted">Khali chhodo agar yeh main menu hai (sidebar pe upar level).</small>
                </div>

                {{-- Title --}}
                <div class="mb-3">
                    <label class="form-label">Menu Title</label>
                    <input
                        type="text"
                        name="title"
                        class="form-control"
                        placeholder="e.g. Orders, Projects, Inventory"
                        value="{{ old('title') }}"
                        required
                    >
                </div>

                {{-- Key --}}
                <div class="mb-3">
                    <label class="form-label">Menu Key (unique)</label>
                    <input
                        type="text"
                        name="key"
                        class="form-control"
                        placeholder="e.g. orders, orders.list, inventory"
                        value="{{ old('key') }}"
                        required
                    >
                    <small class="text-muted">Ye hi key baad me user rights mapping me kaam aayegi.</small>
                </div>

                {{-- Route Name --}}
                <div class="mb-3">
                    <label class="form-label">Route Name</label>
                    <input
                        type="text"
                        name="route_name"
                        class="form-control"
                        placeholder="e.g. orders.index, inventory.items"
                        value="{{ old('route_name') }}"
                    >
                    <small class="text-muted">Agar sirf caption ya sirf parent menu hai to khali rehne do.</small>
                </div>

                {{-- Icon --}}
                <div class="mb-3">
                    <label class="form-label">Icon (Feather icon class)</label>
                    <input
                        type="text"
                        name="icon"
                        class="form-control"
                        placeholder="e.g. feather-airplay, feather-users"
                        value="{{ old('icon') }}"
                    >
                </div>

                {{-- Caption --}}
                <div class="mb-3">
                    <label class="form-label">Is Caption?</label>
                    <select name="is_caption" class="form-select">
                        <option value="0" {{ old('is_caption', 0) == 0 ? 'selected' : '' }}>No</option>
                        <option value="1" {{ old('is_caption') == 1 ? 'selected' : '' }}>Yes (Section Heading)</option>
                    </select>
                </div>

                {{-- Sort Order --}}
                <div class="mb-3">
                    <label class="form-label">Sort Order</label>
                    <input
                        type="number"
                        name="sort_order"
                        class="form-control"
                        value="{{ old('sort_order', 0) }}"
                        placeholder="0"
                    >
                </div>

                {{-- Active --}}
                <div class="mb-3">
                    <label class="form-label">Is Active?</label>
                    <select name="is_active" class="form-select">
                        <option value="1" {{ old('is_active', 1) == 1 ? 'selected' : '' }}>Yes</option>
                        <option value="0" {{ old('is_active') == 0 ? 'selected' : '' }}>No</option>
                    </select>
                </div>

                <button type="submit" class="btn btn-primary w-100">
                    Save Menu
                </button>
            </form>
        </div>
    </div>
</x-app-layout>