<?php
/**
 * Header Include - Sidebar & Top Bar
 * Koperasi Management System
 */

require_once __DIR__ . '/../config/auth.php';
requireLogin();

$currentPage = basename($_SERVER['PHP_SELF'], '.php');
$user = currentUser();
$initials = '';
if ($user) {
    $words = explode(' ', $user['nama_lengkap']);
    $initials = strtoupper(substr($words[0], 0, 1));
    if (count($words) > 1) {
        $initials .= strtoupper(substr(end($words), 0, 1));
    }
}
$namaKoperasi = "KOPERASI TSUROYYA";
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Sistem Manajemen Koperasi - <?= htmlspecialchars($namaKoperasi) ?>">
    <title><?= $pageTitle ?? 'Dashboard' ?> - <?= htmlspecialchars($namaKoperasi) ?></title>
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    
    <!-- App CSS -->
    <link rel="stylesheet" href="<?= ASSETS_URL ?>/css/style.css">
</head>
<body>
<div class="app-layout">

    <!-- Sidebar Overlay (Mobile) -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <!-- Sidebar -->
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-header" style="flex-direction: column; padding: 20px 15px; text-align: center; gap: 10px; position: relative;">
            <button class="sidebar-collapse-btn" onclick="toggleSidebarCollapse()" title="Collapse sidebar" style="position: absolute; top: 12px; right: 12px; background: none; border: none; color: rgba(255, 255, 255, 0.5); font-size: 1.1rem; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; border-radius: 6px;">
                <i class="fas fa-chevron-left"></i>
            </button>
            <div class="logo-container" style="width: 100px; margin: 0 auto;">
                <img src="<?= ASSETS_URL ?>/image/koperasi.png" alt="Logo" style="width: 100%; height: auto; display: block;">
            </div>
            <div class="logo-text" style="text-align: center;">
                <span style="color: rgba(255, 255, 255, 0.4); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;">Management System</span>
            </div>
        </div>

        <nav class="sidebar-nav">
            <div class="nav-section">
                <div class="nav-section-title">Menu Utama</div>
                <a href="<?= APP_URL ?>/index.php" class="nav-item <?= $currentPage === 'index' ? 'active' : '' ?>">
                    <i class="fas fa-th-large"></i>
                    <span>Dashboard</span>
                </a>
                <a href="<?= APP_URL ?>/anggota.php" class="nav-item <?= $currentPage === 'anggota' ? 'active' : '' ?>">
                    <i class="fas fa-users"></i>
                    <span>Anggota</span>
                </a>
                <a href="<?= APP_URL ?>/pengurus.php" class="nav-item <?= $currentPage === 'pengurus' ? 'active' : '' ?>">
                    <i class="fas fa-user-tie"></i>
                    <span>Pengurus</span>
                </a>
            </div>

            <div class="nav-section">
                <div class="nav-section-title">Transaksi</div>
                <a href="<?= APP_URL ?>/simpanan/simpanan_pokok.php" class="nav-item <?= $currentPage === 'simpanan_pokok' ? 'active' : '' ?>">
                    <i class="fas fa-coins"></i>
                    <span>Simpanan Pokok</span>
                </a>
                <a href="<?= APP_URL ?>/simpanan/simpanan_wajib.php" class="nav-item <?= $currentPage === 'simpanan_wajib' ? 'active' : '' ?>">
                    <i class="fas fa-calendar-check"></i>
                    <span>Simpanan Wajib</span>
                </a>
                <a href="<?= APP_URL ?>/simpanan/simpanan_sukarela.php" class="nav-item <?= $currentPage === 'simpanan_sukarela' ? 'active' : '' ?>">
                    <i class="fas fa-hand-holding-heart"></i>
                    <span>Simpanan Sukarela</span>
                </a>
                <a href="<?= APP_URL ?>/simpanan/simpanan_dana_pensiun.php" class="nav-item <?= $currentPage === 'simpanan_dana_pensiun' ? 'active' : '' ?>">
                    <i class="fas fa-umbrella"></i>
                    <span>Dana Pensiun</span>
                </a>
                <a href="<?= APP_URL ?>/pinjaman.php" class="nav-item <?= $currentPage === 'pinjaman' ? 'active' : '' ?>">
                    <i class="fas fa-hand-holding-usd"></i>
                    <span>Pinjaman</span>
                </a>
                <a href="<?= APP_URL ?>/includes/upload_berkas.php" class="nav-item <?= $currentPage === 'upload_berkas' ? 'active' : '' ?>">
                    <i class="fas fa-file-upload"></i>
                    <span>Upload Berkas</span>
                </a>
                <a href="<?= APP_URL ?>/provisi.php" class="nav-item <?= $currentPage === 'provisi' ? 'active' : '' ?>">
                    <i class="fas fa-coins"></i>
                    <span>Provisi</span>
                </a>
                <a href="<?= APP_URL ?>/konsumsi.php" class="nav-item <?= $currentPage === 'konsumsi' ? 'active' : '' ?>">
                    <i class="fas fa-shopping-cart"></i>
                    <span>Koperasi Konsumsi</span>
                </a>
            </div>

            <div class="nav-section">
                <div class="nav-section-title">Laporan</div>
                <a href="<?= APP_URL ?>/reports/laporan.php" class="nav-item <?= $currentPage === 'laporan' ? 'active' : '' ?>">
                    <i class="fas fa-list-alt"></i>
                    <span>Laporan Transaksi</span>
                </a>
                <a href="<?= APP_URL ?>/reports/laporan_laba_rugi.php" class="nav-item <?= $currentPage === 'laporan_laba_rugi' ? 'active' : '' ?>">
                    <i class="fas fa-chart-line"></i>
                    <span>Laporan Laba Rugi</span>
                </a>
                <a href="<?= APP_URL ?>/shu.php" class="nav-item <?= $currentPage === 'shu' ? 'active' : '' ?>">
                    <i class="fas fa-divide"></i>
                    <span>SHU</span>
                </a>
            </div>
            <div class="nav-section">
                <div class="nav-section-title">Khusus Siswa</div>
                <a href="<?= APP_URL ?>/tabungan-siswa/" class="nav-item <?= strpos($_SERVER['PHP_SELF'], '/tabungan-siswa/') !== false ? 'active' : '' ?>">
                    <i class="fas fa-graduation-cap"></i>
                    <span>Tabungan Siswa</span>
                </a>
            </div>

            <?php if ($user['role'] === 'admin'): ?>
            <div class="nav-section">
                <div class="nav-section-title">Pengaturan</div>
                <a href="<?= APP_URL ?>/users.php" class="nav-item <?= $currentPage === 'users' ? 'active' : '' ?>">
                    <i class="fas fa-user-shield"></i>
                    <span>Manajemen User</span>
                </a>
                <a href="<?= APP_URL ?>/backup_restore.php" class="nav-item <?= $currentPage === 'backup_restore' ? 'active' : '' ?>">
                    <i class="fas fa-database"></i>
                    <span>Backup & Update Sistem</span>
                </a>
            </div>
            <?php endif; ?>
        </nav>

        <div class="sidebar-footer">
            <div class="sidebar-user">
                <div class="user-avatar"><?= $initials ?></div>
                <div class="user-info">
                    <div class="user-name"><?= htmlspecialchars($user['nama_lengkap']) ?></div>
                    <div class="user-role"><?= $user['role'] ?></div>
                </div>
                <a href="<?= APP_URL ?>/logout.php" class="sidebar-user-logout" title="Logout"><i class="fas fa-sign-out-alt"></i></a>
            </div>
        </div>
    </aside>

    <!-- Main Content -->
    <main class="main-content">
        <!-- Top Bar -->
        <div class="topbar">
            <!-- Left Side: Title & Breadcrumbs -->
            <div class="topbar-left">
                <button class="menu-toggle" onclick="toggleSidebar()">
                    <i class="fas fa-bars"></i>
                </button>
                <div class="page-title">
                    <h1><?= $pageTitle ?? 'Dashboard' ?></h1>
                    <div class="breadcrumb">
                        <span class="breadcrumb-item">Home</span>
                        <span class="breadcrumb-item active"><?= $pageTitle ?? 'Dashboard' ?></span>
                    </div>
                </div>
            </div>

            <!-- Right Side: Actions, Clock, User -->
            <div class="topbar-right">
                <!-- Action Group: Search & Notifications -->
                <div class="action-group">
                    <!-- Search Dropdown -->
                    <div class="search-dropdown">
                        <button class="topbar-btn" id="searchToggle" title="Cari">
                            <i class="fas fa-search"></i>
                        </button>
                        
                        <div class="dropdown-menu search-menu" id="searchMenu">
                            <div class="search-input-wrapper">
                                <i class="fas fa-search"></i>
                                <input type="text" id="globalSearch" placeholder="Cari anggota, transaksi..." autocomplete="off">
                            </div>
                            <div class="search-results" id="searchResults">
                                <div class="search-hint">
                                    <i class="fas fa-keyboard"></i>
                                    <span>Ketik untuk mencari...</span>
                                </div>
                            </div>
                            <div class="search-footer">
                                <a href="<?= APP_URL ?>/anggota.php" class="search-all-link" id="searchAllLink">
                                    <i class="fas fa-arrow-right"></i>
                                    <span>Lihat semua hasil</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Notification Dropdown -->
                    <div class="notification-dropdown">
                        <?php
                        $notifStmt = $db->prepare("SELECT * FROM notifications WHERE user_id = ? OR user_id IS NULL ORDER BY created_at DESC LIMIT 5");
                        $notifStmt->execute([$_SESSION['user_id']]);
                        $notifications = $notifStmt->fetchAll();
                        $unreadCount = 0;
                        foreach ($notifications as $n) {
                            if (!$n['is_read']) $unreadCount++;
                        }
                        ?>
                        <button class="topbar-btn" id="notificationToggle" title="Notifikasi">
                            <i class="fas fa-bell"></i>
                            <?php if ($unreadCount > 0): ?>
                                <span class="badge-dot"></span>
                            <?php endif; ?>
                        </button>
                        
                        <div class="dropdown-menu notification-menu" id="notificationMenu">
                            <div class="dropdown-header">
                                <strong>Notifikasi</strong>
                                <?php if ($unreadCount > 0): ?>
                                    <span class="badge badge-primary" style="padding: 2px 8px; font-size: 0.7rem;"><?= $unreadCount ?> Baru</span>
                                <?php endif; ?>
                            </div>
                            <div class="dropdown-divider"></div>
                            <div class="notification-list">
                                <?php if (empty($notifications)): ?>
                                    <div class="notification-empty">
                                        <i class="fas fa-bell-slash"></i>
                                        <p>Tidak ada notifikasi</p>
                                    </div>
                                <?php else: ?>
                                    <?php foreach ($notifications as $n): ?>
                                        <a href="#" class="notification-item <?= !$n['is_read'] ? 'unread' : '' ?>">
                                            <div class="notif-icon <?= $n['type'] ?>">
                                                <i class="fas fa-<?= $n['type'] === 'success' ? 'check-circle' : ($n['type'] === 'warning' ? 'exclamation-triangle' : ($n['type'] === 'danger' ? 'times-circle' : 'info-circle')) ?>"></i>
                                            </div>
                                            <div class="notif-content">
                                                <div class="notif-title"><?= htmlspecialchars($n['title']) ?></div>
                                                <div class="notif-message"><?= htmlspecialchars($n['message']) ?></div>
                                                <div class="notif-time"><?= date('H:i', strtotime($n['created_at'])) ?> WIB</div>
                                            </div>
                                        </a>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </div>
                            <div class="dropdown-divider"></div>
                            <a href="<?= APP_URL ?>/notifications.php" class="dropdown-item text-center" style="justify-content: center; font-size: 0.8rem; font-weight: 600; color: var(--primary-600);">Lihat Semua</a>
                        </div>
                    </div>
                </div>

                <div class="header-divider"></div>

                <!-- Real-time Clock (Vertical Stacked) -->
                <div class="header-time">
                    <span id="header-clock" class="time-now">...</span>
                    <span id="header-date" class="date-now">...</span>
                </div>

                <div class="header-divider"></div>

                <!-- User Dropdown Profile -->
                <div class="user-dropdown">
                    <button class="user-profile-toggle" id="userDropdownToggle">
                        <div class="toggle-avatar"><?= $initials ?></div>
                        <div class="toggle-info">
                            <span class="toggle-name"><?= htmlspecialchars($user['nama_lengkap']) ?></span>
                            <span class="toggle-role"><?= $user['role'] ?></span>
                        </div>
                        <i class="fas fa-chevron-down toggle-chevron"></i>
                    </button>
                    
                    <!-- Floating Dropdown Menu -->
                    <div class="dropdown-menu" id="userDropdownMenu">
                        <div class="dropdown-header">
                            <strong><?= htmlspecialchars($user['nama_lengkap']) ?></strong>
                            <span><?= $user['role'] ?></span>
                        </div>
                        <div class="dropdown-divider"></div>
                        <a href="<?= APP_URL ?>/profile.php" class="dropdown-item">
                            <i class="fas fa-user-circle"></i>
                            <span>Profil Saya</span>
                        </a>
                        <a href="<?= APP_URL ?>/settings.php" class="dropdown-item">
                            <i class="fas fa-cog"></i>
                            <span>Pengaturan Akun</span>
                        </a>
                        <div class="dropdown-divider"></div>
                        <a href="<?= APP_URL ?>/logout.php" class="dropdown-item logout">
                            <i class="fas fa-sign-out-alt"></i>
                            <span>Keluar</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="content">
            <?php
            $flash = getFlash();
            if ($flash): ?>
                <div class="alert alert-<?= $flash['type'] ?>">
                    <i class="fas fa-<?= $flash['type'] === 'success' ? 'check-circle' : ($flash['type'] === 'danger' ? 'exclamation-circle' : 'info-circle') ?>"></i>
                    <?= $flash['message'] ?>
                    <button class="alert-close"><i class="fas fa-times"></i></button>
                </div>
            <?php endif; ?>
