@extends('admin.layouts.app')

@section('title', 'Edit Menu')
@section('page_title', 'Edit Menu: '.$menu->name)

@section('content')
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <form method="POST" action="{{ route('admin.menus.update', $menu) }}" class="space-y-6">
            @csrf
            @method('PUT')

            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label for="name" class="mb-1 block text-sm font-medium text-slate-700">Name</label>
                    <input type="text" name="name" id="name" value="{{ old('name', $menu->name) }}" required
                           class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                </div>
                <div>
                    <label for="slug" class="mb-1 block text-sm font-medium text-slate-700">Slug</label>
                    <input type="text" name="slug" id="slug" value="{{ old('slug', $menu->slug) }}" required
                           class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                </div>
            </div>

            <div>
                <h3 class="mb-3 text-sm font-semibold text-slate-900">Menu Items</h3>
                <div class="space-y-3">
                    @forelse ($menu->items as $index => $item)
                        @php $childCount = $menu->items->where('parent_id', $item->id)->count(); @endphp
                        <input type="hidden" name="items[{{ $index }}][id]" value="{{ $item->id }}">
                        <div class="grid gap-3 rounded-lg border border-slate-200 p-3 md:grid-cols-[1fr_1fr_8rem_auto] md:items-center">
                            <input type="text" name="items[{{ $index }}][title]" value="{{ $item->title }}" placeholder="Label" required
                                   class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                            <input type="text" name="items[{{ $index }}][url]" value="{{ $item->url }}" placeholder="URL"
                                   class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                            <input type="number" name="items[{{ $index }}][sort_order]" value="{{ $item->sort_order }}" placeholder="Order"
                                   class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                            <button type="submit" form="delete-menu-item-{{ $item->id }}" formnovalidate
                                    onclick="return confirm(@js('Remove “'.$item->title.'” from this menu?'.($childCount ? " Its {$childCount} sub-item(s) will be removed too." : '')))"
                                    class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-medium text-red-700 hover:border-red-300 hover:bg-red-100"
                                    aria-label="Delete {{ $item->title }}">
                                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M10 11v6M14 11v6"/>
                                </svg>
                                Delete
                            </button>
                        </div>
                    @empty
                        <p class="text-sm text-slate-500">No items yet. Add one below.</p>
                    @endforelse

                    @php $newIndex = $menu->items->count(); @endphp
                    <div class="grid gap-3 rounded-lg border border-dashed border-slate-300 p-3 md:grid-cols-[1fr_1fr_8rem_auto] md:items-center">
                        <input type="text" name="items[{{ $newIndex }}][title]" placeholder="New item label"
                               class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        <input type="text" name="items[{{ $newIndex }}][url]" placeholder="URL"
                               class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        <input type="number" name="items[{{ $newIndex }}][sort_order]" value="{{ $newIndex }}" placeholder="Order"
                               class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        <span class="hidden w-[5.75rem] md:block" aria-hidden="true"></span>
                    </div>
                </div>
            </div>

            <div class="flex items-center gap-2">
                <button type="submit" class="rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-white hover:bg-blue-800">
                    Save Menu
                </button>
                <a href="{{ route('admin.menus.index') }}" class="rounded-lg bg-slate-100 px-4 py-2 text-sm text-slate-700 hover:bg-slate-200">
                    Back
                </a>
            </div>
        </form>

        @foreach ($menu->items as $item)
            <form id="delete-menu-item-{{ $item->id }}" method="POST" action="{{ route('admin.menus.items.destroy', [$menu, $item]) }}" class="hidden">
                @csrf
                @method('DELETE')
            </form>
        @endforeach

        @can('delete', $menu)
            <form method="POST" action="{{ route('admin.menus.destroy', $menu) }}" class="mt-4"
                  onsubmit="return confirm('Delete this menu?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700">
                    Delete Menu
                </button>
            </form>
        @endcan
    </div>
@endsection