@extends('layouts.app')
@section('title', 'Menu')
@section('content')
@include('partials.admin-nav')
@include('partials.cms-tabs')
@if(! $customised)
    <div class="card">
        <h2 class="card-title">Using the built-in menu</h2>
        <p class="mb-3 text-sm text-slate-600">Currently showing: @foreach($defaults as $g => $items)<strong>{{ $g }}</strong>@if(! $loop->last), @endif @endforeach. Click below to copy it here so you can rename, reorder, hide or add items.</p>
        <form method="POST" action="{{ route('admin.cms.menu.customise') }}">@csrf<button class="btn-primary">Customise menu</button></form>
    </div>
@else
    <datalist id="link-choices">@foreach($pages as $path => $title)<option value="{{ $path }}">{{ $title }}</option>@endforeach</datalist>
    <p class="mb-4 text-sm text-slate-500">Items appear in the site header grouped by <em>Group</em>. Lower numbers come first. Use a path like <code>/company/about</code>, pick a page from the list, or paste a full <code>https://</code> link.</p>
    <div class="card overflow-x-auto">
        <table class="tbl">
            <thead><tr><th>Group</th><th>Grp #</th><th>Label</th><th>Description</th><th>Link</th><th>#</th><th>Show</th><th></th></tr></thead>
            <tbody>
            @foreach($items as $it)
                <tr>
                    <td><input form="mi{{ $it->id }}" name="group_label" class="input" maxlength="40" value="{{ $it->group_label }}"></td>
                    <td><input form="mi{{ $it->id }}" name="group_order" type="number" class="input w-16" value="{{ $it->group_order }}"></td>
                    <td><input form="mi{{ $it->id }}" name="label" class="input" maxlength="60" value="{{ $it->label }}"></td>
                    <td><input form="mi{{ $it->id }}" name="description" class="input" maxlength="120" value="{{ $it->description }}"></td>
                    <td><input form="mi{{ $it->id }}" name="url" list="link-choices" class="input font-mono text-xs" maxlength="255" value="{{ $it->url }}"></td>
                    <td><input form="mi{{ $it->id }}" name="sort_order" type="number" class="input w-16" value="{{ $it->sort_order }}"></td>
                    <td><input form="mi{{ $it->id }}" type="hidden" name="is_visible" value="0"><input form="mi{{ $it->id }}" type="checkbox" name="is_visible" value="1" @checked($it->is_visible)></td>
                    <td class="whitespace-nowrap text-right"><button form="mi{{ $it->id }}" class="btn-primary btn-sm">Save</button>
                        <button type="submit" form="md{{ $it->id }}" class="btn-danger btn-sm" onclick="return confirm('Remove this item?')">✕</button>
</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    @foreach($items as $it)
        <form id="mi{{ $it->id }}" method="POST" action="{{ route('admin.cms.menu.update', $it) }}">@csrf @method('PUT')</form>
        <form id="md{{ $it->id }}" method="POST" action="{{ route('admin.cms.menu.destroy', $it) }}">@csrf @method('DELETE')</form>
    @endforeach

    <div class="card mt-6">
        <h2 class="card-title">Add item</h2>
        <form method="POST" action="{{ route('admin.cms.menu.store') }}" class="grid gap-3 md:grid-cols-5">
            @csrf
            <div><label class="label">Group</label><input name="group_label" list="groups" class="input" required maxlength="40" value="{{ old('group_label') }}"><datalist id="groups">@foreach($items->pluck('group_label')->unique() as $g)<option value="{{ $g }}">@endforeach</datalist></div>
            <div><label class="label">Label</label><input name="label" class="input" required maxlength="60" value="{{ old('label') }}"></div>
            <div><label class="label">Description</label><input name="description" class="input" maxlength="120" value="{{ old('description') }}"></div>
            <div><label class="label">Link</label><input name="url" list="link-choices" class="input font-mono text-xs" required maxlength="255" value="{{ old('url') }}"></div>
            <div class="flex items-end"><button class="btn-primary w-full">Add</button></div>
        </form>
    </div>
    <form method="POST" action="{{ route('admin.cms.menu.reset') }}" class="mt-4" onsubmit="return confirm('Discard all menu edits and restore the built-in menu?')">@csrf @method('DELETE')<button class="btn-secondary">Reset to built-in menu</button></form>
@endif
@endsection