<div class="ml-[280px] min-h-screen space-y-6">
    <div class="bg-white border rounded-2xl p-6 shadow-sm max-w-3xl">

        <h3 class="font-semibold mb-6 text-lg">Add Menu Page</h3>

        <form wire:submit.prevent="addItem" class="grid grid-cols-1 md:grid-cols-2 gap-5">

            <!-- CATEGORY -->
            <div>
                <label class="block text-sm font-medium mb-1">Category</label>

                <select wire:model="menu_category_id"
                    class="w-full border rounded-lg px-4 py-2
            @error('menu_category_id') border-red-500 @enderror">
                    <option value="">Select Category</option>
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>

                @error('menu_category_id')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>


            <!-- PAGE NAME -->
            <div>
                <label class="block text-sm font-medium mb-1">Page Name</label>

                <input type="text" wire:model.defer="title" placeholder="Enter page name"
                    class="w-full border rounded-lg px-4 py-2
           @error('title') border-red-500 @enderror">

                @error('title')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>


            <div>
                <label class="block text-sm font-medium mb-1">
                    URL Slug
                    <span class="text-gray-400 text-xs">(only slug, e.g. brand-strategy)</span>
                </label>

                <div class="flex items-center gap-2">
                    <span class="text-sm text-gray-500">/services/</span>

                    <input type="text" wire:model.defer="url" placeholder="brand-strategy"
                        class="w-full border rounded-lg px-4 py-2
               @error('url') border-red-500 @enderror">
                </div>

                {{-- 🔴 RED ERROR MESSAGE --}}
                @error('url')
                    <p class="text-red-600 text-sm mt-1">
                        {{ $message }}
                    </p>
                @enderror
            </div>




            <!-- REDIRECT URL -->
            <div>
                <label class="block text-sm font-medium mb-1">
                    Redirect URL <span class="text-gray-400">(Optional)</span>
                </label>
                <input type="text" wire:model.defer="redirect_url" placeholder="https://example.com"
                    class="w-full border rounded-lg px-4 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Position</label>

                <input type="number" wire:model.defer="position" min="1" placeholder="Enter menu position"
                    class="w-full border rounded-lg px-4 py-2
           @error('position') border-red-500 @enderror">

                @error('position')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>



            <!-- SUBMIT -->
            <div class="md:col-span-2">
                @if ($errors->any())
                    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded mb-4">
                        Please fix the errors below.
                    </div>
                @endif
                <button type="submit" class="bg-black text-white rounded-lg px-6 py-2">
                    Submit
                </button>
            </div>

        </form>

    </div>

</div>
