@extends(request()->has('_sphf_partial') ? 'theme.sphf.layouts.partial' : 'theme.sphf.layouts.app')

@section('content')
<section class="sphf-page">

<style>
.sphf-notif-page-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.sphf-notif-page-title {
    font-size: 42px; font-weight: 700; color: #1f2937; line-height: 1.02;
}
.sphf-notif-filters {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; align-items: center;
}
.sphf-notif-tab {
    padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
    border: 1px solid #cbd5e1; color: #475569; background: #fff; cursor: pointer;
    transition: all .15s;
}
.sphf-notif-tab:hover { background: #f0fdf4; border-color: #0a9a4c; color: #0a9a4c; }
.sphf-notif-tab.is-active { background: #16a34a; border-color: #16a34a; color: #fff; }

.sphf-notif-search {
    padding: 7px 12px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 13px; color: #374151; outline: none; min-width: 200px;
    transition: border .15s;
}
.sphf-notif-search:focus { border-color: #0a9a4c; }

.sphf-notif-select {
    padding: 7px 12px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 13px; color: #374151; outline: none; background: #fff; cursor: pointer;
}
.sphf-notif-select:focus { border-color: #0a9a4c; }

.sphf-notif-date {
    padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 13px; color: #374151; outline: none;
}
.sphf-notif-date:focus { border-color: #0a9a4c; }

.sphf-notif-btn-primary {
    padding: 7px 16px; background: #0a9a4c; color: #fff; border: none;
    border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.sphf-notif-btn-primary:hover { background: #088040; }
.sphf-notif-btn-ghost {
    padding: 10px 18px; background: #fff; color: #374151; border: 1px solid #cbd5e1;
    border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.sphf-notif-btn-ghost:hover { border-color: #0a9a4c; color: #0a9a4c; }

/* Table */
.sphf-notif-table-wrap {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden;
}
.sphf-notif-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.sphf-notif-table thead th {
    background: #f9fafb; padding: 12px 16px; text-align: left;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #6b7280; border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.sphf-notif-table tbody tr {
    border-bottom: 1px solid #f3f4f6; transition: background .12s; cursor: pointer;
}
.sphf-notif-table tbody tr:hover { background: #f9fafb; }
.sphf-notif-table tbody tr.is-unread { background: #f0fdf4; }
.sphf-notif-table tbody tr.is-unread:hover { background: #dcfce7; }
.sphf-notif-table td { padding: 12px 16px; vertical-align: top; }

.sphf-notif-severity {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}
.sphf-notif-severity.green  { background: #dcfce7; color: #166534; }
.sphf-notif-severity.yellow { background: #fef9c3; color: #854d0e; }
.sphf-notif-severity.amber  { background: #fef3c7; color: #92400e; }
.sphf-notif-severity.red    { background: #fee2e2; color: #991b1b; }
.sphf-notif-severity.default{ background: #f3f4f6; color: #4b5563; }

.sphf-notif-status {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
}
.sphf-notif-status.pending  { background: #eff6ff; color: #1d4ed8; }
.sphf-notif-status.marked   { background: #f3f4f6; color: #6b7280; }
.sphf-notif-status.archived { background: #fdf4ff; color: #7e22ce; }

.sphf-notif-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px; border: none;
    background: none; cursor: pointer; color: #6b7280; transition: all .15s;
}
.sphf-notif-action-btn:hover { background: #f3f4f6; color: #0a9a4c; }
.sphf-notif-action-btn.archive:hover { color: #7e22ce; }

/* Pagination */
.sphf-notif-pagination {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-top: 1px solid #f3f4f6; flex-wrap: wrap; gap: 10px;
}
.sphf-notif-pag-info { font-size: 13px; color: #6b7280; }
.sphf-notif-pag-btns { display: flex; gap: 6px; }
.sphf-notif-pag-btn {
    min-width: 32px; height: 32px; padding: 0 10px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
    font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; transition: all .15s;
}
.sphf-notif-pag-btn:hover:not(:disabled) { border-color: #0a9a4c; color: #0a9a4c; }
.sphf-notif-pag-btn.is-active { background: #0a9a4c; border-color: #0a9a4c; color: #fff; }
.sphf-notif-pag-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Empty/loading */
.sphf-notif-empty {
    padding: 60px 16px; text-align: center; color: #9ca3af; font-size: 14px;
}
.sphf-notif-spinner {
    display: inline-block; width: 32px; height: 32px; border: 3px solid #e5e7eb;
    border-top-color: #0a9a4c; border-radius: 50%; animation: sphfSpin .7s linear infinite;
}
@keyframes sphfSpin { to { transform: rotate(360deg); } }

/* Pending dot */
.sphf-notif-unread-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #0a9a4c; flex-shrink: 0; vertical-align: middle; margin-right: 6px;
}
</style>

<div id="sphf-notif-list-view">
    <div class="sphf-notif-page-header">
        <div>
            <div class="sphf-notif-page-title">Notifications</div>
            <div style="font-size:16px; color:#6b7280; margin-top:10px;">Every notification with detail.</div>
        </div>
        <div style="display:flex; gap:8px;">
            <button class="sphf-notif-btn-ghost" onclick="sphfNotifMarkAllRead()">Mark all as read</button>
        </div>
    </div>

    <div class="sphf-notif-filters" style="margin-bottom:14px;">
        <button class="sphf-notif-tab is-active" data-global-all="1" onclick="sphfNotifResetFilters(this)">All</button>
        <button class="sphf-notif-tab" data-status="pending" onclick="sphfNotifSetStatus('pending', this)">Pending</button>
        <button class="sphf-notif-tab" data-status="marked" onclick="sphfNotifSetStatus('marked', this)">Marked</button>
        <button class="sphf-notif-tab" data-status="archived" onclick="sphfNotifSetStatus('archived', this)">Archived</button>
        <button class="sphf-notif-tab" data-severity="red" onclick="sphfNotifSetSeverity('red', this)">Red</button>
        <button class="sphf-notif-tab" data-severity="amber" onclick="sphfNotifSetSeverity('amber', this)">Amber</button>
        <button class="sphf-notif-tab" data-severity="yellow" onclick="sphfNotifSetSeverity('yellow', this)">Yellow</button>
        <button class="sphf-notif-tab" data-severity="green" onclick="sphfNotifSetSeverity('green', this)">Green</button>

        <div style="flex:1; min-width:160px;"></div>
        <input type="text" class="sphf-notif-search" id="sphf-notif-q" placeholder="Search title or message..." oninput="sphfNotifDebounce()">
        <select class="sphf-notif-select" id="sphf-notif-per-page" onchange="sphfNotifLoad(1)">
            <option value="20">20 per page</option>
            <option value="50">50 per page</option>
            <option value="100">100 per page</option>
        </select>
    </div>

    <div id="sphf-notif-summary" style="font-size:13px; color:#6b7280; margin-bottom:12px;"></div>

    <div id="sphf-notif-card-list">
        <div class="sphf-notif-empty"><div class="sphf-notif-spinner"></div></div>
    </div>
    <div class="sphf-notif-pagination" id="sphf-notif-pagination" style="display:none;">
        <span class="sphf-notif-pag-info" id="sphf-notif-pag-info"></span>
        <div class="sphf-notif-pag-btns" id="sphf-notif-pag-btns"></div>
    </div>
</div>

<div id="sphf-notif-detail-view" style="display:none;">

    <div style="font-size:28px; font-weight:800; color:#111827; margin-bottom:8px;">Case Details <span id="detail-case-id" style="font-size:13px; background:#e5e7eb; color:#374151; border-radius:6px; padding:2px 8px; margin-left:8px;">CASE-0000</span></div>

    <div style="background:#fef2f2; border:1px solid #fee2e2; color:#991b1b; border-radius:8px; padding:12px 16px; font-weight:700; margin-bottom:18px; display:flex; justify-content:space-between; gap:10px;">
        <span id="detail-banner">Alert</span>
        <span id="detail-banner-id" style="font-size:12px; font-weight:600;"></span>
    </div>

    <div style="display:grid; grid-template-columns:minmax(320px,1fr) minmax(280px,0.9fr); gap:16px;">
        <div style="display:flex; flex-direction:column; gap:16px;">
            <div style="background:#fff; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden;">
                <div style="padding:14px 16px; border-bottom:1px solid #e5e7eb; display:flex; justify-content:space-between; align-items:center;">
                    <div style="font-size:28px; font-weight:700; color:#0f766e;">Beneficiary Information</div>
                    <span style="background:#dbeafe; color:#1e3a8a; font-size:11px; border-radius:999px; padding:4px 10px; font-weight:700;">ACTIVE CASE</span>
                </div>
                <div style="padding:14px 16px;">
                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:13px; color:#374151;">
                        <div>MASKED CNIC<br><b id="detail-cnic">-</b></div>
                        <div>NAME<br><b id="detail-name">-</b></div>
                        <div>IMPLEMENTING PARTNER (IP)<br><b id="detail-ip">-</b></div>
                        <div>PHONE NUMBER<br><b id="detail-phone">-</b></div>
                    </div>
                    <div style="margin-top:12px; font-size:13px; color:#374151;">LOCATION DETAILS<br><b id="detail-location">-</b></div>
                    {{-- <div style="margin-top:12px; border:1px solid #e5e7eb; border-radius:8px; padding:10px 12px; background:#f8fafc; font-size:14px; color:#0a9a4c; font-weight:700;">Housing Status: <span id="detail-housing-status">-</span></div> --}}
                </div>
            </div>

            <div style="background:#fff; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden;">
                <div style="padding:14px 16px; border-bottom:1px solid #f3d7d7; background:#fef2f2; font-size:28px; font-weight:700; color:#991b1b;">Alert Analysis</div>
                <div style="padding:14px 16px; display:grid; grid-template-columns:1fr 1fr; gap:14px; font-size:13px; color:#374151;">
                    {{-- <div>RELEASE DATE<br><b id="detail-release-date">-</b></div> --}}
                    <div>WITHDRAWAL STATUS<br><b id="detail-withdrawal-status" style="color:#991b1b;">-</b></div>
                    <div>DAYS ELAPSED<br><b id="detail-days-elapsed" style="color:#991b1b; font-size:30px;">0 days</b></div>
                    <div style="background:#eef2ff; border-left:3px solid #dc2626; border-radius:6px; padding:8px 10px; font-style:italic;" id="detail-threshold-note">Note: threshold detail unavailable.</div>
                </div>
            </div>
        </div>

        <div style="display:flex; flex-direction:column; gap:16px;">
            <div style="background:#fff; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden;">
                <div style="padding:14px 16px; border-bottom:1px solid #e5e7eb; font-size:28px; font-weight:700; color:#0f766e;">Audit Timeline</div>
                <div id="detail-timeline" style="padding:14px 16px;"></div>
            </div>

            <div style="background:#eef2ff; border:1px solid #dbeafe; border-radius:8px; padding:14px 16px;">
                <div style="font-size:12px; color:#475569; letter-spacing:.05em; font-weight:700; margin-bottom:10px;">RESOLUTION ACTIONS</div>
                <button type="button" style="width:100%; margin-bottom:10px; background:#0f766e; color:#fff; border:none; border-radius:8px; padding:10px 12px; font-weight:700; cursor:pointer;">Mark as Resolved</button>
                <button type="button" style="width:100%; background:#fff; color:#0f766e; border:1px solid #99f6e4; border-radius:8px; padding:10px 12px; font-weight:700; cursor:pointer;">Add Note</button>
                <button type="button" onclick="sphfNotifBackToList()" style="width:100%; margin-top:10px; background:transparent; color:#475569; border:none; padding:8px 0; font-size:12px; cursor:pointer;">&larr; Back to Notifications</button>
            </div>
        </div>
    </div>
</div>

</section>

<script>
(function () {
    const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '';
    let currentPage = 1;
    let currentStatus = '';
    let currentSeverity = '';
    let debounceTimer = null;
    const notificationCache = {};
    let pendingOpenNotificationId = (new URLSearchParams(window.location.search).get('open_notification_id') || '').trim();

    // Public interface
    window.sphfNotifLoad      = loadPage;
    window.sphfNotifSetStatus = setStatus;
    window.sphfNotifSetSeverity = setSeverity;
    window.sphfNotifResetFilters = resetFilters;
    window.sphfNotifDebounce  = debounce;
    window.sphfNotifMarkAllRead = markAllRead;
    window.sphfNotifOpenDetail = openDetail;
    window.sphfNotifBackToList = backToList;

    function setStatus(status, btn) {
        currentStatus = status;
        document.querySelectorAll('[data-status].sphf-notif-tab').forEach(b => b.classList.remove('is-active'));
        btn?.classList.add('is-active');
        document.querySelectorAll('[data-global-all].sphf-notif-tab').forEach(b => b.classList.remove('is-active'));
        loadPage(1);
    }

    function setSeverity(severity, btn) {
        currentSeverity = severity;
        document.querySelectorAll('[data-severity].sphf-notif-tab').forEach(b => b.classList.remove('is-active'));
        btn?.classList.add('is-active');
        document.querySelectorAll('[data-global-all].sphf-notif-tab').forEach(b => b.classList.remove('is-active'));
        loadPage(1);
    }

    function resetFilters(btn) {
        currentStatus = '';
        currentSeverity = '';
        document.querySelectorAll('[data-status].sphf-notif-tab').forEach(b => b.classList.remove('is-active'));
        document.querySelectorAll('[data-severity].sphf-notif-tab').forEach(b => b.classList.remove('is-active'));
        document.querySelectorAll('[data-global-all].sphf-notif-tab').forEach(b => b.classList.remove('is-active'));
        btn?.classList.add('is-active');
        loadPage(1);
    }

    function debounce() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => loadPage(1), 400);
    }

    function buildParams(page) {
        const params = new URLSearchParams();
        params.set('page', page);
        params.set('per_page', document.getElementById('sphf-notif-per-page').value);
        if (currentStatus) params.set('status', currentStatus);
        const q = document.getElementById('sphf-notif-q').value.trim();
        if (q) params.set('q', q);
        if (currentSeverity) params.set('severity', currentSeverity);
        // archived tab
        if (currentStatus === 'archived') {
            params.set('archived', '1');
            params.delete('status');
        } else {
            params.set('archived', '0');
        }
        return params;
    }

    function loadPage(page) {
        currentPage = page;
        const cardList = document.getElementById('sphf-notif-card-list');
        cardList.innerHTML = '<div class="sphf-notif-empty"><div class="sphf-notif-spinner"></div></div>';
        document.getElementById('sphf-notif-pagination').style.display = 'none';
        document.getElementById('sphf-notif-summary').textContent = '';

        fetch('/api/notifications?' + buildParams(page).toString(), {
            headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' }
        })
        .then(r => r.ok ? r.json() : Promise.reject(r.status))
        .then(json => render(json))
        .catch(err => {
            cardList.innerHTML = `<div class="sphf-notif-empty" style="color:#ef4444;">
                Failed to load notifications (${err}). Please try again.
            </div>`;
        });
    }

    function render(json) {
        const items = json.data ?? [];
        const meta  = json.meta ?? {};
        const cardList = document.getElementById('sphf-notif-card-list');

        // Summary
        const total = meta.total ?? 0;
        const from  = total === 0 ? 0 : ((meta.current_page - 1) * meta.per_page + 1);
        const to    = Math.min(meta.current_page * meta.per_page, total);
        document.getElementById('sphf-notif-summary').textContent =
            total === 0 ? '' : `Showing ${from}–${to} of ${total.toLocaleString()} notifications`;

        if (!items.length) {
            cardList.innerHTML = '<div class="sphf-notif-empty">No notifications found.</div>';
            return;
        }

        Object.keys(notificationCache).forEach(k => delete notificationCache[k]);

        cardList.innerHTML = items.map(n => {
            notificationCache[String(n.id)] = n;
            const normalizedStatus = n.status === 'sent'
                ? 'pending'
                : (n.status === 'read' ? 'marked' : n.status);
            const isUnread = normalizedStatus === 'pending';
            const sev = n.severity || 'default';
            const sevLabel = { red:'Critical', amber:'High', yellow:'Medium', green:'Low' }[sev] ?? sev;
            const sevDot = { red:'🔴', amber:'🟠', yellow:'🟡', green:'🟢' }[sev] ?? '⚪';
            const meta = parseMeta(n.metadata);
            const alertMeta = parseMeta(n.alert_meta_data || meta.alert_meta_data);
            const beneficiary = Object.assign({}, alertMeta, parseMeta(meta.beneficiary));
            const time = formatRelativeTime(n.created_at);
            const fullTime = n.created_at ? new Date(n.created_at).toLocaleString('en-PK', {
                day:'2-digit', month:'short', year:'numeric', hour:'2-digit', minute:'2-digit'
            }) : '';
            // Card layout
            return `<div class="sphf-notif-card" data-notif-id="${escH(String(n.id ?? ''))}" style="border:1px solid #dbe3ee; border-radius:12px; background:#fff; margin-bottom:14px; padding:16px 18px; display:flex; align-items:center; gap:16px; box-shadow:0 1px 2px rgba(15,23,42,0.03); cursor:pointer; position:relative;" onclick="sphfNotifOpenDetail(this.getAttribute('data-notif-id'))">
                <div style="flex-shrink:0; width:12px;">
                    ${isUnread ? '<span class="sphf-notif-unread-dot" title="Pending"></span>' : ''}
                </div>
                <div style="flex:1; min-width:0;">
                    <div style="display:flex; align-items:center; gap:10px; margin-bottom:3px;">
                        <span class="sphf-notif-severity ${sev}">${sevDot} ${escH(sevLabel)}</span>
                        <span style="font-weight:700; color:#1e293b; font-size:15px; line-height:1.25;">${escH(n.title || 'Notification')}</span>
                        <span class="sphf-notif-status ${normalizedStatus ?? 'pending'}" style="margin-left:8px;">${{ pending:'Pending', marked:'Marked', archived:'Archived' }[normalizedStatus] ?? escH(normalizedStatus ?? '')}</span>
                    </div>
                    <div style="font-size:13px; color:#6b7280; margin-bottom:2px;">${n.body ? escH(n.body) : ''}</div>
                    <div style="font-size:12px; color:#64748b; margin-bottom:2px;">
                        ${(beneficiary.cnic || meta.beneficiary_uuid || beneficiary.uuid) ? `CNIC: ${escH(beneficiary.cnic || meta.beneficiary_uuid || beneficiary.uuid)}` : ''}
                        ${(beneficiary.ip_name || meta.ip_name) ? `&nbsp;•&nbsp;${escH(beneficiary.ip_name || meta.ip_name)}` : ''}
                        ${(beneficiary.stage_name || meta.stage_name) ? `&nbsp;•&nbsp;${escH(beneficiary.stage_name || meta.stage_name)}` : ''}
                        ${(beneficiary.days_elapsed || meta.days_elapsed) ? `&nbsp;•&nbsp;${escH(beneficiary.days_elapsed || meta.days_elapsed)} days` : ''}
                    </div>
                </div>
                <div style="font-size:12px; color:#94a3b8; min-width:110px; text-align:right;" title="${escH(fullTime)}">${escH(time)}</div>
                <div style="display:flex; gap:6px; margin-left:10px;">
                    ${isUnread ? `<button class="sphf-notif-action-btn" onclick="event.stopPropagation(); sphfNotifMarkOne(${n.id}, this)" title="Mark as read"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polyline points="20 6 9 17 4 12"/></svg></button>` : ''}
                    ${normalizedStatus !== 'archived' ? `<button class="sphf-notif-action-btn archive" onclick="event.stopPropagation(); sphfNotifArchive(${n.id}, this)" title="Archive"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg></button>` : ''}
                </div>
            </div>`;
        }).join('');

        if (pendingOpenNotificationId && notificationCache[String(pendingOpenNotificationId)]) {
            const idToOpen = String(pendingOpenNotificationId);
            pendingOpenNotificationId = '';
            openDetail(idToOpen);

            const url = new URL(window.location.href);
            url.searchParams.delete('open_notification_id');
            window.history.replaceState({}, '', url.toString());
        }

        renderPagination(meta);
    }

    function openDetail(id) {
        const n = notificationCache[String(id)];
        if (!n) return;

        const meta = parseMeta(n.metadata);
        const alertMeta = parseMeta(n.alert_meta_data || meta.alert_meta_data);
        const beneficiary = Object.assign({}, alertMeta, parseMeta(meta.beneficiary));
        const caseUuid = beneficiary.uuid || beneficiary.beneficiary_uuid || meta.beneficiary_uuid || alertMeta.beneficiary_uuid || '';
        const caseId = meta.case_id || (caseUuid ? `CASE-${caseUuid}` : `CASE-${String(n.id).padStart(6, '0')}`);
        const cnic = beneficiary.cnic || beneficiary.masked_cnic || meta.beneficiary_uuid || beneficiary.uuid || '-';
        const name = beneficiary.name || beneficiary.occupant_name || meta.beneficiary_name || 'N/A';
        const ip = beneficiary.ip_name || meta.ip_name || 'N/A';
        const phone = beneficiary.phone || beneficiary.mobile || beneficiary.cell_no || beneficiary.phone_number || meta.phone_number || 'N/A';
        const location = beneficiary.location || [beneficiary.address, beneficiary.tehsil, beneficiary.district].filter(Boolean).join(', ') || 'N/A';
        const housing = beneficiary.housing_status || meta.housing_status || 'N/A';
        const releaseDate = formatDate(beneficiary.release_date || meta.release_date);
        const withdrawalStatus = beneficiary.withdrawal_status || meta.withdrawal_status || 'Not Withdrawn';
        const daysElapsed = Number(beneficiary.days_elapsed ?? meta.days_elapsed ?? 0) || 0;
        const threshold = severityThresholdNote(String(n.severity || '').toLowerCase());
        const thresholdDays = parseMeta(beneficiary.threshold_days || meta.threshold_days);

        document.getElementById('detail-case-id').textContent = caseId;
        document.getElementById('detail-banner').textContent = n.title || 'Alert';
        document.getElementById('detail-banner-id').textContent = `ID: ${caseId}`;
        document.getElementById('detail-cnic').textContent = cnic;
        document.getElementById('detail-name').textContent = name;
        document.getElementById('detail-ip').textContent = ip;
        document.getElementById('detail-phone').textContent = phone;
        document.getElementById('detail-location').textContent = location;
        // document.getElementById('detail-housing-status').textContent = housing;
        // document.getElementById('detail-release-date').textContent = releaseDate;
        document.getElementById('detail-withdrawal-status').textContent = withdrawalStatus;
        document.getElementById('detail-days-elapsed').textContent = `${daysElapsed} days`;
        document.getElementById('detail-threshold-note').textContent = buildThresholdNote(thresholdDays, threshold);
        document.getElementById('detail-timeline').innerHTML = buildTimelineHtml(n, meta);

        document.getElementById('sphf-notif-list-view').style.display = 'none';
        document.getElementById('sphf-notif-detail-view').style.display = 'block';
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function backToList() {
        document.getElementById('sphf-notif-detail-view').style.display = 'none';
        document.getElementById('sphf-notif-list-view').style.display = 'block';
    }

    function parseMeta(value) {
        if (!value) return {};
        if (typeof value === 'object') return value;
        if (typeof value !== 'string') return {};
        try {
            const parsed = JSON.parse(value);
            return parsed && typeof parsed === 'object' ? parsed : {};
        } catch {
            return {};
        }
    }

    function formatDate(value) {
        if (!value) return 'N/A';
        const d = new Date(value);
        if (Number.isNaN(d.getTime())) return String(value);
        return d.toLocaleDateString('en-PK', { day: '2-digit', month: 'short', year: 'numeric' });
    }

    function formatRelativeTime(value) {
        if (!value) return '—';
        const d = new Date(value);
        if (Number.isNaN(d.getTime())) return '—';

        const diffSec = Math.floor((Date.now() - d.getTime()) / 1000);
        if (diffSec < 60) return 'just now';
        if (diffSec < 3600) return `${Math.max(1, Math.floor(diffSec / 60))}m ago`;
        if (diffSec < 86400) return `${Math.max(1, Math.floor(diffSec / 3600))}h ago`;
        if (diffSec < 172800) return 'yesterday';
        if (diffSec < 604800) return `${Math.max(1, Math.floor(diffSec / 86400))}d ago`;

        return d.toLocaleDateString('en-PK', { day: '2-digit', month: 'short', year: 'numeric' });
    }

    function severityThresholdNote(severity) {
        if (severity === 'red') return 'Note: Red threshold: more than 30 days.';
        if (severity === 'amber') return 'Note: Amber threshold: 21 to 30 days.';
        if (severity === 'yellow') return 'Note: Yellow threshold: 11 to 20 days.';
        return 'Note: Green threshold: 0 to 10 days.';
    }

    function buildThresholdNote(thresholdDays, fallbackText) {
        if (!thresholdDays || typeof thresholdDays !== 'object') {
            return fallbackText;
        }

        const g = Number(thresholdDays.green);
        const y = Number(thresholdDays.yellow);
        const a = Number(thresholdDays.amber);
        const r = Number(thresholdDays.red);

        if ([g, y, a, r].some(v => Number.isNaN(v))) {
            return fallbackText;
        }

        return `Thresholds: Green 0-${g} days, Yellow ${g + 1}-${y} days, Amber ${y + 1}-${a} days, Red ${r}+ days.`;
    }

    function buildTimelineHtml(notification, meta) {
        const timeline = Array.isArray(meta.timeline) ? meta.timeline : [];
        const fallback = [
            {
                label: `${String(notification.severity || 'alert').toUpperCase()} Alert Triggered`,
                date: notification.created_at,
                color: String(notification.severity || 'red').toLowerCase(),
                current: true,
            }
        ];
        const rows = (timeline.length ? timeline : fallback).map((item, index) => {
            const color = item.color || (index === 0 ? 'red' : 'amber');
            const label = item.label || 'Event';
            const date = formatDate(item.date);
            const marker = { red: '#dc2626', amber: '#d97706', yellow: '#ca8a04', green: '#0f766e' }[color] || '#6b7280';
            const suffix = item.current ? ' (Current Status)' : '';
            return `<div style="position:relative; padding-left:16px; margin-bottom:14px; font-size:13px; color:#1f2937;">
                <span style="position:absolute; left:0; top:5px; width:9px; height:9px; border-radius:50%; background:${marker};"></span>
                <div style="font-weight:700;">${escH(label)}${suffix}</div>
                <div style="color:#4b5563;">${escH(date)}</div>
            </div>`;
        }).join('');

        return `<div style="border-left:2px solid #d1d5db; margin-left:4px; padding-left:12px;">${rows}</div>`;
    }

    function renderPagination(meta) {
        const pag = document.getElementById('sphf-notif-pagination');
        const info = document.getElementById('sphf-notif-pag-info');
        const btns = document.getElementById('sphf-notif-pag-btns');
        if (!meta.total) { pag.style.display = 'none'; return; }

        pag.style.display = 'flex';
        info.textContent = `Page ${meta.current_page} of ${meta.last_page} (${(meta.total||0).toLocaleString()} total)`;

        const pages = buildPageRange(meta.current_page, meta.last_page);
        btns.innerHTML = `
            <button class="sphf-notif-pag-btn" onclick="sphfNotifLoad(${meta.current_page - 1})" ${meta.current_page <= 1 ? 'disabled' : ''}>&laquo;</button>
            ${pages.map(p => p === '…'
                ? `<span class="sphf-notif-pag-btn" style="cursor:default;">…</span>`
                : `<button class="sphf-notif-pag-btn ${p === meta.current_page ? 'is-active' : ''}" onclick="sphfNotifLoad(${p})">${p}</button>`
            ).join('')}
            <button class="sphf-notif-pag-btn" onclick="sphfNotifLoad(${meta.current_page + 1})" ${meta.current_page >= meta.last_page ? 'disabled' : ''}>&raquo;</button>
        `;
    }

    function buildPageRange(cur, last) {
        if (last <= 7) return Array.from({ length: last }, (_, i) => i + 1);
        const pages = [];
        pages.push(1);
        if (cur > 4) pages.push('…');
        for (let p = Math.max(2, cur - 2); p <= Math.min(last - 1, cur + 2); p++) pages.push(p);
        if (cur < last - 3) pages.push('…');
        pages.push(last);
        return pages;
    }

    // Mark single read
    window.sphfNotifMarkOne = function (id, btn) {
        fetch(`/api/notifications/${id}/read`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrf, 'Content-Type': 'application/json', 'Accept': 'application/json' }
        }).then(r => r.ok ? r.json() : null).then(() => loadPage(currentPage)).catch(() => {});
    };

    // Archive
    window.sphfNotifArchive = function (id, btn) {
        fetch(`/api/notifications/${id}/archive`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrf, 'Content-Type': 'application/json', 'Accept': 'application/json' }
        }).then(r => r.ok ? r.json() : null).then(() => loadPage(currentPage)).catch(() => {});
    };

    function markAllRead() {
        fetch('/api/notifications/mark-all-read', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrf, 'Content-Type': 'application/json', 'Accept': 'application/json' }
        }).then(r => r.ok ? r.json() : null).then(() => loadPage(currentPage)).catch(() => {});
    }

    function escH(s) {
        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    // Initial load
    loadPage(1);
})();
</script>
@endsection