{{--
    Active inter-admin note alerts rendered immediately below the
    dashboard's welcome strip. The DashboardController has already:
      - filtered the collection to notes assigned to the current admin
        and not yet dismissed,
      - stamped first_seen_at on any row that was previously unseen
        (single bulk UPDATE, not one per note).

    The X button on each card POSTs to admin.admin-notes.dismiss via
    fetch — on success the card fades out; on failure the user lands
    on the page reload path. No JS framework dependency; vanilla DOM.
--}}
@if (! empty($alerts) && $alerts->isNotEmpty())
    @once
    @push('styles')
    <style>
        .nt-alerts { display: grid; gap: 12px; margin: 14px 0 22px; }
        .nt-alert {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 14px 16px;
            border-radius: 12px;
            border: 1px solid var(--alert-line, #e2e8f0);
            background: var(--alert-bg, #f8fafc);
            color: var(--alert-fg, #0f172a);
            box-shadow: 0 1px 2px rgba(15,23,42,.04);
            transition: opacity .2s, transform .2s;
        }
        .nt-alert.is-leaving { opacity: 0; transform: translateY(-4px); pointer-events: none; }
        .nt-alert--high   { --alert-bg:#fef2f2; --alert-fg:#7f1d1d; --alert-line:#fecaca; }
        .nt-alert--medium { --alert-bg:#fef3c7; --alert-fg:#92400e; --alert-line:#fde68a; }
        .nt-alert--low    { --alert-bg:#eff6ff; --alert-fg:#1e40af; --alert-line:#bfdbfe; }

        .nt-alert__icon {
            flex-shrink: 0;
            width: 32px; height: 32px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 999px;
            background: rgba(255,255,255,.55);
            color: inherit;
        }
        .nt-alert__body { flex: 1 1 auto; min-width: 0; }
        .nt-alert__title {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            margin: 0 0 4px;
            font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
            text-transform: uppercase;
        }
        .nt-alert__title .pr {
            display: inline-flex; align-items: center;
            padding: 1px 8px; border-radius: 999px;
            background: rgba(255,255,255,.55);
            font-size: 10.5px; font-weight: 800;
        }
        .nt-alert__from { font-size: 12px; color: rgba(0,0,0,.55); font-weight: 600; text-transform: none; letter-spacing: 0; }
        .nt-alert__body p {
            margin: 0;
            font-size: 14px; line-height: 1.65;
            color: var(--alert-fg, #0f172a);
            white-space: pre-wrap;
        }

        .nt-alert__actions {
            flex-shrink: 0;
            display: flex; align-items: center; gap: 8px;
        }
        /* Icon-only Done button — same circle/square footprint as the
           X button next to it so the two reads as a paired switch
           (✓ → confirmed, × → dismissed). Green tint signals positive
           action. */
        .nt-alert__done {
            width: 28px; height: 28px;
            display: inline-flex; align-items: center; justify-content: center;
            background: #16a34a; color: #fff;
            border: 0; border-radius: 999px;
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(22,163,74,.25);
            transition: background-color .12s, transform .08s;
        }
        .nt-alert__done:hover { background: #15803d; }
        .nt-alert__done:active { transform: translateY(1px); }
        .nt-alert__done[disabled] { opacity: .5; cursor: not-allowed; }
        .nt-alert__close {
            width: 28px; height: 28px;
            display: inline-flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,.55);
            color: inherit;
            border: 0; border-radius: 999px;
            cursor: pointer;
            transition: background-color .12s;
        }
        .nt-alert__close:hover { background: rgba(255,255,255,.8); }
        .nt-alert__close[disabled] { opacity: .5; cursor: not-allowed; }

        /* Confirmation modal — single instance for the page. */
        .nt-confirm {
            position: fixed; inset: 0; z-index: 9998;
            display: none; align-items: center; justify-content: center;
            padding: 18px;
        }
        .nt-confirm.is-open { display: flex; }
        .nt-confirm__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); }
        .nt-confirm__panel {
            position: relative; z-index: 1;
            width: 100%; max-width: 420px;
            background: #fff; border-radius: 14px;
            box-shadow: 0 28px 70px -12px rgba(15,23,42,.35);
            overflow: hidden;
        }
        .nt-confirm__head { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; }
        .nt-confirm__head h3 { margin: 0; font-size: 15px; font-weight: 800; color: #0f172a; }
        .nt-confirm__body { padding: 16px 20px; font-size: 14px; color: #334155; line-height: 1.6; }
        .nt-confirm__foot {
            display: flex; justify-content: flex-end; gap: 8px;
            padding: 14px 20px; background: #f8fafc; border-top: 1px solid #f1f5f9;
        }
        .nt-confirm__foot button {
            padding: 8px 16px; border-radius: 8px;
            font-weight: 700; font-size: 13px; cursor: pointer;
            transition: background-color .12s, border-color .12s;
        }
        .nt-confirm__foot .ghost { background: #fff; color: #334155; border: 1px solid #cbd5e1; }
        .nt-confirm__foot .ghost:hover { background: #f1f5f9; }
        .nt-confirm__foot .primary { background: #4f46e5; color: #fff; border: 0; }
        .nt-confirm__foot .primary:hover { background: #4338ca; }
        .nt-confirm__foot .primary[disabled] { opacity: .55; cursor: not-allowed; }
    </style>
    @endpush
    @endonce

    <div class="nt-alerts" id="dashboard-note-alerts">
        @foreach ($alerts as $note)
            <div class="nt-alert nt-alert--{{ $note->priority }}" data-note-id="{{ $note->id }}">
                <span class="nt-alert__icon" aria-hidden="true">
                    @if ($note->priority === \App\Models\AdminNote::PRIORITY_HIGH)
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
                        </svg>
                    @elseif ($note->priority === \App\Models\AdminNote::PRIORITY_MEDIUM)
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><circle cx="12" cy="16" r="0.5" fill="currentColor"/>
                        </svg>
                    @else
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
                        </svg>
                    @endif
                </span>
                <div class="nt-alert__body">
                    <h3 class="nt-alert__title">
                        <span>{{ __('admin.admin_notes.alert.heading') }}</span>
                        <span class="pr">{{ __('admin.admin_notes.priorities.' . $note->priority) }}</span>
                        <span class="nt-alert__from">
                            {{ __('admin.admin_notes.alert.from', ['name' => $note->creator?->name ?: '—']) }}
                        </span>
                    </h3>
                    <p>{{ $note->note }}</p>
                </div>
                <div class="nt-alert__actions">
                    {{-- Done: primary action — records `confirmed_at`,
                         meaning the receiver actually completed the
                         task in the note. --}}
                    <button type="button" class="nt-alert__done" data-nt-confirm-id="{{ $note->id }}"
                            aria-label="{{ __('admin.admin_notes.alert.done') }}"
                            title="{{ __('admin.admin_notes.alert.done') }}">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                    </button>
                    {{-- X: secondary action — records `dismissed_at`,
                         a passive acknowledgement that hides the alert
                         without claiming the task was completed. --}}
                    <button type="button" class="nt-alert__close" data-nt-dismiss-id="{{ $note->id }}"
                            aria-label="{{ __('admin.admin_notes.alert.close') }}"
                            title="{{ __('admin.admin_notes.alert.close') }}">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                        </svg>
                    </button>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Shared confirmation modal — one instance for the whole page,
         used by both the X (dismiss) and the Done (confirm) buttons.
         The modal's title + prompt + endpoint are rewritten in JS at
         open time so the same DOM serves both intents. --}}
    <div id="nt-action-confirm" class="nt-confirm" role="dialog" aria-modal="true" aria-hidden="true">
        <div class="nt-confirm__backdrop" data-nt-cancel></div>
        <div class="nt-confirm__panel">
            <div class="nt-confirm__head">
                <h3 data-nt-title>{{ __('admin.admin_notes.confirm_title_dismiss') }}</h3>
            </div>
            <div class="nt-confirm__body">
                <p style="margin:0;" data-nt-prompt>{{ __('admin.admin_notes.confirm_prompt_dismiss') }}</p>
            </div>
            <div class="nt-confirm__foot">
                <button type="button" class="ghost" data-nt-cancel>{{ __('admin.admin_notes.confirm_cancel') }}</button>
                <button type="button" class="primary" data-nt-confirm>{{ __('admin.admin_notes.confirm_ok') }}</button>
            </div>
        </div>
    </div>

    @once
    @push('scripts')
    <script>
    (function () {
        var holder = document.getElementById('dashboard-note-alerts');
        var modal  = document.getElementById('nt-action-confirm');
        if (! holder || ! modal) return;

        // Same modal serves both X (dismiss) and Done (confirm). We
        // store both the pending note id AND which intent the user
        // chose, so the Confirm button knows which endpoint to hit
        // and which copy to leave on screen.
        var pendingNoteId = null;
        var pendingIntent = null;   // 'dismiss' | 'confirm'

        var titleEl   = modal.querySelector('[data-nt-title]');
        var promptEl  = modal.querySelector('[data-nt-prompt]');
        var confirmBtn = modal.querySelector('[data-nt-confirm]');
        var csrfMeta  = document.querySelector('meta[name="csrf-token"]');
        var csrf      = csrfMeta ? csrfMeta.getAttribute('content') : '';

        // Translation copy injected at render-time — kept in JS so we
        // don't reach for the DOM every open.
        var COPY = {
            dismiss: {
                title:  {{ Js::from(__('admin.admin_notes.confirm_title_dismiss')) }},
                prompt: {{ Js::from(__('admin.admin_notes.confirm_prompt_dismiss')) }},
                endpoint: function (id) { return '/admin/admin-notes/' + encodeURIComponent(id) + '/dismiss'; },
            },
            confirm: {
                title:  {{ Js::from(__('admin.admin_notes.confirm_title_done')) }},
                prompt: {{ Js::from(__('admin.admin_notes.confirm_prompt_done')) }},
                endpoint: function (id) { return '/admin/admin-notes/' + encodeURIComponent(id) + '/confirm'; },
            },
        };

        function openModal(intent, id) {
            pendingIntent = intent;
            pendingNoteId = id;
            var c = COPY[intent];
            if (titleEl)  titleEl.textContent = c.title;
            if (promptEl) promptEl.textContent = c.prompt;
            modal.classList.add('is-open');
            modal.setAttribute('aria-hidden', 'false');
        }
        function closeModal() {
            pendingNoteId = null;
            pendingIntent = null;
            modal.classList.remove('is-open');
            modal.setAttribute('aria-hidden', 'true');
        }

        holder.addEventListener('click', function (e) {
            var dismissBtn = e.target.closest('[data-nt-dismiss-id]');
            if (dismissBtn) {
                openModal('dismiss', dismissBtn.getAttribute('data-nt-dismiss-id'));
                return;
            }
            var confirmBtnEl = e.target.closest('[data-nt-confirm-id]');
            if (confirmBtnEl) {
                openModal('confirm', confirmBtnEl.getAttribute('data-nt-confirm-id'));
            }
        });

        modal.querySelectorAll('[data-nt-cancel]').forEach(function (el) {
            el.addEventListener('click', closeModal);
        });
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape' && modal.classList.contains('is-open')) closeModal();
        });

        confirmBtn.addEventListener('click', async function () {
            if (! pendingNoteId || ! pendingIntent) { closeModal(); return; }
            var id     = pendingNoteId;
            var intent = pendingIntent;
            confirmBtn.setAttribute('disabled', 'disabled');

            try {
                var res = await fetch(COPY[intent].endpoint(id), {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                });
                if (res.ok) {
                    var card = holder.querySelector('[data-note-id="' + id + '"]');
                    if (card) {
                        card.classList.add('is-leaving');
                        setTimeout(function () { card.remove(); }, 220);
                    }
                } else {
                    // Fall back to a full reload if the JSON path
                    // failed — the server-side path also handles both
                    // intents and will land the same state.
                    window.location.reload();
                }
            } catch (_) {
                window.location.reload();
            } finally {
                confirmBtn.removeAttribute('disabled');
                closeModal();
            }
        });
    })();
    </script>
    @endpush
    @endonce
@endif