@extends('layouts.dashboard')

@section('content')
@php

/**
 * Navigation builder — the columns and links the storefront header shows.
 *
 * Each column is a card; its links are a table so a row can be dragged into a new
 * position. Every row also carries a plain "Order" box, which is what actually decides
 * the order on save — dragging simply rewrites those numbers. The screen is therefore
 * fully usable with scripting switched off.
 *
 * @var array  $doc         the menu being edited: ['cols' => [...], 'footCta' => string]
 * @var bool   $isCustom    true once a menu of the owner's own has been saved
 * @var array  $icons       selectable column icons ("fa-…")
 * @var array  $pages       published CMS pages [id, title, slug]
 * @var array  $posts       published blog posts [id, title, slug]
 * @var array  $routes      built-in storefront destinations, path => label
 * @var int    $spare       blank link rows offered per column
 * @var int    $maxColumns  most columns the menu may hold
 * @var int    $maxLinks    most links one column may hold
 * @var array  $preview     what the storefront renders right now
 */
$cols = $doc['cols'];
// One empty column card is always offered, so adding a column needs no separate step.
if (count($cols) < $maxColumns) {
    // No icon: a new column gets the plain dot the header has always drawn, and a glyph is
    // something the owner opts into rather than something they have to undo.
    $cols[] = ['title' => '', 'icon' => '', 'links' => []];
}

/** The picker value that selects a link's target ("page:12", "route:/deals", "url"). */
$targetValue = static function (array $link): string {
    return $link['type'] === 'url' ? 'url' : $link['type'] . ':' . $link['ref'];
};
/** A native <select> menu is as wide as its longest option, so a long page/post title or route
 * path would push the menu past a phone's edge. Trim the DISPLAY text to a phone-safe width; the
 * value stays intact and the full text rides along in the option's title for hover/assistive tech. */
$optText = static function (string $text): string {
    return mb_strlen($text) > 22 ? rtrim(mb_substr($text, 0, 21)) . '…' : $text;
};
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
<div class="qm-ops-head">
    <div>
        <div class="d-flex align-items-center gap-2">
            <h2 class="qm-snap-section-title mb-0"><span class="qm-snap-title-bar" aria-hidden="true"></span>{{ t_raw('admin.navigation.title') }}</h2>
            <span class="qm-pill {{ $isCustom ? 'qm-pill-green' : 'qm-pill-grey' }}">{!! $isCustom ? t('admin.navigation.state_custom') : t('admin.navigation.state_default') !!}</span>
        </div>
    </div>
</div>

<form method="post" action="{{ route('admin.navigation') }}">
    @csrf

    <div class="qm-card">
        <label class="qm-switch-row mb-3">
            <i class="fas fa-bars qm-head-chip qm-head-chip--teal" aria-hidden="true"></i>
            <span class="flex-grow-1"><strong>{{ t_raw('admin.settings.field_header_pages_menu') }}</strong></span>
            <input class="align-self-center" type="checkbox" name="header_pages_menu" value="1" {{ setting('header_pages_menu', '1') === '1' ? 'checked' : '' }}>
        </label>
        <label class="form-label" for="nav-pages-label">{{ t_raw('admin.navigation.field_pages_label') }}</label>
        <input type="text" id="nav-pages-label" name="header_pages_menu_label" class="form-control" value="{{ setting('header_pages_menu_label', '') }}" placeholder="{{ t_raw('header.pages') }}" maxlength="30">
    </div>

    @foreach ($cols as $ci => $col)
    @php $links = $col['links']; $rowCount = count($links);
@endphp
    <div class="qm-card">
        <div class="qm-ops-head">
            <h2 class="mb-0">{!! $col['title'] !== '' ? e($col['title']) : t('admin.navigation.new_column') !!}</h2>
            <span class="qm-pill qm-pill-grey">{{ t_raw('admin.navigation.column_n', [':n' => $ci + 1]) }}</span>
        </div>

        @php // Column settings + each link below reuse the app's shared filter-bar component (.qm-order-filters + .qm-of-field) so fields sit inline on desktop and reflow on mobile — replacing the old full-width stacked rows and the raw Bootstrap bordered link boxes.
@endphp
        <div class="qm-order-filters mb-1">
            <div class="qm-of-field qm-of-grow">
                <label class="qm-of-label" for="nav-title-{{ (int) $ci }}">{{ t_raw('admin.navigation.f_column_title') }}</label>
                <input type="text" class="form-control" id="nav-title-{{ (int) $ci }}" name="cols[{{ (int) $ci }}][title]" value="{{ $col['title'] }}" maxlength="60" placeholder="{{ t_raw('admin.navigation.ph_column_title') }}">
            </div>
            @php /* Column icon — the shared glyph picker. This screen used to carry its own copy:
                     the same grid, but with no search box over a hundred cells, and its own
                     data-nav-icon-* wiring. It stores the same fa- class it always did. */
@endphp
            <div class="qm-of-field">
                <label class="qm-of-label">{{ t_raw('admin.navigation.f_column_icon') }}</label>
                @partial('pc-icon-field', [
                    'name'  => 'cols[' . (int) $ci . '][icon]',
                    'value' => $col['icon'],
                    'label' => t_raw('admin.navigation.f_column_icon'),
                ])
            </div>
            <div class="qm-of-field">
                <label class="qm-of-label" for="nav-pos-{{ (int) $ci }}">{{ t_raw('admin.navigation.f_order') }}</label>
                <input type="number" class="form-control" id="nav-pos-{{ (int) $ci }}" name="cols[{{ (int) $ci }}][pos]" value="{{ (int) (($ci + 1) * 10) }}" min="0" step="1">
            </div>
        </div>
        <p class="qm-hint mt-0 mb-2">{{ t_raw('admin.navigation.hint_column_title') }}</p>

        @php /* Each link is a self-contained bordered card, not a table row: fields stack full-width on a
           phone so nothing scrolls sideways and the target picker uses the browser's native scrollable
           menu (never clipped, never off-canvas). Address + Badge pair two-up from 576px up. The card is
           still a direct child of [data-nav-rows] and keeps every data hook, so drag/add/remove is unchanged. */
@endphp
        <div class="mt-3" data-nav-rows data-nav-col="{{ (int) $ci }}" data-nav-next="{{ (int) min($maxLinks, $rowCount + $spare) }}" data-nav-max="{{ (int) $maxLinks }}">
            @for ($li = 0; $li < min($maxLinks, $rowCount + $spare); $li++)
            @php
            $link = $links[$li] ?? ['type' => '', 'ref' => '', 'label' => '', 'tag' => ''];
            $sel  = $link['type'] === '' ? '' : $targetValue($link);
            $name = 'cols[' . $ci . '][links][' . $li . ']';
            $id   = 'nav-' . $ci . '-' . $li;
@endphp
            <div class="qm-order-filters mb-2" data-nav-row>
                <button type="button" class="qm-icon-btn" data-nav-handle aria-label="{{ t_raw('admin.navigation.col_reorder') }}" title="{{ t_raw('admin.navigation.col_reorder') }}"><i class="fas fa-grip-vertical" aria-hidden="true"></i></button>
                <div class="qm-of-field qm-of-grow">
                    <label class="qm-h1-sr" for="{{ $id }}-l">{{ t_raw('admin.navigation.col_label') }}</label>
                    <input type="text" class="form-control" id="{{ $id }}-l" name="{{ $name }}[label]" value="{{ $link['label'] }}" maxlength="60" placeholder="{{ t_raw('admin.navigation.ph_label') }}">
                </div>
                <div class="qm-of-field qm-of-grow">
                    <label class="qm-h1-sr" for="{{ $id }}-t">{{ t_raw('admin.navigation.col_target') }}</label>
                    <select class="form-select" id="{{ $id }}-t" name="{{ $name }}[target]" data-nav-target>
                            <option value="">{{ t_raw('admin.navigation.opt_no_link') }}</option>
                            <optgroup label="{{ t_raw('admin.navigation.grp_pages') }}">
                                @foreach ($pages as $p)
@php $v = 'page:' . (int) $p['id']; @endphp
                                <option value="{{ $v }}"{{ $sel === $v ? ' selected' : '' }} title="{{ $p['title'] }}">{!! $optText($p['title']) !!}</option>
                                @endforeach
                            </optgroup>
                            <optgroup label="{{ t_raw('admin.navigation.grp_posts') }}">
                                @foreach ($posts as $p)
@php $v = 'post:' . (int) $p['id']; @endphp
                                <option value="{{ $v }}"{{ $sel === $v ? ' selected' : '' }} title="{{ $p['title'] }}">{!! $optText($p['title']) !!}</option>
                                @endforeach
                            </optgroup>
                            <optgroup label="{{ t_raw('admin.navigation.grp_routes') }}">
                                @foreach ($routes as $path => $label)
@php $v = 'route:' . $path; $rDisp = $label . ' (' . $path . ')'; @endphp
                                <option value="{{ $v }}"{{ $sel === $v ? ' selected' : '' }} title="{{ $rDisp }}">{!! $optText($rDisp) !!}</option>
                                @endforeach
                                @php // A saved route that is no longer in the built-in list (a query string, an
                                      // anchor) is kept selectable so editing another row cannot silently drop it.
@endphp
                                @if ($link['type'] === 'route' && !isset($routes[$link['ref']]))
                                <option value="{{ $sel }}" selected title="{{ $link['ref'] }}">{!! $optText($link['ref']) !!}</option>
                                @endif
                            </optgroup>
                            <option value="url"{{ $sel === 'url' ? ' selected' : '' }}>{{ t_raw('admin.navigation.opt_custom_url') }}</option>
                        </select>
                </div>
                <div class="qm-of-field qm-of-grow">
                    <label class="qm-h1-sr" for="{{ $id }}-c">{{ t_raw('admin.navigation.col_address') }}</label>
                    <input type="text" class="form-control" id="{{ $id }}-c" name="{{ $name }}[custom]" value="{!! $link['type'] === 'url' ? e($link['ref']) : '' !!}" maxlength="255" placeholder="{{ t_raw('admin.navigation.ph_address') }}" data-nav-custom>
                </div>
                <div class="qm-of-field">
                    <label class="qm-h1-sr" for="{{ $id }}-g">{{ t_raw('admin.navigation.col_badge') }}</label>
                    <input type="text" class="form-control" id="{{ $id }}-g" name="{{ $name }}[tag]" value="{{ $link['tag'] }}" maxlength="24" placeholder="{{ t_raw('admin.navigation.ph_badge') }}">
                </div>
                <div class="qm-of-actions">
                    <input type="hidden" name="{{ $name }}[pos]" value="{{ (int) (($li + 1) * 10) }}" data-nav-pos>
                    <button type="button" class="qm-icon-btn danger" data-nav-remove aria-label="{{ t_raw('admin.navigation.col_remove') }}" title="{{ t_raw('admin.navigation.col_remove') }}"><i class="fas fa-times" aria-hidden="true"></i></button>
                </div>
            </div>
            @endfor
        </div>
        <div class="d-flex flex-wrap align-items-center gap-2 mt-2">
            <span class="qm-hint mb-0">{{ t_raw('admin.navigation.hint_rows') }}</span>
            <button type="button" class="qm-btn qm-btn-outline qm-btn-sm ms-auto" data-nav-add><i class="fas fa-plus me-1" aria-hidden="true"></i> {{ t_raw('admin.navigation.add_link') }}</button>
        </div>
    </div>
    @endforeach

    <div class="qm-card">
        @php /* The closing line, laid out exactly like a column above: the same .qm-order-filters
                 row, the text taking the free space via .qm-of-grow and the icon sitting at its
                 natural width. Alone in the card it stretched to full width while the identical
                 control one section up did not. The value is whatever normalise() stored — no
                 second default here, or the picker and the header drift apart. */
@endphp
        <div class="qm-order-filters mb-0">
            <div class="qm-of-field qm-of-grow">
                <label class="qm-of-label" for="nav-foot">{{ t_raw('admin.navigation.f_foot_cta') }}</label>
                <input type="text" class="form-control" id="nav-foot" name="foot_cta" value="{{ $doc['footCta'] }}" maxlength="180" placeholder="{{ t_raw('admin.navigation.ph_foot_cta') }}">
            </div>
            @php // This one is not optional — the footer document link always carries a glyph — so it drops the "no icon" cell.
@endphp
            <div class="qm-of-field">
                <label class="qm-of-label">{{ t_raw('admin.navigation.f_foot_icon') }}</label>
                @partial('pc-icon-field', [
                    'name'      => 'foot_icon',
                    'value'     => $doc['footIcon'],
                    'label'     => t_raw('admin.navigation.f_foot_icon'),
                    'allowNone' => false,
                ])
            </div>
        </div>
    </div>

    <div class="d-flex flex-wrap gap-2 justify-content-end">
        <button type="submit" class="qm-btn"><i class="fas fa-save me-1" aria-hidden="true"></i> {{ t_raw('admin.navigation.save_btn') }}</button>
        @if ($isCustom)
        <button type="submit" name="restore_default" value="1" class="qm-btn qm-btn-outline" data-confirm="{{ t_raw('admin.navigation.confirm_restore') }}" formnovalidate>{{ t_raw('admin.navigation.restore_btn') }}</button>
        @endif
    </div>
</form>

<script>
/* Drag a link row to a new position. The row's Order box is what the server reads, so
   dropping a row simply renumbers every box in that column — which is why the screen
   still reorders correctly, by typing, when this script does not run. */
(function () {
    var dragging = null;

    function renumber(list) {
        var rows = list.querySelectorAll('[data-nav-row]');
        for (var i = 0; i < rows.length; i++) {
            var box = rows[i].querySelector('[data-nav-pos]');
            if (box) { box.value = (i + 1) * 10; }
        }
    }

    /* Only the grip starts a drag, so the text boxes inside the row stay selectable. */
    document.addEventListener('mousedown', function (e) {
        var handle = e.target.closest('[data-nav-handle]');
        if (!handle) { return; }
        var row = handle.closest('[data-nav-row]');
        if (row) { row.setAttribute('draggable', 'true'); }
    });

    document.addEventListener('dragstart', function (e) {
        var row = e.target.closest ? e.target.closest('[data-nav-row]') : null;
        if (!row) { return; }
        dragging = row;
        row.classList.add('is-dragging');
        if (e.dataTransfer) { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', ''); }
    });

    document.addEventListener('dragover', function (e) {
        if (!dragging) { return; }
        var over = e.target.closest ? e.target.closest('[data-nav-row]') : null;
        if (!over || over === dragging || over.parentNode !== dragging.parentNode) { return; }
        e.preventDefault();
        var rows = Array.prototype.slice.call(dragging.parentNode.children);
        var moveDown = rows.indexOf(dragging) < rows.indexOf(over);
        over.parentNode.insertBefore(dragging, moveDown ? over.nextSibling : over);
    });

    document.addEventListener('dragend', function () {
        if (!dragging) { return; }
        dragging.classList.remove('is-dragging');
        dragging.removeAttribute('draggable');
        renumber(dragging.parentNode);
        dragging = null;
    });

    /* The address box only applies to a custom link, so keep it out of the way for the
       rest — the server ignores it either way, this is purely to keep the row readable. */
    function syncCustom(select) {
        var row = select.closest('[data-nav-row]');
        var box = row ? row.querySelector('[data-nav-custom]') : null;
        if (box) { box.disabled = select.value !== 'url'; }
    }
    /* Delegated, so rows added later via "Add link" stay in sync too. */
    document.addEventListener('change', function (e) {
        var sel = e.target.closest ? e.target.closest('[data-nav-target]') : null;
        if (sel) { syncCustom(sel); }
    });
    var selects = document.querySelectorAll('[data-nav-target]');
    for (var i = 0; i < selects.length; i++) { syncCustom(selects[i]); }

    /* Remove a link row, or append a fresh blank one (up to the per-column maximum).
       A removed row is simply not submitted; a column left with no links is dropped. */
    document.addEventListener('click', function (e) {
        var rm = e.target.closest ? e.target.closest('[data-nav-remove]') : null;
        if (rm) {
            var row = rm.closest('[data-nav-row]');
            if (row) { var body = row.parentNode; body.removeChild(row); renumber(body); }
            return;
        }
        var add = e.target.closest ? e.target.closest('[data-nav-add]') : null;
        if (!add) { return; }
        var card = add.closest('.qm-card');
        var list = card ? card.querySelector('[data-nav-rows]') : null;
        var tmpl = list ? list.querySelector('[data-nav-row]') : null;
        if (!list || !tmpl) { return; }
        var max = parseInt(list.getAttribute('data-nav-max'), 10) || 15;
        if (list.querySelectorAll('[data-nav-row]').length >= max) { return; }
        var next = parseInt(list.getAttribute('data-nav-next'), 10) || 0;
        list.setAttribute('data-nav-next', next + 1);
        var clone = tmpl.cloneNode(true);
        clone.querySelectorAll('[name]').forEach(function (el) {
            el.setAttribute('name', el.getAttribute('name').replace(/\[links\]\[\d+\]/, '[links][' + next + ']'));
        });
        clone.querySelectorAll('[id]').forEach(function (el) {
            el.setAttribute('id', el.getAttribute('id').replace(/^(nav-\d+)-\d+-/, '$1-' + next + '-'));
        });
        clone.querySelectorAll('[for]').forEach(function (el) {
            el.setAttribute('for', el.getAttribute('for').replace(/^(nav-\d+)-\d+-/, '$1-' + next + '-'));
        });
        var newSel = clone.querySelector('[data-nav-target]'); if (newSel) { newSel.value = ''; }
        clone.querySelectorAll('input[type="text"]').forEach(function (t) { t.value = ''; });
        clone.classList.remove('is-dragging');
        clone.removeAttribute('draggable');
        list.appendChild(clone);
        renumber(list);
        if (newSel) { syncCustom(newSel); newSel.focus(); }
    });

    /* The column-icon dropdown is the shared picker now, so its click wiring lives in
       qm-pickers.js with every other one. */
})();
</script>

</div>@php /* /.qm-d2 */
@endphp
@endsection