@php
    $user = auth('web')->user();
    $unreadCount = $unreadNotificationsCount ?? 0;
@endphp

{{-- Inline (not in @push('head')) because the parent layout renders
     @stack('head') BEFORE this partial is included, which would drop
     these styles entirely. Browsers accept <style> in body fine. --}}
<style>
    /* ---------------- Notification dropdown ---------------- */
    .notif-dropdown {
        width: 380px;
        max-width: 95vw;
        padding: 0;
        border: 0;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
        border-radius: 0.85rem;
        overflow: hidden;
    }
    .notif-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.85rem 1rem;
        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.95rem;
    }
    .notif-list {
        max-height: 460px;
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .notif-list::-webkit-scrollbar { width: 6px; }
    .notif-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

    .notif-empty {
        padding: 2rem 1rem;
        text-align: center;
    }

    .notif-item {
        display: block;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid #f1f5f9;
        color: inherit;
        text-decoration: none;
        transition: background-color 0.12s ease;
        position: relative;
    }
    .notif-item:last-child { border-bottom: 0; }
    .notif-item:hover { background: #f8fafc; color: inherit; text-decoration: none; }
    .notif-item.is-unread { background: #f0f9ff; }
    .notif-item.is-unread:hover { background: #e0f2fe; }

    /* Tiny coloured dot on the right (RTL) marking unread items */
    .notif-item.is-unread::before {
        content: '';
        position: absolute;
        top: 1rem;
        right: 0.45rem;
        width: 7px;
        height: 7px;
        background: #ef4444;
        border-radius: 50%;
    }

    .notif-item-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 0.55rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        background: #e0f2fe;
        color: #0284c7;
    }
    .notif-item-icon.is-telehealth { background: #ecfdf5; color: #059669; }
    .notif-item-icon.is-urgent     { background: #fef2f2; color: #dc2626; }
    .notif-item-icon.is-soon       { background: #fef3c7; color: #b45309; }

    .notif-item-title {
        font-weight: 600;
        font-size: 0.88rem;
        color: #0f172a;
        line-height: 1.35;
        margin: 0;
    }
    .notif-item-body {
        color: #64748b;
        font-size: 0.8rem;
        line-height: 1.45;
        margin-top: 0.2rem;
    }
    .notif-item-time {
        color: #94a3b8;
        font-size: 0.72rem;
        margin-top: 0.25rem;
    }

    .notif-bucket-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.1rem 0.45rem;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 700;
        background: #fef3c7;
        color: #b45309;
        margin-inline-start: 0.4rem;
    }
    .notif-bucket-badge.is-urgent { background: #fee2e2; color: #b91c1c; }
    .notif-bucket-badge.is-soon   { background: #fef3c7; color: #b45309; }

    .notif-join-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin-top: 0.55rem;
        padding: 0.35rem 0.75rem;
        background: #25D366;
        color: #fff !important;
        border: 0;
        border-radius: 0.45rem;
        font-size: 0.78rem;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.12s ease;
    }
    .notif-join-btn:hover { background: #1ebe5b; color: #fff; }
    .notif-join-btn i { font-size: 0.95rem; }

    .notif-footer {
        padding: 0.65rem 1rem;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
        text-align: center;
        font-size: 0.85rem;
    }
    .notif-footer a {
        color: #64748b;
        text-decoration: none;
        font-weight: 500;
    }
    .notif-footer a:hover { color: #0f172a; }
</style>

<header class="navbar navbar-expand-md d-print-none clinic-topbar">
    <div class="container-xl">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-nav flex-row order-md-last align-items-center gap-1">
            {{-- Quick search --}}
            @can('patients.view')
            <div class="nav-item d-none d-md-flex me-2">
                <form class="input-icon clinic-quick-search"
                      data-quick-search
                      data-search-url="{{ route('patients.search') }}"
                      data-show-url="{{ url('patients') }}/__id__"
                      onsubmit="return false;">
                    <input type="text" id="quickSearch" class="form-control form-control-sm" placeholder="بحث سريع عن مريض..." autocomplete="off">
                    <span class="input-icon-addon"><i class="ti ti-search"></i></span>
                    <div id="quickSearchResults" class="dropdown-menu w-100 p-0" style="max-height: 320px; overflow-y: auto;"></div>
                </form>
            </div>
            @endcan

            {{-- Theme toggle --}}
            <div class="nav-item">
                <a href="#" class="nav-link px-0 topbar-icon-btn" data-bs-theme-toggle title="تبديل المظهر">
                    <i class="ti ti-moon" data-theme-icon></i>
                </a>
            </div>

            {{-- Notifications --}}
            <div class="nav-item dropdown">
                <a href="#" class="nav-link px-0 topbar-icon-btn position-relative" data-bs-toggle="dropdown" id="notifBell" title="الإشعارات">
                    <i class="ti ti-bell"></i>
                    <span class="badge bg-red topbar-badge {{ $unreadCount === 0 ? 'd-none' : '' }}" id="notifBadge">{{ $unreadCount }}</span>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-menu-card notif-dropdown">
                    <div class="notif-header">
                        <div class="d-flex align-items-center gap-2">
                            <i class="ti ti-bell text-primary"></i>
                            <strong>الإشعارات</strong>
                            <span class="badge bg-red-lt text-red ms-1 d-none" id="notifHeaderCount">0</span>
                        </div>
                        <button type="button" class="btn btn-sm btn-link text-decoration-none p-0 d-none"
                                id="notifMarkAllBtn">
                            <i class="ti ti-checks me-1"></i> تعليم الكل
                        </button>
                    </div>
                    <div id="notifList" class="notif-list">
                        <div class="notif-empty">
                            <div class="spinner-border spinner-border-sm text-muted"></div>
                            <span class="text-muted small ms-2">جارٍ التحميل...</span>
                        </div>
                    </div>
                    <div class="notif-footer">
                        <a href="{{ route('notifications.index') }}">
                            عرض كل الإشعارات
                            <i class="ti ti-arrow-left ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            {{-- User dropdown --}}
            <div class="nav-item dropdown ms-1">
                <a href="#" class="nav-link d-flex align-items-center lh-1 text-reset p-0" data-bs-toggle="dropdown">
                    @if($user?->avatar)
                        <span class="avatar avatar-sm" style="background-image: url('{{ $user->avatar }}')"></span>
                    @else
                        <span class="avatar avatar-sm clinic-avatar-initials">{{ $user?->initials ?? '؟' }}</span>
                    @endif
                    <div class="d-none d-xl-block ps-2">
                        <div class="fw-semibold">{{ $user?->name }}</div>
                        <div class="mt-1 small text-muted">{{ __($user?->role ?? '') }}</div>
                    </div>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                    <a href="{{ route('profile.show') ?? '#' }}" class="dropdown-item">
                        <i class="ti ti-user me-2"></i> الملف الشخصي
                    </a>
                    @can('settings.view')
                        <a href="{{ route('settings.index') ?? '#' }}" class="dropdown-item">
                            <i class="ti ti-settings me-2"></i> الإعدادات
                        </a>
                    @endcan
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item text-danger"
                       data-confirm="هل تريد تسجيل الخروج؟"
                       data-action="{{ route('logout') }}"
                       data-method="POST">
                        <i class="ti ti-logout me-2"></i> تسجيل الخروج
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>

@push('scripts')
<script>
(function () {
    'use strict';
    // Bell dropdown loader: polls /notifications/recent so the user sees
    // imminent appointment reminders (10/5/2 minutes before start)
    // without refreshing the page. The 30s interval is short enough to
    // catch the 2-minute bucket promptly but long enough not to thrash
    // the DB.
    const RECENT_URL = @json(route('notifications.recent'));
    const MARK_READ_URL = id => `${@json(url('/notifications'))}/${id}/read`;
    const MARK_ALL_URL = @json(route('notifications.mark-all-read'));
    const CSRF = document.querySelector('meta[name="csrf-token"]')?.content;

    const $badge = document.getElementById('notifBadge');
    const $headerCount = document.getElementById('notifHeaderCount');
    const $list = document.getElementById('notifList');
    const $markAll = document.getElementById('notifMarkAllBtn');
    if (! $list) return;

    function escHtml(s) {
        return String(s ?? '').replace(/[&<>"']/g, c =>
            ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    }

    /**
     * Renders one notification row. Telehealth rows get a dedicated
     * green "Join meeting" button (data-notif-stop prevents the outer
     * row link from also firing, so the WhatsApp/meeting tab gets
     * the focus instead of opening two tabs).
     *
     * The icon background and bucket badge colours intensify as the
     * appointment gets closer (10 min = blue/yellow, 5 min = amber,
     * 2 min = red) so the staff can triage at a glance.
     */
    function renderRow(n) {
        // Tone the icon + badge by minutes_before (only present on
        // imminent reminders). Falls back to neutral for other types.
        let toneClass = '';
        let badgeClass = 'is-soon';
        if (n.minutes_before !== null && n.minutes_before !== undefined) {
            if (n.minutes_before <= 2)      { toneClass = 'is-urgent'; badgeClass = 'is-urgent'; }
            else if (n.minutes_before <= 5) { toneClass = 'is-soon';   badgeClass = 'is-soon'; }
            else                            { toneClass = '';          badgeClass = 'is-soon'; }
        }
        // Telehealth tint overrides the urgency tint on the icon so
        // video sessions are immediately recognisable (green camera).
        const iconClass = n.is_telehealth ? 'is-telehealth' : toneClass;

        const bucketBadge = (n.minutes_before !== null && n.minutes_before !== undefined)
            ? `<span class="notif-bucket-badge ${badgeClass}">
                   <i class="ti ti-clock me-1"></i>${n.minutes_before} د
               </span>`
            : '';

        const joinBtn = n.is_telehealth && n.meeting_url
            ? `<a href="${escHtml(n.meeting_url)}" target="_blank" rel="noopener"
                  class="notif-join-btn" data-notif-stop="1">
                  <i class="ti ti-video"></i> ادخل على الاجتماع
              </a>`
            : '';

        const itemClass = 'notif-item' + (n.read ? '' : ' is-unread');

        return `
            <a href="${escHtml(n.url || '#')}"
               class="${itemClass}"
               data-notif-id="${escHtml(n.id)}"
               ${n.is_telehealth && n.meeting_url ? 'target="_blank" rel="noopener"' : ''}>
                <div class="d-flex align-items-start gap-3">
                    <span class="notif-item-icon ${iconClass}">
                        <i class="ti ${escHtml(n.icon || 'ti-bell')}"></i>
                    </span>
                    <div class="flex-grow-1 min-w-0">
                        <div class="notif-item-title">
                            ${escHtml(n.title)}${bucketBadge}
                        </div>
                        <div class="notif-item-body">${escHtml(n.body)}</div>
                        <div class="notif-item-time">
                            <i class="ti ti-history me-1"></i>${escHtml(n.time_ago)}
                        </div>
                        ${joinBtn}
                    </div>
                </div>
            </a>
        `;
    }

    async function load() {
        try {
            const r = await fetch(RECENT_URL, { headers: { Accept: 'application/json' } });
            if (! r.ok) return;
            const json = await r.json();
            const count = json.unread_count || 0;
            if ($badge) {
                $badge.textContent = count;
                $badge.classList.toggle('d-none', count === 0);
            }
            if ($headerCount) {
                $headerCount.textContent = count + ' جديد';
                $headerCount.classList.toggle('d-none', count === 0);
            }
            if ($markAll) {
                $markAll.classList.toggle('d-none', count === 0);
            }
            const items = json.data || [];
            $list.innerHTML = items.length
                ? items.map(renderRow).join('')
                : `<div class="notif-empty">
                       <i class="ti ti-bell-off text-muted" style="font-size: 1.75rem;"></i>
                       <div class="text-muted small mt-2">لا توجد إشعارات جديدة.</div>
                   </div>`;
        } catch (e) {
            // Network glitch — leave the previous state in place rather
            // than wiping with an error message.
            console.debug('notif load failed', e);
        }
    }

    // Clicking a row marks it read on the server AND fades it out of
    // the dropdown instantly — the user expects the bell to surface
    // only fresh items. The full /notifications page still shows the
    // read entries with a "read" badge for audit purposes.
    //
    // The "Join meeting" button uses data-notif-stop to opt out: we
    // mark the parent row read but DON'T remove it visually, since the
    // user is leaving the page anyway (target=_blank takes them to
    // Google Meet) and the next dropdown reload will refresh the list.
    $list.addEventListener('click', async (e) => {
        const row = e.target.closest('[data-notif-id]');
        if (! row) return;
        const id = row.dataset.notifId;
        const isStopBtn = !! e.target.closest('[data-notif-stop]');

        // Mark read in the background. Don't block the link click on
        // this — the user already navigated by the time the request
        // finishes. We only care about the side-effect (DB update +
        // badge refresh).
        fetch(MARK_READ_URL(id), {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF, Accept: 'application/json' },
        }).catch(() => {});

        if (! isStopBtn) {
            // Animate-and-remove. Wrapped in rAF so the transition
            // actually triggers (immediate display:none skips the
            // animation in some browsers).
            row.style.transition = 'opacity 0.18s ease, max-height 0.25s ease';
            row.style.overflow = 'hidden';
            row.style.maxHeight = row.offsetHeight + 'px';
            requestAnimationFrame(() => {
                row.style.opacity = '0';
                row.style.maxHeight = '0';
            });
            setTimeout(() => {
                row.remove();
                // Decrement badge + show empty state when last row goes.
                const remaining = $list.querySelectorAll('[data-notif-id]').length;
                if ($badge) {
                    const newCount = Math.max(0, parseInt($badge.textContent || '0', 10) - 1);
                    $badge.textContent = newCount;
                    $badge.classList.toggle('d-none', newCount === 0);
                }
                if ($headerCount) {
                    const newCount = Math.max(0, parseInt($badge?.textContent || '0', 10));
                    $headerCount.textContent = newCount + ' جديد';
                    $headerCount.classList.toggle('d-none', newCount === 0);
                }
                if (! remaining) {
                    $list.innerHTML = `<div class="notif-empty">
                           <i class="ti ti-bell-off text-muted" style="font-size: 1.75rem;"></i>
                           <div class="text-muted small mt-2">لا توجد إشعارات جديدة.</div>
                       </div>`;
                    $markAll?.classList.add('d-none');
                }
            }, 260);
        }
    });

    $markAll?.addEventListener('click', async (e) => {
        e.preventDefault();
        try {
            await fetch(MARK_ALL_URL, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': CSRF, Accept: 'application/json' },
            });
        } catch {}
        load();
    });

    document.getElementById('notifBell')?.addEventListener('click', load);
    load();
    setInterval(load, 30_000);
})();
</script>
@endpush