{{-- ============================================================
     SPHF Sidebar
     Path: resources/views/theme/sphf/includes/sidebar.blade.php
     ============================================================ --}}

<style>
    #sphf-sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 260px;
        background: #fff;
        border-right: 1px solid #e5e7eb;
        display: flex;
        flex-direction: column;
        z-index: 50;
        transition: width .3s cubic-bezier(.4,0,.2,1);
        overflow: visible;
    }
    #sphf-sidebar.is-collapsed { width: 58px; }

    /* Main content offset */
    .sphf-main { margin-left: 260px; transition: margin-left .3s cubic-bezier(.4,0,.2,1); }
    body.sidebar-collapsed .sphf-main { margin-left: 58px; }

    /* Logo */
    .sphf-sb-logo {
        display: flex; align-items: center; gap: 10px;
        padding: 14px 16px; border-bottom: 1px solid #f3f4f6;
        min-height: 64px; overflow: hidden;
        text-decoration: none; flex-shrink: 0;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-logo {
        flex-direction: column;
        justify-content: center;
        padding: 12px 8px;
        gap: 8px;
        height: 92px;
        min-height: 92px;
    }
    .sphf-sb-logo .logo-gos { height: 52px; object-fit: contain; flex-shrink: 0; }
    .sphf-sb-logo .logo-sphf {
        height: 52px; object-fit: contain;  flex-shrink: 0;
    }
    .sphf-sb-logo .logo-gos-icon,
    .sphf-sb-logo .logo-sphf-icon {
        display: none;
        width: 26px;
        height: 26px;
        object-fit: contain;
        flex-shrink: 0;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-logo .logo-gos,
    #sphf-sidebar.is-collapsed .sphf-sb-logo .logo-sphf {
        display: none;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-logo .logo-gos-icon,
    #sphf-sidebar.is-collapsed .sphf-sb-logo .logo-sphf-icon {
        display: block;
        width: 30px;
        height: 30px;
    }
    /* Nav */
    .sphf-sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 8px; }
    #sphf-sidebar.is-collapsed .sphf-sb-nav { padding: 12px 4px; }

    /* Section headings */
    .sphf-sb-section {
        margin: 18px 12px 8px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #9ca3af;
        white-space: nowrap;
        overflow: hidden;
        transition: opacity .15s ease;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-section { opacity: 0; height: 0; margin: 0; }

    /* Child links */
    .sphf-sb-link {
        display: flex; align-items: center; gap: 9px;
        padding: 10px 12px;
        margin: 0 4px 8px;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        border-radius: 6px !important;
        font-size: 13px; font-weight: 500; color: #6b7280;
        text-decoration: none; white-space: nowrap; overflow: hidden;
        transition: background .15s, color .15s;
    }
    .sphf-sb-link:hover { background: #f3f5f6; color: #111827; }
    .sphf-sb-link.is-sidebar-active { background: #e5f7ee; color: #0a9a4c; }
    .sphf-sb-link svg { flex-shrink: 0; }
    .sphf-sb-link-label { transition: opacity .15s ease; overflow: hidden; }
    .sphf-sb-group { margin: 0 0 8px; }
    .sphf-sb-group-toggle {
        width: calc(100% - 8px);
        cursor: pointer;
        background: transparent;
        font-family: inherit;
        justify-content: space-between;
        text-align: left;
    }
    .sphf-sb-group-toggle-main {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        overflow: hidden;
    }
    .sphf-sb-group-toggle .sphf-sb-chevron {
        flex-shrink: 0;
        transition: transform .18s ease;
    }
    .sphf-sb-group.is-open .sphf-sb-chevron { transform: rotate(90deg); }
    .sphf-sb-subnav {
        display: none;
        margin: -2px 0 2px;
        padding-left: 12px;
    }
    .sphf-sb-group.is-open .sphf-sb-subnav { display: block; }
    .sphf-sb-subnav .sphf-sb-link {
        margin-bottom: 6px;
        padding-left: 14px;
    }
    .sphf-sb-link.is-disabled {
        cursor: default;
        pointer-events: none;
        color: #4b5563;
        background: transparent !important;
    }
    .sphf-sb-link.is-disabled:hover { color: #4b5563; }
    #sphf-sidebar.is-collapsed .sphf-sb-link {
        justify-content: center;
        align-items: center;
        width: 38px;
        min-width: 38px;
        height: 38px;
        padding: 0;
        margin: 0 auto 10px;
        gap: 0;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-group { margin-bottom: 10px; }
    #sphf-sidebar.is-collapsed .sphf-sb-group-toggle {
        width: 38px;
        margin: 0 auto;
        justify-content: center;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-group-toggle-main {
        justify-content: center;
        gap: 0;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-chevron,
    #sphf-sidebar.is-collapsed .sphf-sb-subnav {
        display: none;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-link-label {
        display: none;
        opacity: 0;
        width: 0;
        max-width: 0;
        pointer-events: none;
    }

    /* Profile */
    .sphf-sb-profile {
        flex-shrink: 0; border-top: 1px solid #f3f4f6;
        min-height: 78px;
        padding: 14px 16px; display: flex; align-items: center;
        gap: 14px; overflow: hidden;
    }
    .sphf-sb-avatar {
        width: 40px; height: 40px; border-radius: 14px;
        background: #155f5a; color: #ffffff;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .sphf-sb-avatar svg { display: none; }
    .sphf-sb-avatar-initials {
        display: inline-flex;
        font-size: 14px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0;
        text-transform: uppercase;
    }
    .sphf-sb-profile-text { flex: 1; overflow: hidden; transition: opacity .15s ease; }
    .sphf-sb-profile-text .sb-name  { display: block; font-size: 16px; font-weight: 800; color: #111827; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sphf-sb-profile-text .sb-email { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: #6b7280; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sphf-sb-logout { flex-shrink: 0; transition: opacity .15s ease; }
    .sphf-sb-logout form { margin: 0; }
    .sphf-sb-logout :is(button, a) {
        width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
        border-radius: 6px; border: none; background: none; color: #6b7280;
        cursor: pointer; transition: background .15s;
        text-decoration: none;
    }
    .sphf-sb-logout :is(button, a):hover { background: #f3f4f6; }

    /* Bell */
    .sphf-sb-bell { flex-shrink: 0; transition: opacity .15s ease; position: relative; }
    .sphf-sb-bell-btn {
        width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
        border-radius: 6px; border: none; background: none; color: #6b7280;
        cursor: pointer; transition: background .15s; position: relative;
    }
    .sphf-sb-bell-btn:hover { background: #f3f4f6; color: #0a9a4c; }
    .sphf-sb-bell-badge {
        display: none; position: absolute; top: 2px; right: 2px;
        min-width: 15px; height: 15px; border-radius: 8px;
        background: #ef4444; color: #fff; font-size: 9px; font-weight: 700;
        line-height: 15px; text-align: center; padding: 0 3px; pointer-events: none;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-bell {
        opacity: 1; width: auto; overflow: visible; pointer-events: auto;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-bell-btn {
        width: 28px; height: 28px;
    }

    #sphf-sidebar.is-collapsed .sphf-sb-profile {
        min-height: 118px;
        padding: 15px 0 14px;
        flex-direction: column;
        justify-content: center;
        gap: 18px;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-avatar {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-profile-text {
        display: none;
        flex: 0 0 0;
        opacity: 0;
        width: 0;
        height: 0;
        overflow: hidden;
        pointer-events: none;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-logout {
        opacity: 1;
        width: auto;
        overflow: visible;
        pointer-events: auto;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-logout :is(button, a) {
        width: 28px;
        height: 28px;
        color: #374151;
    }
    #sphf-sidebar.is-collapsed .sphf-sb-logout :is(button, a):hover { background: #f3f4f6; }

    /* Toggle button */
    #sphf-sb-toggle {
        position: absolute; top: 72px; right: -12px;
        width: 32px; height: 32px; border-radius: 50%;
        background: #fff; border: 1px solid #e5e7eb;
        box-shadow: 0 1px 4px rgba(0,0,0,.1);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; color: #9ca3af;
        transition: color .15s, border-color .15s; z-index: 100;
    }
    #sphf-sb-toggle:hover { color: #374151; border-color: #9ca3af; }
</style>

<aside id="sphf-sidebar">

    {{-- Logo --}}
    <a href="{{ route('theme.sphf.dashboard') }}" class="sphf-sb-logo">
        <img class="logo-gos" src="{{ asset('theme/sphf/assets/images/GOS-logo.png') }}" alt="Government of Sindh">
        <img class="logo-sphf " src="{{ asset('theme/sphf/assets/images/SPHF-logo.png') }}" alt="SPHF">
        <img class="logo-gos-icon" src="{{ asset('theme/sphf/assets/images/gos-icon.png') }}" alt="Government of Sindh Icon">
        <img class="logo-sphf-icon" src="{{ asset('theme/sphf/assets/images/sphf-icon.png') }}" alt="SPHF Icon">
    </a>

    {{-- Nav --}}
    <nav class="sphf-sb-nav">

        @php
            $isCompletedExecutive = request()->routeIs('theme.sphf.executive')
                || (request()->routeIs('theme.sphf.dashboard') && request('progress') === 'completed');
            $isExecutiveDashboard = request()->routeIs('theme.sphf.dashboard') && ! $isCompletedExecutive;
            $isCompletedGroup = request()->routeIs(
                'theme.sphf.executive',
                'theme.sphf.ageing',
                'theme.sphf.branch',
                'theme.sphf.ip-performance',
                'theme.sphf.ifi-view'
            ) || $isCompletedExecutive;
            $isOngoing = request()->routeIs('theme.sphf.live-dss', 'theme.sphf.stage-bottlenecks', 'theme.sphf.financial-delays', 'theme.sphf.ageing.pending');
            $isAgeingGroup = $isCompletedGroup || $isOngoing;
            $isMonitoringGroup = request()->routeIs('theme.sphf.esmp');
        @endphp

        <a href="{{ route('theme.sphf.dashboard') }}"
           data-sidebar-nav="executive"
           class="sphf-page-tab sphf-sb-link {{ $isExecutiveDashboard ? 'is-sidebar-active' : '' }}"
           style="margin-bottom:8px;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
                <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
            </svg>
            <span class="sphf-sb-link-label">Executive Dashboard</span>
        </a>

        <div class="sphf-sb-group {{ $isAgeingGroup ? 'is-open' : '' }}" data-sidebar-group="ageing">
            <button type="button"
                    class="sphf-sb-link sphf-sb-group-toggle {{ $isAgeingGroup ? 'is-sidebar-active' : '' }}"
                    data-sidebar-group-toggle="ageing"
                    aria-expanded="{{ $isAgeingGroup ? 'true' : 'false' }}"
                    onclick="sphfToggleGroup('ageing')">
                <span class="sphf-sb-group-toggle-main">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 12h4l3 8 4-16 3 8h4"/>
                    </svg>
                    <span class="sphf-sb-link-label">Ageing</span>
                </span>
                <svg class="sphf-sb-chevron" width="13" height="13" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 18 15 12 9 6"/>
                </svg>
            </button>

            <div class="sphf-sb-subnav">
                <a href="{{ route('theme.sphf.stage-bottlenecks') }}"
                   data-sidebar-nav="ongoing"
                   class="sphf-page-tab sphf-sb-link {{ $isOngoing ? 'is-sidebar-active' : '' }}">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M23 4v6h-6"/><path d="M1 20v-6h6"/>
                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10"/>
                        <path d="M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
                    </svg>
                    <span class="sphf-sb-link-label">Ongoing Units</span>
                </a>
                <a href="{{ route('theme.sphf.ageing') }}"
                   data-sidebar-nav="completed"
                   class="sphf-page-tab sphf-sb-link {{ $isCompletedGroup ? 'is-sidebar-active' : '' }}">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    <span class="sphf-sb-link-label">Completed Units</span>
                </a>
            </div>
        </div>

        <div class="sphf-sb-group {{ $isMonitoringGroup ? 'is-open' : '' }}" data-sidebar-group="monitoring">
            <button type="button"
                    class="sphf-sb-link sphf-sb-group-toggle {{ $isMonitoringGroup ? 'is-sidebar-active' : '' }}"
                    data-sidebar-group-toggle="monitoring"
                    aria-expanded="{{ $isMonitoringGroup ? 'true' : 'false' }}"
                    onclick="sphfToggleGroup('monitoring')">
                <span class="sphf-sb-group-toggle-main">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 3v18h18"/>
                        <path d="M7 15l4-4 3 3 5-6"/>
                    </svg>
                    <span class="sphf-sb-link-label">Monitoring</span>
                </span>
                <svg class="sphf-sb-chevron" width="13" height="13" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 18 15 12 9 6"/>
                </svg>
            </button>

            <div class="sphf-sb-subnav">
                <span class="sphf-sb-link is-disabled">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="2"/><path d="M12 2v4m0 12v4M2 12h4m12 0h4"/>
                    </svg>
                    <span class="sphf-sb-link-label">Quality Compliance</span>
                </span>

                <a href="{{ route('theme.sphf.esmp') }}"
                   data-sidebar-nav="esmp"
                   class="sphf-sb-link cursor-pointer {{ $isMonitoringGroup ? 'is-sidebar-active' : '' }}">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="3" y1="6" x2="21" y2="6"/>
                        <line x1="3" y1="12" x2="21" y2="12"/>
                        <line x1="3" y1="18" x2="21" y2="18"/>
                    </svg>
                    <span class="sphf-sb-link-label">ESMP Compliance</span>
                </a>

                <span class="sphf-sb-link is-disabled">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="1" x2="12" y2="23"/>
                        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                    </svg>
                    <span class="sphf-sb-link-label">Social Inclusion</span>
                </span>
            </div>
        </div>

    </nav>

    {{-- Profile --}}
    <div class="sphf-sb-profile">
        <div class="sphf-sb-avatar">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="18" height="18">
                <circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
            </svg>
            @if(Auth::check())
                <span class="sphf-sb-avatar-initials">{{ collect(explode(' ', trim(Auth::user()->name)))->filter()->map(fn($part) => mb_substr($part, 0, 1))->take(2)->implode('') ?: 'AU' }}</span>
            @else
                <span class="sphf-sb-avatar-initials">AU</span>
            @endif
        </div>
        @if(Auth::check())
            <div class="sphf-sb-profile-text">
                <span class="sb-name">{{ Auth::user()->name }}</span>
                <span class="sb-email">{{ Auth::user()->email }}</span>
            </div>
            {{-- Notification Bell --}}
            <div class="sphf-sb-bell" id="sphf-sb-bell-container">
                <button type="button" class="sphf-sb-bell-btn" id="sphf-sb-bell-btn" title="Notifications">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
                         stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
                        <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
                    </svg>
                    <span class="sphf-sb-bell-badge" id="sphf-sb-bell-badge"></span>
                </button>
            </div>
            <div class="sphf-sb-logout">
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" title="Log out">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
                            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                            <polyline points="16 17 21 12 16 7"/>
                            <line x1="21" y1="12" x2="9" y2="12"/>
                        </svg>
                    </button>
                </form>
            </div>
        @else
            <div class="sphf-sb-profile-text">
                <span class="sb-name">Admin User</span>
                <span class="sb-email">Super Administrator</span>
            </div>
            <div class="sphf-sb-logout">
                <a href="{{ route('login.index') }}" title="Sign in">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                        <polyline points="16 17 21 12 16 7"/>
                        <line x1="21" y1="12" x2="9" y2="12"/>
                    </svg>
                </a>
            </div>
        @endif
    </div>

    {{-- Toggle --}}
    <button type="button" id="sphf-sb-toggle" onclick="sphfToggleSidebar()" title="Toggle sidebar">
        <svg id="sphf-sb-toggle-icon" width="13" height="13" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="15 18 9 12 15 6"/>
        </svg>
    </button>

</aside>

<script>
(function () {
    const sidebar = document.getElementById('sphf-sidebar');
    const icon    = document.getElementById('sphf-sb-toggle-icon');
    let isOpen    = true;

    // Restore saved preference
    try {
        if (localStorage.getItem('sphf_sidebar') === '0') {
            isOpen = false;
            sidebar.classList.add('is-collapsed');
            document.body.classList.add('sidebar-collapsed');
            icon.style.transform = 'rotate(180deg)';
        }
    } catch(e) {}

    window.sphfToggleSidebar = function () {
        isOpen = !isOpen;
        sidebar.classList.toggle('is-collapsed', !isOpen);
        document.body.classList.toggle('sidebar-collapsed', !isOpen);
        icon.style.transform = isOpen ? '' : 'rotate(180deg)';
        try { localStorage.setItem('sphf_sidebar', isOpen ? '1' : '0'); } catch(e) {}
    };

    window.sphfToggleGroup = function (groupName, forceOpen) {
        const group = document.querySelector(`[data-sidebar-group="${groupName}"]`);
        if (!group) return;

        const hasForcedState = typeof forceOpen !== 'undefined' && forceOpen !== null;

        if (!hasForcedState && sidebar.classList.contains('is-collapsed')) {
            isOpen = true;
            sidebar.classList.remove('is-collapsed');
            document.body.classList.remove('sidebar-collapsed');
            icon.style.transform = '';
            try { localStorage.setItem('sphf_sidebar', '1'); } catch(e) {}
        }

        const shouldOpen = hasForcedState ? !!forceOpen : !group.classList.contains('is-open');
        group.classList.toggle('is-open', shouldOpen);

        const toggle = group.querySelector('[data-sidebar-group-toggle]');
        if (toggle) {
            toggle.setAttribute('aria-expanded', shouldOpen ? 'true' : 'false');
        }
    };
})();
</script>

{{-- Notification Panel (fixed overlay, right of sidebar) --}}
<div id="sphf-sb-notif-panel"
     style="display:none; position:fixed; bottom:78px; left:var(--sphf-sb-width,280px); width:360px; max-height:480px;
            background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.14);
            z-index:1100; flex-direction:column; overflow:hidden;">
    <div style="display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #f3f4f6;">
        <span style="font-size:14px; font-weight:700; color:#111827;">Notifications</span>
        <button id="sphf-sb-notif-mark-all" style="font-size:12px; color:#0a9a4c; background:none; border:none; cursor:pointer; font-weight:600;">Mark all read</button>
    </div>
    <div id="sphf-sb-notif-list" style="overflow-y:auto; max-height:340px; padding:8px 0;">
        <div style="padding:32px 16px; text-align:center; color:#9ca3af; font-size:13px;">Loading…</div>
    </div>
    <a href="{{ route('theme.sphf.notifications') }}"
       style="display:flex; align-items:center; justify-content:center; gap:6px; padding:12px 16px;
              border-top:1px solid #f3f4f6; font-size:12px; font-weight:600; color:#0a9a4c;
              text-decoration:none; transition:background .15s;"
       onmouseover="this.style.background='#f0fdf4';"
       onmouseout="this.style.background='';">
        View all notifications
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
             stroke-linecap="round" stroke-linejoin="round" width="13" height="13">
            <polyline points="9 18 15 12 9 6"/>
        </svg>
    </a>
</div>

<script>
(function () {
    const bellBtn    = document.getElementById('sphf-sb-bell-btn');
    const panel      = document.getElementById('sphf-sb-notif-panel');
    const badge      = document.getElementById('sphf-sb-bell-badge');
    const list       = document.getElementById('sphf-sb-notif-list');
    const markAllBtn = document.getElementById('sphf-sb-notif-mark-all');
    if (!bellBtn || !panel) return;

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

    // Keep panel bottom anchored to sidebar bottom; adjust left when sidebar collapses
    function updatePanelPosition() {
        const sidebar = document.getElementById('sphf-sidebar');
        const sbWidth = sidebar ? sidebar.offsetWidth : 280;
        panel.style.left = sbWidth + 'px';
    }

    // Toggle panel
    bellBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        const isOpen = panel.style.display === 'flex';
        if (isOpen) {
            panel.style.display = 'none';
        } else {
            updatePanelPosition();
            panel.style.display = 'flex';
            loadNotifications();
        }
    });

    // Close on outside click
    document.addEventListener('click', function (e) {
        if (panel.style.display === 'flex' &&
            !panel.contains(e.target) &&
            !bellBtn.contains(e.target)) {
            panel.style.display = 'none';
        }
    });

    // Update badge count
    function updateBadge(count) {
        if (count > 0) {
            badge.textContent = count > 99 ? '99+' : count;
            badge.style.display = 'block';
        } else {
            badge.style.display = 'none';
        }
    }

    // Poll unread count every 20 s
    function pollUnreadCount() {
        fetch('/api/notifications/unread-count', {
            headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' }
        })
        .then(r => r.ok ? r.json() : null)
        .then(data => {
            const count = data?.data?.unread_count ?? data?.count ?? data?.unread_count;
            if (count !== undefined && count !== null) updateBadge(Number(count) || 0);
        })
        .catch(() => {});
    }
    pollUnreadCount();
    setInterval(pollUnreadCount, 20000);

    // Load notification list
    function loadNotifications() {
        list.innerHTML = '<div style="padding:32px 16px; text-align:center; color:#9ca3af; font-size:13px;">Loading…</div>';
        fetch('/api/notifications/bell', {
            headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' }
        })
        .then(r => r.ok ? r.json() : null)
        .then(data => renderList(data))
        .catch(() => {
            list.innerHTML = '<div style="padding:32px 16px; text-align:center; color:#ef4444; font-size:13px;">Failed to load notifications.</div>';
        });
    }

    const notificationsPageUrl = '{{ route('theme.sphf.notifications') }}';

    function renderList(data) {
        const items = data?.data ?? data?.notifications ?? (Array.isArray(data) ? data : []);
        if (!items.length) {
            list.innerHTML = '<div style="padding:32px 16px; text-align:center; color:#9ca3af; font-size:13px;">No notifications</div>';
            return;
        }
        list.innerHTML = items.map(n => {
            const isUnread = !n.is_read && !n.read_at;
            const time = n.created_at ? new Date(n.created_at).toLocaleString() : '';
            const notifId = escH(String(n.id ?? ''));
            return `<div data-open-notification-id="${notifId}"
                style="padding:12px 16px; cursor:pointer; border-bottom:1px solid #f9fafb; background:${isUnread ? '#f0fdf4' : '#fff'}; transition:background .15s;"
                onmouseover="this.style.background='#f3f4f6';"
                onmouseout="this.style.background='${isUnread ? '#f0fdf4' : '#fff'}';">
                <div style="display:flex; justify-content:space-between; align-items:flex-start; gap:8px;">
                    <span style="font-size:13px; color:#111827; font-weight:${isUnread ? 600 : 400}; line-height:1.4;">${escH(n.title ?? n.message ?? 'Notification')}</span>
                    ${isUnread ? '<span style="width:8px; height:8px; border-radius:50%; background:#0a9a4c; flex-shrink:0; margin-top:4px;"></span>' : ''}
                </div>
                ${n.message && n.title ? `<div style="font-size:12px; color:#6b7280; margin-top:2px;">${escH(n.message)}</div>` : ''}
                ${time ? `<div style="font-size:11px; color:#9ca3af; margin-top:4px;">${time}</div>` : ''}
            </div>`;
        }).join('');

        attachNotificationClicks();
    }

    function attachNotificationClicks() {
        list.querySelectorAll('[data-open-notification-id]').forEach((row) => {
            row.addEventListener('click', () => {
                const id = (row.getAttribute('data-open-notification-id') || '').trim();
                if (!id) {
                    window.location.href = notificationsPageUrl;
                    return;
                }
                window.location.href = `${notificationsPageUrl}?open_notification_id=${encodeURIComponent(id)}`;
            });
        });
    }

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

    markAllBtn?.addEventListener('click', function () {
        fetch('/api/notifications/mark-all-read', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrf, 'Content-Type': 'application/json', 'Accept': 'application/json' }
        }).then(() => { updateBadge(0); loadNotifications(); }).catch(() => {});
    });
})();
</script>