@php
    $headerMenus = old('header_menus', $copy['header_menus']);
    $utilbar = old('utilbar', $copy['utilbar']);
    $social = old('social', $copy['social']);
    $footer = old('footer', $copy['footer']);
    $brand = old('brand', $copy['brand']);
    $logoPreview = $menu->logoUrl();
@endphp
@extends('layouts.admin')

@section('title', 'Navigation — '.config('app.name'))
@section('page_title', 'Navigation')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.cms.pages.index') }}">CMS</a></li>
    <li class="breadcrumb-item active">Navigation</li>
@endsection

@section('content')
    <div class="alert alert-info">
        <strong>This is the public header and footer.</strong>
        Change labels, links, or the logo, then Save. Empty rows are ignored.
        Use site paths such as <code>/company/about</code>, or full URLs and <code>mailto:</code> addresses.
        The Products dropdown can also list every catalog product automatically.
    </div>

    <form method="POST" action="{{ route('admin.cms.navigation.update') }}" enctype="multipart/form-data" data-nav-editor>
        @csrf
        @method('PUT')

        <div class="card mb-3">
            <div class="card-header"><h5 class="mb-0">Logo and site name</h5></div>
            <div class="card-body">
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label" for="brand_name">Name next to the logo</label>
                        <input class="form-control" id="brand_name" name="brand[name]" value="{{ $brand['name'] ?? '' }}" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="brand_home_url">Logo clicks through to</label>
                        <input class="form-control" id="brand_home_url" name="brand[home_url]" value="{{ $brand['home_url'] ?? '/' }}">
                    </div>
                    <div class="col-md-4">
                        <div class="form-check mt-4">
                            <input type="hidden" name="brand[show_name]" value="0">
                            <input class="form-check-input" type="checkbox" id="brand_show_name" name="brand[show_name]" value="1" @checked(filter_var($brand['show_name'] ?? true, FILTER_VALIDATE_BOOLEAN))>
                            <label class="form-check-label" for="brand_show_name">Show the name next to the logo</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="logo">Upload a logo</label>
                        <input class="form-control" id="logo" name="logo" type="file" accept=".png,.jpg,.jpeg,.gif,.webp,.svg">
                        <div class="form-text">PNG, SVG, JPG or WebP, up to 2 MB. Leave empty to keep the current logo.</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="brand_logo_url">Or paste a logo URL</label>
                        <input class="form-control" id="brand_logo_url" name="brand[logo_url]" value="{{ $brand['logo_url'] ?? '' }}" placeholder="/uploads/… or https://">
                    </div>
                    @if ($logoPreview)
                        <div class="col-12 d-flex align-items-center gap-3">
                            <img src="{{ $logoPreview }}" alt="" style="max-height:48px;width:auto">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="remove_logo" name="remove_logo" value="1">
                                <label class="form-check-label" for="remove_logo">Remove uploaded logo and use the default mark</label>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Header menus</h5>
                <button class="btn btn-sm btn-outline-primary" type="button" data-nav-add="header">Add menu</button>
            </div>
            <div class="card-body">
                <p class="text-muted">Each menu is a top item. Add submenu links underneath it. Drag order with Move up / Move down.</p>
                <div data-nav-list="header">
                    @foreach ($headerMenus as $h => $menuItem)
                        @include('admin.cms.navigation._header-item', ['h' => $h, 'menuItem' => $menuItem])
                    @endforeach
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Grey utility bar</h5>
                <button class="btn btn-sm btn-outline-primary" type="button" data-nav-add="util">Add link</button>
            </div>
            <div class="card-body">
                <div data-nav-list="util">
                    @foreach ($utilbar as $u => $link)
                        @include('admin.cms.navigation._util-item', ['u' => $u, 'link' => $link])
                    @endforeach
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Social links</h5>
                <button class="btn btn-sm btn-outline-primary" type="button" data-nav-add="social">Add network</button>
            </div>
            <div class="card-body">
                <p class="text-muted">Shown in the header and in the footer.</p>
                <div data-nav-list="social">
                    @foreach ($social as $s => $link)
                        @include('admin.cms.navigation._social-item', ['s' => $s, 'link' => $link])
                    @endforeach
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header"><h5 class="mb-0">Footer</h5></div>
            <div class="card-body">
                <div class="row g-3 mb-4">
                    <div class="col-md-8">
                        <label class="form-label" for="footer_tagline">Short description under the logo</label>
                        <textarea class="form-control" id="footer_tagline" name="footer[tagline]" rows="2">{{ $footer['tagline'] ?? '' }}</textarea>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="footer_copyright">Copyright line</label>
                        <input class="form-control" id="footer_copyright" name="footer[copyright]" value="{{ $footer['copyright'] ?? '' }}">
                        <div class="form-text">Use <code>{year}</code> for the current year.</div>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <strong>Link columns</strong>
                    <button class="btn btn-sm btn-outline-primary" type="button" data-nav-add="column">Add column</button>
                </div>
                <div class="row g-3" data-nav-list="column">
                    @foreach (($footer['columns'] ?? []) as $f => $column)
                        @include('admin.cms.navigation._footer-column', ['f' => $f, 'column' => $column])
                    @endforeach
                </div>
            </div>
        </div>

        <button class="btn btn-primary" type="submit">Save navigation</button>
        <a class="btn btn-outline-secondary" href="{{ route('public.home') }}" target="_blank" rel="noopener">View public site</a>
    </form>

    <template id="nav-tpl-header">
        @include('admin.cms.navigation._header-item', ['h' => '__H__', 'menuItem' => ['label' => '', 'url' => '', 'heading' => '', 'align' => 'left', 'wide' => false, 'include_products' => false, 'children' => []]])
    </template>
    <template id="nav-tpl-child">
        @include('admin.cms.navigation._child-item', ['h' => '__H__', 'c' => '__C__', 'child' => ['label' => '', 'url' => '']])
    </template>
    <template id="nav-tpl-util">
        @include('admin.cms.navigation._util-item', ['u' => '__U__', 'link' => ['label' => '', 'url' => '']])
    </template>
    <template id="nav-tpl-social">
        @include('admin.cms.navigation._social-item', ['s' => '__S__', 'link' => ['label' => '', 'url' => '', 'network' => 'other']])
    </template>
    <template id="nav-tpl-column">
        @include('admin.cms.navigation._footer-column', ['f' => '__F__', 'column' => ['heading' => '', 'links' => []]])
    </template>
    <template id="nav-tpl-flink">
        @include('admin.cms.navigation._footer-link', ['f' => '__F__', 'l' => '__L__', 'link' => ['label' => '', 'url' => '']])
    </template>
@endsection

@push('styles')
<style>
    .nav-editor-item { border: 1px solid #d7e1ea; border-radius: 10px; padding: 0.85rem; background: #fff; }
    .nav-editor-tools { display: flex; gap: 0.35rem; flex-wrap: wrap; }
    .nav-editor-children { display: grid; gap: 0.5rem; }
</style>
@endpush

@push('scripts')
    <script src="{{ asset('js/nav-editor.js') }}"></script>
@endpush