{{--
    Ported from header.php (repo root). $logoLink/$unreadCount/$notifications/
    $absenceNotifications/$delayNotifications/$paymentReminders/$paymentReminderLabels
    come from App\View\Composers\HeaderComposer (see the Phase 4 plan) — this
    partial itself has no query logic, just markup.
--}}

<link rel="stylesheet" href="/css/style.css?v={{ @filemtime(base_path('../css/style.css')) ?: 1 }}">

<style>
    .ax-navbar {
        background: var(--ax-surface, #ffffff);
        backdrop-filter: none;
        padding: 10px 0;
        border-bottom: 1px solid var(--ax-border, #e5e7eb);
        box-shadow: var(--ax-shadow-sm, 0 2px 8px rgba(0,0,0,0.05));
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    .ax-logo-img {
        height: 42px;
        transition: transform 180ms ease;
    }
    .ax-logo-link:hover .ax-logo-img {
        transform: scale(1.04);
    }
    .ax-logo-text {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--ax-primary-900, #003a7a);
        letter-spacing: -0.01em;
    }

    .ax-icon-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        transition: background-color 180ms ease, transform 180ms ease;
    }
    .ax-icon-btn:hover {
        background: var(--ax-gray-100, #eef1f6);
        transform: translateY(-1px);
    }

    .notif-wrapper {
        position: relative;
    }

    .notif-dropdown {
        position: absolute;
        right: 0;
        top: 52px;
        width: 360px;
        max-width: 90vw;
        max-height: 70vh;
        overflow-y: auto;
        background: var(--ax-surface, #fff);
        border-radius: var(--ax-radius, 12px);
        box-shadow: var(--ax-shadow-lg, 0 10px 30px rgba(0,0,0,0.15));
        display: none;
        z-index: 9999;
    }

    .notif-item {
        padding: 12px 14px;
        border-bottom: 1px solid var(--ax-gray-100, #eee);
        transition: background-color 180ms ease;
    }

    .notif-item.unread {
        background: var(--ax-primary-50, #eef4ff);
    }

    .notif-title {
        font-weight: 600;
        font-size: 14px;
        color: var(--ax-gray-900, #171b26);
    }

    .notif-text {
        font-size: 14px;
        color: var(--ax-text-muted, #5c6579);
    }

    .notif-meta {
        font-size: 12px;
        color: var(--ax-gray-400, #aeb7c7);
        margin-top: 2px;
    }

    #sidebarBurger {
        display: none;
    }

    .notif-badge-primary {
        position: absolute;
        top: -2px;
        right: -2px;
        font-size: 10px;
        min-width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .notif-badge-danger {
        position: absolute;
        bottom: -2px;
        right: -2px;
        font-size: 10px;
        min-width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--ax-surface, #ffffff);
    }

    .notif-badge-warning {
        position: absolute;
        bottom: -2px;
        left: -2px;
        font-size: 10px;
        min-width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--ax-surface, #ffffff);
    }

    .notif-badge-info {
        position: absolute;
        top: -2px;
        left: -2px;
        font-size: 10px;
        min-width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--ax-surface, #ffffff);
    }

    .notif-group-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 16px;
        border: none;
        border-bottom: 1px solid var(--ax-gray-100, #eee);
        background: transparent;
        text-align: left;
        font-size: 14px;
        transition: background-color 180ms ease;
    }
    .notif-group-row:hover {
        background: var(--ax-gray-100, #eef1f6);
    }

    .notif-detail-header {
        display: flex;
        align-items: center;
        padding: 10px 14px;
        border-bottom: 1px solid var(--ax-gray-100, #eee);
        position: sticky;
        top: 0;
        background: var(--ax-surface, #fff);
        z-index: 1;
    }
    .notif-detail-header button {
        color: var(--ax-gray-900, #171b26);
        font-size: 1.1rem;
        line-height: 1;
    }

    @media (max-width: 991.98px) {
        #sidebarBurger {
            display: flex;
        }
        .ax-logo-text {
            font-size: 1.15rem;
        }
        .ax-logo-img {
            height: 36px;
        }
    }
</style>

<nav class="navbar ax-navbar">
    <div class="container d-flex justify-content-between align-items-center">

        <a href="{{ $logoLink }}" class="ax-logo-link d-flex align-items-center text-decoration-none">
            <img src="/images/logo.png" class="ax-logo-img me-2" alt="{{ config('app.name') }}">
            <span class="ax-logo-text">{{ config('app.name') }}</span>
        </a>

        <div class="d-flex align-items-center gap-1">

            @if ($role === 'adviser' || $role === 'admin')

                @php
                    $notifGroups = [];

                    if ($unreadCount > 0) {
                        $notifGroups[] = [
                            'key' => 'feedback',
                            'label' => 'Новые отзывы',
                            'count' => $unreadCount,
                            'textClass' => 'text-primary',
                            'badgeClass' => 'bg-primary',
                        ];
                    }

                    if (! empty($absenceNotifications)) {
                        $notifGroups[] = [
                            'key' => 'absences',
                            'label' => 'Пропуски занятий',
                            'count' => count($absenceNotifications),
                            'textClass' => 'text-danger',
                            'badgeClass' => 'bg-danger',
                        ];
                    }

                    if (! empty($delayNotifications)) {
                        $notifGroups[] = [
                            'key' => 'delays',
                            'label' => 'Опоздания',
                            'count' => count($delayNotifications),
                            'textClass' => 'text-info',
                            'badgeClass' => 'bg-info text-dark',
                        ];
                    }

                    if (! empty($paymentReminders)) {
                        $notifGroups[] = [
                            'key' => 'payments',
                            'label' => 'Напоминания об оплате',
                            'count' => count($paymentReminders),
                            'textClass' => 'text-warning',
                            'badgeClass' => 'bg-warning text-dark',
                        ];
                    }
                @endphp

                <div class="notif-wrapper">

                    <button id="notifBtn" class="btn ax-icon-btn position-relative p-0 border-0 bg-transparent" aria-label="Уведомления">

                        <i class="bi bi-bell fs-4 text-primary"></i>

                        @if (count($notifGroups) > 0)
                            <span class="badge bg-primary notif-badge-primary">{{ count($notifGroups) }}</span>
                        @endif

                    </button>

                    <div id="notifDropdown" class="notif-dropdown">

                        <div id="notifGroupList">
                            @if (empty($notifGroups))
                                <div class="p-3 text-muted">Нет уведомлений</div>
                            @else
                                @foreach ($notifGroups as $g)
                                    <button type="button" class="notif-group-row" data-group="{{ $g['key'] }}" data-label="{{ $g['label'] }}">
                                        <span class="{{ $g['textClass'] }} fw-semibold">{{ $g['label'] }}</span>
                                        <span class="badge {{ $g['badgeClass'] }} rounded-pill">{{ $g['count'] }}</span>
                                    </button>
                                @endforeach
                            @endif
                        </div>

                        <div id="notifGroupDetail" class="d-none">

                            <div class="notif-detail-header">
                                <button type="button" id="notifBackBtn" class="btn btn-sm p-0 border-0 bg-transparent me-2" aria-label="Назад">
                                    <i class="bi bi-arrow-left"></i>
                                </button>
                                <span id="notifDetailTitle" class="fw-semibold"></span>
                            </div>

                            <div class="notif-detail-body" data-group="feedback">
                                @if (empty($notifications))
                                    <div class="p-3 text-muted">Нет уведомлений</div>
                                @else
                                    @foreach ($notifications as $n)
                                        <a href="feedbacks.php" class="text-decoration-none text-dark">
                                            <div class="notif-item {{ $n->is_read ? '' : 'unread' }}">
                                                <div class="notif-title">{{ $n->last_name }} {{ $n->first_name }}</div>
                                                <div class="notif-text">{{ $n->message }}</div>
                                                <div class="notif-meta">
                                                    {{ $n->group_name }} &bull; {{ \Illuminate\Support\Carbon::parse($n->created_at)->format('d.m H:i') }}
                                                </div>
                                            </div>
                                        </a>
                                    @endforeach
                                @endif
                            </div>

                            <div class="notif-detail-body" data-group="absences">
                                @foreach ($absenceNotifications as $a)
                                    <a href="students/student_profile.php?id={{ $a->student_id }}" class="text-decoration-none text-dark">
                                        <div class="notif-item unread">
                                            <div class="notif-title">{{ $a->last_name }} {{ $a->first_name }}</div>
                                            <div class="notif-text">Более 2 пропусков</div>
                                            <div class="notif-meta">{{ $a->group_name }} &bull; Пропусков: {{ $a->missed_count }}</div>
                                        </div>
                                    </a>
                                @endforeach
                            </div>

                            <div class="notif-detail-body" data-group="delays">
                                @foreach ($delayNotifications as $d)
                                    <a href="/student_admin_info.php?student_id={{ (int) $d->student_id }}" class="text-decoration-none text-dark">
                                        <div class="notif-item unread">
                                            <div class="notif-title">{{ $d->last_name }} {{ $d->first_name }}</div>
                                            <div class="notif-text">Более 2 опозданий</div>
                                            <div class="notif-meta">{{ $d->group_name }} &bull; Опозданий: {{ $d->late_count }}</div>
                                        </div>
                                    </a>
                                @endforeach
                            </div>

                            <div class="notif-detail-body" data-group="payments">
                                @foreach ($paymentReminders as $r)
                                    <a href="/student_admin_info.php?student_id={{ (int) $r->student_id }}" class="text-decoration-none text-dark">
                                        <div class="notif-item unread">
                                            <div class="notif-title">{{ $r->last_name }} {{ $r->first_name }}</div>
                                            <div class="notif-text">{{ $paymentReminderLabels[$r->reminder_type] ?? $r->reminder_type }}</div>
                                            <div class="notif-meta">{{ \Illuminate\Support\Carbon::parse($r->due_date)->format('d.m.Y') }}</div>
                                        </div>
                                    </a>
                                @endforeach
                            </div>

                        </div>

                        <a href="/notifications.php" class="d-block text-center py-2 text-decoration-none fw-semibold text-primary" style="font-size: 13px; border-top: 1px solid var(--ax-gray-100, #eee);">
                            Все уведомления
                        </a>

                    </div>
                </div>

            @endif

            @php($theme = Auth::user()?->theme ?? 'light')
            <button
                type="button"
                id="themeToggle"
                class="btn ax-icon-btn p-0 border-0 bg-transparent"
                aria-label="{{ $theme === 'dark' ? 'Светлая тема' : 'Тёмная тема' }}"
            >
                <i class="bi {{ $theme === 'dark' ? 'bi-sun-fill' : 'bi-moon-stars' }} fs-4"></i>
            </button>

            <a href="/logout.php" class="btn ax-icon-btn p-0 border-0" aria-label="Выйти">
                <i class="bi bi-box-arrow-right fs-4 text-danger"></i>
            </a>

            <button class="btn ax-icon-btn p-0 border-0" id="sidebarBurger" aria-label="Меню">
                <i class="bi bi-list fs-2"></i>
            </button>

        </div>

    </div>
</nav>

<script>
    const btn = document.getElementById('notifBtn');
    const dropdown = document.getElementById('notifDropdown');
    const groupList = document.getElementById('notifGroupList');
    const groupDetail = document.getElementById('notifGroupDetail');
    const detailTitle = document.getElementById('notifDetailTitle');
    const backBtn = document.getElementById('notifBackBtn');

    function showGroupList() {
        if (groupDetail) groupDetail.classList.add('d-none');
        if (groupList) groupList.classList.remove('d-none');
    }

    if (btn) {
        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            const opening = dropdown.style.display !== 'block';
            dropdown.style.display = opening ? 'block' : 'none';
            if (opening) {
                showGroupList();
            }
        });

        document.addEventListener('click', () => {
            dropdown.style.display = 'none';
        });

        dropdown.addEventListener('click', (e) => {
            e.stopPropagation();
        });
    }

    if (groupList) {
        groupList.querySelectorAll('.notif-group-row').forEach((row) => {
            row.addEventListener('click', () => {
                const key = row.dataset.group;

                groupDetail.querySelectorAll('.notif-detail-body').forEach((body) => {
                    body.classList.toggle('d-none', body.dataset.group !== key);
                });

                detailTitle.textContent = row.dataset.label;
                groupList.classList.add('d-none');
                groupDetail.classList.remove('d-none');
            });
        });
    }

    if (backBtn) {
        backBtn.addEventListener('click', showGroupList);
    }

    const themeToggle = document.getElementById('themeToggle');

    if (themeToggle) {
        themeToggle.addEventListener('click', () => {
            const html = document.documentElement;
            const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
            const icon = themeToggle.querySelector('i');

            html.setAttribute('data-theme', next);
            localStorage.setItem('theme', next);
            icon.className = next === 'dark' ? 'bi bi-sun-fill fs-4' : 'bi bi-moon-stars fs-4';
            themeToggle.setAttribute('aria-label', next === 'dark' ? 'Светлая тема' : 'Тёмная тема');

            fetch('/set_theme.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: 'theme=' + next
            });
        });
    }
</script>