{{--
    Reusable attendance + notes modal.

    Single instance per page — drive it with `window.openAttendanceModal`:

        window.openAttendanceModal({
            meetingId:     42,
            updateUrl:     '/admin/meetings/42',
            subjectType:   'investor' | 'startup',   // drives the row label
            subjectName:   'Mohamed Saad',
            currentStatus: 'coming',
            currentNotes:  '...',
            onSaved: () => window.location.reload(),
        });

    The modal shows a SINGLE subject row whose label switches between
    "Investor" / "Startup" based on `subjectType` — admins never see a
    confusing empty placeholder for the other side. `subjectType` is the
    meeting's `meetingable_type` mapped down to its bare key; an unknown
    value falls back to the generic "Customer" label so a bad data row
    still renders something readable.

    Legacy callers passing `recipientName` / `startupName` are still
    supported (see open() below); they map onto the new fields with
    investor as the default subjectType.

    The modal owns the PATCH itself (no per-page boilerplate) and shows
    the unified success toast on save. Triggered from the meetings index
    (attendance icon next to "view"), the meeting show page, and anywhere
    else admins need to update attendance + notes together.
--}}
<div id="attendance-modal"
     class="att-modal"
     role="dialog"
     aria-modal="true"
     aria-labelledby="attendance-modal-title"
     data-open="false">
    <div class="att-modal__backdrop" data-att-backdrop></div>
    <div class="att-modal__card" role="document">
        <div class="att-modal__head">
            <span class="att-modal__icon" aria-hidden="true">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                    <circle cx="9" cy="7" r="4"/>
                    <polyline points="17 11 19 13 23 9"/>
                </svg>
            </span>
            <div class="att-modal__head-text">
                <h3 id="attendance-modal-title">{{ __('admin.attendance_modal.title') }}</h3>
                <p class="att-modal__subtitle">{{ __('admin.attendance_modal.subtitle') }}</p>
            </div>
        </div>

        <div class="att-modal__body">
            <dl class="att-modal__summary">
                {{-- Single subject row: the <dt> label flips between
                     "Investor" / "Startup" based on the row's data-* attrs.
                     We don't show BOTH because one meeting only has one
                     subject — rendering "Startup: —" next to a populated
                     investor row would just be noise. --}}
                <div class="att-modal__summary-row">
                    <dt data-att-subject-label>{{ __('admin.attendance_modal.investor') }}</dt>
                    <dd data-att-subject-name>—</dd>
                </div>
                <div class="att-modal__summary-row">
                    <dt>{{ __('admin.attendance_modal.current_status') }}</dt>
                    <dd><span class="att-pill att-pill--inline" data-att-current-pill></span></dd>
                </div>
            </dl>

            <label class="att-modal__field">
                <span class="att-modal__field-label">{{ __('admin.attendance_modal.new_status_label') }}</span>
                <select data-att-status>
                    @foreach (App\Models\Meeting::attendanceOptions() as $opt)
                        <option value="{{ $opt }}">{{ __('admin.meetings_admin.attendances.' . $opt) }}</option>
                    @endforeach
                </select>
            </label>

            <label class="att-modal__field">
                <span class="att-modal__field-label">
                    {{ __('admin.attendance_modal.notes_label') }}
                    <small class="att-modal__field-hint">{{ __('admin.attendance_modal.notes_optional') }}</small>
                </span>
                <textarea data-att-notes
                          rows="5"
                          maxlength="5000"
                          placeholder="{{ __('admin.attendance_modal.notes_placeholder') }}"></textarea>
            </label>
        </div>

        <div class="att-modal__actions">
            <button type="button" class="att-modal__btn att-modal__btn--ghost" data-att-cancel>
                {{ __('admin.attendance_modal.cancel') }}
            </button>
            <button type="button" class="att-modal__btn att-modal__btn--primary" data-att-submit>
                {{ __('admin.attendance_modal.submit') }}
            </button>
        </div>
    </div>
</div>

<style>
    /* ── Attendance pill (used by the badge partial + inline in modal) ── */
    .att-pill {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 3px 10px;
        border-radius: 999px;
        background: var(--att-bg, #f1f5f9);
        color: var(--att-fg, #475569);
        font-size: 12px; font-weight: 700;
        line-height: 1.5;
        white-space: nowrap;
    }
    .att-pill__glyph { font-size: 11px; line-height: 1; }
    .att-pill--inline { font-size: 12.5px; padding: 4px 12px; }

    /* ── Modal shell (mirrors the rejection modal so admins feel at home) ── */
    .att-modal {
        position: fixed; inset: 0;
        z-index: 9998;
        display: none;
        align-items: center; justify-content: center;
        padding: 18px;
    }
    .att-modal[data-open="true"] { display: flex; }
    .att-modal__backdrop {
        position: absolute; inset: 0;
        background: rgba(15, 23, 42, .55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        animation: att-fade .18s ease-out;
    }
    .att-modal__card {
        position: relative; z-index: 1;
        width: 100%; max-width: 460px;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 28px 70px -12px rgba(15, 23, 42, .35),
                    0 8px 18px -6px rgba(15, 23, 42, .18);
        overflow: hidden;
        animation: att-pop .22s cubic-bezier(.22,.94,.43,1.0);
    }
    @keyframes att-fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes att-pop  { from { opacity: 0; transform: translateY(8px) scale(.96); }
                          to   { opacity: 1; transform: translateY(0)   scale(1); } }

    .att-modal__head {
        display: flex; align-items: flex-start; gap: 12px;
        padding: 20px 22px 12px;
        border-bottom: 1px solid #f1f5f9;
    }
    .att-modal__icon {
        flex-shrink: 0;
        width: 40px; height: 40px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 12px;
        background: #dbeafe; color: #1d4ed8;
    }
    .att-modal__head-text { min-width: 0; flex: 1; }
    .att-modal__head-text h3 {
        margin: 0;
        font-size: 16px; font-weight: 700; color: #0f172a; line-height: 1.3;
    }
    .att-modal__subtitle {
        margin: 3px 0 0;
        font-size: 12.5px; color: #64748b; line-height: 1.5;
    }

    .att-modal__body { padding: 16px 22px; display: grid; gap: 14px; }

    .att-modal__summary {
        margin: 0;
        padding: 12px 14px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        display: grid; gap: 8px;
    }
    .att-modal__summary-row {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 10px;
        align-items: center;
        font-size: 13px;
    }
    .att-modal__summary-row dt {
        margin: 0;
        font-size: 11px; font-weight: 700; color: #64748b;
        text-transform: uppercase; letter-spacing: .04em;
    }
    .att-modal__summary-row dd { margin: 0; color: #0f172a; font-weight: 600; word-break: break-word; }

    .att-modal__field { display: grid; gap: 6px; }
    .att-modal__field-label {
        display: flex; align-items: baseline; gap: 8px;
        font-size: 13px; font-weight: 600; color: #334155;
    }
    .att-modal__field-hint { font-size: 11px; font-weight: 500; color: #94a3b8; }
    .att-modal__field select,
    .att-modal__field textarea {
        width: 100%;
        padding: 10px 12px;
        font: inherit; font-size: 14px; line-height: 1.55;
        color: #0f172a;
        background: #fff;
        border: 1px solid #e2e8f0; border-radius: 10px;
        transition: border-color .15s, box-shadow .15s;
    }
    .att-modal__field select { min-height: 42px; }
    .att-modal__field textarea { min-height: 110px; resize: vertical; }
    .att-modal__field select:focus,
    .att-modal__field textarea:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, .16);
    }

    .att-modal__actions {
        display: flex; gap: 8px; justify-content: flex-end;
        padding: 14px 22px 18px;
        border-top: 1px solid #f1f5f9;
        background: #fafbfc;
    }
    .att-modal__btn {
        padding: 9px 18px;
        font-size: 13.5px; font-weight: 600;
        border-radius: 9px;
        cursor: pointer;
        transition: background-color .12s, border-color .12s, box-shadow .12s, transform .08s;
    }
    .att-modal__btn:active { transform: translateY(1px); }
    .att-modal__btn--ghost {
        background: #fff; color: #334155;
        border: 1px solid #cbd5e1;
    }
    .att-modal__btn--ghost:hover { background: #f1f5f9; }
    .att-modal__btn--primary {
        background: #4f46e5; color: #fff;
        border: 0;
        box-shadow: 0 1px 2px rgba(79, 70, 229, .25), 0 4px 10px -3px rgba(79, 70, 229, .35);
    }
    .att-modal__btn--primary:hover { background: #4338ca; }
    .att-modal__btn[disabled] { opacity: .55; cursor: default; }

    @media (max-width: 480px) {
        .att-modal__summary-row { grid-template-columns: 1fr; gap: 2px; }
        .att-modal__summary-row dd { font-size: 13px; }
        .att-modal__head, .att-modal__body, .att-modal__actions { padding-inline: 16px; }
    }
</style>

<script>
(() => {
    if (window.__attendanceModalReady) return;
    window.__attendanceModalReady = true;

    const modal      = document.getElementById('attendance-modal');
    if (!modal) return;

    const subjectLabel = modal.querySelector('[data-att-subject-label]');
    const subjectName  = modal.querySelector('[data-att-subject-name]');
    const currentEl    = modal.querySelector('[data-att-current-pill]');
    const statusSel    = modal.querySelector('[data-att-status]');
    const notesEl      = modal.querySelector('[data-att-notes]');
    const submitBtn    = modal.querySelector('[data-att-submit]');
    const cancelBtn    = modal.querySelector('[data-att-cancel]');
    const backdrop     = modal.querySelector('[data-att-backdrop]');

    // Subject-row label text comes from the same translation keys the
    // index/show pages use, so changing them in lang/* updates the modal
    // automatically. `customer` is a generic fallback for rows whose
    // `meetingable_type` is null or unknown — never normally shown.
    //
    // The labels are pre-computed in PHP scope (NOT inlined as an array
    // literal inside a Blade directive call): Blade cannot tell the
    // inline array bracket apart from the JS attribute selectors in this
    // same script block and bombs out with
    // "Unclosed bracket on line N does not match closing paren". Same
    // pattern as $attendanceLabels below.
    @php
        $subjectLabels = [
            'investor' => __('admin.attendance_modal.investor'),
            'startup'  => __('admin.attendance_modal.startup'),
            'customer' => __('admin.attendance_modal.customer'),
        ];
    @endphp
    const subjectLabels = @json($subjectLabels);

    const csrfTag = document.querySelector('meta[name="csrf-token"]');
    const csrf    = csrfTag ? csrfTag.getAttribute('content') : '';

    // Palette mirrors attendance-badge.blade.php. The active picker only
    // offers `coming` / `attended` / `not_attended` (see Meeting::
    // attendanceOptions). `cancelled` + `unknown` stay here as
    // backstops so a legacy row carrying either still renders a
    // readable pill — they're never returned to the dropdown.
    const palette = {
        coming:       { fg: '#1d4ed8', bg: '#dbeafe', glyph: '⏳', labelKey: 'coming' },
        attended:     { fg: '#065f46', bg: '#d1fae5', glyph: '✓', labelKey: 'attended' },
        not_attended: { fg: '#991b1b', bg: '#fee2e2', glyph: '✗', labelKey: 'not_attended' },
        cancelled:    { fg: '#475569', bg: '#e2e8f0', glyph: '⊘', labelKey: 'cancelled' },
        unknown:      { fg: '#94a3b8', bg: '#f1f5f9', glyph: '·', labelKey: 'unknown' },
    };
    @php
        // Pre-compute the labels array in PHP scope so we can hand a
        // single $variable to @json(). Inlining the array literal as
        // `@json([ … => __('…'), … ])` confuses Blade's directive
        // parser when the script block also contains `[…]` inside JS
        // string selectors (e.g. modal.querySelector('[data-att-…]')),
        // and produces a ParseError on compile.
        $attendanceLabels = [
            'coming'       => __('admin.meetings_admin.attendances.coming'),
            'attended'     => __('admin.meetings_admin.attendances.attended'),
            'not_attended' => __('admin.meetings_admin.attendances.not_attended'),
            // Legacy labels kept so backstop pills render correctly.
            'cancelled'    => __('admin.meetings_admin.attendances.cancelled'),
            'unknown'      => __('admin.meetings_admin.attendances.unknown'),
        ];
    @endphp
    const labels = @json($attendanceLabels);

    function paintPill(status) {
        const meta = palette[status] || palette.unknown;
        currentEl.style.setProperty('--att-fg', meta.fg);
        currentEl.style.setProperty('--att-bg', meta.bg);
        currentEl.innerHTML = '<span class="att-pill__glyph" aria-hidden="true">'
            + meta.glyph
            + '</span><span class="att-pill__label">'
            + (labels[status] || '—')
            + '</span>';
    }

    let activeUrl = null;
    let onSaved   = null;
    let isOpen    = false;

    function open(opts) {
        if (!opts || !opts.updateUrl) return;
        activeUrl = opts.updateUrl;
        onSaved   = typeof opts.onSaved === 'function' ? opts.onSaved : null;

        // Resolve subject type + name. Preferred shape is the new
        // `subjectType` / `subjectName` pair. Legacy callers still pass
        // `recipientName` / `startupName` — translate those down so a
        // startup row's "startupName" takes precedence over the generic
        // recipient name.
        let type = (opts.subjectType || '').toLowerCase();
        let name = (opts.subjectName || '').trim();
        if (!name) {
            name = (opts.startupName || opts.recipientName || '').trim();
        }
        if (!type) {
            type = opts.startupName ? 'startup' : 'investor';
        }
        if (!(type in subjectLabels)) {
            type = 'customer';
        }
        subjectLabel.textContent = subjectLabels[type];
        subjectName.textContent  = name || '—';

        const current = opts.currentStatus || 'coming';
        paintPill(current);
        statusSel.value = current;
        notesEl.value   = opts.currentNotes || '';
        submitBtn.disabled = false;

        modal.dataset.open = 'true';
        isOpen = true;
        setTimeout(() => statusSel.focus(), 0);
    }

    function close() {
        if (!isOpen) return;
        isOpen = false;
        modal.dataset.open = 'false';
        activeUrl = null; onSaved = null;
    }

    async function submit() {
        if (!isOpen || submitBtn.disabled || !activeUrl) return;
        submitBtn.disabled = true;
        try {
            const res = await fetch(activeUrl, {
                method: 'PATCH',
                headers: {
                    'Content-Type':     'application/json',
                    'Accept':           'application/json',
                    'X-CSRF-TOKEN':     csrf,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({
                    attendance_status: statusSel.value,
                    meeting_notes:     (notesEl.value || '').trim(),
                }),
            });
            const payload = await res.json().catch(() => ({}));
            if (!res.ok || payload.ok === false) {
                submitBtn.disabled = false;
                window.alert(payload.message || payload.error || @json(__('admin.attendance_modal.save_failed')));
                return;
            }
            const cb = onSaved;
            close();
            showToast(@json(__('admin.attendance_modal.saved')));
            if (cb) cb(payload);
        } catch (err) {
            submitBtn.disabled = false;
            window.alert(@json(__('admin.attendance_modal.save_failed')) + ': ' + (err.message || err));
        }
    }

    statusSel.addEventListener('change', () => paintPill(statusSel.value));
    submitBtn.addEventListener('click', submit);
    cancelBtn.addEventListener('click', close);
    backdrop.addEventListener('click', close);
    document.addEventListener('keydown', (e) => {
        if (!isOpen) return;
        if (e.key === 'Escape') { e.preventDefault(); close(); }
        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); submit(); }
    });

    // Tiny green success toast — independent of the rejection modal so
    // this partial works standalone on any page (the meetings index
    // doesn't include the rejection modal).
    function showToast(message) {
        const t = document.createElement('div');
        t.className = 'att-toast';
        t.setAttribute('role', 'status');
        t.textContent = message || '';
        document.body.appendChild(t);
        setTimeout(() => { t.style.transition = 'opacity .25s'; t.style.opacity = '0'; }, 2400);
        setTimeout(() => t.remove(), 2800);
    }

    window.openAttendanceModal = open;
})();
</script>
<style>
    .att-toast {
        position: fixed;
        top: 24px; inset-inline-start: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        padding: 12px 20px;
        background: #16a34a; color: #fff;
        border-radius: 12px;
        font-weight: 600; font-size: 14px;
        box-shadow: 0 12px 30px -10px rgba(22, 163, 74, .55);
    }
    [dir="rtl"] .att-toast { transform: translateX(50%); }
</style>