@extends('admin.layouts.app')

@section('title', 'FILE APP PORTAL - Create Menu')

@section('breadcrumbs')
    <i class="fa-solid fa-chevron-right mx-3 text-[8px]"></i>
    <span class="text-slate-900">Menus</span>
    <i class="fa-solid fa-chevron-right mx-3 text-[8px]"></i>
    <span class="text-slate-900">Create</span>
@endsection

@section('content')

<div class="space-y-6">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold" style="color: #43B9B2;">Create New Menu</h1>
        <a href="{{ route('admin.menus.index') }}" 
           class="rounded-lg px-4 py-2 border-2 transition-colors hover:bg-gray-50" 
           style="border-color: #43B9B2; color: #43B9B2;">
            <i class="fas fa-arrow-left mr-2"></i>Back
        </a>
    </div>

    <div class="rounded-lg bg-white p-6 shadow-md">
        <form action="{{ route('admin.menus.store') }}" method="POST">
            @csrf

            <div class="space-y-4">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">Name <span class="text-red-500">*</span></label>
                    <input type="text" 
                           name="name" 
                           id="name" 
                           value="{{ old('name') }}"
                           required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                           style="border-color: #43B9B2;">
                    @error('name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="slug" class="block text-sm font-medium text-gray-700">Slug</label>
                    <input type="text" 
                           name="slug" 
                           id="slug" 
                           value="{{ old('slug') }}"
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                           style="border-color: #43B9B2;">
                    <p class="mt-1 text-xs text-gray-500">Leave empty to auto-generate from name</p>
                    @error('slug')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="icon" class="block text-sm font-medium text-gray-700">Icon (Font Awesome class)</label>
                    <input type="text" 
                           name="icon" 
                           id="icon" 
                           value="{{ old('icon') }}"
                           placeholder="fas fa-home"
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                           style="border-color: #43B9B2;">
                    @error('icon')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="route" class="block text-sm font-medium text-gray-700">Route</label>
                    <input type="text" 
                           name="route" 
                           id="route" 
                           value="{{ old('route') }}"
                           placeholder="admin.dashboard"
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                           style="border-color: #43B9B2;">
                    @error('route')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="parent_id" class="block text-sm font-medium text-gray-700">Parent Menu</label>
                    <select name="parent_id" 
                            id="parent_id"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                            style="border-color: #43B9B2;">
                        <option value="">None (Root Menu)</option>
                        @foreach($parentMenus as $parent)
                            <option value="{{ $parent->id }}" {{ old('parent_id') == $parent->id ? 'selected' : '' }}>
                                {{ $parent->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('parent_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="order" class="block text-sm font-medium text-gray-700">Order</label>
                    <input type="number" 
                           name="order" 
                           id="order" 
                           value="{{ old('order', 0) }}"
                           min="0"
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                           style="border-color: #43B9B2;">
                    @error('order')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="flex items-center">
                        <input type="checkbox" 
                               name="is_active" 
                               value="1"
                               {{ old('is_active', true) ? 'checked' : '' }}
                               class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700">Active</span>
                    </label>
                </div>

                <div class="flex justify-end gap-4">
                    <a href="{{ route('admin.menus.index') }}" 
                       class="rounded-lg px-4 py-2 border-2 transition-colors hover:bg-gray-50" 
                       style="border-color: #43B9B2; color: #43B9B2;">
                        Cancel
                    </a>
                    <button type="submit" 
                            class="rounded-lg px-4 py-2 text-white transition-colors hover:opacity-90" 
                            style="background-color: #43B9B2;">
                        Create Menu
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection