@extends('layouts.admin')

@section('title', $menu->name)
@section('heading', 'Navigation — '.$menu->name)

@section('content')
    <div class="grid max-w-5xl gap-6 lg:grid-cols-[1fr_22rem]">

        <div class="admin-card p-5 sm:p-6">
            <h2 class="mb-1 text-base">Menu structure</h2>
            <p class="mb-5 text-sm text-text-muted">Up to three levels deep. Sub-items appear as dropdowns on the site.</p>

            @if ($items->isEmpty())
                <p class="rounded-lg border border-dashed border-border px-4 py-10 text-center text-sm text-text-muted">
                    No items yet — add the first one using the form.
                </p>
            @else
                <ul class="space-y-1">
                    @foreach ($items as $item)
                        @include('admin.menus.item', ['item' => $item, 'menu' => $menu, 'depth' => 0])
                    @endforeach
                </ul>
            @endif
        </div>

        <div class="admin-card h-fit p-5 sm:p-6">
            <h2 class="mb-5 text-base">Add menu item</h2>

            <form action="{{ route('admin.menus.items.store', $menu) }}" method="POST" class="space-y-5">
                @csrf

                <x-form.input name="label" label="Label" required />

                <x-form.input name="url" label="URL"
                              hint="Relative path (projects) or full URL (https://…)." />

                <div>
                    <label for="page-picker" class="form-label">Or pick a page</label>
                    <select id="page-picker" class="form-input"
                            onchange="if (this.value) document.querySelector('[name=url]').value = this.value">
                        <option value="">— Choose —</option>
                        <optgroup label="Pages">
                            @foreach ($pages as $slug => $title)
                                <option value="{{ $slug }}">{{ $title }}</option>
                            @endforeach
                        </optgroup>
                        <optgroup label="Sectors">
                            @foreach ($sectors as $slug => $name)
                                <option value="sectors/{{ $slug }}">{{ $name }}</option>
                            @endforeach
                        </optgroup>
                        <optgroup label="Sections">
                            @foreach (['about' => 'About', 'projects' => 'Projects', 'sectors' => 'Sectors', 'team' => 'Team', 'media' => 'Media', 'gallery' => 'Gallery', 'downloads' => 'Downloads', 'partners' => 'Partners', 'achievements' => 'Achievements', 'careers' => 'Careers', 'faqs' => 'FAQs', 'contact' => 'Contact'] as $path => $label)
                                <option value="{{ $path }}">{{ $label }}</option>
                            @endforeach
                        </optgroup>
                    </select>
                </div>

                <x-form.select name="parent_id" label="Parent item" :options="$parentOptions"
                               placeholder="— Top level —" />

                <x-form.select name="target" label="Open in" :options="['_self' => 'Same tab', '_blank' => 'New tab']"
                               value="_self" required :placeholder="false" />

                <x-form.checkbox name="is_active" label="Visible" :checked="true" />

                <button type="submit" class="btn-primary w-full">Add item</button>
            </form>
        </div>
    </div>
@endsection