@extends('master-admin')

@section('content')
<section class="py-8">
    <div class="max-w-2xl mx-auto px-4">
        <div class="bg-white rounded-xl shadow p-6">
            <form 
                action="{{ isset($menu) ? route('menus.update', $menu->id) : route('menus.store') }}" 
                method="POST" 
                class="space-y-6">
                @csrf
                @if (isset($menu))
                    @method('PUT')
                @endif

                <div>
                    <label for="role_id" class="block text-sm font-medium text-gray-700 mb-1">Role</label>
                    @php $selectedRoleId = old('role_id', $menu->role_id ?? ''); @endphp
                    <select class="form-select w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white text-gray-900" id="role_id" name="role_id" required>
                        <option value="" disabled selected hidden>Select a role</option>
                        @foreach ($roles as $id => $role)
                            <option value="{{ $id }}" {{ $selectedRoleId == $id ? 'selected' : '' }}>
                                {{ ucfirst($role) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
                    <input type="text" 
                        class="form-input w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white" 
                        id="name" 
                        name="name" 
                        value="{{ old('name', $menu->name ?? '') }}" 
                        required
                        placeholder="Menu name">
                </div>

                <div>
                    <label for="url" class="block text-sm font-medium text-gray-700 mb-1">URL</label>
                    <input type="text" 
                        class="form-input w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white" 
                        id="url" 
                        name="url" 
                        value="{{ old('url', $menu->url ?? '') }}"
                        placeholder="/dashboard or https://...">
                </div>

                <div>
                    <label for="target" class="block text-sm font-medium text-gray-700 mb-1">Target</label>
                    <select class="form-select w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white text-gray-900" id="target" name="target">
                        <option value="_self" {{ old('target', $menu->target ?? '') == '_self' ? 'selected' : '' }}>_self (Same tab)</option>
                        <option value="_blank" {{ old('target', $menu->target ?? '') == '_blank' ? 'selected' : '' }}>_blank (New tab)</option>
                    </select>
                </div>

                <div>
                    <label for="icon" class="block text-sm font-medium text-gray-700 mb-1">Icon</label>
                    <input type="text" 
                        class="form-input w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white" 
                        id="icon" 
                        name="icon" 
                        value="{{ old('icon', $menu->icon ?? '') }}"
                        placeholder="e.g. heroicon-name">
                </div>

                <div>
                    <label for="class" class="block text-sm font-medium text-gray-700 mb-1">Class</label>
                    <input type="text" 
                        class="form-input w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white" 
                        id="class" 
                        name="class" 
                        value="{{ old('class', $menu->class ?? '') }}"
                        placeholder="Custom CSS classes">
                </div>

                <div>
                    <label for="order" class="block text-sm font-medium text-gray-700 mb-1">Order</label>
                    <input type="number" 
                        class="form-input w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white" 
                        id="order" 
                        name="order" 
                        value="{{ old('order', $menu->order ?? 0) }}"
                        placeholder="Display order">
                </div>

                <div>
                    <label for="parent_id" class="block text-sm font-medium text-gray-700 mb-1">Parent Menu</label>
                    <select 
                        class="form-select w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white text-gray-900" 
                        id="parent_id" 
                        name="parent_id">
                        <option value="">None</option>
                        @foreach ($menus as $parentMenu)
                            <option 
                                value="{{ $parentMenu->id }}" 
                                {{ old('parent_id', $menu->parent_id ?? '') == $parentMenu->id ? 'selected' : '' }}>
                                {{ $parentMenu->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="is_active" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                    <select class="form-select w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white text-gray-900" id="is_active" name="is_active">
                        <option value="1" {{ old('is_active', $menu->is_active ?? 1) ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ old('is_active', $menu->is_active ?? 1) ? '' : 'selected' }}>Inactive</option>
                    </select>
                </div>

                <div class="pt-4">
                    <button type="submit" class="w-full py-2 px-4 bg-indigo-600 text-white font-semibold rounded-lg shadow hover:bg-indigo-700 transition">
                        {{ isset($menu) ? 'Update' : 'Create' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection