<?php
$pageTitle = $title ?? 'Dashboard';
$initial = strtoupper(substr($_SESSION['nama'], 0, 1));
$role = $_SESSION['role'] ?? '';
$nama_user = $_SESSION['nama'] ?? 'User';

/*
|--------------------------------------------------------------------------
| NOTIFIKASI ADMIN
|--------------------------------------------------------------------------
*/
$notif_setoran = 0;
$notif_penarikan = 0;
$total_notif = 0;

if ($role == 'admin' && isset($conn)) {
    $qNotifSetoran = mysqli_query($conn, "SELECT COUNT(*) as total FROM transactions WHERE status='pending'");
    $notif_setoran = mysqli_fetch_assoc($qNotifSetoran)['total'] ?? 0;

    $qNotifPenarikan = mysqli_query($conn, "SELECT COUNT(*) as total FROM withdrawals WHERE status='pending'");
    $notif_penarikan = mysqli_fetch_assoc($qNotifPenarikan)['total'] ?? 0;

    $total_notif = $notif_setoran + $notif_penarikan;
}
?>

<nav class="navbar-modern">
    <div class="d-flex justify-content-between align-items-start align-items-md-center flex-column flex-md-row gap-3">

        <!-- LEFT -->
        <div class="d-flex align-items-center gap-3 w-100">
            <!-- HAMBURGER -->
            <button id="menuToggle" class="btn btn-light d-lg-none px-3 py-2" style="border-radius:12px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
                </svg>
            </button>

            <div>
                <div class="page-title"><?= htmlspecialchars($pageTitle); ?></div>
                <p class="page-subtitle mb-0">Kelola data tabungan dengan lebih nyaman.</p>
            </div>
        </div>

        <!-- RIGHT -->
        <div class="d-flex flex-wrap align-items-center gap-2 w-100 w-md-auto justify-content-start justify-content-md-end">

            <?php if ($role == 'admin'): ?>
            <!-- NOTIFIKASI SVG -->
            <div class="dropdown position-relative me-1">
                <button class="notif-btn position-relative" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <!-- SVG BELL -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.4-1.4A2 2 0 0118 14.2V11a6 6 0 10-12 0v3.2a2 2 0 01-.6 1.4L4 17h5m6 0a3 3 0 11-6 0m6 0H9"/>
                    </svg>

                    <?php if ($total_notif > 0): ?>
                        <span class="notif-top-badge"><?= $total_notif; ?></span>
                    <?php endif; ?>
                </button>

                <ul class="dropdown-menu dropdown-menu-end shadow border-0 p-2 notif-dropdown">
                    <li class="dropdown-header fw-bold d-flex align-items-center gap-2">
                        <!-- SVG HEADER -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.4-1.4A2 2 0 0118 14.2V11a6 6 0 10-12 0v3.2a2 2 0 01-.6 1.4L4 17h5m6 0a3 3 0 11-6 0m6 0H9"/>
                        </svg>
                        Notifikasi
                    </li>

                    <?php if ($notif_setoran > 0): ?>
                        <li>
                            <a class="dropdown-item d-flex justify-content-between align-items-center" href="/tabungan-app/admin/transaksi.php">
                                <span class="d-flex align-items-center gap-2">
                                    <!-- SVG SETORAN -->
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="#0d6efd" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/>
                                    </svg>
                                    Setoran Pending
                                </span>
                                <span class="badge bg-primary rounded-pill"><?= $notif_setoran; ?></span>
                            </a>
                        </li>
                    <?php endif; ?>

                    <?php if ($notif_penarikan > 0): ?>
                        <li>
                            <a class="dropdown-item d-flex justify-content-between align-items-center" href="/tabungan-app/admin/withdrawals.php">
                                <span class="d-flex align-items-center gap-2">
                                    <!-- SVG PENARIKAN -->
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="#dc3545" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 21V9m0 0l4 4m-4-4l-4 4M5 3h14"/>
                                    </svg>
                                    Penarikan Pending
                                </span>
                                <span class="badge bg-danger rounded-pill"><?= $notif_penarikan; ?></span>
                            </a>
                        </li>
                    <?php endif; ?>

                    <?php if ($total_notif == 0): ?>
                        <li>
                            <span class="dropdown-item text-muted d-flex align-items-center gap-2">
                                <!-- SVG EMPTY -->
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="#6c757d" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6M7 4h10l2 2v14H5V6l2-2z"/>
                                </svg>
                                Tidak ada notifikasi baru
                            </span>
                        </li>
                    <?php endif; ?>
                </ul>
            </div>
            <?php endif; ?>

            <!-- USER CHIP -->
            <div class="user-chip">
                <span class="avatar-circle"><?= $initial; ?></span>
                <div>
                    <div class="fw-semibold"><?= htmlspecialchars($nama_user); ?></div>
                    <small class="text-muted text-capitalize"><?= htmlspecialchars($role); ?></small>
                </div>
            </div>

            <!-- LOGOUT -->
            <a href="/tabungan-app/auth/logout.php" class="btn btn-outline-danger btn-sm px-3">
                Logout
            </a>
        </div>
    </div>
</nav>

<style>
/* =========================
   NOTIFIKASI NAVBAR
========================= */
.notif-btn {
    width: 46px;
    height: 46px;
    border: none;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

.notif-btn:hover {
    transform: translateY(-1px);
    background: #f8f9fa;
}

.notif-top-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-shadow: 0 6px 14px rgba(220,53,69,.25);
}

.notif-dropdown {
    width: 310px;
    border-radius: 16px;
    margin-top: 12px;
}

.notif-dropdown .dropdown-item {
    border-radius: 12px;
    padding: 10px 12px;
    transition: 0.2s;
}

.notif-dropdown .dropdown-item:hover {
    background: #f8f9fa;
}
</style>