@extends('layouts.app')
@section('title', __('ui.admin_navigation_title').' — Coaster World')
@section('content')
<section class="admin-hero"><div class="container">
    @include('admin._nav')
    <span class="eyebrow">{{ __('ui.admin_navigation_kicker') }}</span>
    <h1>{{ __('ui.admin_navigation_title') }}</h1>
    <p>{{ __('ui.admin_navigation_intro') }}</p>
</div></section>

<section class="section"><div class="container" data-navigation-admin data-csrf="{{ csrf_token() }}" data-reorder-url="{{ route('admin.navigation.reorder') }}" data-update-url-template="{{ route('admin.navigation.update', ['navigationItem' => '__ID__']) }}" data-edit-label="{{ __('ui.edit') }}">
    @if(session('status'))
        <div class="flash success">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="flash error"><strong>{{ __('ui.admin_navigation_validation_error') }}</strong><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
    @endif

    <div class="admin-navigation-toolbar">
        <div>
            <span class="eyebrow">{{ __('ui.admin_navigation_editor_kicker') }}</span>
            <h2>{{ __('ui.admin_navigation_editor_title') }}</h2>
            <p>{{ __('ui.admin_navigation_editor_help') }}</p>
        </div>
        <div class="admin-inline-actions">
            <button type="button" class="button" data-nav-create="category">+ {{ __('ui.admin_navigation_add_category') }}</button>
            <button type="button" class="button" data-nav-create="section">+ {{ __('ui.admin_navigation_add_section') }}</button>
            <button type="button" class="button button-primary" data-nav-create="link">+ {{ __('ui.admin_navigation_add_link') }}</button>
        </div>
    </div>

    <div class="admin-navigation-notice">
        <span class="admin-nav-node-icon"><x-nav-icon name="shield" /></span>
        <div><strong>{{ __('ui.admin_navigation_fallback_title') }}</strong><p>{{ __('ui.admin_navigation_fallback_help') }}</p></div>
        <form method="post" action="{{ route('admin.navigation.reset') }}" onsubmit="return confirm(@js(__('ui.admin_navigation_reset_confirm')))">
            @csrf
            <button class="button button-small" type="submit">{{ __('ui.admin_navigation_reset') }}</button>
        </form>
    </div>

    <div class="admin-navigation-preview" aria-label="{{ __('ui.admin_navigation_preview') }}">
        <span class="admin-navigation-preview-logo">Coaster World</span>
        <span class="admin-navigation-preview-search">⌕ {{ __('ui.search_placeholder') }}</span>
        <div class="admin-navigation-preview-icons">
            @foreach($roots->where('is_enabled', true) as $category)
                <span title="{{ $category->label ?: ($category->label_key ? __($category->label_key) : $category->key) }}"><x-nav-icon :name="$category->icon ?: 'menu'" /></span>
            @endforeach
            <span><x-nav-icon name="bell" /></span><span><img src="/images/flags/fr.svg" alt="Français" width="22" height="15"></span><span><x-nav-icon name="moon" /></span>
        </div>
    </div>

    <div class="admin-nav-tree-wrap">
        <div class="admin-nav-tree-head"><strong>{{ __('ui.admin_navigation_tree_title') }}</strong><span data-nav-save-state data-saved="{{ __('ui.admin_navigation_reorder_saved') }}" data-error="{{ __('ui.admin_navigation_reorder_error') }}">{{ __('ui.admin_navigation_drag_help') }}</span></div>
        <div class="admin-nav-dropzone is-root" data-nav-dropzone data-parent-id="" data-accept="category">
            @foreach($roots as $item)
                @include('admin.navigation._tree_item', ['item' => $item, 'children' => $children, 'availableIcons' => $availableIcons])
            @endforeach
            <div class="admin-nav-drop-placeholder">{{ __('ui.admin_navigation_drop_root') }}</div>
        </div>
    </div>

    <dialog class="admin-navigation-dialog" data-nav-dialog aria-labelledby="admin-navigation-dialog-title">
        <form method="post" action="{{ route('admin.navigation.store') }}" data-nav-form>
            @csrf
            <input type="hidden" name="_method" value="POST" data-nav-method>
            <div class="admin-navigation-dialog-head">
                <div><span class="eyebrow" data-nav-dialog-kicker>{{ __('ui.admin_navigation_add') }}</span><h2 id="admin-navigation-dialog-title" data-nav-dialog-title>{{ __('ui.admin_navigation_add_link') }}</h2></div>
                <button type="button" class="admin-navigation-dialog-close" data-nav-dialog-close aria-label="{{ __('ui.header_close_menu') }}">×</button>
            </div>

            <div class="admin-navigation-form-grid">
                <label><span>{{ __('ui.admin_navigation_type') }}</span>
                    <select name="type" required data-nav-type>
                        <option value="category">{{ __('ui.admin_navigation_type_category') }}</option>
                        <option value="section">{{ __('ui.admin_navigation_type_section') }}</option>
                        <option value="link">{{ __('ui.admin_navigation_type_link') }}</option>
                    </select>
                </label>
                <label><span>{{ __('ui.admin_navigation_parent') }}</span>
                    <select name="parent_id" data-nav-parent>
                        <option value="">— {{ __('ui.admin_navigation_root') }} —</option>
                        @foreach($items->whereIn('type', ['category', 'section']) as $parent)
                            <option value="{{ $parent->id }}" data-parent-type="{{ $parent->type }}">{{ $parent->type === 'section' ? '↳ ' : '' }}{{ $parent->label ?: ($parent->label_key ? __($parent->label_key) : $parent->key) }}</option>
                        @endforeach
                    </select>
                </label>
                <label><span>{{ __('ui.admin_navigation_label') }}</span><input name="label" type="text" maxlength="255" data-nav-label placeholder="Road Trips"></label>
                <label><span>{{ __('ui.admin_navigation_translation_key') }}</span><input name="label_key" type="text" maxlength="255" data-nav-label-key placeholder="ui.road_trips_nav"></label>
                <label><span>{{ __('ui.admin_navigation_key') }}</span><input name="key" type="text" maxlength="120" data-nav-key placeholder="road-trips"></label>
                <label><span>{{ __('ui.admin_navigation_icon') }}</span>
                    <select name="icon" data-nav-icon>@foreach($availableIcons as $icon)<option value="{{ $icon }}">{{ $icon }}</option>@endforeach</select>
                </label>
                <label data-nav-link-field><span>{{ __('ui.admin_navigation_route') }}</span><input name="route_name" type="text" maxlength="255" data-nav-route placeholder="road-trips.index"></label>
                <label data-nav-link-field><span>{{ __('ui.admin_navigation_url') }}</span><input name="url" type="url" maxlength="2000" data-nav-url placeholder="https://..."></label>
                <label><span>{{ __('ui.admin_navigation_access') }}</span>
                    <select name="access" data-nav-access><option value="all">Public</option><option value="auth">Connecté</option><option value="admin">Admin</option></select>
                </label>
                <label data-nav-link-field><span>{{ __('ui.admin_navigation_active_patterns') }}</span><input name="active_patterns" type="text" data-nav-active placeholder="road-trips.*, road-trips.index"></label>
            </div>

            <div class="admin-navigation-checks">
                <label><input type="checkbox" name="is_enabled" value="1" data-nav-enabled checked> {{ __('ui.admin_navigation_enabled') }}</label>
                <label><input type="checkbox" name="desktop_visible" value="1" data-nav-desktop checked> Desktop</label>
                <label><input type="checkbox" name="mobile_visible" value="1" data-nav-mobile checked> Mobile</label>
                <label data-nav-link-field><input type="checkbox" name="pinnable" value="1" data-nav-pinnable checked> {{ __('ui.admin_navigation_pinnable') }}</label>
                <label data-nav-category-field><input type="checkbox" name="wide" value="1" data-nav-wide> {{ __('ui.admin_navigation_wide') }}</label>
                <label data-nav-link-field><input type="checkbox" name="open_new_tab" value="1" data-nav-new-tab> {{ __('ui.admin_navigation_new_tab') }}</label>
            </div>

            <div class="admin-navigation-dialog-actions">
                <button type="button" class="button" data-nav-dialog-close>{{ __('ui.cancel') }}</button>
                <button type="submit" class="button button-primary">{{ __('ui.save') }}</button>
            </div>
        </form>
    </dialog>
</div></section>
@endsection