@php
$user = auth()->user();
$activeNav = request()->route()?->getName() ?? '';
$effectiveDivisiId = $user ? $user->getEffectiveDivisiId() : null;

// Menggunakan data notifikasi yang telah dimemoize per-request dari NavigationNotificationService
$unreadChat = $unreadChat ?? 0;
$unreadPelamarCount = $unreadPelamarCount ?? 0;
$unreadPelamarList = $unreadPelamarList ?? collect();
$pendingApprovalDisposisiCount = $pendingApprovalDisposisiCount ?? 0;
$pendingApprovalDisposisiList = $pendingApprovalDisposisiList ?? collect();
$unreadDisposisiCount = $unreadDisposisiCount ?? 0;
$unreadDisposisiList = $unreadDisposisiList ?? collect();
$unreadSuratCount = $unreadSuratCount ?? 0;
$unreadSuratList = $unreadSuratList ?? collect();
$unreadMonitoringCount = $unreadMonitoringCount ?? 0;
$unreadMonitoringList = $unreadMonitoringList ?? collect();
$unreadBatalPenerimaCount = $unreadBatalPenerimaCount ?? 0;
$unreadBatalPenerimaList = $unreadBatalPenerimaList ?? collect();
$unreadBatalPengirimCount = $unreadBatalPengirimCount ?? 0;
$unreadBatalPengirimList = $unreadBatalPengirimList ?? collect();

$totalNotifikasi = $totalNotifCount ?? ($unreadPelamarCount + $pendingApprovalDisposisiCount + $unreadDisposisiCount + $unreadSuratCount + $unreadMonitoringCount + $unreadBatalPenerimaCount + $unreadBatalPengirimCount);

// Berkas surat untuk chat dilampirkan secara ringan (fallback aman)
$suratListChat = $suratListChat ?? collect();
@endphp

<style>
    /* Wallpaper Chat ala WA */
    #chatMessages {
        background-color: #efeae2;
        background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
        /* Pattern tipis opsional */
    }

    /* Bubble Chat Base */
    .message {
        display: flex;
        flex-direction: column;
        margin-bottom: 15px;
        max-width: 85%;
    }

    /* Pengirim (Kanan - Hijau WA) */
    .message.outgoing {
        align-self: flex-end;
        align-items: flex-end;
        margin-left: auto;
    }

    .message.outgoing .chat-text {
        background-color: #d9fdd3;
        border-top-right-radius: 0;
    }

    /* Penerima (Kiri - Putih) */
    .message.incoming {
        align-self: flex-start;
        align-items: flex-start;
        margin-right: auto;
    }

    .message.incoming .chat-text {
        background-color: #ffffff;
        border-top-left-radius: 0;
    }

    .chat-text {
        padding: 8px 14px;
        border-radius: 12px;
        display: inline-block;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        font-size: 0.95rem;
        color: #111b21;
    }

    .message-header {
        font-size: 0.7rem;
        margin-bottom: 4px;
        color: #667781;
    }

    /* =====================================================
       DARK MODE STYLES FOR CHAT DISPOSISI MODAL (WA DARK THEME)
       ===================================================== */
    [data-bs-theme="dark"] #chatDisposisiModal .modal-content,
    body.dark-mode #chatDisposisiModal .modal-content {
        background-color: #111b21 !important;
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] #chatMessages,
    body.dark-mode #chatMessages {
        background-color: #0b141a !important;
        background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    }

    /* Font Gelembung Pesan (Incoming & Outgoing) */
    [data-bs-theme="dark"] .message.incoming .chat-text,
    body.dark-mode .message.incoming .chat-text {
        background-color: #202c33 !important;
        color: #e9edef !important;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    [data-bs-theme="dark"] .message.outgoing .chat-text,
    body.dark-mode .message.outgoing .chat-text {
        background-color: #005c4b !important;
        color: #e9edef !important;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    [data-bs-theme="dark"] .message .chat-text,
    [data-bs-theme="dark"] .message .chat-text *,
    body.dark-mode .message .chat-text,
    body.dark-mode .message .chat-text * {
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] .message-header,
    [data-bs-theme="dark"] .message-header small,
    [data-bs-theme="dark"] .message-header .text-muted,
    body.dark-mode .message-header,
    body.dark-mode .message-header small,
    body.dark-mode .message-header .text-muted {
        color: #8696a0 !important;
    }

    /* Kartu Surat di Dalam Chat Bubble */
    .chat-surat-card {
        background: rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        padding: 8px 12px;
    }
    .chat-surat-card .surat-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #111b21;
    }
    .chat-surat-card .surat-perihal {
        font-size: 0.78rem;
        color: #54656f;
        max-width: 260px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    [data-bs-theme="dark"] .chat-surat-card,
    body.dark-mode .chat-surat-card {
        background: rgba(0, 0, 0, 0.25) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    [data-bs-theme="dark"] .chat-surat-card .surat-title,
    body.dark-mode .chat-surat-card .surat-title {
        color: #ffffff !important;
    }

    [data-bs-theme="dark"] .chat-surat-card .surat-perihal,
    body.dark-mode .chat-surat-card .surat-perihal {
        color: #cbd5e1 !important;
    }

    /* Header Modal */
    [data-bs-theme="dark"] #chatDisposisiModal .modal-header,
    body.dark-mode #chatDisposisiModal .modal-header {
        background-color: #111b21 !important;
        border-color: #222d34 !important;
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] #chatDisposisiModal .modal-header .modal-title,
    body.dark-mode #chatDisposisiModal .modal-header .modal-title {
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] #chatDisposisiModal .modal-header .btn-close,
    body.dark-mode #chatDisposisiModal .modal-header .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    /* Sidebar Kontak Chat */
    [data-bs-theme="dark"] .chat-sidebar-col,
    body.dark-mode .chat-sidebar-col {
        background-color: #111b21 !important;
        border-color: #222d34 !important;
    }

    [data-bs-theme="dark"] .chat-sidebar-col .p-3,
    body.dark-mode .chat-sidebar-col .p-3 {
        border-color: #222d34 !important;
    }

    [data-bs-theme="dark"] .chat-user-list .user-chat,
    body.dark-mode .chat-user-list .user-chat {
        background-color: #111b21 !important;
        color: #e9edef !important;
        border-color: #222d34 !important;
    }

    [data-bs-theme="dark"] .chat-user-list .user-chat .text-dark,
    body.dark-mode .chat-user-list .user-chat .text-dark {
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] .chat-user-list .user-chat .text-muted,
    body.dark-mode .chat-user-list .user-chat .text-muted {
        color: #8696a0 !important;
    }

    [data-bs-theme="dark"] .chat-user-list .user-chat:hover,
    body.dark-mode .chat-user-list .user-chat:hover {
        background-color: #202c33 !important;
    }

    [data-bs-theme="dark"] .chat-user-list .user-chat.active,
    body.dark-mode .chat-user-list .user-chat.active {
        background-color: #2a3942 !important;
        border-left: 4px solid #00a884 !important;
    }

    [data-bs-theme="dark"] .chat-user-list .user-chat.active .text-dark,
    body.dark-mode .chat-user-list .user-chat.active .text-dark {
        color: #ffffff !important;
    }

    /* Welcome Empty State */
    [data-bs-theme="dark"] #chatWelcomeState,
    body.dark-mode #chatWelcomeState {
        background-color: #0b141a !important;
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] #chatWelcomeState h3,
    [data-bs-theme="dark"] #chatWelcomeState .text-dark,
    body.dark-mode #chatWelcomeState h3,
    body.dark-mode #chatWelcomeState .text-dark {
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] #chatWelcomeState p,
    [data-bs-theme="dark"] #chatWelcomeState .text-muted,
    body.dark-mode #chatWelcomeState p,
    body.dark-mode #chatWelcomeState .text-muted {
        color: #8696a0 !important;
    }

    /* Header Ruang Chat Aktif */
    [data-bs-theme="dark"] .chat-header,
    body.dark-mode .chat-header {
        background-color: #202c33 !important;
        border-color: #222d34 !important;
    }

    [data-bs-theme="dark"] .chat-header #chatNama,
    [data-bs-theme="dark"] .chat-header .text-dark,
    body.dark-mode .chat-header #chatNama,
    body.dark-mode .chat-header .text-dark {
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] .chat-header #chatRole,
    [data-bs-theme="dark"] .chat-header .text-muted,
    body.dark-mode .chat-header #chatRole,
    body.dark-mode .chat-header .text-muted {
        color: #8696a0 !important;
    }

    [data-bs-theme="dark"] .chat-header #btnBackChat,
    body.dark-mode .chat-header #btnBackChat {
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] .chat-header .input-group,
    body.dark-mode .chat-header .input-group {
        background-color: #111b21 !important;
        border-color: #2a3942 !important;
    }

    [data-bs-theme="dark"] .chat-header .input-group-text,
    body.dark-mode .chat-header .input-group-text {
        background-color: transparent !important;
        color: #8696a0 !important;
    }

    [data-bs-theme="dark"] .chat-header #searchChatMessage,
    body.dark-mode .chat-header #searchChatMessage {
        background-color: transparent !important;
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] .chat-header #searchChatMessage::placeholder,
    body.dark-mode .chat-header #searchChatMessage::placeholder {
        color: #8696a0 !important;
    }

    /* Footer & Input Pesan */
    [data-bs-theme="dark"] .chat-footer,
    body.dark-mode .chat-footer {
        background-color: #202c33 !important;
        border-color: #222d34 !important;
    }

    [data-bs-theme="dark"] #chatDisposisiModal input.form-control,
    [data-bs-theme="dark"] #chatDisposisiModal .input-group-text,
    body.dark-mode #chatDisposisiModal input.form-control,
    body.dark-mode #chatDisposisiModal .input-group-text {
        background-color: #2a3942 !important;
        color: #e9edef !important;
        border-color: transparent !important;
    }

    [data-bs-theme="dark"] #chatDisposisiModal input.form-control::placeholder,
    body.dark-mode #chatDisposisiModal input.form-control::placeholder {
        color: #8696a0 !important;
    }

    /* Attachment Drawer */
    [data-bs-theme="dark"] #attachDrawer,
    body.dark-mode #attachDrawer {
        background-color: #111b21 !important;
        border: 1px solid #2a3942 !important;
    }

    [data-bs-theme="dark"] #attachDrawer .card-header,
    body.dark-mode #attachDrawer .card-header {
        background-color: #202c33 !important;
        border-color: #222d34 !important;
    }

    [data-bs-theme="dark"] #attachDrawer .card-header span,
    body.dark-mode #attachDrawer .card-header span {
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] #attachDrawer .card-body,
    body.dark-mode #attachDrawer .card-body {
        background-color: #111b21 !important;
    }

    [data-bs-theme="dark"] #attachDrawer .input-group,
    body.dark-mode #attachDrawer .input-group {
        background-color: #202c33 !important;
        border-color: #2a3942 !important;
    }

    [data-bs-theme="dark"] #searchSuratInline,
    body.dark-mode #searchSuratInline {
        background-color: transparent !important;
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] #searchSuratInline::placeholder,
    body.dark-mode #searchSuratInline::placeholder {
        color: #8696a0 !important;
    }

    [data-bs-theme="dark"] .doc-select-card,
    body.dark-mode .doc-select-card {
        background-color: #202c33 !important;
        border: 1px solid #2a3942 !important;
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] .doc-select-card .text-dark,
    body.dark-mode .doc-select-card .text-dark {
        color: #e9edef !important;
    }

    [data-bs-theme="dark"] .doc-select-card .text-muted,
    body.dark-mode .doc-select-card .text-muted {
        color: #8696a0 !important;
    }

    [data-bs-theme="dark"] .chat-logo,
    body.dark-mode .chat-logo {
        background-color: rgba(13, 110, 253, 0.2) !important;
        color: #3d8bfd !important;
        border: 1px solid rgba(13, 110, 253, 0.3) !important;
    }

    [data-bs-theme="dark"] #chatWelcomeState .bg-primary-subtle,
    body.dark-mode #chatWelcomeState .bg-primary-subtle {
        background-color: rgba(13, 110, 253, 0.2) !important;
    }

    [data-bs-theme="dark"] #chatWelcomeState .bi-chat-square-quote-fill,
    body.dark-mode #chatWelcomeState .bi-chat-square-quote-fill {
        color: #3d8bfd !important;
    }

    /* Modal Preview PDF Surat */
    [data-bs-theme="dark"] #modalPreviewSurat .modal-content,
    body.dark-mode #modalPreviewSurat .modal-content {
        background-color: #1e293b !important;
        color: #f8fafc !important;
    }
    [data-bs-theme="dark"] #modalPreviewSurat .modal-header,
    body.dark-mode #modalPreviewSurat .modal-header {
        background-color: #0f172a !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }
    [data-bs-theme="dark"] #modalPreviewSurat strong,
    body.dark-mode #modalPreviewSurat strong {
        color: #94a3b8 !important;
    }
    [data-bs-theme="dark"] #modalPreviewSurat #previewNomor,
    [data-bs-theme="dark"] #modalPreviewSurat #previewTanggal,
    [data-bs-theme="dark"] #modalPreviewSurat #previewStatus,
    [data-bs-theme="dark"] #modalPreviewSurat #previewPerihal,
    body.dark-mode #modalPreviewSurat #previewNomor,
    body.dark-mode #modalPreviewSurat #previewTanggal,
    body.dark-mode #modalPreviewSurat #previewStatus,
    body.dark-mode #modalPreviewSurat #previewPerihal {
        color: #f8fafc !important;
    }

    /* Responsif Mobile (Toggle View & Fullscreen ala WA) */
    .btn-wa-send {
        width: 44px;
        height: 44px;
        border-radius: 50% !important;
        background: #00a884 !important;
        color: #ffffff !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
        transition: transform 0.15s ease-in-out;
    }
    .btn-wa-send:active {
        transform: scale(0.92);
    }

    .btn-wa-attach {
        width: 44px;
        height: 44px;
        border-radius: 50% !important;
        background: #f0f2f5 !important;
        color: #54656f !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
        transition: transform 0.15s ease-in-out, background-color 0.2s ease;
    }
    .btn-wa-attach:hover {
        background: #e4e6eb !important;
        color: #111b21 !important;
    }
    .btn-wa-attach:active {
        transform: scale(0.92);
    }

    [data-bs-theme="dark"] .btn-wa-attach,
    body.dark-mode .btn-wa-attach {
        background: #2a3942 !important;
        color: #e9edef !important;
        border-color: transparent !important;
    }
    [data-bs-theme="dark"] .btn-wa-attach:hover,
    body.dark-mode .btn-wa-attach:hover {
        background: #3b4a54 !important;
    }

    /* Chat Disposisi Search Pill Styling */
    .chat-search-container {
        background-color: #ffffff;
    }
    .chat-search-pill {
        background-color: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 50rem !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        height: 42px !important;
        min-height: 42px !important;
        overflow: hidden !important;
        padding: 0 4px !important;
        transition: all 0.2s ease;
    }
    .chat-search-pill:focus-within {
        border-color: #3b82f6 !important;
        background-color: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    }
    .chat-search-pill .input-group-text {
        background: transparent !important;
        border: none !important;
        color: #64748b !important;
        font-size: 0.95rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.25rem !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
    #searchChatUser {
        height: 100% !important;
        min-height: 100% !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 0.9rem !important;
        color: #1e293b !important;
        padding-left: 0.35rem !important;
        padding-right: 0.75rem !important;
        border-radius: 0 !important;
    }
    [data-bs-theme="dark"] .chat-search-container,
    body.dark-mode .chat-search-container {
        background-color: #1e293b !important;
    }
    [data-bs-theme="dark"] .chat-search-pill,
    body.dark-mode .chat-search-pill {
        background-color: #0f172a !important;
        border-color: #334155 !important;
    }
    [data-bs-theme="dark"] #searchChatUser,
    body.dark-mode #searchChatUser {
        color: #f8fafc !important;
    }
    [data-bs-theme="dark"] .chat-search-pill .input-group-text,
    body.dark-mode .chat-search-pill .input-group-text {
        color: #94a3b8 !important;
    }

    #chatDisposisiModal .modal-dialog {
        margin: 0;
        max-width: 100% !important;
        width: 100vw !important;
        height: 100vh !important;
    }
    #chatDisposisiModal .modal-content {
        height: 100vh !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #chatDisposisiModal .modal-body {
        flex: 1 1 auto !important;
        height: calc(100vh - 65px) !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    #chatWrapper {
        height: 100% !important;
    }

    @media (max-width: 991.98px) {
        .chat-sidebar-col {
            width: 100% !important;
            height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
        }
        .chat-sidebar-col .chat-user-list {
            flex: 1 1 auto !important;
            overflow-y: auto !important;
        }
        .chat-main-col {
            width: 100% !important;
            height: 100% !important;
            display: none !important;
            flex-direction: column !important;
        }

        #chatWrapper.show-chat .chat-sidebar-col {
            display: none !important;
        }
        #chatWrapper.show-chat .chat-main-col {
            display: flex !important;
        }
    }

    @media (min-width: 992px) {
        .chat-sidebar-col {
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
            max-height: 100% !important;
        }

        .chat-sidebar-col .chat-user-list {
            flex: 1 1 auto !important;
            height: calc(100% - 65px) !important;
            overflow-y: auto !important;
        }

        .chat-main {
            height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
        }

        .chat-sidebar {
            height: 100% !important;
            overflow-y: auto !important;
        }
    }


</style>

<nav class="navbar navbar-expand-lg top-navbar">
    <div class="container-fluid px-3">

        <!-- LEFT -->
        <div class="d-flex align-items-center">

            <!-- Tombol Collapse Desktop -->
            <button id="toggleSidebar" class="btn btn-light border d-none d-lg-flex me-2" title="Toggle Sidebar">
                <i class="bi bi-list"></i>
            </button>

            <!-- Tombol Mobile Menu -->
            <button class="btn btn-light nav-mobile-toggle d-lg-none me-2" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" title="Buka Menu" aria-label="Buka Menu">
                <i class="bi bi-list fs-5"></i>
            </button>

            <!-- Mobile Brand Title & Identity -->
            <div class="d-lg-none d-flex align-items-center gap-2 ms-1">
                <img src="{{ asset('img/logo.png') }}" alt="Logo" width="26" height="26" class="rounded flex-shrink-0" style="object-fit: contain;">
                <span class="fw-bold fs-7 tracking-tight mb-0 nav-mobile-brand">E-Surat</span>
            </div>

        </div>

        <!-- CENTER CLOCK -->
        <div class="navbar-center-clock text-center">
            <div id="digitalClock" class="clock-time"></div>
            <div id="digitalDate" class="clock-date"></div>
        </div>


        <!-- RIGHT ACTIONS -->
        <div class="d-flex align-items-center ms-auto gap-2 nav-actions-wrapper">

            <!-- Dark Mode Toggle Button -->
            <button id="themeToggleBtn" class="btn btn-light rounded-circle nav-action-btn p-0" type="button" title="Ganti Mode Gelap/Terang" aria-label="Toggle Mode Gelap/Terang">
                <i id="themeToggleIcon" class="bi bi-moon-stars"></i>
            </button>

            <!-- Panduan -->
            <button class="btn btn-light rounded-circle nav-action-btn p-0" data-bs-toggle="modal" data-bs-target="#modalPanduan" title="Panduan Sistem">
                <i class="bi bi-question-lg"></i>
            </button>

            <!-- Notifikasi Lonceng -->
            <button class="btn btn-light position-relative rounded-circle nav-action-btn p-0" data-bs-toggle="modal" data-bs-target="#modalNotifikasi" title="Pusat Notifikasi">
                <i class="bi bi-bell"></i>
                @if ($totalNotifikasi > 0)
                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" id="navbarNotifBadge" style="font-size: 0.65rem; padding: 0.25em 0.4em;">
                    {{ $totalNotifikasi > 99 ? '99+' : $totalNotifikasi }}
                </span>
                @endif
            </button>

            {{-- Chat Disposisi (Disembunyikan sementara sesuai permintaan karena sudah ada menu disposisi) --}}
            {{--
            <button class="btn btn-light position-relative rounded-circle nav-action-btn p-0" data-bs-toggle="modal" data-bs-target="#chatDisposisiModal" title="Chat Disposisi Internal">
                <i class="bi bi-chat-dots"></i>
                @if ($unreadChat > 0)
                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="font-size: 0.65rem; padding: 0.25em 0.4em;">
                    {{ $unreadChat }}
                </span>
                @endif
            </button>
            --}}

            <!-- Profil -->
            <div class="dropdown">
                <a href="#" class="d-flex align-items-center text-dark text-decoration-none" data-bs-toggle="dropdown">
                    <img src="{{ $user->foto_url }}" class="rounded-circle border border-2 border-primary nav-action-btn p-0" style="object-fit:cover;" alt="Profile">
                    <span class="fw-semibold d-none d-md-inline ms-1">
                        {{ $user->divisi?->nama_divisi }}
                    </span>
                </a>

                <div class="dropdown-menu dropdown-menu-end shadow border-0 rounded-4 p-0 overflow-hidden" style="width:280px;">

                    {{-- Header --}}
                    <div class="bg-primary text-white text-center py-4">

                        <img src="{{ $user->foto_url }}" class="rounded-circle border border-3 border-white shadow" width="85" height="85" style="object-fit:cover;">

                        <h6 class="mt-3 mb-1 fw-bold">
                            {{ $user->name }}
                        </h6>

                        <small>
                            {{ $user->email }}
                        </small>

                        <div class="mt-2">

                            <span class="badge bg-light text-primary">

                                {{ $user->divisi?->nama_divisi }}

                            </span>

                        </div>

                    </div>

                    {{-- Menu --}}
                    <div class="py-2">

                        <a href="{{ route('profil') }}" class="dropdown-item py-2">

                            <i class="bi bi-person-circle me-2 text-primary"></i>

                            Profil Saya

                        </a>

                        <a href="{{ route('profil') }}#password" class="dropdown-item py-2">

                            <i class="bi bi-key-fill me-2 text-warning"></i>

                            Ubah Password

                        </a>

                        <button type="button" class="dropdown-item py-2 pwa-install-btn text-success fw-semibold" style="display:none;">

                            <i class="bi bi-download me-2 text-success fs-6"></i>

                            Install Aplikasi (APK / PWA)

                        </button>

                    </div>

                    <div class="dropdown-divider m-0"></div>

                    <a href="#" class="dropdown-item text-danger py-3" data-bs-toggle="modal" data-bs-target="#logoutModal">
                        <i class="bi bi-box-arrow-right me-2"></i>
                        Logout
                    </a>

                </div>

            </div>

        </div>

    </div>
</nav>


{{-- modal notifikasi --}}
<div class="modal fade" id="modalNotifikasi" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg rounded-0 overflow-hidden">
            <div class="modal-header bg-white border-bottom py-3">
                <div class="d-flex align-items-center gap-2">
                    @if($user && $user->canManagePelamar())
                        <div class="bg-danger bg-opacity-10 text-danger p-2 rounded-circle">
                            <i class="bi bi-bell-fill fs-5"></i>
                        </div>
                        <div>
                            <h6 class="modal-title fw-bold text-dark mb-0">Pusat Notifikasi</h6>
                            <small class="text-muted fs-8">Informasi aktivitas & berkas masuk terbaru</small>
                        </div>
                    @else
                        <div class="bg-primary bg-opacity-10 text-primary p-2 rounded-circle">
                            <i class="bi bi-bell-fill fs-5"></i>
                        </div>
                        <div>
                            <h6 class="modal-title fw-bold text-dark mb-0">Pusat Notifikasi</h6>
                            <small class="text-muted fs-8">Informasi disposisi surat masuk perlu tindakan</small>
                        </div>
                    @endif
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                {{-- NOTIFIKASI DISPOSISI DIBATALKAN ADMIN (Untuk Divisi Penerima) --}}
                @if($unreadBatalPenerimaCount > 0)
                    <div class="p-3 bg-danger-subtle border-bottom d-flex justify-content-between align-items-center">
                        <span class="fw-bold text-danger fs-7">
                            <i class="bi bi-exclamation-triangle-fill text-danger me-1"></i> Disposisi Dibatalkan Admin ({{ $unreadBatalPenerimaCount }})
                        </span>
                        <span class="badge bg-danger text-white fs-9">Ditarik Admin</span>
                    </div>
                    <div class="list-group list-group-flush">
                        @foreach($unreadBatalPenerimaList as $bDisp)
                            @php
                                $bSurat = $bDisp->surat;
                                $bAsal = $bSurat?->divisi?->nama_divisi ?? 'Unit Pengirim';
                            @endphp
                            <a href="{{ route('riwayat-disposisi.index', ['tab' => 'masuk', 'search' => $bSurat?->nomor_surat]) }}" class="list-group-item list-group-item-action p-3">
                                <div class="d-flex justify-content-between align-items-start mb-1">
                                    <span class="fw-bold text-dark fs-7 text-truncate me-2" style="max-width: 240px;" title="{{ $bSurat?->perihal }}">
                                        {{ $bSurat?->perihal ?? 'Surat Masuk Dibatalkan' }}
                                    </span>
                                    <span class="badge bg-danger text-white fs-9 flex-shrink-0">Dibatalkan Admin</span>
                                </div>
                                <div class="text-muted fs-8 mb-1">
                                    <i class="bi bi-building me-1 text-secondary"></i> Pengirim Asal: <strong class="text-secondary">{{ $bAsal }}</strong>
                                </div>
                                <div class="small text-danger mb-1 bg-danger-subtle p-2 rounded border border-danger-subtle" style="font-size: 0.78rem;">
                                    <i class="bi bi-info-circle-fill me-1"></i><strong>Alasan Admin:</strong> {{ $bDisp->catatan ?: 'Dibatalkan/Ditolak oleh Admin' }}
                                </div>
                                <div class="d-flex justify-content-between align-items-center mt-1">
                                    <small class="text-muted fs-9 font-monospace"><i class="bi bi-envelope me-1"></i>{{ $bSurat?->nomor_surat ?? '-' }}</small>
                                    <small class="text-secondary fs-9"><i class="bi bi-clock me-1"></i>{{ $bDisp->admin_approved_at ? $bDisp->admin_approved_at->diffForHumans() : ($bDisp->updated_at ? $bDisp->updated_at->diffForHumans() : '-') }}</small>
                                </div>
                            </a>
                        @endforeach
                    </div>
                    <div class="p-2 text-center bg-light border-top">
                        <a href="{{ route('riwayat-disposisi.index', ['tab' => 'masuk']) }}" class="btn btn-outline-danger btn-sm w-100 rounded-2 fs-8 fw-semibold">
                            Buka Riwayat Disposisi Masuk ({{ $unreadBatalPenerimaCount }} Dibatalkan)
                        </a>
                    </div>
                @endif

                {{-- NOTIFIKASI DISPOSISI DITOLAK ADMIN (Untuk Divisi Pengirim) --}}
                @if($unreadBatalPengirimCount > 0)
                    <div class="p-3 bg-danger-subtle border-bottom d-flex justify-content-between align-items-center">
                        <span class="fw-bold text-danger fs-7">
                            <i class="bi bi-x-circle-fill text-danger me-1"></i> Disposisi Ditolak Admin ({{ $unreadBatalPengirimCount }})
                        </span>
                        <span class="badge bg-danger text-white fs-9">Ditolak Admin</span>
                    </div>
                    <div class="list-group list-group-flush">
                        @foreach($unreadBatalPengirimList as $pDisp)
                            @php
                                $pSurat = $pDisp->surat;
                                $pTujuan = $pDisp->user?->divisi?->nama_divisi ?? ($pDisp->user?->name ?? 'Unit Tujuan');
                            @endphp
                            <a href="{{ route('monitoring.show', $pSurat->id) }}" class="list-group-item list-group-item-action p-3">
                                <div class="d-flex justify-content-between align-items-start mb-1">
                                    <span class="fw-bold text-dark fs-7 text-truncate me-2" style="max-width: 240px;" title="{{ $pSurat?->perihal }}">
                                        {{ $pSurat?->perihal ?? 'Disposisi Ditolak' }}
                                    </span>
                                    <span class="badge bg-danger text-white fs-9 flex-shrink-0">Ditolak Admin</span>
                                </div>
                                <div class="text-muted fs-8 mb-1">
                                    <i class="bi bi-arrow-right-circle me-1 text-secondary"></i> Tujuan Disposisi: <strong class="text-secondary">{{ $pTujuan }}</strong>
                                </div>
                                <div class="small text-danger mb-1 bg-danger-subtle p-2 rounded border border-danger-subtle" style="font-size: 0.78rem;">
                                    <i class="bi bi-info-circle-fill me-1"></i><strong>Alasan Admin:</strong> {{ $pDisp->catatan ?: 'Ditolak oleh Admin' }}
                                </div>
                                <div class="d-flex justify-content-between align-items-center mt-1">
                                    <small class="text-muted fs-9 font-monospace"><i class="bi bi-envelope me-1"></i>{{ $pSurat?->nomor_surat ?? '-' }}</small>
                                    <small class="text-secondary fs-9"><i class="bi bi-clock me-1"></i>{{ $pDisp->admin_approved_at ? $pDisp->admin_approved_at->diffForHumans() : ($pDisp->updated_at ? $pDisp->updated_at->diffForHumans() : '-') }}</small>
                                </div>
                            </a>
                        @endforeach
                    </div>
                    <div class="p-2 text-center bg-light border-top">
                        <a href="{{ route('monitoring.index') }}" class="btn btn-outline-danger btn-sm w-100 rounded-2 fs-8 fw-semibold">
                            Buka Monitoring Surat ({{ $unreadBatalPengirimCount }} Ditolak Admin)
                        </a>
                    </div>
                @endif

                {{-- 1. BERKAS PELAMAR BARU (Untuk Admin / Pengelola Pelamar) --}}
                @if($unreadPelamarCount > 0)
                    <div class="p-3 bg-light border-bottom d-flex justify-content-between align-items-center">
                        <span class="fw-bold text-dark fs-7">
                            <i class="bi bi-person-badge text-danger me-1"></i> Berkas Pelamar Baru ({{ $unreadPelamarCount }})
                        </span>
                        <form action="{{ route('arsip-lamaran.mark-all-read') }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-link text-primary p-0 text-decoration-none fs-8 fw-semibold">
                                Tandai Semua Dibaca
                            </button>
                        </form>
                    </div>
                    <div class="list-group list-group-flush">
                        @foreach($unreadPelamarList as $pBaru)
                            <a href="{{ route('arsip-lamaran.index', ['search' => $pBaru->nomor_registrasi]) }}" class="list-group-item list-group-item-action p-3">
                                <div class="d-flex justify-content-between align-items-start mb-1">
                                    <span class="fw-bold text-dark fs-7">{{ $pBaru->nama_lengkap }}</span>
                                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle fs-9">Baru</span>
                                </div>
                                <div class="text-muted fs-8 mb-1">
                                    Melamar formasi: <strong class="text-secondary">{{ $pBaru->posisi_dilamar }}</strong> ({{ $pBaru->kategori_display }})
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted fs-9 font-monospace">No: {{ $pBaru->nomor_registrasi }}</small>
                                    <small class="text-secondary fs-9">{{ $pBaru->created_at ? $pBaru->created_at->diffForHumans() : '-' }}</small>
                                </div>
                            </a>
                        @endforeach
                    </div>
                    <div class="p-2 text-center bg-light border-top">
                        <a href="{{ route('arsip-lamaran.index') }}" class="btn btn-outline-primary btn-sm w-100 rounded-2 fs-8 fw-semibold">
                            Buka Semua Data Pelamar ({{ $unreadPelamarCount }} Baru)
                        </a>
                    </div>
                @endif

                {{-- 2. DISPOSISI PERLU PERSETUJUAN (Untuk Pejabat / Approver Disposisi) --}}
                @if($pendingApprovalDisposisiCount > 0)
                    <div class="p-3 bg-light border-bottom d-flex justify-content-between align-items-center">
                        <span class="fw-bold text-dark fs-7">
                            <i class="bi bi-shield-check text-warning me-1"></i> Disposisi Perlu Persetujuan ({{ $pendingApprovalDisposisiCount }})
                        </span>
                        <span class="badge bg-warning text-dark fs-9">Menunggu Review</span>
                    </div>
                    <div class="list-group list-group-flush">
                        @foreach($pendingApprovalDisposisiList as $pDisp)
                            @php
                                $pSurat = $pDisp->surat;
                                $pAsal = $pSurat?->divisi?->nama_divisi ?? 'Unit Lain';
                                $pTujuan = $pDisp->user?->divisi?->nama_divisi ?? ($pDisp->user?->name ?? '-');
                            @endphp
                            <a href="{{ route('approve-disposisi.index') }}" class="list-group-item list-group-item-action p-3">
                                <div class="d-flex justify-content-between align-items-start mb-1">
                                    <span class="fw-bold text-dark fs-7 text-truncate me-2" style="max-width: 240px;" title="{{ $pSurat?->perihal }}">
                                        {{ $pSurat?->perihal ?? 'Surat Disposisi' }}
                                    </span>
                                    <span class="badge bg-warning-subtle text-warning border border-warning-subtle fs-9 flex-shrink-0">Perlu Review</span>
                                </div>
                                <div class="text-muted fs-8 mb-1">
                                    <span><i class="bi bi-arrow-right-circle me-1"></i>{{ $pAsal }} &rarr; {{ $pTujuan }}</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted fs-9 font-monospace"><i class="bi bi-envelope me-1"></i>{{ $pSurat?->nomor_surat ?? '-' }}</small>
                                    <small class="text-secondary fs-9"><i class="bi bi-clock me-1"></i>{{ $pDisp->created_at ? $pDisp->created_at->diffForHumans() : '-' }}</small>
                                </div>
                            </a>
                        @endforeach
                    </div>
                    <div class="p-2 text-center bg-light border-top">
                        <a href="{{ route('approve-disposisi.index') }}" class="btn btn-outline-warning btn-sm w-100 rounded-2 fs-8 fw-semibold">
                            Periksa Semua Disposisi Menunggu ({{ $pendingApprovalDisposisiCount }})
                        </a>
                    </div>
                @endif

                {{-- 3. DISPOSISI MASUK (Untuk Penerima Disposisi / Unit Tujuan) --}}
                @if($unreadDisposisiCount > 0)
                    <div class="p-3 bg-light border-bottom d-flex justify-content-between align-items-center">
                        <span class="fw-bold text-dark fs-7">
                            <i class="bi bi-inboxes text-primary me-1"></i> Disposisi Masuk ({{ $unreadDisposisiCount }})
                        </span>
                        <span class="badge bg-warning text-dark px-2 py-1 fs-9 fw-semibold">
                            Perlu Tindakan
                        </span>
                    </div>
                    <div class="list-group list-group-flush">
                        @foreach($unreadDisposisiList as $disp)
                            @php
                                $surat = $disp->surat;
                                $unitAsal = $surat?->divisi?->nama_divisi ?? 'Unit Lain';
                            @endphp
                            <a href="{{ route('daftar-disposisi.index') }}" class="list-group-item list-group-item-action p-3">
                                <div class="d-flex justify-content-between align-items-start mb-1">
                                    <span class="fw-bold text-dark fs-7 text-truncate me-2" style="max-width: 260px;" title="{{ $surat?->perihal }}">
                                        {{ $surat?->perihal ?? 'Surat Masuk Baru' }}
                                    </span>
                                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle fs-9 flex-shrink-0">Surat Masuk</span>
                                </div>
                                <div class="text-muted fs-8 mb-1">
                                    <i class="bi bi-building me-1 text-secondary"></i> Dari: <strong class="text-secondary">{{ $unitAsal }}</strong>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mt-1">
                                    <small class="text-muted fs-9 font-monospace"><i class="bi bi-envelope me-1"></i>{{ $surat?->nomor_surat ?? '-' }}</small>
                                    <small class="text-secondary fs-9"><i class="bi bi-clock me-1"></i>{{ $disp->updated_at ? $disp->updated_at->diffForHumans() : ($disp->created_at ? $disp->created_at->diffForHumans() : '-') }}</small>
                                </div>
                            </a>
                        @endforeach
                    </div>
                    <div class="p-2 text-center bg-light border-top">
                        <a href="{{ route('daftar-disposisi.index') }}" class="btn btn-outline-primary btn-sm w-100 rounded-2 fs-8 fw-semibold">
                            Buka Semua Daftar Disposisi ({{ $unreadDisposisiCount }} Baru)
                        </a>
                    </div>
                @endif

                {{-- 4. SURAT BARU MASUK --}}
                @if($unreadSuratCount > 0)
                    <div class="p-3 bg-light border-bottom d-flex justify-content-between align-items-center">
                        <span class="fw-bold text-dark fs-7">
                            <i class="bi bi-envelope-paper text-primary me-1"></i> Surat Baru Masuk ({{ $unreadSuratCount }})
                        </span>
                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle fs-9">Arsip Baru</span>
                    </div>
                    <div class="list-group list-group-flush">
                        @foreach($unreadSuratList as $sBaru)
                            <a href="{{ route('surat.index') }}" class="list-group-item list-group-item-action p-3">
                                <div class="d-flex justify-content-between align-items-start mb-1">
                                    <span class="fw-bold text-dark fs-7 text-truncate me-2" style="max-width: 260px;" title="{{ $sBaru->perihal }}">
                                        {{ $sBaru->perihal }}
                                    </span>
                                    <span class="badge bg-success-subtle text-success border border-success-subtle fs-9 flex-shrink-0">Baru</span>
                                </div>
                                <div class="text-muted fs-8 mb-1">
                                    <i class="bi bi-building me-1"></i> {{ $sBaru->divisi?->nama_divisi ?? 'Internal' }} &bull; {{ $sBaru->jenisSurat?->nama_jenis ?? 'Surat' }}
                                </div>
                                <div class="d-flex justify-content-between align-items-center mt-1">
                                    <small class="text-muted fs-9 font-monospace"><i class="bi bi-envelope me-1"></i>{{ $sBaru->nomor_surat }}</small>
                                    <small class="text-secondary fs-9"><i class="bi bi-clock me-1"></i>{{ $sBaru->created_at ? $sBaru->created_at->diffForHumans() : '-' }}</small>
                                </div>
                            </a>
                        @endforeach
                    </div>
                    <div class="p-2 text-center bg-light border-top">
                        <a href="{{ route('surat.index') }}" class="btn btn-outline-primary btn-sm w-100 rounded-2 fs-8 fw-semibold">
                            Buka Manajemen Surat ({{ $unreadSuratCount }} Baru)
                        </a>
                    </div>
                @endif

                {{-- 5. UPDATE PROGRES MONITORING --}}
                @if($unreadMonitoringCount > 0)
                    <div class="p-3 bg-light border-bottom d-flex justify-content-between align-items-center">
                        <span class="fw-bold text-dark fs-7">
                            <i class="bi bi-activity text-info me-1"></i> Update Monitoring Surat ({{ $unreadMonitoringCount }})
                        </span>
                        <span class="badge bg-info-subtle text-info-emphasis border border-info-subtle fs-9">Progres Baru</span>
                    </div>
                    <div class="list-group list-group-flush">
                        @foreach($unreadMonitoringList as $mSurat)
                            <a href="{{ route('monitoring.index') }}" class="list-group-item list-group-item-action p-3">
                                <div class="d-flex justify-content-between align-items-start mb-1">
                                    <span class="fw-bold text-dark fs-7 text-truncate me-2" style="max-width: 260px;" title="{{ $mSurat->perihal }}">
                                        {{ $mSurat->perihal }}
                                    </span>
                                    <span class="badge bg-info text-dark fs-9 flex-shrink-0">Update</span>
                                </div>
                                <div class="text-muted fs-8 mb-1">
                                    <small class="text-muted font-monospace"><i class="bi bi-envelope me-1"></i>{{ $mSurat->nomor_surat }}</small>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mt-1">
                                    <small class="text-secondary fs-9"><i class="bi bi-clock me-1"></i>{{ $mSurat->updated_at ? $mSurat->updated_at->diffForHumans() : '-' }}</small>
                                </div>
                            </a>
                        @endforeach
                    </div>
                    <div class="p-2 text-center bg-light border-top">
                        <a href="{{ route('monitoring.index') }}" class="btn btn-outline-info btn-sm w-100 rounded-2 fs-8 fw-semibold text-dark">
                            Buka Monitoring Surat ({{ $unreadMonitoringCount }} Update)
                        </a>
                    </div>
                @endif

                {{-- KOSONG JIKA TIDAK ADA NOTIFIKASI --}}
                @if($totalNotifikasi == 0)
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-bell-slash fs-1 text-muted opacity-50 d-block mb-2"></i>
                        <h6 class="fw-semibold text-secondary mb-1">Tidak Ada Notifikasi Baru</h6>
                        <small class="text-muted">Semua surat, berkas lamaran, dan disposisi telah Anda tinjau.</small>
                    </div>
                @endif
            </div>
            <div class="modal-footer bg-light border-top py-2">
                <button type="button" class="btn btn-secondary btn-sm px-3 rounded-2" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>



{{-- modal panduan penggunaan sistem --}}
<div class="modal fade" id="modalPanduan" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content border-0 shadow rounded-0">

            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-question-circle text-success me-2"></i>
                    Panduan Sistem
                </h5>

                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body text-center">

                <div class="mb-3">
                    <i class="bi bi-file-earmark-pdf fs-1 text-danger"></i>
                </div>

                <h6>
                    Buku Panduan Penggunaan Sistem
                </h6>

                <p class="text-muted small">
                    Download panduan penggunaan sistem arsip surat.
                </p>

                <a href="{{ asset('panduan/panduan-sistem.pdf') }}" class="btn btn-success" download>

                    <i class="bi bi-download me-1"></i>
                    Download PDF

                </a>

            </div>

        </div>

    </div>
</div>


{{-- modal disposisi --}}
<div class="modal fade" id="chatDisposisiModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content border-0">
            <!-- HEADER -->
            <div class="modal-header bg-white border-bottom">
                <div class="d-flex align-items-center">
                    <div class="chat-logo me-3">
                        <i class="bi bi-chat-dots-fill"></i>
                    </div>

                    <div>
                        <h5 class="mb-0">
                            Chat Disposisi Internal
                        </h5>
                        <small class="text-muted">
                            Komunikasi antar divisi
                        </small>
                    </div>
                </div>

                <button class="btn-close" data-bs-dismiss="modal">
                </button>
            </div>

            <!-- BODY -->
            <div class="modal-body p-0 overflow-hidden">
                <div class="row g-0 h-100" id="chatWrapper">
                    <!-- SIDEBAR -->
                    <div class="col-lg-3 border-end bg-white chat-sidebar-col flex-shrink-0">
                        <div class="p-2.5 p-md-3 border-bottom chat-search-container">
                            <div class="input-group input-group-sm chat-search-pill">
                                <span class="input-group-text">
                                    <i class="bi bi-search"></i>
                                </span>
                                <input type="text" id="searchChatUser" class="form-control" placeholder="Cari nama pengguna...">
                            </div>
                        </div>


                        <div class="list-group list-group-flush overflow-auto chat-user-list" id="chatUserList">
                            @foreach ($users as $userChat)
                            <a href="#" class="list-group-item list-group-item-action user-chat border-0 py-3 d-flex align-items-center justify-content-between" data-user-id="{{ $userChat->id }}" data-name="{{ $userChat->name }}" data-role="{{ $userChat->role?->nama_role }}" data-divisi="{{ $userChat->divisi?->nama_divisi ?? 'Tanpa Divisi' }}" data-foto-url="{{ $userChat->foto_url }}">

                                <div class="d-flex align-items-center overflow-hidden me-2">

                                    <img src="{{ $userChat->foto_url }}" alt="{{ $userChat->name }}" class="avatar rounded-circle me-3 flex-shrink-0 shadow-sm" style="width: 44px; height: 44px; object-fit: cover;">

                                    <div class="overflow-hidden">
                                        <div class="fw-bold text-dark text-truncate">{{ $userChat->name }}</div>
                                        <small class="text-muted d-block text-truncate">
                                            <i class="bi bi-diagram-3 me-1"></i>
                                            {{ $userChat->divisi?->nama_divisi ?? 'Tanpa Divisi' }}
                                        </small>
                                    </div>
                                </div>

                                <span class="badge rounded-pill bg-success unread-contact-badge unread-badge-{{ $userChat->id }} {{ ($userChat->unread_chat_count ?? 0) > 0 ? '' : 'd-none' }}" style="background-color: #25d366 !important; font-size: 0.75rem;">
                                    {{ $userChat->unread_chat_count ?? 0 }}
                                </span>
                            </a>
                            @endforeach
                        </div>
                    </div>


                    <!-- CHAT AREA -->
                    <div class="col-lg-9 d-flex flex-column h-100 chat-main chat-main-col position-relative">

                        <!-- WELCOME EMPTY STATE ALA WHATSAPP WEB DESKTOP (SAAT PERTAMA DIBUKA) -->
                        <div id="chatWelcomeState" class="d-flex flex-column align-items-center justify-content-center h-100 p-4 text-center bg-light">
                            <div class="mb-4">
                                <div class="bg-primary-subtle text-primary rounded-circle d-inline-flex align-items-center justify-content-center shadow-sm" style="width: 120px; height: 120px;">
                                    <i class="bi bi-chat-square-quote-fill" style="font-size: 3.8rem; color: #0d6efd;"></i>
                                </div>
                            </div>
                            <h3 class="fw-bold text-dark mb-2">
                                Chat Disposisi USM Indonesia
                            </h3>
                            <p class="text-muted mb-4 mx-auto" style="max-width: 480px; font-size: 0.95rem; line-height: 1.6;">
                                Kirim dan terima disposisi surat antar divisi kampus secara aman, terintegrasi, dan real-time. Pilih kontak di sebelah kiri untuk memulai percakapan.
                            </p>
                            <div class="mt-auto text-muted small border-top pt-3 w-100" style="max-width: 400px; border-color: rgba(0,0,0,0.08) !important;">
                                <i class="bi bi-shield-check text-success me-1"></i>
                                Terintegrasi dengan Sistem Persuratan Digital Kampus
                            </div>
                        </div>

                        <!-- ACTIVE CHAT ROOM STATE (TAMPIL SAAT KONTAK DIKLIK) -->
                        <div id="chatActiveState" class="d-none flex-column h-100">
                            <!-- HEADER CHAT -->
                            <div class="chat-header border-bottom p-3 bg-white">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center me-2 overflow-hidden">
                                        <button class="btn btn-link text-dark p-0 me-3 d-lg-none" id="btnBackChat">
                                            <i class="bi bi-arrow-left fs-4"></i>
                                        </button>

                                        <img id="chatAvatarImg" src="{{ asset('profile/default-profile.png') }}" alt="User Photo" class="avatar rounded-circle me-3 flex-shrink-0 shadow-sm" style="width: 42px; height: 42px; object-fit: cover;">
                                        <div class="overflow-hidden">
                                            <div id="chatNama" class="fw-bold text-dark text-truncate">Pilih Pengguna</div>
                                            <small id="chatRole" class="text-muted d-block text-truncate">-</small>
                                        </div>
                                    </div>

                                    <!-- BARIS PENCARIAN PESAN CHAT -->
                                    <div class="ms-auto flex-shrink-0" style="max-width: 220px;">
                                        <div class="input-group input-group-sm rounded-pill overflow-hidden border">
                                            <span class="input-group-text bg-white border-0 text-muted ps-2.5">
                                                <i class="bi bi-search"></i>
                                            </span>
                                            <input type="text" id="searchChatMessage" class="form-control border-0 shadow-none ps-1" placeholder="Cari pesan...">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- CHAT BODY -->
                            <div class="chat-body flex-grow-1 p-4 overflow-auto" id="chatMessages">
                            </div>

                            <!-- FOOTER CHAT ALAM WHATSAPP -->
                            <div class="chat-footer border-top p-3 bg-white position-relative">

                                <!-- INLINE ATTACHMENT DRAWER PANEL (WA STYLE) -->
                                <div id="attachDrawer" class="card shadow-lg border-0 mb-3 rounded-4 d-none" style="background: #f8fafc;">
                                    <div class="card-header bg-white border-bottom py-2.5 d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-file-earmark-pdf-fill text-danger me-2 fs-5"></i>
                                            <span class="fw-bold text-dark small">Pilih Surat Disposisi</span>
                                        </div>
                                        <button type="button" class="btn-close btn-sm" id="btnCloseAttachDrawer"></button>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="input-group input-group-sm mb-2 shadow-sm rounded-pill overflow-hidden bg-white border">
                                            <span class="input-group-text bg-transparent border-0 ps-3 text-muted">
                                                <i class="bi bi-search"></i>
                                            </span>
                                            <input type="text" id="searchSuratInline" class="form-control border-0 shadow-none ps-2" placeholder="Cari nomor surat atau perihal...">
                                        </div>

                                        <div id="listSuratInline" class="pe-1" style="max-height: 200px; overflow-y: auto;">
                                            @forelse ($suratListChat as $item)
                                            <div class="doc-select-card card mb-2 surat-item-inline border-0 shadow-sm p-2 px-3" data-id="{{ $item->id }}" data-nomor="{{ $item->nomor_surat }}" data-perihal="{{ $item->perihal }}">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <div class="d-flex align-items-center me-2 overflow-hidden">
                                                        <div class="bg-danger-subtle text-danger rounded-3 p-2 me-2 d-flex align-items-center justify-content-center flex-shrink-0" style="width: 36px; height: 36px;">
                                                            <i class="bi bi-file-earmark-pdf-fill fs-5"></i>
                                                        </div>
                                                        <div class="overflow-hidden">
                                                            <div class="fw-bold text-dark text-truncate small mb-0">{{ $item->nomor_surat }}</div>
                                                            <div class="text-muted text-truncate" style="font-size: 0.75rem;">{{ $item->perihal }}</div>
                                                        </div>
                                                    </div>
                                                    <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-2.5 py-1 text-nowrap" style="font-size: 0.75rem;">
                                                        <i class="bi bi-paperclip me-1"></i> Pilih
                                                    </button>
                                                </div>
                                            </div>
                                            @empty
                                            <div class="text-center py-3 text-muted small">
                                                <i class="bi bi-inbox d-block mb-1 fs-5 opacity-50"></i>
                                                Tidak ada berkas surat yang tersedia untuk dilampirkan.
                                            </div>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>

                                <!-- PREVIEW SURAT TERPILIH -->
                                <div id="selectedSurat" class="mb-2"></div>
                                <input type="hidden" id="surat_id">

                                <!-- CATATAN DISPOSISI (OPSIONAL) -->
                                <div class="mb-2">
                                    <input type="text" id="catatan" class="form-control form-control-sm rounded-3" placeholder="Catatan disposisi (opsional)">
                                </div>

                                <!-- INPUT BAR CHAT WATSAPP STYLE -->
                                <div class="d-flex align-items-center">
                                    <!-- USER TUJUAN -->
                                    <input type="hidden" id="receiver_id">

                                    <!-- TOMBOL ATTACHMENT CLIP (WA STYLE) -->
                                    <button type="button" id="btnToggleAttach" class="btn btn-wa-attach me-2 flex-shrink-0" title="Lampirkan Surat">
                                        <i class="bi bi-paperclip fs-5"></i>
                                    </button>

                                    <!-- INPUT PESAN -->
                                    <input type="text" id="message" class="form-control rounded-pill px-4 py-2" placeholder="Tulis pesan disposisi...">

                                    <!-- TOMBOL KIRIM -->
                                    <button type="button" id="btnSendChat" class="btn btn-wa-send ms-2 flex-shrink-0" title="Kirim Pesan">
                                        <i class="bi bi-send-fill fs-5"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{{-- modal preview chat pdf --}}
<div class="modal fade" id="modalPreviewSurat" tabindex="-1">

    <div class="modal-dialog modal-xl modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">

                    Detail Surat

                </h5>

                <button class="btn-close" data-bs-dismiss="modal">
                </button>

            </div>

            <div class="modal-body">

                <div class="row mb-3">

                    <div class="col-md-4">
                        <strong>Nomor Surat</strong>
                        <div id="previewNomor"></div>
                    </div>

                    <div class="col-md-4">
                        <strong>Tanggal</strong>
                        <div id="previewTanggal"></div>
                    </div>

                    <div class="col-md-4">
                        <strong>Status</strong>
                        <div id="previewStatus"></div>
                    </div>

                </div>

                <div class="mb-3">

                    <strong>Perihal</strong>

                    <div id="previewPerihal"></div>

                </div>

                <iframe id="previewPdf" width="100%" height="600" style="border:none;">
                </iframe>

            </div>

            <div class="modal-footer bg-light d-flex justify-content-between py-2">
                <div>
                    <a id="btnBukaPdfBaru" href="#" target="_blank" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-box-arrow-up-right me-1"></i> Buka Tab Baru
                    </a>
                </div>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" class="btn btn-success btn-sm d-none" id="btnTerimaSuratChat">
                        <i class="bi bi-check-circle me-1"></i> Terima Surat Disposisi Ini
                    </button>
                </div>
            </div>

        </div>

    </div>

</div>





<script>
    // jam digital navbar
    function updateClock() {
        const now = new Date();

        const time = now.toLocaleTimeString('id-ID', {
            hour: '2-digit'
            , minute: '2-digit'
            , second: '2-digit'
        });

        const date = now.toLocaleDateString('id-ID', {
            weekday: 'long'
            , year: 'numeric'
            , month: 'long'
            , day: 'numeric'
        });

        document.getElementById('digitalClock').textContent = time;
        document.getElementById('digitalDate').textContent = date;
    }

    setInterval(updateClock, 1000);
    updateClock();

    // Inline Attachment Drawer Control
    const btnToggleAttach = document.getElementById('btnToggleAttach');
    const attachDrawer = document.getElementById('attachDrawer');
    const btnCloseAttachDrawer = document.getElementById('btnCloseAttachDrawer');

    if (btnToggleAttach && attachDrawer) {
        btnToggleAttach.addEventListener('click', function() {
            attachDrawer.classList.toggle('d-none');
        });
    }

    if (btnCloseAttachDrawer && attachDrawer) {
        btnCloseAttachDrawer.addEventListener('click', function() {
            attachDrawer.classList.add('d-none');
        });
    }

    // Pencarian Inline Surat
    const searchSuratInline = document.getElementById('searchSuratInline');
    if (searchSuratInline) {
        searchSuratInline.addEventListener('keyup', function() {
            let keyword = this.value.toLowerCase();
            document.querySelectorAll('.surat-item-inline').forEach(item => {
                let text = item.innerText.toLowerCase();
                item.style.display = text.includes(keyword) ? '' : 'none';
            });
        });
    }

    function removeSelectedSurat() {
        if (document.getElementById('surat_id')) {
            document.getElementById('surat_id').value = '';
        }
        if (document.getElementById('selectedSurat')) {
            document.getElementById('selectedSurat').innerHTML = '';
        }
    }

    // PILIH SURAT INLINE (TANPA PINDAH HALAMAN / TANPA MODAL BARU)
    document.querySelectorAll('.surat-item-inline').forEach(item => {
        item.addEventListener('click', function() {
            let id = this.dataset.id;
            let nomor = this.dataset.nomor;
            let perihal = this.dataset.perihal;

            // Simpan ID surat
            document.getElementById('surat_id').value = id;

            // Tampilkan surat terpilih secara elegan
            document.getElementById('selectedSurat').innerHTML = `
                <div class="alert alert-primary mb-0 d-flex justify-content-between align-items-center rounded-3 shadow-sm border-0 bg-primary-subtle text-primary p-2 px-3">
                    <div class="d-flex align-items-center me-2 overflow-hidden">
                        <i class="bi bi-file-earmark-pdf-fill fs-4 me-2 text-danger flex-shrink-0"></i>
                        <div class="overflow-hidden">
                            <div class="fw-bold text-truncate" style="max-width: 250px;">${nomor}</div>
                            <small class="text-muted d-block text-truncate" style="max-width: 250px;">${perihal}</small>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-sm ms-2" onclick="removeSelectedSurat()"></button>
                </div>
            `;

            // Sembunyikan panel lampiran
            if (attachDrawer) {
                attachDrawer.classList.add('d-none');
            }

            // Fokus kembali ke input pesan
            setTimeout(() => {
                let msgInput = document.getElementById('message');
                if (msgInput) msgInput.focus();
            }, 100);
        });
    });

    // PENCARIAN NAMA PENGGUNA DI SIDEBAR CHAT (MENGATASI OVERRIDE BOOTSTRAP D-FLEX)
    const searchChatUser = document.getElementById('searchChatUser');
    if (searchChatUser) {
        searchChatUser.addEventListener('input', function() {
            let keyword = this.value.toLowerCase().trim();
            document.querySelectorAll('.user-chat').forEach(item => {
                let name = (item.dataset.name || '').toLowerCase();
                let fullText = item.innerText.toLowerCase();
                let isMatch = !keyword || name.includes(keyword) || fullText.includes(keyword);

                if (isMatch) {
                    item.style.setProperty('display', 'flex', 'important');
                } else {
                    item.style.setProperty('display', 'none', 'important');
                }
            });
        });
    }

    // PENCARIAN ISI PESAN DALAM PERCAKAPAN AKTIF
    const searchChatMessage = document.getElementById('searchChatMessage');
    if (searchChatMessage) {
        searchChatMessage.addEventListener('input', function() {
            let keyword = this.value.toLowerCase().trim();
            document.querySelectorAll('#chatMessages .message').forEach(msg => {
                let text = msg.innerText.toLowerCase();
                let isMatch = !keyword || text.includes(keyword);

                if (isMatch) {
                    msg.style.setProperty('display', 'flex', 'important');
                } else {
                    msg.style.setProperty('display', 'none', 'important');
                }
            });
        });
    }

    // ==========================================
    // CHAT DISPOSISI ENGINE
    // ==========================================
    let activeUser = null;
    let lastMessageCount = -1;

    function renderMessagesHtml(messages) {
        let html = '';
        const myId = {{ auth()->id() ?? 0 }};

        messages.forEach(msg => {
            let tipe = (msg.pengirim_id == myId) ? 'outgoing' : 'incoming';

            html += `
<div class="message ${tipe}">
    <div class="message-header">
        <small class="text-muted">
            ${new Date(msg.created_at).toLocaleString('id-ID')}
        </small>
        ${msg.pengirim_id == myId ? `
            <button class="btn btn-sm btn-link text-danger btn-delete-chat p-0" data-id="${msg.id}">
                <i class="bi bi-trash"></i>
            </button>
        ` : ''}
    </div>

    ${msg.surat ? `
        <div class="chat-surat-card mb-2">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="surat-title">
                        <i class="bi bi-file-earmark-pdf text-danger"></i>
                        ${msg.surat.nomor_surat}
                    </div>
                    <div class="surat-perihal">
                        ${msg.surat.perihal}
                    </div>
                </div>
                <button class="btn btn-sm btn-primary btn-preview-surat" data-id="${msg.surat.id}">
                    Lihat (#${msg.surat.id})
                </button>
            </div>
        </div>
    ` : ''}

    <div class="chat-text">
        ${msg.pesan}
    </div>

    ${msg.catatan ? `
        <div class="mt-2 small">
            <strong>Catatan:</strong>
            ${msg.catatan}
        </div>
    ` : ''}
</div>`;
        });

        return html;
    }

    function loadChat(userId, isPolling = false) {
        if (!userId) return;
        if (isPolling && document.hidden) return;

        fetch('/chat-disposisi/' + userId, {
            headers: {
                'X-Silent-Polling': isPolling ? 'true' : 'false'
            }
        })
            .then(response => response.json())
            .then(data => {
                if (!data || !data.messages) return;

                // Jika sedang polling berkala dan jumlah pesan belum berubah, lewati agar tidak memicu flicker/re-render
                if (isPolling && data.messages.length === lastMessageCount) {
                    return;
                }

                lastMessageCount = data.messages.length;
                const box = document.getElementById('chatMessages');
                if (!box) return;

                const isNearBottom = (box.scrollHeight - box.scrollTop - box.clientHeight) < 150;
                box.innerHTML = renderMessagesHtml(data.messages);

                if (!isPolling || isNearBottom) {
                    box.scrollTop = box.scrollHeight;
                }
            })
            .catch(err => console.error('Error fetching chat messages:', err));
    }

    // Event Klik Kontak Chat
    document.querySelectorAll('.user-chat').forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();

            document.querySelectorAll('.user-chat').forEach(chat => chat.classList.remove('active'));
            this.classList.add('active');

            const chatWrapper = document.getElementById('chatWrapper');
            if (chatWrapper) chatWrapper.classList.add('show-chat');

            // Tampilkan Chat Aktif & Sembunyikan Welcome State
            const welcomeState = document.getElementById('chatWelcomeState');
            const activeState = document.getElementById('chatActiveState');
            if (welcomeState && activeState) {
                welcomeState.classList.add('d-none');
                welcomeState.classList.remove('d-flex');
                activeState.classList.remove('d-none');
                activeState.classList.add('d-flex');
            }

            const userId = this.dataset.userId;
            activeUser = userId;
            lastMessageCount = -1;

            // Sembunyikan unread badge
            const badgeEl = document.querySelector('.unread-badge-' + userId);
            if (badgeEl) badgeEl.classList.add('d-none');

            document.getElementById('receiver_id').value = userId;
            document.getElementById('chatNama').innerText = this.dataset.name || 'Pengguna';
            document.getElementById('chatRole').innerText = (this.dataset.role || '') + ' • ' + (this.dataset.divisi || 'Tanpa Divisi');

            const avatarImg = document.getElementById('chatAvatarImg');
            if (avatarImg && this.dataset.fotoUrl) {
                avatarImg.src = this.dataset.fotoUrl;
            }

            loadChat(userId, false);
        });
    });

    // Tombol Kembali di Tampilan Mobile
    const btnBackChat = document.getElementById('btnBackChat');
    if (btnBackChat) {
        btnBackChat.addEventListener('click', function() {
            const chatWrapper = document.getElementById('chatWrapper');
            if (chatWrapper) chatWrapper.classList.remove('show-chat');
            activeUser = null;

            const welcomeState = document.getElementById('chatWelcomeState');
            const activeState = document.getElementById('chatActiveState');
            if (welcomeState && activeState) {
                welcomeState.classList.remove('d-none');
                welcomeState.classList.add('d-flex');
                activeState.classList.add('d-none');
                activeState.classList.remove('d-flex');
            }
        });
    }

    // AJAX Hapus Pesan Chat
    document.addEventListener('click', function(e) {
        if (e.target.closest('.btn-delete-chat')) {
            const btn = e.target.closest('.btn-delete-chat');
            const id = btn.dataset.id;

            if (!confirm('Hapus pesan ini?')) {
                return;
            }

            fetch('/chat-disposisi/' + id, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            })
            .then(res => res.json())
            .then(() => {
                if (activeUser) {
                    loadChat(activeUser, false);
                }
            });
        }
    });

    // Modal Preview PDF Surat dari Chat
    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.btn-preview-surat');
        if (!btn) return;

        const suratId = btn.dataset.id;
        fetch('/chat-disposisi/surat/' + suratId)
            .then(res => res.json())
            .then(data => {
                document.getElementById('previewNomor').innerText = data.nomor_surat;
                document.getElementById('previewTanggal').innerText = data.tanggal_surat;
                document.getElementById('previewStatus').innerText = data.status;
                document.getElementById('previewPerihal').innerText = data.perihal;
                document.getElementById('previewPdf').src = data.file_surat;

                const btnBukaTab = document.getElementById('btnBukaPdfBaru');
                if (btnBukaTab) btnBukaTab.href = data.file_surat;

                const btnTerima = document.getElementById('btnTerimaSuratChat');
                if (btnTerima) {
                    if (data.can_terima && data.penerima_id) {
                        btnTerima.classList.remove('d-none');
                        btnTerima.disabled = false;
                        btnTerima.innerHTML = '<i class="bi bi-check-circle me-1"></i> Terima Surat Disposisi Ini';

                        btnTerima.onclick = function() {
                            btnTerima.disabled = true;
                            btnTerima.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Memproses...';

                            fetch('/daftar-disposisi/update-status/' + data.penerima_id, {
                                method: 'PUT',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                    'Accept': 'application/json'
                                },
                                body: JSON.stringify({
                                    status: 'diterima',
                                    catatan: 'Diterima melalui Ruang Obrolan Disposisi'
                                })
                            })
                            .then(res => res.json())
                            .then(result => {
                                btnTerima.disabled = false;
                                if (result.success) {
                                    btnTerima.classList.add('d-none');
                                    document.getElementById('previewStatus').innerText = 'Diterima';

                                    if (typeof Swal !== 'undefined') {
                                        Swal.fire({
                                            icon: 'success',
                                            title: 'Surat Diterima!',
                                            text: 'Surat berhasil diterima dan kini masuk ke arsip Manajemen Surat divisi Anda.',
                                            timer: 2500,
                                            showConfirmButton: false
                                        });
                                    } else {
                                        alert('Surat berhasil diterima dan masuk ke Manajemen Surat divisi Anda.');
                                    }

                                    // Refresh riwayat pesan jika ruang obrolan sedang terbuka
                                    const receiverInput = document.getElementById('receiver_id');
                                    if (receiverInput && receiverInput.value) {
                                        loadChat(receiverInput.value, false);
                                    }
                                } else {
                                    btnTerima.innerHTML = '<i class="bi bi-check-circle me-1"></i> Terima Surat Disposisi Ini';
                                    alert(result.message || 'Gagal menerima surat');
                                }
                            })
                            .catch(err => {
                                btnTerima.disabled = false;
                                btnTerima.innerHTML = '<i class="bi bi-check-circle me-1"></i> Terima Surat Disposisi Ini';
                                console.error('Error menerima surat:', err);
                            });
                        };
                    } else {
                        btnTerima.classList.add('d-none');
                    }
                }

                new bootstrap.Modal(document.getElementById('modalPreviewSurat')).show();
            });
    });

    // Kirim Pesan AJAX
    const btnSendChat = document.getElementById('btnSendChat');
    if (btnSendChat) {
        btnSendChat.addEventListener('click', function() {
            const pesanInput = document.getElementById('message');
            const pesan = pesanInput.value.trim();
            const penerima = document.getElementById('receiver_id').value;
            const surat = document.getElementById('surat_id').value;
            const catatan = document.getElementById('catatan').value;

            if (!penerima) {
                alert('Pilih tujuan disposisi terlebih dahulu');
                return;
            }
            if (!surat) {
                alert('Pilih surat yang akan dilampirkan terlebih dahulu');
                return;
            }
            if (!pesan) {
                alert('Isi pesan tidak boleh kosong');
                return;
            }

            fetch('/chat-disposisi', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    penerima_id: [penerima],
                    surat_id: surat,
                    catatan: catatan,
                    pesan: pesan
                })
            })
            .then(res => res.json())
            .then(resData => {
                if (resData.success) {
                    pesanInput.value = '';
                    document.getElementById('catatan').value = '';
                    removeSelectedSurat();
                    loadChat(penerima, false);
                } else {
                    alert(resData.message || 'Gagal mengirim pesan');
                }
            })
            .catch(err => console.error('Error sending chat message:', err));
        });
    }

    // Polling Pesan Baru setiap 5 detik tanpa merusak DOM / Scroll
    setInterval(() => {
        if (activeUser) {
            loadChat(activeUser, true);
        }
    }, 5000);

    // 3. Logika Dark Mode Toggle Sync
    document.addEventListener('DOMContentLoaded', function() {
        const themeToggleBtn = document.getElementById('themeToggleBtn');
        const themeToggleIcon = document.getElementById('themeToggleIcon');

        function updateThemeUI(theme) {
            const icons = document.querySelectorAll('#themeToggleIcon, .theme-toggle-mobile-icon');
            const texts = document.querySelectorAll('.theme-toggle-mobile-text');
            const btns = document.querySelectorAll('#themeToggleBtn');

            icons.forEach(icon => {
                if (theme === 'dark') {
                    icon.className = 'bi bi-sun-fill text-warning fs-5';
                } else {
                    icon.className = 'bi bi-moon-stars fs-5';
                }
            });

            texts.forEach(text => {
                text.textContent = theme === 'dark' ? 'Mode Terang' : 'Mode Gelap';
            });

            btns.forEach(btn => {
                btn.setAttribute('title', theme === 'dark' ? 'Ganti ke Mode Terang' : 'Ganti ke Mode Gelap');
            });
        }

        function toggleTheme() {
            const currentTheme = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
            document.documentElement.setAttribute('data-bs-theme', currentTheme);
            localStorage.setItem('theme', currentTheme);
            updateThemeUI(currentTheme);
        }

        const activeTheme = document.documentElement.getAttribute('data-bs-theme') || 'light';
        updateThemeUI(activeTheme);

        document.querySelectorAll('#themeToggleBtn, .theme-toggle-mobile-btn').forEach(btn => {
            btn.addEventListener('click', toggleTheme);
        });
    });

</script>