@extends('layouts.admin')
@section('content')
<div class="max-w-6xl">
    <div class="flex flex-col justify-between gap-4 md:flex-row md:items-end">
        <div>
            <p class="hms-kicker">Site structure</p>
            <h1 class="font-serif text-4xl">Navigation</h1>
            <p class="mt-3 max-w-3xl text-black/60">Manage owner-controlled links in the main website navigation and footer. Only Enabled items are public, and lower Display order numbers appear first.</p>
        </div>
        <a class="text-sm font-semibold text-[var(--hms-forest)]" href="{{ route('home') }}" target="_blank" rel="noopener">View website ↗</a>
    </div>

    <div class="mt-6 rounded-2xl border border-amber-200 bg-amber-50 p-5 text-sm leading-relaxed text-amber-950">
        <strong>Important fallback behavior:</strong> when a location has at least one Enabled custom item, that custom set replaces HMS’s built-in fallback links for that location. Keep essential links represented before enabling a replacement set. Internal links must start with <code>/</code>; external links must use a full <code>https://</code> URL.
    </div>

    <section class="mt-8 rounded-2xl border border-black/10 bg-white p-6">
        <div class="grid gap-6 lg:grid-cols-[.8fr_1.5fr]">
            <div>
                <h2 class="font-serif text-2xl">Add navigation item</h2>
                <p class="mt-2 text-sm leading-relaxed text-black/55"><strong>Primary</strong> appears in the desktop/mobile website menu. <strong>Footer</strong> appears in the footer’s Information links. Use display order values such as 10, 20, 30 to leave room for future links.</p>
            </div>
            <form class="grid gap-4 md:grid-cols-2" method="POST" action="{{ route('admin.navigation.store') }}">
                @csrf
                <label class="grid gap-1.5 text-sm font-semibold">Location<span class="text-xs font-normal text-black/45">Where this link is displayed.</span><select class="rounded-xl border border-black/15 px-4 py-3" name="location"><option value="primary">Primary navigation</option><option value="footer">Footer information links</option></select></label>
                <label class="grid gap-1.5 text-sm font-semibold">Display order<span class="text-xs font-normal text-black/45">Lower numbers appear first.</span><input class="rounded-xl border border-black/15 px-4 py-3" type="number" min="0" max="999" name="sort_order" value="{{ old('sort_order', 10) }}" required></label>
                <label class="grid gap-1.5 text-sm font-semibold">Link label<span class="text-xs font-normal text-black/45">Short text visitors click, such as Products or Contact.</span><input class="rounded-xl border border-black/15 px-4 py-3" name="label" value="{{ old('label') }}" placeholder="Visit Us" required></label>
                <label class="grid gap-1.5 text-sm font-semibold">Destination<span class="text-xs font-normal text-black/45">Internal: <code>/visit</code>. External: full HTTPS URL.</span><input class="rounded-xl border border-black/15 px-4 py-3" name="url" value="{{ old('url') }}" placeholder="/visit" required></label>
                <label class="flex items-start gap-3 rounded-xl bg-black/[.025] p-4 text-sm font-semibold"><input class="mt-1" type="checkbox" name="is_enabled" value="1" checked><span>Enabled<small class="mt-1 block font-normal text-black/50">When enabled, this item participates in the public navigation set immediately.</small></span></label>
                <div class="flex items-end"><button class="hms-button hms-button-primary">Add navigation item</button></div>
            </form>
        </div>
    </section>

    <section class="mt-8 grid gap-7">
        @foreach(['primary' => ['Primary navigation', 'Website header and mobile menu'], 'footer' => ['Footer navigation', 'Footer Information links']] as $location => [$heading, $description])
            @php($locationItems = $items->where('location', $location))
            <div>
                <div class="flex items-end justify-between gap-4"><div><h2 class="font-serif text-2xl">{{ $heading }}</h2><p class="mt-1 text-sm text-black/50">{{ $description }} · {{ $locationItems->where('is_enabled', true)->count() }} enabled</p></div></div>
                <div class="mt-3 overflow-hidden rounded-2xl border border-black/10 bg-white">
                    @forelse($locationItems as $item)
                        <details class="border-b border-black/10 last:border-b-0">
                            <summary class="grid cursor-pointer list-none gap-3 p-5 hover:bg-black/[.015] sm:grid-cols-[1fr_auto] sm:items-center [&::-webkit-details-marker]:hidden">
                                <div class="min-w-0"><div class="flex flex-wrap items-center gap-2"><strong>{{ $item->label }}</strong><span class="rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide {{ $item->is_enabled ? 'bg-green-100 text-green-800' : 'bg-black/5 text-black/50' }}">{{ $item->is_enabled ? 'Enabled' : 'Hidden' }}</span></div><p class="mt-1 truncate text-xs text-black/45">{{ $item->url }} · Display order {{ $item->sort_order }}</p></div>
                                <span class="text-xs font-semibold text-black/40">Edit ▾</span>
                            </summary>
                            <div class="border-t border-black/10 bg-black/[.015] p-5">
                                <form class="grid gap-4 md:grid-cols-2" method="POST" action="{{ route('admin.navigation.update', $item) }}">
                                    @csrf @method('PUT')
                                    <label class="grid gap-1 text-sm font-semibold">Location<select class="rounded-xl border border-black/15 bg-white px-4 py-3" name="location">@foreach(['primary' => 'Primary navigation','footer' => 'Footer navigation'] as $value => $label)<option value="{{ $value }}" @selected($item->location === $value)>{{ $label }}</option>@endforeach</select></label>
                                    <label class="grid gap-1 text-sm font-semibold">Display order<span class="text-xs font-normal text-black/45">Lower numbers appear first.</span><input class="rounded-xl border border-black/15 bg-white px-4 py-3" type="number" min="0" max="999" name="sort_order" value="{{ $item->sort_order }}" required></label>
                                    <label class="grid gap-1 text-sm font-semibold">Link label<input class="rounded-xl border border-black/15 bg-white px-4 py-3" name="label" value="{{ $item->label }}" required></label>
                                    <label class="grid gap-1 text-sm font-semibold">Destination<input class="rounded-xl border border-black/15 bg-white px-4 py-3" name="url" value="{{ $item->url }}" required></label>
                                    <label class="flex items-center gap-2 text-sm font-semibold"><input type="checkbox" name="is_enabled" value="1" @checked($item->is_enabled)> Enabled publicly</label>
                                    <div><button class="hms-button border border-black/15 bg-white">Save item</button></div>
                                </form>
                                <form class="mt-4 border-t border-black/10 pt-4" method="POST" action="{{ route('admin.navigation.destroy', $item) }}" onsubmit="return confirm('Delete this navigation item?')">
                                    @csrf @method('DELETE')
                                    <button class="text-sm font-semibold text-red-700">Delete navigation item</button>
                                </form>
                            </div>
                        </details>
                    @empty
                        <p class="p-7 text-sm text-black/50">No custom items in this location. HMS is currently using its built-in fallback links here.</p>
                    @endforelse
                </div>
            </div>
        @endforeach
    </section>
</div>
@endsection