{{--
    Shared CSS + JS for the inline section-edit feature on the
    investor/startup show pages. Include ONCE per page (the show pages
    already do this). Self-contained: ships its own scoped CSS, the
    Alpine.js component, and a tiny non-blocking toast.

    Architecture:
      <x-admin.editable-section>  → wrapper Blade component
      editableSection(...)        → the Alpine factory below
      .rd-toast--section          → the shared toast (reuses the rd-toast
                                    element that already lives at the
                                    bottom of the show page)
--}}
<style>
    /* ── Section header — Edit button group ─────────────────────────────
       The header lays out as: [icon + title]  ……  [Edit btn]  [chevron].
       margin-inline-start: auto pushes the button cluster to the end of
       the row regardless of writing direction (LTR or RTL). */
    .rd-card--editable .rd-card__head { gap: 12px; }
    .rd-card__edit-actions {
        display: inline-flex; align-items: center; gap: 6px;
        margin-inline-start: auto;
    }
    .rd-edit-actions__group { display: inline-flex; align-items: center; gap: 6px; }

    .rd-edit-btn {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 6px;
        padding: 6px 12px;
        background: #fff;
        color: var(--rd-text);
        border: 1px solid var(--rd-border);
        border-radius: 8px;
        font-size: 12.5px; font-weight: 600;
        cursor: pointer;
        transition: background-color .12s, border-color .12s, color .12s, transform .08s;
        line-height: 1;
    }
    .rd-edit-btn:hover {
        background: var(--rd-accent-soft);
        border-color: var(--rd-accent-line);
        color: var(--rd-accent-strong);
    }
    .rd-edit-btn:active { transform: translateY(1px); }
    .rd-edit-btn:disabled { opacity: .55; cursor: default; transform: none; }

    .rd-edit-btn--primary {
        background: var(--rd-accent);
        color: #fff;
        border-color: var(--rd-accent);
    }
    .rd-edit-btn--primary:hover {
        background: var(--rd-accent-strong);
        border-color: var(--rd-accent-strong);
        color: #fff;
    }
    .rd-edit-btn--ghost { background: transparent; }
    .rd-edit-btn--ghost:hover { background: #f8fafc; color: var(--rd-text); border-color: var(--rd-border); }

    /* Icon-only variant — square 30×30 button with no label, used for
       the section header's "Edit" affordance (per UX spec). The SVG
       inside is auto-centred by the base's flex justify-content. */
    .rd-edit-btn--icon-only {
        width: 30px; height: 30px;
        padding: 0;
        gap: 0;
        flex-shrink: 0;
    }
    .rd-edit-btn--icon-only svg { display: block; }

    .rd-edit-spinner { animation: rd-spin .85s linear infinite; }
    @keyframes rd-spin { to { transform: rotate(360deg); } }

    /* While the card is in edit mode the chevron + header tweak slightly
       so it reads as a focused state without yanking the user out of the
       card's visual rhythm. */
    .rd-card--editing { box-shadow: 0 0 0 2px var(--rd-accent-line); }
    .rd-card--editing .rd-card__head { background: var(--rd-accent-soft); }

    /* ── Edit form (auto-rendered grid) ───────────────────────────────── */
    .rd-edit-form {
        display: flex; flex-direction: column; gap: 14px;
    }
    .rd-edit-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 14px;
    }
    .rd-edit-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .rd-edit-field__label {
        font-size: 11.5px; font-weight: 700;
        color: var(--rd-faint, #94a3b8);
        text-transform: uppercase; letter-spacing: .04em;
    }
    .rd-edit-input {
        width: 100%;
        padding: 9px 12px;
        background: #fff;
        border: 1px solid var(--rd-border);
        border-radius: 9px;
        font-size: 14px;
        font-family: inherit;
        color: var(--rd-text);
        transition: border-color .15s, box-shadow .15s;
    }
    .rd-edit-input:focus {
        outline: none;
        border-color: var(--rd-accent, #6366f1);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-accent, #6366f1) 18%, transparent);
    }
    .rd-edit-input:disabled { background: #f8fafc; opacity: .7; cursor: not-allowed; }
    textarea.rd-edit-input { min-height: 96px; resize: vertical; line-height: 1.55; }

    .rd-edit-select {
        appearance: none; -webkit-appearance: none;
        padding-right: 32px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 12px 12px;
    }
    [dir="rtl"] .rd-edit-select {
        padding-right: 12px; padding-left: 32px;
        background-position: left 11px center;
    }

    .rd-edit-field--full { grid-column: 1 / -1; }

    .rd-edit-field--error .rd-edit-input { border-color: #fda4af; }
    .rd-edit-field__error { font-size: 11.5px; font-weight: 600; color: #b91c1c; }

    /* ── Multiselect chip picker ──────────────────────────────────────── */
    .rd-edit-chips {
        display: flex; flex-wrap: wrap; gap: 6px;
        padding: 8px 10px;
        background: #fff;
        border: 1px solid var(--rd-border);
        border-radius: 9px;
        min-height: 44px;
    }
    .rd-edit-chips__empty { font-size: 12px; color: var(--rd-faint, #94a3b8); padding: 4px; }
    .rd-edit-chip {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 11px;
        background: #f1f5f9;
        color: var(--rd-text);
        border: 1px solid transparent;
        border-radius: 999px;
        font-size: 12.5px; font-weight: 600;
        cursor: pointer;
        transition: background-color .12s, color .12s, border-color .12s;
        line-height: 1.25;
    }
    .rd-edit-chip:hover { background: #e2e8f0; }
    .rd-edit-chip__tick {
        display: inline-flex; align-items: center; justify-content: center;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: #fff;
        color: #94a3b8;
        opacity: 0; transform: scale(.6);
        transition: opacity .12s, transform .12s, background-color .12s, color .12s;
    }
    .rd-edit-chip--on {
        background: var(--rd-accent);
        color: #fff;
        border-color: var(--rd-accent);
    }
    .rd-edit-chip--on .rd-edit-chip__tick {
        opacity: 1; transform: scale(1);
        background: #fff;
        color: var(--rd-accent);
    }
    .rd-edit-chip:disabled { opacity: .55; cursor: not-allowed; }

    /* ── String-list repeater (free-form rows) ────────────────────── */
    .rd-edit-repeater {
        display: flex; flex-direction: column; gap: 8px;
        padding: 10px 12px;
        background: #fff;
        border: 1px solid var(--rd-border);
        border-radius: 10px;
    }
    .rd-edit-repeater__row {
        display: grid;
        grid-template-columns: 28px 1fr 34px;
        align-items: center;
        gap: 8px;
    }
    .rd-edit-repeater__num {
        font-size: 12px; font-weight: 700;
        color: var(--rd-faint, #94a3b8);
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    .rd-edit-repeater__rm {
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px;
        background: #fff;
        color: #b91c1c;
        border: 1px solid #fecaca;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color .12s, border-color .12s;
    }
    .rd-edit-repeater__rm:hover { background: #fef2f2; border-color: #fca5a5; }
    .rd-edit-repeater__rm:disabled { opacity: .45; cursor: default; }
    .rd-edit-repeater__add {
        align-self: flex-start;
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 12px;
        background: var(--rd-accent-soft, #eef2ff);
        color: var(--rd-accent-strong, #4338ca);
        border: 1px dashed var(--rd-accent-line, #c7d2fe);
        border-radius: 9px;
        font-size: 12.5px; font-weight: 600;
        cursor: pointer;
        transition: background-color .12s, border-style .12s, border-color .12s;
        margin-top: 2px;
    }
    .rd-edit-repeater__add:hover {
        background: #e0e7ff;
        border-style: solid;
        border-color: var(--rd-accent, #4f46e5);
    }
    .rd-edit-repeater__add:disabled { opacity: .55; cursor: default; }

    /* Hero stat tiles + hero bio render as read-only — editing happens
       only via the section cards' Edit button below. The click delegator
       handler is still installed but no element on the page carries
       [data-edit-section], so it's a silent no-op. */

    /* ── Avatar / Logo camera overlay (hero) ──────────────────────────
       Premium-feel pill: gradient primary background, soft glow ring on
       hover, subtle scale-in entry. Sits at the bottom-trailing corner
       of the hero avatar with a 4px notch so it reads as an attached
       "edit" affordance rather than a stuck-on sticker. Only visible
       when Edit Mode is on (gated by [data-edit-affordance]). */
    .rd-avatar { position: relative; }
    .rd-avatar__cam {
        position: absolute;
        bottom: -6px; inset-inline-end: -6px;
        width: 32px; height: 32px;
        display: inline-flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
        color: #fff;
        border: 2.5px solid #fff;
        border-radius: 50%;
        cursor: pointer;
        line-height: 1;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, .12),
            0 4px 12px -3px rgba(79, 70, 229, .35);
        transition: transform .18s cubic-bezier(.34, 1.56, .64, 1),
                    box-shadow .18s ease,
                    background .18s ease;
        z-index: 2;
        /* Tiny opacity dip on initial paint, so the button doesn't pop
           in jarringly when edit mode flips on. */
        animation: rdCamFadeIn .25s ease-out;
    }
    .rd-avatar__cam svg { display: block; transition: transform .18s; }
    .rd-avatar__cam:hover {
        background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
        transform: scale(1.08);
        box-shadow:
            0 2px 4px rgba(15, 23, 42, .15),
            0 6px 18px -3px rgba(79, 70, 229, .50),
            0 0 0 4px rgba(99, 102, 241, .14);
    }
    .rd-avatar__cam:hover svg { transform: rotate(-8deg); }
    .rd-avatar__cam:active { transform: scale(.94); }
    .rd-avatar__cam:disabled {
        opacity: .8;
        cursor: default;
        transform: none;
        background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
    }
    .rd-avatar__cam-spin { animation: rd-spin .85s linear infinite; }
    .rd-avatar__picker { display: none; }

    /* Avatar itself gets a subtle ring on hover that hints "this is
       interactive" — only visible while the camera button (the
       interactive affordance) is rendered. */
    body.edit-mode-on .rd-avatar:hover {
        box-shadow: 0 0 0 4px rgba(99, 102, 241, .12), 0 10px 24px -10px rgba(79, 70, 229, .40);
    }

    @keyframes rdCamFadeIn {
        from { opacity: 0; transform: scale(.6); }
        to   { opacity: 1; transform: scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
        .rd-avatar__cam,
        .rd-avatar__cam:hover,
        .rd-avatar__cam:hover svg { animation: none; transform: none; }
    }

    .rd-edit-error {
        padding: 10px 12px;
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #991b1b;
        border-radius: 8px;
        font-size: 12.5px; line-height: 1.5;
    }

    /* ── Section save toast (sibling to the existing rd-toast) ────────── */
    .rd-toast--section {
        position: fixed;
        bottom: 24px;
        inset-inline-end: 24px;
        display: inline-flex; align-items: center; gap: 10px;
        padding: 10px 16px;
        background: #0f172a;
        color: #fff;
        border-radius: 999px;
        font-size: 13px; font-weight: 600;
        box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .35);
        opacity: 0; transform: translateY(8px);
        transition: opacity .25s, transform .25s;
        pointer-events: none;
        z-index: 9999;
    }
    .rd-toast--section[data-show="true"] { opacity: 1; transform: translateY(0); }
    .rd-toast--section[data-tone="error"] { background: #b91c1c; }
    .rd-toast--section svg { width: 16px; height: 16px; }
</style>

{{-- Toast element. Single instance, reused by every section save. --}}
<div class="rd-toast--section" data-section-toast role="status" aria-live="polite">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"/>
    </svg>
    <span data-section-toast-text>{{ __('admin.section_edit.saved') }}</span>
</div>

<script>
document.addEventListener('alpine:init', () => {
    // ── Toast helper ─────────────────────────────────────────────────
    // One toast element on the page, recycled. Each call cancels any
    // pending hide so rapid successive saves don't flash.
    const toastEl   = document.querySelector('[data-section-toast]');
    const toastText = toastEl?.querySelector('[data-section-toast-text]');
    let toastTimer  = null;
    const showSectionToast = (text, tone = 'ok') => {
        if (!toastEl) return;
        if (toastText && text) toastText.textContent = text;
        toastEl.dataset.tone = tone === 'error' ? 'error' : 'ok';
        toastEl.dataset.show = 'true';
        if (toastTimer) clearTimeout(toastTimer);
        toastTimer = setTimeout(() => { toastEl.dataset.show = 'false'; }, 2200);
    };

    // ── Alpine component ─────────────────────────────────────────────
    // Drives one editable section: snapshot of starting values for
    // Cancel, dirty values for the inputs, per-field errors from the
    // server, mode flag ('view' | 'edit' | 'saving').
    Alpine.data('editableSection', (cfg) => ({
        url:        cfg.url,
        entity:     cfg.entity,
        sectionKey: cfg.sectionKey,
        fields:     Array.isArray(cfg.fields) ? cfg.fields : [],
        // `countries` is an ARRAY of {id, name} now — Alpine's x-for can
        // only iterate iterables. The default falls back to an empty list
        // so a config without catalogs (e.g. preferences-only section)
        // doesn't blow the template with `null is not iterable`.
        catalogues: cfg.catalogues || { countries: [], cities: [], labels: {} },

        mode:           'view',          // 'view' | 'edit' | 'saving'
        values:         {},               // current input values (live)
        snapshot:       {},               // saved-from-server values (Cancel target)
        errors:         {},               // {field: 'message'}
        errorMessage:   '',               // top-level error banner

        init() {
            // For text/number/select fields: stringify (x-model on
            // <select> needs a string match for numeric FK values to
            // stick). For arrays: passthrough — element types vary
            // (multiselect = ints, string_list = strings) and PHP has
            // already normalised them server-side; touching them here
            // would corrupt the string_list values into NaN.
            const norm = (v) => Array.isArray(v)
                ? v.slice()
                : ((v === null || v === undefined) ? '' : String(v));
            const seed = {};
            for (const k of this.fields) {
                seed[k] = norm(cfg.initial ? cfg.initial[k] : '');
            }
            this.values   = { ...seed };
            // Deep-copy arrays so Cancel reverts cleanly without sharing
            // a reference with the live `values`.
            this.snapshot = this.cloneValues(seed);
        },

        // Shallow + array-aware clone helper used by enterEdit/cancel
        // so a multiselect chip toggle doesn't mutate the snapshot.
        cloneValues(src) {
            const out = {};
            for (const k of Object.keys(src)) {
                out[k] = Array.isArray(src[k]) ? [...src[k]] : src[k];
            }
            return out;
        },

        enterEdit() {
            this.errors = {};
            this.errorMessage = '';
            this.snapshot = this.cloneValues(this.values);
            this.mode = 'edit';
        },

        cancel() {
            if (this.mode === 'saving') return;
            this.values = this.cloneValues(this.snapshot);
            this.errors = {};
            this.errorMessage = '';
            this.mode = 'view';
        },

        // ── string_list (free-text repeater) helpers ─────────────────
        // Each row is just a string; the renderer iterates the array
        // and binds inputs to indices, so add/remove is pure splice.
        stringListAdd(field) {
            if (!Array.isArray(this.values[field])) this.values[field] = [];
            this.values[field].push('');
        },
        stringListRemove(field, idx) {
            if (!Array.isArray(this.values[field])) return;
            this.values[field].splice(idx, 1);
        },

        // ── Multiselect chip helpers ────────────────────────────────
        // Coerce on both sides so the lookup works whether the array
        // contains ints (server seed) or strings (round-trip after a
        // failed save).
        multiselectHas(field, optId) {
            const arr = this.values[field];
            if (!Array.isArray(arr)) return false;
            const target = parseInt(optId, 10);
            return arr.some(x => parseInt(x, 10) === target);
        },
        multiselectToggle(field, optId) {
            const id = parseInt(optId, 10);
            if (isNaN(id)) return;
            let arr = this.values[field];
            if (!Array.isArray(arr)) arr = [];
            const i = arr.findIndex(x => parseInt(x, 10) === id);
            if (i === -1) arr.push(id);
            else arr.splice(i, 1);
            this.values[field] = arr;
        },

        /**
         * Filter the flat cities list by the section's selected country.
         * Falls back to the full list when no country_id field is present
         * (e.g. a section that edits cities standalone).
         */
        filteredCities() {
            const cid = parseInt(this.values.country_id, 10);
            const all = Array.isArray(this.catalogues.cities) ? this.catalogues.cities : [];
            if (!Number.isFinite(cid) || cid <= 0) return all;
            // Coerce both sides — JSON keeps city.country_id as a number,
            // but defensive coercion keeps the filter working if anything
            // upstream ever feeds in stringified ids.
            return all.filter(c => parseInt(c.country_id, 10) === cid);
        },

        async save() {
            if (this.mode === 'saving') return;
            this.mode = 'saving';
            this.errors = {};
            this.errorMessage = '';

            try {
                const res = await fetch(this.url, {
                    method:  'PATCH',
                    headers: {
                        'Content-Type':     'application/json',
                        'Accept':           'application/json',
                        'X-CSRF-TOKEN':     document.querySelector('meta[name="csrf-token"]')?.content
                                              || document.querySelector('input[name="_token"]')?.value || '',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ fields: this.values }),
                });

                if (res.status === 422) {
                    const body = await res.json().catch(() => ({}));
                    // Laravel returns errors keyed `fields.field_name` — strip
                    // the prefix so the template can lookup by field name.
                    const errs = (body && body.errors) || {};
                    const flat = {};
                    for (const [key, msgs] of Object.entries(errs)) {
                        const trimmed = key.startsWith('fields.') ? key.slice(7) : key;
                        flat[trimmed] = Array.isArray(msgs) ? msgs[0] : String(msgs);
                    }
                    this.errors = flat;
                    this.errorMessage = body && body.message ? body.message : '';
                    this.mode = 'edit';
                    // Show the FIRST per-field error in the toast so admins
                    // see what's wrong without scrolling to the field. Falls
                    // back to the generic message when no per-field errors.
                    const firstFieldError = Object.values(flat)[0];
                    const toastMessage = firstFieldError
                        || (body && body.message)
                        || @json(__('admin.section_edit.validation_failed'));
                    showSectionToast(toastMessage, 'error');
                    return;
                }

                // Try to parse the body even on non-OK responses so we can
                // surface the server's error message (a 500 from a DB
                // constraint, an observer crash, etc) instead of a generic
                // "Could not save" toast. Many admins reported the generic
                // message left them stuck — they couldn't tell whether the
                // problem was their input or a real server bug.
                const body = await res.json().catch(() => ({}));

                if (!res.ok) {
                    const serverMessage = (body && (body.message || body.error))
                        ? String(body.message || body.error)
                        : ('HTTP ' + res.status);
                    this.errorMessage = serverMessage;
                    this.mode = 'edit';
                    showSectionToast(serverMessage, 'error');
                    return;
                }

                if (!body || body.ok !== true) {
                    const reason = (body && (body.message || body.error))
                        ? String(body.message || body.error)
                        : 'Server rejected the save.';
                    this.errorMessage = reason;
                    this.mode = 'edit';
                    showSectionToast(reason, 'error');
                    return;
                }

                // Adopt the server's canonical post-save values (in case a
                // cast / observer / DB default normalised anything). Arrays
                // pass through unchanged (element types vary by field type
                // — multiselect = ints, string_list = strings); everything
                // else stringified so x-model on selects stays bound.
                const norm = (v) => Array.isArray(v)
                    ? v.slice()
                    : ((v === null || v === undefined) ? '' : String(v));
                const next = {};
                for (const k of this.fields) {
                    next[k] = norm(body.fields ? body.fields[k] : this.values[k]);
                }
                this.values   = next;
                this.snapshot = this.cloneValues(next);
                this.mode = 'view';

                // Tell any listeners (e.g. the hero card) that the section
                // changed, so they can repaint themselves without a full
                // page reload.
                window.dispatchEvent(new CustomEvent('section:updated', {
                    detail: {
                        entity:     this.entity,
                        sectionKey: this.sectionKey,
                        fields:     body.fields || {},
                        display:    body.display || {},
                    },
                }));

                showSectionToast(@json(__('admin.section_edit.saved')), 'ok');
            } catch (e) {
                console.error('editableSection.save failed', e);
                this.errorMessage = @json(__('admin.section_edit.save_failed'));
                this.mode = 'edit';
                showSectionToast(@json(__('admin.section_edit.save_failed')), 'error');
            }
        },
    }));

    // ── Hero name binding ────────────────────────────────────────────
    // The investor / startup hero h2 + the identity card's first row both
    // bind to a single `displayName` value. When ANY editable section
    // fires `section:updated`, this listener re-derives the display name
    // from the response's `body.fields` payload using the page locale,
    // so the visible name updates without a reload — and the identity
    // row + hero h2 stay in sync because they share the same x-data.
    Alpine.data('investorHero', (cfg) => ({
        // Initial value computed server-side. The locale tells us which
        // full_name_* column to prefer when a save returns both.
        displayName: cfg.initial || '—',
        locale:      cfg.locale  || 'en',

        // Apply a server response: pick full_name_<locale> first, then
        // the opposite locale, then legacy `name`. Mirrors the PHP
        // Investor::display_name accessor so behaviour stays consistent.
        onSectionUpdate(ev) {
            const detail = ev.detail || {};
            // Only react to identity-section saves on the matching entity.
            if (detail.sectionKey !== 'identity') return;
            const f = detail.fields || {};
            // Resolution order matches PHP-side accessors. Each `pick`
            // returns the first non-empty string in its candidate list,
            // so a save that only touched `name` still updates the
            // display when the localized columns are empty.
            const pick = (...keys) => {
                for (const k of keys) {
                    const v = f[k];
                    if (v !== undefined && v !== null && String(v).trim() !== '') {
                        return String(v);
                    }
                }
                return null;
            };
            let next = null;
            // Field-name fallback chain. Investors use the bilingual pair
            // `full_name_ar` / `full_name_en`. Startups carry the
            // English-script company name on the renamed `name_en`
            // column (was `full_name` until 2026-06-17) — we try that
            // BEFORE the legacy `full_name` key for forward compat,
            // then keep `full_name` in the chain so any partial-deploy
            // environment that still emits the old key doesn't break.
            if (this.locale === 'ar') {
                next = pick('full_name_ar', 'full_name_en', 'name_en', 'full_name', 'applicant_full_name', 'name');
            } else {
                next = pick('full_name_en', 'full_name_ar', 'name_en', 'full_name', 'applicant_full_name', 'name');
            }
            if (next) {
                this.displayName = next;
                // Keep the document title in sync too — admins flipping
                // between tabs see the new name in the browser chrome.
                if (typeof document !== 'undefined' && document.title.includes(' — ')) {
                    document.title = next + document.title.slice(document.title.indexOf(' — '));
                }
            }
        },
    }));

    // ── Avatar / Logo uploader ───────────────────────────────────────
    // One factory per hero avatar element. Powers BOTH the investor's
    // `avatar_path` flow and the startup's logo File flow — the field
    // name on the multipart body is the only thing that differs.
    Alpine.data('avatarUploader', (cfg) => ({
        url:         cfg.url,
        fileField:   cfg.fileField || 'avatar',
        confirmMsg:  cfg.confirmMsg,
        successMsg:  cfg.successMsg,
        failMsg:     cfg.failMsg,
        currentUrl:  cfg.initialUrl || '',
        busy:        false,

        async onFile(event) {
            const file = event.target.files && event.target.files[0];
            // Always clear so re-picking the SAME file later still fires
            // the change event.
            event.target.value = '';
            if (!file) return;
            if (!window.confirm(this.confirmMsg)) return;

            this.busy = true;
            try {
                const form = new FormData();
                form.append(this.fileField, file);
                const res = await fetch(this.url, {
                    method: 'POST',
                    body: form,
                    headers: {
                        'Accept':           'application/json',
                        'X-CSRF-TOKEN':     document.querySelector('meta[name="csrf-token"]')?.content
                                              || document.querySelector('input[name="_token"]')?.value || '',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                });
                if (!res.ok) {
                    const body = await res.json().catch(() => ({}));
                    throw new Error((body && body.message) || ('HTTP ' + res.status));
                }
                const body = await res.json().catch(() => ({}));
                if (!body || body.ok !== true || !body.url) {
                    throw new Error('Server rejected the upload.');
                }
                // Swap the image in place — the server's response URL
                // already carries a cache-bust query string.
                this.currentUrl = body.url;
                window.alert(this.successMsg);
            } catch (e) {
                console.error('avatar upload failed', e);
                window.alert(this.failMsg);
            } finally {
                this.busy = false;
            }
        },
    }));
});

// ── Hero shortcut delegator ─────────────────────────────────────────
// Any element with [data-edit-section] (hero stat tile, hero bio,
// inline pencil icon) triggers the matching section card's enter-edit
// mode. The section card has a `x-on:section:enter-edit.window` listener
// that filters by sectionKey, so multiple shortcuts can coexist.
document.addEventListener('click', (e) => {
    const trigger = e.target.closest('[data-edit-section]');
    if (!trigger) return;
    const sectionKey = trigger.dataset.editSection;
    if (!sectionKey) return;
    // Stop propagation so we don't also toggle a parent collapse.
    e.preventDefault();
    e.stopPropagation();
    window.dispatchEvent(new CustomEvent('section:enter-edit', {
        detail: { sectionKey },
    }));
});

// Keyboard parity: Enter / Space on a focusable [data-edit-section]
// fires the same redirect. Accessibility for tab-navigating admins.
document.addEventListener('keydown', (e) => {
    if (e.key !== 'Enter' && e.key !== ' ') return;
    const trigger = e.target.closest('[data-edit-section]');
    if (!trigger) return;
    e.preventDefault();
    const sectionKey = trigger.dataset.editSection;
    if (sectionKey) {
        window.dispatchEvent(new CustomEvent('section:enter-edit', {
            detail: { sectionKey },
        }));
    }
});
</script>