<?php
/**
 * SHARED NAVBAR & PANEL MENU
 * Source: dashboard.php (sumber utama)
 * Include file ini di semua halaman setelah <body>
 * 
 * Variabel yang harus tersedia sebelum include:
 * - $is_logged_in (bool)
 * - $user_name (string)
 * - $active_page (string) - contoh: 'dashboard.php', 'paroki.php', dll
 * 
 * Opsional:
 * - $user_role, $role_label (untuk tampilan role)
 */

// Determine active page from URL if not set
if (!isset($active_page)) {
    $active_page = basename($_SERVER['PHP_SELF']);
}
?>

<style>
    /* Prevent FOUC (Flash of Unstyled Content) before GSAP initializes */
    html.js-loading .header h1, 
    html.js-loading .header h2, 
    html.js-loading .nav-menu a, 
    html.js-loading .user-menu,
    html.js-loading .grid-2 > .card, 
    html.js-loading .container .card:not(.grid-2 > .card), 
    html.js-loading .activity-item,
    html.js-loading .stats-grid .stat-card {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    /* Bulletproof Navbar Fixed Position overriding external/cached CSS */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        transition: background 0.4s ease, box-shadow 0.4s ease, border-bottom 0.4s ease !important;
    }

    /* Style for header when scrolled down */
    .header-scrolled {
        background: var(--bg) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
        border-bottom: 2px solid var(--gold) !important;
    }

    /* Set default background for top of the page */
    body[data-scroll="top"] .header:not(.header-scrolled),
    .header:not(.header-scrolled) {
        background: var(--bg) !important;
        border-bottom: 2px solid transparent !important;
    }

    /* Prevent JS from ever hiding the regular navbar container */
    .initial-nav-container {
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        transform: none !important;
    }
</style>
<script>
    // Script to add scrolled class when page is scrolled down
    document.addEventListener("DOMContentLoaded", () => {
        const header = document.getElementById("mainHeader");
        if (header) {
            window.addEventListener("scroll", () => {
                if (window.scrollY > 40) {
                    header.classList.add("header-scrolled");
                } else {
                    header.classList.remove("header-scrolled");
                }
            });
            // trigger on load
            if (window.scrollY > 40) {
                header.classList.add("header-scrolled");
            }
        }
    });
</script>
<style media="print">
    @page { margin-top: 1cm; margin-bottom: 1cm; }
    
    /* Strictly hide floating menu, JS elements, and fixed navigation during printing */
    .floating-menu-btn,
    .fixed-nav,
    .fixed-nav-backdrop,
    .header,
    .btn-print,
    .btn-export,
    .header-actions,
    .breadcrumb,
    .stats-grid,
    .carousel-container,
    .lenis-scrollbar,
    .transition-screen {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Remove excessive spacing and standardize print frame */
    body { padding-top: 0 !important; }
    .container { padding-top: 0 !important; margin-top: 0 !important; max-width: 100% !important; }

    /* Forcibly strip shadows off all cards/tables */
    .card, .stat-card, .print-card, .kk-info {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    .print-header-content {
        display: block !important;
        margin-bottom: 20px !important;
        border-bottom: 2px solid #000 !important;
        padding-bottom: 15px !important;
    }
</style>
<script>
    // Flag document as JS-enabled and loading
    document.documentElement.classList.add('js-loading');
</script>

<div class="header" id="mainHeader" style="position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 9999 !important;">
    <div class="header-content">
        <h2 class="magnetic-btn" style="margin: 0; position: relative; z-index: 100; cursor: pointer;">
            <a href="dashboard.php" style="text-decoration: none; color: inherit; display: inline-flex;">
                <div class="brand-text-wrapper" style="overflow: hidden; display: inline-flex; white-space: nowrap;">
                    <div class="brand-text-inner"
                        style="display: flex; align-items: center; will-change: transform; position: relative;">
                        <span class="brand-text-prefix">Sistem KUB&nbsp;</span>
                        <span class="brand-text-center">Wilayah IV</span>
                        <span class="brand-text-suffix" style="position: absolute; left: 100%;">&nbsp;Katedral
                            Kupang</span>
                    </div>
                </div>
            </a>
        </h2>

        <!-- Desktop Initial Nav (disappears on scroll) -->
        <div class="initial-nav-container" style="display: flex; justify-content: flex-end; padding-top: 0;">
            <nav class="nav-menu" style="margin-right: <?= $is_logged_in ? '25px' : '180px' ?>;">
                <a href="dashboard.php"
                    class="<?= $active_page === 'dashboard.php' ? 'active ' : '' ?>magnetic-btn">Dashboard</a>
                <a href="paroki.php"
                    class="<?= $active_page === 'paroki.php' ? 'active ' : '' ?>magnetic-btn">Paroki</a>
                <a href="kub.php" class="<?= $active_page === 'kub.php' ? 'active ' : '' ?>magnetic-btn">Data KUB</a>
                <a href="kartu_keluarga.php"
                    class="<?= $active_page === 'kartu_keluarga.php' ? 'active ' : '' ?>magnetic-btn">Kartu Keluarga</a>
                <a href="pengurus.php"
                    class="<?= $active_page === 'pengurus.php' ? 'active ' : '' ?>magnetic-btn">Pengurus</a>
                <a href="kegiatan.php"
                    class="<?= $active_page === 'kegiatan.php' ? 'active ' : '' ?>magnetic-btn">Kegiatan</a>
                <a href="iuran.php" class="<?= $active_page === 'iuran.php' ? 'active ' : '' ?>magnetic-btn">Iuran</a>
                <?php if ($is_logged_in && hasRole(['admin_paroki', 'ketua_wilayah', 'ketua_kub'])): ?>
                    <a href="user.php" class="<?= $active_page === 'user.php' ? 'active ' : '' ?>magnetic-btn">User</a>
                <?php endif; ?>
            </nav>

            <div class="user-menu" style="margin-left: 30px;">
                <?php if ($is_logged_in): ?>
                    <div class="user-info" style="margin-right: 15px; width: 160px; display: flex; justify-content: flex-end;">
                        <div class="user-name magnetic-btn"
                            style="display: flex; align-items: center; font-size: 13.3px; cursor: pointer;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                style="margin-right: 6px; color: var(--gold); position: relative; z-index: 2;">
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                <circle cx="12" cy="7" r="4"></circle>
                            </svg>
                            <div class="user-text-wrapper" style="overflow: hidden; display: inline-flex; white-space: nowrap; align-items: center; padding-right: 2px;">
                                <div class="user-text-inner" style="display: flex; align-items: center; will-change: transform; position: relative;">
                                    <span class="user-text-center" style="color: #901b1b; padding-right: 4px;">
                                        <?= htmlspecialchars($user_name) ?>
                                    </span>
                                    <span class="user-text-suffix" style="position: absolute; left: 100%; color: #901b1b; padding-right: 4px;">
                                        &nbsp;<?= htmlspecialchars($role_label ?? '') ?>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a href="logout.php" class="btn-login-header magnetic-btn"
                        style="padding: 12px 28px; border: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); overflow: hidden; position: relative; border-radius: 40px;">
                        <div class="btn-fill"></div>
                        <span class="btn-text-inner"
                            style="display:inline-block; pointer-events:none; font-size: 14px; position: relative; z-index: 2;">Logout</span>
                    </a>
                <?php else: ?>
                    <a href="login.php" class="btn-login-header magnetic-btn"
                        style="padding: 12px 28px; border: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); overflow: hidden; position: relative; border-radius: 40px;">
                        <div class="btn-fill"></div>
                        <span class="btn-text-inner"
                            style="display:inline-block; pointer-events:none; font-size: 14px; position: relative; z-index: 2;">Login</span>
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

