@extends('layouts.dashboard')

@section('content')
@php
/**
 * Editor for a page the product ships with.
 *
 * Section list on the left, one section's fields on the right — the same shape and order the page
 * renders, so what the operator edits and what a visitor sees line up. The list doubles as the
 * visibility switches: "where do I hide the owners?" has one answer, and it is on screen.
 *
 * The previous version stacked all twenty-two groups in one column and ran to twenty screens with a
 * 99% empty rail beside it. Nothing here is hidden from saving — every field of every section stays
 * inside the one form, so switching sections is a view, not a step.
 *
 * @var string $slug
 * @var string $route     where the page lives, for View live
 * @var string $locale    the language being edited
 * @var array  $locales   every enabled language code
 * @var array  $sections  from PageContent::sections()
 * @var int    $filled    fields carrying content
 * @var int    $total     fields in total
 */
$active = (string) (is_scalar($s = request()->query('s')) ? $s : '');
$ids    = array_column($sections, 'id');
if (!in_array($active, $ids, true)) {
    $active = (string) ($ids[0] ?? '');
}
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
<div class="qm-od-topbar gap-2">
    <a href="{{ route('admin.pages') }}" class="qm-btn qm-btn-outline qm-btn-sm"><i class="fas fa-arrow-left me-1" aria-hidden="true"></i> {{ t_raw('admin.pages.back_link') }}</a>
    <a href="{{ url($route) }}" class="qm-btn qm-btn-outline qm-btn-sm" target="_blank" rel="noopener"><i class="fas fa-external-link-alt" aria-hidden="true"></i> {{ t_raw('admin.pages.view_live') }}</a>
    @if (count($locales) > 1)
    @php // Only when more than one language is enabled — a single-language install never sees a
          // control offering it one choice.
@endphp
    <span class="qm-seg ms-auto">
        @foreach ($locales as $code)
        <a class="qm-seg-btn{{ $code === $locale ? ' active' : '' }}" href="{{ url('/admin/pages/content/' . $slug) }}?lang={{ $code }}&s={{ $active }}">{{ strtoupper($code) }}</a>
        @endforeach
    </span>
    @endif
</div>

<form method="post" action="{{ route('admin.pages.content.post') }}">
    @csrf
    <input type="hidden" name="slug" value="{{ $slug }}">
    <input type="hidden" name="locale" value="{{ $locale }}">
    <div class="row g-4">

        @php // Fields first, controls in a rail on the RIGHT — the same order the CMS page form
              // uses, so the two page editors do not mirror each other. DOM order matches the
              // visual order, which keeps tabbing running through the fields before the save.
@endphp
        <div class="col-lg-8" data-sec-list>
            @php /* The arrangement, posted as one ordered list. Rewritten by the drag handler, so
                     the order that saves is the order on screen. A page whose sections are fixed
                     (the four written pages) simply never posts it. */
@endphp
            <input type="hidden" name="section_order" value="{{ implode(',', array_column($sections, 'id')) }}" data-sec-order>
            @foreach ($sections as $sec)
            @php /* Each section folds. It used to be a tab set — one section on screen and the rest
                     hidden — which meant the operator could not see two sections at once, and a page
                     with a section switched off looked identical to one whose tab simply was not
                     selected. Open the one the rail points at; the rest are one click away and
                     everything stays inside the single form, so one Save still writes the page. */
@endphp
            <details class="qm-pc-fold qm-pc-sec" data-sec="{{ $sec['id'] }}"{{ $sec['id'] === $active ? ' open' : '' }}>
                <summary>
                    @php /* The same grip Admin → Navigation uses, and the same rule: only the grip
                             starts a drag, so everything else in the row keeps working — here that
                             means the summary still opens the fold. data-nofold stops the mousedown
                             toggling it as well. */
@endphp
                    <button type="button" class="qm-icon-btn qm-pc-drag" data-sec-handle data-nofold aria-label="{{ t_raw('admin.pc.reorder') }}" title="{{ t_raw('admin.pc.reorder') }}"><i class="fas fa-grip-vertical" aria-hidden="true"></i></button>
                    <span>{{ $sec['label'] }}</span>
                    @if ($sec['toggle'] !== '')
                    @php /* The section's switch, on its own row beside the caret — visible without
                             opening the fold, exactly as a slide's is. data-nofold keeps the click on
                             the switch: a control inside a <summary> opens the fold as well unless
                             it is stopped. It posts under toggles[], which is what the storefront
                             partials read, so switching it off here hides the section on the site. */
@endphp
                    <label class="qm-switch-row qm-pc-secswitch mb-0" data-nofold>
                        <span>{{ t_raw('admin.pc.visible') }}</span>
                        <input type="checkbox" name="toggles[{{ $sec['toggle'] }}]" value="1" data-sec-toggle {{ $sec['on'] ? 'checked' : '' }}>
                    </label>
                    @endif
                    <i class="fas fa-chevron-down qm-pc-fold-caret" aria-hidden="true"></i>
                </summary>
                <div class="qm-pc-sec-body">
                @if ($sec['data'])
                @php /* Nothing to write here, so the section says why rather than opening onto an
                         empty box: it is built from real records, or its wording is written on
                         another screen. Same sentences the page editors have always used — the
                         switch above is the whole control. */
@endphp
                <p class="qm-hint mb-0 qm-pc-secnote">{{ $sec['note'] !== '' ? $sec['note'] : t_raw('admin.pc.data_only') }}</p>
                @endif

                @php
                // A section built from repeating rows — ten services, eight FAQ pairs — folds each
                // one away. Ten open panels of eight fields ran to a dozen screens and the operator
                // scrolled past nine services to reach the tenth. The first is left open so the
                // section still shows its shape on arrival. A single-panel section stays a plain
                // card: there is nothing to choose between.
                $accordion = count($sec['panels']) > 1;

                // A panel whose fields all declare a `group` is really several blocks in one — the
                // hero's slides. Split it so each becomes its own fold rather than one long card
                // with three headings in it.
                $panels = [];
                foreach ($sec['panels'] as $panel) {
                    $byGroup = [];
                    $loose   = [];
                    foreach ($panel['fields'] as $f) {
                        $g = (string) ($f['opts']['group'] ?? '');
                        if ($g === '') { $loose[] = $f; } else { $byGroup[$g][] = $f; }
                    }
                    if ($byGroup === []) { $panels[] = $panel; continue; }
                    if ($loose !== []) { $panels[] = ['label' => $panel['label'], 'fields' => $loose, 'slide' => '']; }
                    // Group panels ARE the slides, in order, so each is tagged with the slide it is
                    // — the switch below then belongs to a slide rather than to a position.
                    $slideIds = $sec['slides'] ?? [];
                    $n = 0;
                    foreach ($byGroup as $gKey => $gFields) {
                        $panels[] = ['label' => t_raw($gKey), 'fields' => $gFields, 'slide' => $slideIds[$n] ?? ''];
                        $n++;
                    }
                }
                $accordion = $accordion || count($panels) > 1;
@endphp
                @foreach ($panels as $pIdx => $panel)
                @php
                // Copy left, artwork right when a panel has both — the way these sections are laid
                // out on the page itself, and it halves a panel that would otherwise stack eight
                // fields vertically.
                $media = array_values(array_filter($panel['fields'], static fn (array $f): bool => in_array($f['kind'], ['image', 'video'], true)));
                $copy  = array_values(array_filter($panel['fields'], static fn (array $f): bool => !in_array($f['kind'], ['image', 'video'], true)));
                $split = $media !== [] && $copy !== [];
                $cols  = $split ? [['col-md-7', $copy], ['col-md-5', $media]] : [['col-12', $panel['fields']]];
                // A panel with no name of its own prints no heading: repeating the section's name
                // under the fold that already carries it read as the same title three times over.
                $pLabel = (string) $panel['label'];
                // A slide of a carousel carries its own switch, so one slide can come off the deck.
                $pSlide = (string) ($panel['slide'] ?? '');
                $pSlideToggle = $pSlide !== ''
                    ? \App\Services\HomeSection::settingKey($slug, $sec['id'] . '_' . $pSlide) : '';
                $pSlideOn = $pSlideToggle === '' || setting($pSlideToggle, '1') === '1';
@endphp
                @if ($accordion)
                <details class="qm-pc-fold"{{ $pIdx === 0 ? ' open' : '' }}>
                    <summary>
                        <span>{{ $pLabel }}</span>
                        @if ($pSlideToggle !== '')
                        @php /* On the summary row, so which slides are live reads at a glance without
                                 opening three folds. data-nofold keeps the click on the switch instead
                                 of letting it open the fold as well — a control inside <summary>
                                 toggles the fold too unless it is stopped. */
@endphp
                        <label class="qm-switch-row qm-pc-secswitch mb-0" data-nofold>
                            <span>{{ t_raw('admin.pc.visible') }}</span>
                            <input type="checkbox" name="toggles[{{ $pSlideToggle }}]" value="1" {{ $pSlideOn ? 'checked' : '' }}>
                        </label>
                        @endif
                        <i class="fas fa-chevron-down qm-pc-fold-caret" aria-hidden="true"></i>
                    </summary>
                    <div class="qm-pc-fold-body">
                        <div class="row g-3">
                @else
                <div class="qm-card">
                    <div class="qm-card-head">
                        <h2 class="mb-0">{{ $pLabel }}</h2>
                    </div>
                    <div class="qm-card-body">
                        <div class="row g-3">
                @endif
                            @foreach ($cols as [$colClass, $colFields])
                            <div class="{{ $colClass }}">
                                @php // .qm-pc-fields puts a glyph picker on the same line as the
                                      // heading it belongs to, the way the Business-model cards do.
@endphp
                                <div class="qm-pc-fields">
                                @foreach ($colFields as $i => $f)
@php $fid = 'f-' . md5($f['key']); @endphp
                                @php
                                // Two fields that belong together share a row — declared in
                                // PageContent::ROW_PAIRS, so it holds in every language.
                                $lk   = (string) ($f['labelKey'] ?? '');
                                $next = (string) ($colFields[$i + 1]['labelKey'] ?? '');
                                $prev = (string) ($colFields[$i - 1]['labelKey'] ?? '');
                                $half = \App\Services\PageContent::pairsWith($lk, $next)
                                     || \App\Services\PageContent::pairsWith($prev, $lk);
@endphp
                                <div class="qm-pc-row{{ $f['kind'] === 'icon' ? ' qm-pc-row-icon' : '' }}{{ $half ? ' qm-pc-row-half' : '' }}">
                                    <label class="form-label" for="{{ $fid }}">{{ $f['label'] }}</label>
                                    @if ($f['kind'] === 'image' || $f['kind'] === 'video')
                                    @if (!empty($f['opts']['multi']))
                                    @php /* A MULTI field could be added to but never emptied. Each chosen image
                                             renders one `name="…[]"` input, so with no chips left the key vanished
                                             from $_POST entirely — and PageContent::save() iterates POSTED values,
                                             so a declared-but-absent key was never written and the old images came
                                             straight back. This is the same hidden companion the `bool` kind below
                                             already uses: the key is always present, so "none" can be said. PHP
                                             takes the later `…[]` entries over this scalar when any exist. */
@endphp
                                    <input type="hidden" name="content[{{ $f['key'] }}]" value="">
                                    @endif
                                    {!! media_field_html(
                                            'content[' . $f['key'] . ']',
                                            !empty($f['opts']['multi']) ? array_filter(array_map('trim', explode(',', $f['value']))) : $f['value'],
                                            [
                                                'accept'     => $f['kind'] === 'video' ? 'both' : 'image',
                                                'multi'      => !empty($f['opts']['multi']),
                                                'allowClear' => true,
                                                'id'         => $fid,
                                            ]
                                        ) !!}
                                    @elseif ($f['kind'] === 'bool')
                                    @php /* Stored as "1"/"" so an unchecked box clears it, matching how every
                                             other content value round-trips through the same text column. */
@endphp
                                    <input type="hidden" name="content[{{ $f['key'] }}]" value="">
                                    <label class="qm-check mb-0"><input type="checkbox" id="{{ $fid }}" name="content[{{ $f['key'] }}]" value="1"{{ $f['value'] !== '' ? ' checked' : '' }} aria-label="{{ $f['label'] }}"></label>
                                    @elseif ($f['kind'] === 'icon')
                                    @partial('pc-icon-field', ['name' => 'content[' . $f['key'] . ']', 'value' => $f['value'], 'id' => $fid, 'label' => $f['label']])
                                    @elseif ($f['kind'] === 'link')
                                    @partial('pc-link-field', ['name' => 'content[' . $f['key'] . ']', 'value' => $f['value'], 'id' => $fid, 'label' => $f['label']])
                                    @elseif ($f['kind'] === 'paragraph')
                                    <textarea class="form-control" id="{{ $fid }}" name="content[{{ $f['key'] }}]" rows="3" placeholder="{{ $f['placeholder'] }}">{{ $f['value'] }}</textarea>
                                    @else
                                    <input type="text" class="form-control" id="{{ $fid }}" name="content[{{ $f['key'] }}]" value="{{ $f['value'] }}" placeholder="{{ $f['placeholder'] }}">
                                    @endif
                                </div>
                                @endforeach
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                {!! $accordion ? '</details>' : '</div>' !!}
                @endforeach
                </div>
            </details>
            @endforeach
        </div>

        <div class="col-lg-4">
            <div class="qm-sticky-rail">
                @php /* No section list here. Every section is on the page already, folded and
                         named, and each carries its own switch — a second copy of the same list
                         down the right was a third of the screen spent restating it. */
@endphp
                @php /* How this page describes itself to a search engine — the same four controls a
                         CMS page carries, which these four pages had no way to set at all: they are
                         fixed routes rather than `pages` rows, so nothing keyed by a record id could
                         ever reach them. Stored once, not per language, like the rest of the SEO
                         overrides. Nothing here is required; left empty the page's own heading and
                         the site defaults are used. */
@endphp
                <div class="qm-card mt-4">
                    <div class="qm-card-head"><h2 class="mb-0">{{ t_raw('admin.seo.page_section') }}</h2></div>
                    <div class="qm-card-body">
                        <div class="mb-3">
                            <label class="form-label" for="pc-seo-title">{{ t_raw('admin.seo.f_meta_title') }}</label>
                            <input type="text" id="pc-seo-title" name="seo_title" class="form-control" maxlength="120" value="{{ $seo['title'] }}" placeholder="{{ t_raw('admin.seo.ph_meta_title') }}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="pc-seo-desc">{{ t_raw('admin.pages.meta_label') }}</label>
                            <textarea id="pc-seo-desc" name="seo_description" class="form-control" rows="3" maxlength="300" placeholder="{{ t_raw('admin.settings.placeholder_meta_description') }}">{{ $seo['description'] }}</textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ t_raw('admin.seo.f_share_image') }}</label>
                            {!! media_field_html('seo_image', $seo['image'], ['accept' => 'image', 'allowClear' => true, 'id' => 'pc-seo-image']) !!}
                        </div>
                        <label class="qm-check mb-0"><input type="checkbox" name="seo_noindex" value="1"{{ !empty($seo['noindex']) ? ' checked' : '' }}> {{ t_raw('admin.seo.f_noindex') }}</label>
                        <p class="qm-hint mb-0">{{ t_raw('admin.seo.hint_noindex') }}</p>
                    </div>
                </div>
                <div class="d-flex gap-2 mt-4 justify-content-end">
                    <button type="submit" class="qm-btn"><i class="fas fa-save" aria-hidden="true"></i> {{ t_raw('admin.pages.submit_save') }}</button>
                </div>
            </div>
        </div>
    </div>
</form>

<form method="post" action="{{ route('admin.pages.content.post') }}" class="d-flex justify-content-end mt-3" data-confirm="{{ t_raw('admin.pc.reset_confirm') }}">
    @csrf
    <input type="hidden" name="slug" value="{{ $slug }}">
    <input type="hidden" name="locale" value="all">
    <input type="hidden" name="reset" value="1">
    @php // Says what it does: every language, not just the one on screen.
@endphp
    <button type="submit" class="qm-btn qm-btn-outline qm-btn-sm"><i class="fas fa-undo me-1" aria-hidden="true"></i> {{ t_raw('admin.pc.reset_all') }}</button>
</form>

<script>
/* The rail names every section; clicking one opens its fold and scrolls to it rather than hiding
   the others, so two sections can be read at once. Every field stays in the one form, so a single
   Save still writes the whole page. The links carry ?s= so a reload lands where you were. */
(function () {
    /* Drag a section by its handle to reorder the page. The list of <details> IS the order, so the
       hidden input is rewritten from the DOM after every drop — nothing to keep in step by hand. */
    (function () {
        var list = document.querySelector('[data-sec-list]');
        var out  = document.querySelector('[data-sec-order]');
        if (!list || !out) { return; }
        var dragging = null;

        /* The list of sections IS the order, so the hidden input is rewritten from the DOM rather
           than tracked by hand — the same shape as Navigation's renumber(). */
        function sync() {
            var ids = [];
            var secs = list.querySelectorAll('[data-sec]');
            for (var i = 0; i < secs.length; i++) { ids.push(secs[i].getAttribute('data-sec')); }
            out.value = ids.join(',');
        }

        /* Only the grip starts a drag, so the fields inside a section stay usable. */
        document.addEventListener('mousedown', function (e) {
            var handle = e.target.closest ? e.target.closest('[data-sec-handle]') : null;
            if (!handle) { return; }
            var row = handle.closest('[data-sec]');
            if (row) { row.setAttribute('draggable', 'true'); }
        });

        document.addEventListener('dragstart', function (e) {
            var row = e.target.closest ? e.target.closest('[data-sec]') : 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-sec]') : 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');
            sync();
            dragging = null;
        });

        /* The grip answers to the keyboard as well. Arranging the page is the one thing here with no
           second way to do it, so a handle that only a mouse can reach means an operator working
           from the keyboard cannot arrange their own site at all. Up/Down move the focused section
           past its neighbour and write the same hidden input the drop does. */
        document.addEventListener('keydown', function (e) {
            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') { return; }
            var handle = e.target.closest ? e.target.closest('[data-sec-handle]') : null;
            if (!handle) { return; }
            var row = handle.closest('[data-sec]');
            if (!row) { return; }
            var up = e.key === 'ArrowUp';
            var to = up ? row.previousElementSibling : row.nextElementSibling;
            if (!to || !to.hasAttribute('data-sec')) { return; }
            e.preventDefault();
            row.parentNode.insertBefore(up ? row : to, up ? to : row);
            sync();
            handle.focus();
        });
    })();

    /* A switch drawn on a fold's summary row must switch, not open the fold. Opening is the
       browser's default action for a click anywhere in a <summary>, and stopping propagation does
       not stop it — the default has to be prevented and the checkbox flipped by hand. */
    document.addEventListener('click', function (e) {
        var hold = e.target.closest('[data-nofold]');
        if (!hold || !hold.closest('summary')) { return; }
        e.preventDefault();
        var box = hold.querySelector('input[type="checkbox"]');
        if (box) { box.checked = !box.checked; box.dispatchEvent(new Event('change', { bubbles: true })); }
    });

    if (!document.querySelector('[data-sec-to]')) { return; }
    document.addEventListener('click', function (e) {
        var link = e.target.closest('[data-sec-to]');
        if (!link) { return; }
        e.preventDefault();
        var want = link.getAttribute('data-sec-to');
        var sec = document.querySelector('[data-sec="' + want + '"]');
        if (!sec) { return; }
        sec.open = true;
        document.querySelectorAll('[data-sec-to]').forEach(function (a) {
            a.classList.toggle('fw-bold', a === link);
        });
        history.replaceState(null, '', link.getAttribute('href'));
        sec.scrollIntoView({ block: 'start', behavior: 'smooth' });
    });
})();
</script>

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