@extends('layouts.dashboard')

@section('content')
@php
/* The gallery is one JSON list now — posted as footer_gallery_keep[] / footer_gallery_new[] and
   stored under a single key. The numbered footer_gallery_1..N settings it replaced are no longer
   written by anything, so the "is this slot custom?" test that read them could only ever answer no;
   it and the defaults it needed are gone with them. Each image carries its own X instead. */
// One section-visibility toggle (Bootstrap form-switch, re-skinned by app.css).
$sw = static function (string $name, string $label, string $help = '', string $default = '1'): void {
    $on = setting($name, $default) === '1';
@endphp
    <div class="form-check form-switch qm-foot-sw">
        <input class="form-check-input" type="checkbox" role="switch" id="fs-{{ $name }}" name="{{ $name }}" value="1"{{ $on ? ' checked' : '' }}>
        <label class="form-check-label" for="fs-{{ $name }}"><strong>{{ $label }}</strong>@if ($help !== '')<small class="d-block text-muted">{{ $help }}</small>@endif</label>
    </div>
    @php
};
@endphp
<form method="post" action="{{ route('admin.footer') }}" enctype="multipart/form-data">
    @csrf

    <div class="row g-4">
        <div class="col-12 col-lg-6 col-xl-4">
            <div class="qm-card h-100 mb-0">
                <h2>{{ t_raw('admin.footer.visibility_heading') }}</h2>
                @php $sw('footer_enabled', t_raw('admin.footer.sw_enabled_label'));
@endphp
                <hr class="my-3">
                @php $sw('footer_benefits_enabled', t_raw('admin.footer.sw_benefits_label'), t_raw('admin.footer.sw_benefits_help'));
@endphp
                @php $sw('footer_gallery_enabled', t_raw('admin.footer.sw_gallery_label'), t_raw('admin.footer.sw_gallery_help'));
@endphp
                @php $sw('footer_columns_enabled', t_raw('admin.footer.sw_columns_label'), t_raw('admin.footer.sw_columns_help'));
@endphp
                @php $sw('footer_bottom_enabled', t_raw('admin.footer.sw_bottom_label'), t_raw('admin.footer.sw_bottom_help'));
@endphp
            </div>
        </div>

        <div class="col-12 col-lg-6 col-xl-4">
            <div class="qm-card h-100 mb-0">
                <h2>{{ t_raw('admin.footer.content_heading') }}</h2>
                @php /* No placeholder and no hint on either field: both promised a fallback that no
                         longer exists. What is typed here is what the footer prints, and blank means
                         the footer prints nothing. */
@endphp
                <div class="mb-3"><label class="form-label" for="f-about">{{ t_raw('admin.footer.about_label') }}</label><textarea id="f-about" name="footer_text" class="form-control" rows="3">{{ setting('footer_text', '') }}</textarea></div>
                <div class="mb-0"><label class="form-label" for="f-copy">{{ t_raw('admin.footer.copyright_label') }}</label><input type="text" id="f-copy" name="copyright" class="form-control" value="{{ setting('copyright', '') }}"></div>
                @php /* The app badges print in this same footer, so their store
                         addresses live with its content (moved from Settings). */
@endphp
                <hr class="my-3">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <h3 class="h6 mb-0">{{ t_raw('admin.settings.sec_mobile_apps') }}</h3>
                    <button type="button" class="qm-tip" aria-label="{{ t_raw('admin.settings.hint_mobile_apps') }}" data-qm-tip="{{ t_raw('admin.settings.hint_mobile_apps') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
                </div>
                <div class="mb-3">
                    <label class="form-label" for="f-appstore">{{ t_raw('admin.settings.field_app_store_url') }}</label>
                    <input type="url" id="f-appstore" name="app_store_url" class="form-control" value="{{ setting('app_store_url', '') }}" placeholder="https://apps.apple.com/app/id000000000">
                </div>
                <div class="mb-0">
                    <label class="form-label" for="f-playstore">{{ t_raw('admin.settings.field_play_store_url') }}</label>
                    <input type="url" id="f-playstore" name="play_store_url" class="form-control" value="{{ setting('play_store_url', '') }}" placeholder="https://play.google.com/store/apps/details?id=com.example">
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-4">
            <div class="qm-card h-100 mb-0">
                @php /* Was five fixed fields, one per network — so an operator could not add Instagram
                         and could not drop a network they do not use. Now a repeatable row: the network
                         chosen on the left, its address beside it, built from App\Services\SocialNetwork.
                         Add and Remove follow the delivery-tier pattern — Add in the head, Remove
                         right-aligned on the row. */
@endphp
                @php
                $socRows = \App\Services\SocialNetwork::forAdmin();
@endphp
                <h2>{{ t_raw('admin.footer.social_heading') }}</h2>
                <p class="qm-hint">{{ t_raw('admin.footer.social_help') }}</p>
                <div id="qm-social-rows">
                    @foreach ($socRows as $si => $sRow)
                    @php /* One row: the network as a GLYPH picker — the same .qm-iconpick dropdown the
                             navigation screen uses, so the choice is made by recognising the logo rather
                             than reading a list of names — then the address, then an inline delete on the
                             same line, the .qm-icon-btn danger used by every other row in the product. */
@endphp
                    <div class="qm-order-filters mb-2" data-social-row>
                        <div class="qm-of-field">
                            <label class="qm-h1-sr">{{ t_raw('admin.footer.social_network_label') }}</label>
                            @partial('pc-icon-field', [
                                'name'      => 'social[' . (int) $si . '][network]',
                                'value'     => $sRow['network'],
                                'label'     => t_raw('admin.footer.social_network_label'),
                                'allowNone' => false,
                            ])
                        </div>
                        <div class="qm-of-field qm-of-grow">
                            <label class="qm-h1-sr" for="soc-url-{{ (int) $si }}">{{ t_raw('admin.footer.social_url_label') }}</label>
                            <input type="text" class="form-control" id="soc-url-{{ (int) $si }}" name="social[{{ (int) $si }}][url]" placeholder="#" value="{{ $sRow['url'] }}">
                        </div>
                        @php /* .qm-of-actions is the product's existing slot for a row action inside a
                                 filter-bar row — the navigation screen removes a link with exactly this
                                 markup. It handles the alignment against a 48px field, which a bare
                                 flex wrapper did not. */
@endphp
                        <div class="qm-of-actions">
                            <button type="button" class="qm-icon-btn danger" data-social-remove aria-label="{{ t_raw('common.remove') }}" title="{{ t_raw('common.remove') }}"><i class="fas fa-times" aria-hidden="true"></i></button>
                        </div>
                    </div>
                    @endforeach
                </div>
                @php /* Under the list, where the next row appears — and RIGHT-aligned, like every
                         other Add/Create/Save in the product. */
@endphp
                <div class="d-flex justify-content-end">
                    <button type="button" class="qm-btn qm-btn-outline qm-btn-sm" id="qm-social-add"><i class="fas fa-plus me-1" aria-hidden="true"></i> {{ t_raw('admin.footer.social_add_btn') }}</button>
                </div>
            </div>
        </div>
    </div>

    @php /* The trust strip. Six rows built exactly like the social rows above — .qm-order-filters
             with .qm-of-field cells — so each item's icon and its label sit on ONE line, which is
             how the band itself reads. Same glyph dropdown as the social picker. */
@endphp
    <div class="qm-card mt-4">
        <h2>{{ t_raw('admin.footer.strip_heading') }}</h2>
        @foreach ($strip as $row)
        <div class="qm-order-filters mb-2">
            <div class="qm-of-field">
                <label class="qm-h1-sr" for="fb-{{ (int) $row['n'] }}-i">{{ t_raw('admin.footer.strip_icon', [':n' => (string) $row['n']]) }}</label>
                @partial('pc-icon-field', [
                    'name'  => 'strip[' . $row['icon']['key'] . ']',
                    'value' => $row['icon']['value'],
                    'id'    => 'fb-' . (int) $row['n'] . '-i',
                    'label' => t_raw('admin.footer.strip_icon', [':n' => (string) $row['n']]),
                ])
            </div>
            <div class="qm-of-field qm-of-grow">
                <label class="qm-h1-sr" for="fb-{{ (int) $row['n'] }}-a">{{ t_raw('admin.footer.strip_label') }}</label>
                <input type="text" class="form-control" id="fb-{{ (int) $row['n'] }}-a" name="strip[{{ $row['label']['key'] }}]" value="{{ $row['label']['value'] }}" maxlength="60" placeholder="{{ t_raw('admin.footer.strip_label') }}">
            </div>
        </div>
        @endforeach
    </div>

    <div class="qm-card mt-4 mb-0 qm-foot-gal" id="qm-foot-gal">
        @php /* The gallery is a MARQUEE in the footer - order is the thing being edited, so the card
                 is a sorting surface: compact thumbnails that drag (or arrow-key) into order, a live
                 strip preview of exactly what visitors get, a count, and Add up in the head so it is
                 reachable without scrolling past the images. Kept paths still post as
                 footer_gallery_keep[] in DOM order; the shared media field below collects new picks. */
@endphp
        <div class="qm-foot-gal-head">
            <h2>{{ t_raw('admin.footer.gallery_heading') }}
                <span class="qm-pill qm-pill-grey" data-gallery-count>{{ str_replace(':count', (string) count(array_filter($gallery ?? [])), t_raw('admin.footer.gallery_count')) }}</span>
                <button type="button" class="qm-tip" aria-label="{{ t_raw('admin.footer.gallery_tip') }}" data-qm-tip="{{ t_raw('admin.footer.gallery_tip') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
            </h2>
            <button type="button" class="qm-btn qm-btn-primary qm-btn-sm" data-gallery-add><i class="fas fa-images" aria-hidden="true"></i> {{ t_raw('admin.footer.gallery_add_label') }}</button>
        </div>

        <div class="qm-foot-strip" data-gallery-strip aria-hidden="true">
            <span class="qm-foot-strip-label">{{ t_raw('admin.footer.gallery_preview') }}</span>
            <div class="qm-foot-strip-track" data-gallery-strip-track></div>
        </div>

        <div class="qm-foot-gallery-grid" id="qm-foot-gallery" data-gallery-grid>
            @foreach (($gallery ?? []) as $img)
@php if ((string) $img === '') { continue; }; @endphp
            <div class="qm-foot-slot" data-gallery-item draggable="true" tabindex="0">
                <div class="qm-img-preview">
                    <img src="{{ media($img, 'assets/admin/003-placeholder.png') }}" alt="" class="qm-img-prev" draggable="false">
                    <button type="button" class="qm-img-remove-btn" data-gallery-remove aria-label="{{ t_raw('common.remove') }}" title="{{ t_raw('common.remove') }}"><i class="fas fa-times" aria-hidden="true"></i></button>
                </div>
                <input type="hidden" name="footer_gallery_keep[]" value="{{ $img }}">
            </div>
            @endforeach
        </div>
        <p class="qm-foot-gal-empty" data-gallery-empty{{ array_filter($gallery ?? []) ? ' hidden' : '' }}>{{ t_raw('admin.footer.gallery_empty') }}</p>

        <div class="qm-foot-gal-add" id="fg-new-wrap" hidden>
            @php // The shared media field in MULTI mode, kept in the DOM but out of sight: the head's
                  // Add button opens its picker, its name[] inputs carry the new picks to save (appended
                  // after the kept ones), and the script mirrors each pick into the grid as an unsaved tile.
@endphp
            {!! media_field_html('footer_gallery_new', [], ['accept' => 'image', 'multi' => true, 'id' => 'fg-new']) !!}
        </div>
    </div>
    <script>
    (function () {
        var card  = document.getElementById('qm-foot-gal');
        var grid  = document.getElementById('qm-foot-gallery');
        if (!card || !grid) { return; }
        var track = card.querySelector('[data-gallery-strip-track]');
        var strip = card.querySelector('[data-gallery-strip]');
        var count = card.querySelector('[data-gallery-count]');
        var empty = card.querySelector('[data-gallery-empty]');
        var picker = card.querySelector('#fg-new-wrap');
        var countTpl = {!! json_encode(t_raw('admin.footer.gallery_count'), JSON_UNESCAPED_UNICODE) !!};

        // ---- the live strip: kept tiles in grid order, then whatever the picker holds unsaved ----
        function sources() {
            var out = [];
            grid.querySelectorAll('[data-gallery-item]:not(.is-new) img').forEach(function (i) { out.push(i.getAttribute('src')); });
            grid.querySelectorAll('[data-gallery-item].is-new img').forEach(function (i) { out.push(i.getAttribute('src')); });
            return out;
        }
        // Mirror the picker's unsaved picks into the grid as dashed tiles (appended, not sortable:
        // save always places new images after the kept ones, so the grid shows that truth).
        var mirrors = new Map();
        function syncNew() {
            if (!picker) { return; }
            var items = Array.prototype.slice.call(picker.querySelectorAll('[data-media-chosen-item]'));
            mirrors.forEach(function (tile, item) {
                if (items.indexOf(item) === -1) { tile.remove(); mirrors.delete(item); }
            });
            items.forEach(function (item) {
                if (mirrors.has(item)) { return; }
                var src = item.querySelector('img');
                if (!src) { return; }
                var tile = document.createElement('div');
                tile.className = 'qm-foot-slot is-new';
                tile.setAttribute('data-gallery-item', '');
                tile.setAttribute('tabindex', '0');
                tile.innerHTML = '<div class="qm-img-preview"><img alt="" class="qm-img-prev" draggable="false">'
                    + '<button type="button" class="qm-img-remove-btn" data-gallery-remove-new aria-label="' + (removeLabel || 'Remove') + '"><i class="fas fa-times" aria-hidden="true"></i></button></div>';
                tile.querySelector('img').src = src.getAttribute('src');
                grid.appendChild(tile);
                mirrors.set(item, tile);
            });
        }
        var removeLabel = {!! json_encode(t_raw('common.remove'), JSON_UNESCAPED_UNICODE) !!};
        function paint() {
            syncNew();
            var srcs = sources();
            if (count) { count.textContent = countTpl.replace(':count', String(srcs.length)); }
            if (empty) { empty.hidden = srcs.length > 0; }
            if (!track || !strip) { return; }
            strip.hidden = srcs.length === 0;
            track.innerHTML = '';
            // Twice over so the loop is seamless; the track animates by half its width.
            [0, 1].forEach(function () {
                srcs.forEach(function (src) {
                    var im = document.createElement('img');
                    im.src = src; im.alt = ''; im.loading = 'lazy'; im.draggable = false;
                    track.appendChild(im);
                });
            });
            track.style.animationDuration = Math.max(14, srcs.length * 2.6) + 's';
        }

        // ---- remove ----
        grid.addEventListener('click', function (e) {
            var btnNew = e.target.closest('[data-gallery-remove-new]');
            if (btnNew) {
                var tile = btnNew.closest('[data-gallery-item]');
                mirrors.forEach(function (t, item) {
                    if (t === tile) { var x = item.querySelector('[data-media-chosen-remove]'); if (x) { x.click(); } else { item.remove(); } }
                });
                paint();
                return;
            }
            var btn = e.target.closest('[data-gallery-remove]');
            if (!btn) { return; }
            var item = btn.closest('[data-gallery-item]');
            if (item) { item.remove(); paint(); }
        });

        // ---- drag to reorder (native DnD; the hidden keep[] inputs travel with their tiles) ----
        var dragging = null;
        grid.addEventListener('dragstart', function (e) {
            var item = e.target.closest('[data-gallery-item]');
            if (!item || item.classList.contains('is-new')) { if (item) { e.preventDefault(); } return; }
            dragging = item;
            item.classList.add('is-dragging');
            try { e.dataTransfer.setData('text/plain', ''); e.dataTransfer.effectAllowed = 'move'; } catch (err) {}
        });
        grid.addEventListener('dragover', function (e) {
            if (!dragging) { return; }
            e.preventDefault();
            var over = e.target.closest('[data-gallery-item]');
            if (!over || over === dragging || over.classList.contains('is-new')) { return; }
            var r = over.getBoundingClientRect();
            var before = (e.clientX - r.left) < r.width / 2;
            grid.insertBefore(dragging, before ? over : over.nextSibling);
        });
        grid.addEventListener('drop', function (e) { e.preventDefault(); });
        grid.addEventListener('dragend', function () {
            if (dragging) { dragging.classList.remove('is-dragging'); dragging = null; paint(); }
        });

        // ---- keyboard: arrow keys move the focused tile; Delete removes it ----
        grid.addEventListener('keydown', function (e) {
            var item = e.target.closest('[data-gallery-item]');
            if (!item) { return; }
            if (item.classList.contains('is-new')) {
                if (e.key === 'Delete' || e.key === 'Backspace') { var rb = item.querySelector('[data-gallery-remove-new]'); if (rb) { rb.click(); } e.preventDefault(); }
                return;
            }
            var rtl = document.documentElement.dir === 'rtl';
            var fwd = rtl ? 'ArrowLeft' : 'ArrowRight', back = rtl ? 'ArrowRight' : 'ArrowLeft';
            if (e.key === fwd && item.nextElementSibling && !item.nextElementSibling.classList.contains('is-new')) { grid.insertBefore(item.nextElementSibling, item); item.focus(); e.preventDefault(); paint(); }
            else if (e.key === back && item.previousElementSibling) { grid.insertBefore(item, item.previousElementSibling); item.focus(); e.preventDefault(); paint(); }
            else if (e.key === 'Delete' || e.key === 'Backspace') { var n = item.nextElementSibling || item.previousElementSibling; item.remove(); if (n) { n.focus(); } e.preventDefault(); paint(); }
        });

        // ---- Add in the head opens the shared picker ----
        var addBtn = card.querySelector('[data-gallery-add]');
        if (addBtn && picker) {
            addBtn.addEventListener('click', function () {
                var open = picker.querySelector('[data-media-open]');
                if (open) { open.click(); }
            });
            // New picks (and their removal) change the count and the strip.
            var chosen = picker.querySelector('[data-media-chosen]');
            if (chosen && window.MutationObserver) {
                new MutationObserver(paint).observe(chosen, { childList: true, subtree: true });
            }
        }
        paint();
    })();
    </script>

    <script>
    /* Social rows. The network is the shared glyph picker, so choosing one is qm-pickers.js's job
       and nothing here listens for it. What is still local: add appends a row under the list,
       delete is inline on the row, and indexes are renumbered after every change because PHP reads
       social[] as a list and a gap truncates it. */
    (function () {
        var wrap = document.getElementById("qm-social-rows");
        var add  = document.getElementById("qm-social-add");
        if (!wrap || !add) { return; }

        // The row's ADDRESS box, and only it. A bare input[type=text] lookup used to return the
        // glyph picker's own search field instead — it sits earlier in the row — so renumbering
        // named the search box social[i][url] and left the real address on its old index.
        function urlBox(scope) { return scope.querySelector(".qm-of-grow input[type=text]"); }

        function renumber() {
            wrap.querySelectorAll("[data-social-row]").forEach(function (row, i) {
                var net = row.querySelector("[data-pc-icon]"), url = urlBox(row);
                net.name = "social[" + i + "][network]";
                url.name = "social[" + i + "][url]";
                url.id   = "soc-url-" + i;
                var lab = row.querySelector(".qm-of-grow label");
                if (lab) { lab.setAttribute("for", url.id); }
            });
        }

        wrap.addEventListener("click", function (ev) {
            var del = ev.target.closest("[data-social-remove]");
            if (!del) { return; }
            // Always leave one row, so there is something to fill in rather than an empty card.
            if (wrap.querySelectorAll("[data-social-row]").length <= 1) {
                urlBox(wrap).value = "";
                return;
            }
            var gone = del.closest("[data-social-row]");
            // The shared glyph library is a <template> written into the FIRST row, and it is the
            // page's only copy: removing that row took it off the page with it, and every picker
            // opened after that — the other social rows and all six trust-strip icons — filled
            // from nothing and showed an empty grid. Keep it, on the list itself.
            gone.querySelectorAll("template").forEach(function (t) { wrap.appendChild(t); });
            gone.remove();
            renumber();
        });

        add.addEventListener("click", function () {
            var first = wrap.querySelector("[data-social-row]");
            if (!first) { return; }
            var row = first.cloneNode(true);
            urlBox(row).value = "";
            // A NEW ROW PICKS NOTHING. Pre-selecting a logo made the operator un-choose a network
            // they never asked for, and a row saved without looking would have published it.
            // The empty value fails SocialNetwork::exists(), so an untouched row is simply dropped.
            row.querySelector("[data-pc-icon]").value = "";
            // The library <template> is written into the first row and is the page's only copy of
            // it; cloning the row would clone the template too and duplicate its id.
            row.querySelectorAll("template").forEach(function (t) { t.remove(); });
            // Hand the clone an empty grid so the picker refills it and marks the right cell.
            row.querySelectorAll("[data-pc-icon-grid]").forEach(function (g) {
                g.innerHTML = "";
                g.removeAttribute("data-pc-icon-filled");
            });
            var cur = row.querySelector("[data-pc-icon-current]");
            if (cur) { cur.outerHTML = '<i class="fas fa-ban" data-pc-icon-current aria-hidden="true"></i>'; }
            wrap.appendChild(row);
            renumber();
            var trigger = row.querySelector('[data-bs-toggle="dropdown"]');
            if (trigger) { trigger.focus(); }
        });
    })();
    </script>
   <div class="d-flex justify-content-end"><button type="submit" class="qm-btn mt-4">{{ t_raw('admin.footer.submit_save') }}</button></div>
</form>
@endsection