<?php
session_start();
require_once '../includes/config.php';
require_once '../includes/functions.php';

// Cek apakah user sudah login dan memiliki role reviewer
if (!isset($_SESSION['user_id']) || $_SESSION['user_role'] != 'reviewer') {
    header('Location: ../login.php');
    exit;
}

$error = '';
$success = '';

// Konfigurasi Pagination
$limit = 15;
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$page = max($page, 1);
$offset = ($page - 1) * $limit;

// Filter
$jenis_soal = $_GET['jenis'] ?? 'semua';
$status_review = $_GET['status'] ?? 'semua';
$tanggal_mulai = $_GET['tanggal_mulai'] ?? '';
$tanggal_selesai = $_GET['tanggal_selesai'] ?? '';

// ============================================
// PERBAIKAN: Query Terpisah Tanpa UNION
// ============================================

$riwayat_review = [];
$total_data = 0;
$total_pages = 1;

try {
    // 1. Ambil data dari bank_soal_teori
    $teori_where = ["direview_oleh = ?"];
    $teori_params = [$_SESSION['user_id']];
    
    if ($jenis_soal === 'teori' || $jenis_soal === 'semua') {
        if ($status_review !== 'semua') {
            $teori_where[] = "status_review = ?";
            $teori_params[] = $status_review;
        }
        
        if (!empty($tanggal_mulai)) {
            $teori_where[] = "tanggal_review >= ?";
            $teori_params[] = $tanggal_mulai;
        }
        
        if (!empty($tanggal_selesai)) {
            $teori_where[] = "tanggal_review <= ?";
            $teori_params[] = $tanggal_selesai . ' 23:59:59';
        }
        
        $teori_sql = "SELECT 
            'teori' as jenis,
            bt.id,
            bt.nomor_registrasi,
            bt.tinjauan1,
            bt.department,
            bt.status_review,
            bt.catatan_review,
            bt.tanggal_review,
            bt.direview_oleh,
            u_penulis.nama_lengkap as penulis,
            NULL as semester,
            NULL as blok,
            NULL as cpmk
        FROM bank_soal_teori bt
        LEFT JOIN users_preview u_penulis ON bt.penulis = u_penulis.id
        WHERE " . implode(" AND ", $teori_where);
        
        $stmt = $pdo->prepare($teori_sql);
        $stmt->execute($teori_params);
        $teori_data = $stmt->fetchAll(PDO::FETCH_ASSOC);
        
        foreach ($teori_data as $data) {
            $riwayat_review[] = $data;
        }
    }
    
    // 2. Ambil data dari bank_soal_teori_s1
    $s1_where = ["direview_oleh = ?"];
    $s1_params = [$_SESSION['user_id']];
    
    if ($jenis_soal === 's1' || $jenis_soal === 'semua') {
        if ($status_review !== 'semua') {
            $s1_where[] = "status_review = ?";
            $s1_params[] = $status_review;
        }
        
        if (!empty($tanggal_mulai)) {
            $s1_where[] = "tanggal_review >= ?";
            $s1_params[] = $tanggal_mulai;
        }
        
        if (!empty($tanggal_selesai)) {
            $s1_where[] = "tanggal_review <= ?";
            $s1_params[] = $tanggal_selesai . ' 23:59:59';
        }
        
        $s1_sql = "SELECT 
            's1' as jenis,
            bts.id,
            bts.nomor_registrasi,
            bts.tinjauan1,
            bts.department,
            bts.status_review,
            bts.catatan_review,
            bts.tanggal_review,
            bts.direview_oleh,
            u_penulis.nama_lengkap as penulis,
            bts.semester,
            bts.blok,
            bts.cpmk
        FROM bank_soal_teori_s1 bts
        LEFT JOIN users_preview u_penulis ON bts.penulis = u_penulis.id
        WHERE " . implode(" AND ", $s1_where);
        
        $stmt = $pdo->prepare($s1_sql);
        $stmt->execute($s1_params);
        $s1_data = $stmt->fetchAll(PDO::FETCH_ASSOC);
        
        foreach ($s1_data as $data) {
            $riwayat_review[] = $data;
        }
    }
    
    // 3. Urutkan berdasarkan tanggal review (terbaru di atas)
    usort($riwayat_review, function($a, $b) {
        $dateA = $a['tanggal_review'] ?? '1970-01-01';
        $dateB = $b['tanggal_review'] ?? '1970-01-01';
        return strtotime($dateB) - strtotime($dateA);
    });
    
    // 4. Hitung total data
    $total_data = count($riwayat_review);
    $total_pages = ceil($total_data / $limit);
    
    // 5. Terapkan pagination
    $riwayat_review = array_slice($riwayat_review, $offset, $limit);
    
} catch (PDOException $e) {
    $error = 'Gagal mengambil data riwayat review: ' . $e->getMessage();
    error_log("Error in riwayat_review: " . $e->getMessage());
}

// ============================================
// HITUNG STATISTIK
// ============================================

$stats_total = 0;
$stats_teori = 0;
$stats_s1 = 0;
$stats_sudah = 0;
$stats_revisi = 0;

try {
    // Total review teori
    $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_teori WHERE direview_oleh = ?");
    $stmt->execute([$_SESSION['user_id']]);
    $stats_teori = $stmt->fetchColumn();

    // Total review S1
    $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_teori_s1 WHERE direview_oleh = ?");
    $stmt->execute([$_SESSION['user_id']]);
    $stats_s1 = $stmt->fetchColumn();

    $stats_total = $stats_teori + $stats_s1;

    // Status sudah
    $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_teori WHERE direview_oleh = ? AND status_review = 'sudah'");
    $stmt->execute([$_SESSION['user_id']]);
    $sudah_teori = $stmt->fetchColumn();

    $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_teori_s1 WHERE direview_oleh = ? AND status_review = 'sudah'");
    $stmt->execute([$_SESSION['user_id']]);
    $sudah_s1 = $stmt->fetchColumn();

    $stats_sudah = $sudah_teori + $sudah_s1;

    // Status revisi
    $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_teori WHERE direview_oleh = ? AND status_review = 'revisi'");
    $stmt->execute([$_SESSION['user_id']]);
    $revisi_teori = $stmt->fetchColumn();

    $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_teori_s1 WHERE direview_oleh = ? AND status_review = 'revisi'");
    $stmt->execute([$_SESSION['user_id']]);
    $revisi_s1 = $stmt->fetchColumn();

    $stats_revisi = $revisi_teori + $revisi_s1;

} catch (PDOException $e) {
    error_log("Error calculating stats: " . $e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Riwayat Review - SOCA OSCE System</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* ===== RESET & BASE ===== */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f0f4f8; display: flex; min-height: 100vh; }

        /* ===== SIDEBAR ===== */
        .sidebar {
            width: 260px;
            background: linear-gradient(180deg, #1a2332 0%, #0f1724 100%);
            color: #fff;
            padding: 0;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            z-index: 100;
            transition: all 0.3s ease;
            box-shadow: 4px 0 20px rgba(0,0,0,0.1);
        }
        .sidebar::-webkit-scrollbar { width: 4px; }
        .sidebar::-webkit-scrollbar-track { background: transparent; }
        .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }

        .sidebar-header { padding: 25px 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: center; }
        .sidebar-header h2 { font-size: 20px; font-weight: 700; letter-spacing: 1px; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .sidebar-header p { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; letter-spacing: 2px; text-transform: uppercase; }

        .sidebar-menu { list-style: none; padding: 15px 0; }
        .sidebar-menu li { margin: 2px 12px; }
        .sidebar-menu li a { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: rgba(255,255,255,0.6); text-decoration: none; border-radius: 12px; transition: all 0.3s ease; font-size: 14px; font-weight: 500; }
        .sidebar-menu li a i { width: 20px; font-size: 16px; text-align: center; }
        .sidebar-menu li a:hover { background: rgba(255,255,255,0.08); color: #fff; transform: translateX(4px); }
        .sidebar-menu li a.active { background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(167,139,250,0.2)); color: #60a5fa; box-shadow: inset 3px 0 0 #60a5fa; }
        .sidebar-menu .menu-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 12px 20px; }
        .sidebar-menu .menu-label { padding: 10px 20px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.25); font-weight: 600; }

        /* ===== MAIN CONTENT ===== */
        .main-content { margin-left: 260px; flex: 1; padding: 30px 35px 40px; min-height: 100vh; }

        /* ===== HEADER ===== */
        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; }
        .header-left h1 { font-size: 28px; font-weight: 700; color: #1a2332; letter-spacing: -0.5px; }
        .header-left .subtitle { font-size: 14px; color: #6b7a8f; margin-top: 4px; }
        .header-right { display: flex; align-items: center; gap: 15px; }
        .header-right .user-badge { display: flex; align-items: center; gap: 10px; background: #fff; padding: 8px 16px 8px 12px; border-radius: 50px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
        .header-right .user-badge .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #60a5fa, #a78bfa); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 16px; }
        .header-right .user-badge .user-name { font-weight: 600; font-size: 14px; color: #1a2332; }
        .header-right .user-badge .user-role { font-size: 12px; color: #6b7a8f; }
        .btn-logout { background: #fee2e2; color: #dc2626; border: none; padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
        .btn-logout:hover { background: #fecaca; transform: scale(1.02); }

        /* ===== ALERT ===== */
        .alert { padding: 16px 20px; border-radius: 12px; margin-bottom: 20px; font-weight: 500; display: flex; align-items: center; gap: 12px; }
        .alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
        .alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
        .alert i { font-size: 18px; }

        /* ===== STATS CARDS ===== */
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 25px; }
        .stat-card { background: #fff; border-radius: 14px; padding: 18px 22px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.04); transition: all 0.3s ease; }
        .stat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(0,0,0,0.08); }
        .stat-card .stat-number { font-size: 26px; font-weight: 700; color: #1a2332; }
        .stat-card .stat-label { font-size: 13px; color: #6b7a8f; font-weight: 500; }
        .stat-card .stat-icon { float: right; font-size: 26px; opacity: 0.3; }
        .stat-card.purple .stat-icon { color: #7c3aed; }
        .stat-card.blue .stat-icon { color: #2563eb; }
        .stat-card.green .stat-icon { color: #059669; }
        .stat-card.orange .stat-icon { color: #f59e0b; }
        .stat-card.red .stat-icon { color: #dc2626; }

        /* ===== FILTER CONTAINER ===== */
        .filter-container { background: #fff; border-radius: 16px; padding: 24px 28px; margin-bottom: 25px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.04); }
        .filter-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
        .filter-header h3 { font-size: 16px; font-weight: 600; color: #1a2332; display: flex; align-items: center; gap: 10px; }
        .filter-header h3 i { color: #60a5fa; }

        .filter-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; align-items: end; }
        .filter-group label { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 4px; }
        .filter-group .form-control { width: 100%; padding: 8px 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; background: #f8fafc; transition: all 0.3s ease; font-family: inherit; }
        .filter-group .form-control:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,0.1); background: #fff; }

        .filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }

        .btn { padding: 8px 18px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
        .btn-primary { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(37,99,235,0.3); }
        .btn-secondary { background: #f1f5f9; color: #475569; }
        .btn-secondary:hover { background: #e2e8f0; }
        .btn-sm { padding: 4px 12px; font-size: 12px; border-radius: 6px; }

        /* ===== SOAL LIST ===== */
        .soal-list-container { background: #fff; border-radius: 16px; padding: 24px 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.04); }
        .list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
        .list-title { font-size: 18px; font-weight: 700; color: #1a2332; display: flex; align-items: center; gap: 10px; }
        .list-title i { color: #60a5fa; }

        /* ===== TABLE ===== */
        .table-wrapper { overflow-x: auto; }
        .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .data-table thead { background: #f8fafc; }
        .data-table th { padding: 10px 14px; text-align: left; font-weight: 600; color: #475569; border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
        .data-table td { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; color: #1a2332; vertical-align: middle; }
        .data-table tbody tr { transition: all 0.2s ease; }
        .data-table tbody tr:hover { background: #f8fafc; }

        /* ===== BADGES ===== */
        .badge { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 11px; font-weight: 600; }
        .badge-department { background: #dbeafe; color: #2563eb; }
        .badge-jenis-teori { background: #dbeafe; color: #2563eb; }
        .badge-jenis-s1 { background: #ede9fe; color: #7c3aed; }

        .review-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 600; }
        .review-badge.sudah { background: #d1fae5; color: #059669; }
        .review-badge.revisi { background: #fee2e2; color: #dc2626; }

        /* ===== ACTIONS ===== */
        .action-buttons { display: flex; gap: 4px; flex-wrap: wrap; }
        .btn-action { padding: 4px 12px; border-radius: 6px; font-size: 12px; text-decoration: none; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 4px; border: none; cursor: pointer; }
        .btn-action:hover { transform: translateY(-1px); }
        .btn-review { background: #eff6ff; color: #2563eb; }
        .btn-review:hover { background: #dbeafe; }

        .catatan-preview { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* ===== EMPTY STATE ===== */
        .empty-state { text-align: center; padding: 60px 20px; color: #6b7a8f; background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.04); }
        .empty-state i { font-size: 56px; color: #d1d5db; margin-bottom: 16px; display: block; }
        .empty-state h3 { font-size: 20px; color: #1a2332; margin-bottom: 8px; }
        .empty-state p { font-size: 14px; margin-bottom: 16px; }

        /* ===== PAGINATION ===== */
        .pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
        .pagination-info { color: #6b7a8f; font-size: 13px; width: 100%; text-align: center; }
        .pagination-links { display: flex; gap: 4px; flex-wrap: wrap; }
        .pagination a, .pagination span { display: inline-block; padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 6px; text-decoration: none; color: #475569; font-size: 13px; min-width: 36px; text-align: center; transition: all 0.3s ease; }
        .pagination a:hover { background: #eff6ff; border-color: #60a5fa; color: #2563eb; }
        .pagination .current { background: #2563eb; color: #fff; border-color: #2563eb; }
        .pagination .disabled { color: #94a3b8; cursor: not-allowed; background: #f1f5f9; }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 992px) { .sidebar { width: 220px; } .main-content { margin-left: 220px; padding: 20px; } }
        @media (max-width: 768px) { 
            .sidebar { width: 0; transform: translateX(-100%); } 
            .sidebar.open { width: 280px; transform: translateX(0); } 
            .main-content { margin-left: 0; padding: 15px; } 
            .header { flex-direction: column; align-items: flex-start; } 
            .filter-form { grid-template-columns: 1fr; } 
            .filter-actions { flex-direction: column; width: 100%; } 
            .filter-actions .btn { width: 100%; justify-content: center; } 
            .data-table { font-size: 12px; } 
            .data-table th, .data-table td { padding: 6px 8px; } 
        }
        @media (max-width: 480px) { .header-left h1 { font-size: 22px; } .stats-grid { grid-template-columns: 1fr 1fr; } }

        .hamburger { display: none; background: none; border: none; font-size: 24px; color: #1a2332; cursor: pointer; padding: 8px; }
        @media (max-width: 768px) { .hamburger { display: block; } }

        .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99; }
        .sidebar-overlay.active { display: block; }

        .scroll-top { position: fixed; bottom: 30px; right: 30px; background: #2563eb; color: #fff; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; font-size: 18px; box-shadow: 0 4px 16px rgba(37,99,235,0.3); transition: all 0.3s ease; opacity: 0; visibility: hidden; z-index: 50; }
        .scroll-top.visible { opacity: 1; visibility: visible; }
        .scroll-top:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(37,99,235,0.4); }
    </style>
</head>
<body>
    <!-- Overlay untuk mobile -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <!-- Sidebar -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h2>SOCA/OSCE</h2>
            <p>Reviewer Panel</p>
        </div>
        <ul class="sidebar-menu">
            <li class="menu-label">Main Menu</li>
            <li><a href="dashboard_reviewer.php"><i class="fas fa-th-large"></i> Dashboard</a></li>
            
            <li class="menu-divider"></li>
            <li class="menu-label">Review</li>
            <li><a href="review_soal_teori_s1.php"><i class="fas fa-book-open"></i> Review Soal Teori S1</a></li>
            <li><a href="review_soal_teori.php"><i class="fas fa-book"></i> Review Soal Teori Profesi</a></li>
            <li><a href="review_soal_praktik.php"><i class="fas fa-clipboard-check"></i> Review Soal Praktik</a></li>
            <li><a href="review_aspek_penilaian.php"><i class="fas fa-eye"></i> Preview Aspek Penilaian</a></li>
            
            <li class="menu-divider"></li>
            <li><a href="riwayat_review.php" class="active"><i class="fas fa-history"></i> Riwayat Review</a></li>
            <li><a href="panduan_review.php"><i class="fas fa-book"></i> Panduan Review</a></li>
            <li><a href="../logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
        </ul>
    </div>

    <!-- Main Content -->
    <div class="main-content">
        <!-- Header -->
        <div class="header">
            <div class="header-left">
                <button class="hamburger" id="hamburgerBtn">
                    <i class="fas fa-bars"></i>
                </button>
                <h1>Riwayat Review</h1>
                <div class="subtitle">Lihat semua review yang telah Anda lakukan</div>
            </div>
            <div class="header-right">
                <div class="user-badge">
                    <div class="avatar">
                        <?php echo strtoupper(substr($_SESSION['user_name'] ?? 'R', 0, 1)); ?>
                    </div>
                    <div>
                        <div class="user-name"><?php echo $_SESSION['user_name'] ?? 'Reviewer'; ?></div>
                        <div class="user-role">Reviewer</div>
                    </div>
                </div>
                <a href="../logout.php" class="btn-logout">
                    <i class="fas fa-sign-out-alt"></i> Logout
                </a>
            </div>
        </div>

        <!-- Alert -->
        <?php if ($error): ?>
            <div class="alert alert-error">
                <i class="fas fa-exclamation-circle"></i>
                <?php echo $error; ?>
            </div>
        <?php endif; ?>
        
        <?php if ($success): ?>
            <div class="alert alert-success">
                <i class="fas fa-check-circle"></i>
                <?php echo $success; ?>
            </div>
        <?php endif; ?>

        <!-- Stats Cards -->
        <div class="stats-grid">
            <div class="stat-card purple">
                <div class="stat-icon"><i class="fas fa-history"></i></div>
                <div class="stat-number"><?php echo $stats_total; ?></div>
                <div class="stat-label">Total Review</div>
            </div>
            <div class="stat-card blue">
                <div class="stat-icon"><i class="fas fa-book"></i></div>
                <div class="stat-number"><?php echo $stats_teori; ?></div>
                <div class="stat-label">Soal Teori</div>
            </div>
            <div class="stat-card green">
                <div class="stat-icon"><i class="fas fa-book-open"></i></div>
                <div class="stat-number"><?php echo $stats_s1; ?></div>
                <div class="stat-label">Soal S1</div>
            </div>
            <div class="stat-card orange">
                <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
                <div class="stat-number"><?php echo $stats_sudah; ?></div>
                <div class="stat-label">Disetujui</div>
            </div>
            <div class="stat-card red">
                <div class="stat-icon"><i class="fas fa-redo"></i></div>
                <div class="stat-number"><?php echo $stats_revisi; ?></div>
                <div class="stat-label">Perlu Revisi</div>
            </div>
        </div>

        <!-- Filter -->
        <div class="filter-container">
            <div class="filter-header">
                <h3><i class="fas fa-filter"></i> Filter Riwayat</h3>
            </div>
            <form method="GET" class="filter-form">
                <div class="filter-group">
                    <label for="jenis">Jenis Soal</label>
                    <select id="jenis" name="jenis" class="form-control">
                        <option value="semua" <?php echo $jenis_soal === 'semua' ? 'selected' : ''; ?>>Semua Jenis</option>
                        <option value="teori" <?php echo $jenis_soal === 'teori' ? 'selected' : ''; ?>>Teori Reguler</option>
                        <option value="s1" <?php echo $jenis_soal === 's1' ? 'selected' : ''; ?>>Teori S1</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label for="status">Status Review</label>
                    <select id="status" name="status" class="form-control">
                        <option value="semua" <?php echo $status_review === 'semua' ? 'selected' : ''; ?>>Semua Status</option>
                        <option value="sudah" <?php echo $status_review === 'sudah' ? 'selected' : ''; ?>>Disetujui</option>
                        <option value="revisi" <?php echo $status_review === 'revisi' ? 'selected' : ''; ?>>Perlu Revisi</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label for="tanggal_mulai">Tanggal Mulai</label>
                    <input type="date" id="tanggal_mulai" name="tanggal_mulai" class="form-control" value="<?php echo htmlspecialchars($tanggal_mulai); ?>">
                </div>

                <div class="filter-group">
                    <label for="tanggal_selesai">Tanggal Selesai</label>
                    <input type="date" id="tanggal_selesai" name="tanggal_selesai" class="form-control" value="<?php echo htmlspecialchars($tanggal_selesai); ?>">
                </div>

                <div class="filter-actions">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search"></i> Terapkan
                    </button>
                    <a href="riwayat_review.php" class="btn btn-secondary">
                        <i class="fas fa-redo"></i> Reset
                    </a>
                </div>
            </form>
        </div>

        <!-- Tabel Riwayat -->
        <div class="soal-list-container">
            <div class="list-header">
                <div class="list-title">
                    <i class="fas fa-history"></i>
                    Riwayat Review Anda
                    <span style="font-size:14px; font-weight:400; color:#6b7a8f;">
                        (<?php echo count($riwayat_review); ?> dari <?php echo $total_data; ?>)
                    </span>
                </div>
            </div>

            <?php if (empty($riwayat_review)): ?>
                <div class="empty-state">
                    <i class="fas fa-history"></i>
                    <h3>Belum ada riwayat review</h3>
                    <p>Anda belum melakukan review soal apapun.</p>
                    <a href="review_soal_teori.php" class="btn btn-primary">
                        <i class="fas fa-play-circle"></i> Mulai Review
                    </a>
                </div>
            <?php else: ?>
                <div class="table-wrapper">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Jenis</th>
                                <th>No. Registrasi</th>
                                <th>Kompetensi Utama</th>
                                <th>Department</th>
                                <th>Status</th>
                                <th>Penulis</th>
                                <th>Tanggal Review</th>
                                <th>Catatan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                            $counter = ($page - 1) * $limit + 1;
                            foreach ($riwayat_review as $riwayat): 
                                $status_class = $riwayat['status_review'] == 'sudah' ? 'sudah' : 'revisi';
                                $status_text = $riwayat['status_review'] == 'sudah' ? 'Disetujui' : 'Perlu Revisi';
                                $jenis_class = $riwayat['jenis'] == 'teori' ? 'teori' : 's1';
                                $jenis_text = $riwayat['jenis'] == 'teori' ? 'Teori' : 'S1';
                            ?>
                                <tr>
                                    <td><?php echo $counter++; ?></td>
                                    <td>
                                        <span class="badge badge-jenis-<?php echo $jenis_class; ?>">
                                            <?php echo $jenis_text; ?>
                                        </span>
                                        <?php if ($riwayat['jenis'] == 's1'): ?>
                                            <br>
                                            <small style="font-size:10px;color:#6b7a8f;">
                                                Blok: <?php echo htmlspecialchars($riwayat['blok'] ?? '-'); ?>
                                            </small>
                                        <?php endif; ?>
                                    </td>
                                    <td><strong><?php echo htmlspecialchars($riwayat['nomor_registrasi']); ?></strong></td>
                                    <td><?php echo htmlspecialchars($riwayat['tinjauan1']); ?></td>
                                    <td><span class="badge badge-department"><?php echo htmlspecialchars($riwayat['department'] ?? '-'); ?></span></td>
                                    <td>
                                        <span class="review-badge <?php echo $status_class; ?>">
                                            <i class="fas <?php echo $riwayat['status_review'] == 'sudah' ? 'fa-check-circle' : 'fa-exclamation-circle'; ?>"></i>
                                            <?php echo $status_text; ?>
                                        </span>
                                    </td>
                                    <td><?php echo htmlspecialchars($riwayat['penulis'] ?? '-'); ?></td>
                                    <td>
                                        <?php if (!empty($riwayat['tanggal_review'])): ?>
                                            <?php echo date('d/m/Y H:i', strtotime($riwayat['tanggal_review'])); ?>
                                        <?php else: ?>
                                            <span style="color:#94a3b8;">-</span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="catatan-preview" title="<?php echo htmlspecialchars($riwayat['catatan_review'] ?? ''); ?>">
                                        <?php 
                                        if (!empty($riwayat['catatan_review'])) {
                                            echo htmlspecialchars(substr($riwayat['catatan_review'], 0, 50));
                                            if (strlen($riwayat['catatan_review']) > 50) echo '...';
                                        } else {
                                            echo '<span style="color:#94a3b8;">-</span>';
                                        }
                                        ?>
                                    </td>
                                    <td>
                                        <div class="action-buttons">
                                            <?php if ($riwayat['jenis'] == 'teori'): ?>
                                                <a href="review_soal_teori.php?review_id=<?php echo $riwayat['id']; ?>" 
                                                   class="btn-action btn-review" title="Lihat Detail">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            <?php else: ?>
                                                <a href="review_soal_teori_s1.php?review_id=<?php echo $riwayat['id']; ?>" 
                                                   class="btn-action btn-review" title="Lihat Detail">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            <?php endif; ?>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <?php if ($total_pages > 1): ?>
                    <div class="pagination">
                        <div class="pagination-info">
                            Menampilkan <?php echo (($page - 1) * $limit) + 1; ?> - 
                            <?php echo min($page * $limit, $total_data); ?> dari <?php echo $total_data; ?> riwayat
                        </div>
                        <div class="pagination-links">
                            <?php if ($page > 1): ?>
                                <a href="riwayat_review.php?<?php 
                                    echo 'jenis=' . $jenis_soal . '&';
                                    echo 'status=' . $status_review . '&';
                                    echo 'tanggal_mulai=' . $tanggal_mulai . '&';
                                    echo 'tanggal_selesai=' . $tanggal_selesai . '&';
                                    echo 'page=' . ($page - 1);
                                ?>">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                            <?php else: ?>
                                <span class="disabled"><i class="fas fa-chevron-left"></i></span>
                            <?php endif; ?>

                            <?php 
                            $start_page = max(1, $page - 2);
                            $end_page = min($total_pages, $page + 2);
                            for ($i = $start_page; $i <= $end_page; $i++): 
                                if ($i == $page): ?>
                                    <span class="current"><?php echo $i; ?></span>
                                <?php else: ?>
                                    <a href="riwayat_review.php?<?php 
                                        echo 'jenis=' . $jenis_soal . '&';
                                        echo 'status=' . $status_review . '&';
                                        echo 'tanggal_mulai=' . $tanggal_mulai . '&';
                                        echo 'tanggal_selesai=' . $tanggal_selesai . '&';
                                        echo 'page=' . $i;
                                    ?>"><?php echo $i; ?></a>
                                <?php endif;
                            endfor; ?>

                            <?php if ($page < $total_pages): ?>
                                <a href="riwayat_review.php?<?php 
                                    echo 'jenis=' . $jenis_soal . '&';
                                    echo 'status=' . $status_review . '&';
                                    echo 'tanggal_mulai=' . $tanggal_mulai . '&';
                                    echo 'tanggal_selesai=' . $tanggal_selesai . '&';
                                    echo 'page=' . ($page + 1);
                                ?>">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            <?php else: ?>
                                <span class="disabled"><i class="fas fa-chevron-right"></i></span>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endif; ?>
        </div>
    </div>

    <!-- Scroll to Top -->
    <button class="scroll-top" id="scrollTopBtn" title="Kembali ke atas">
        <i class="fas fa-arrow-up"></i>
    </button>

    <script>
        // ===== SIDEBAR TOGGLE =====
        const hamburger = document.getElementById('hamburgerBtn');
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebarOverlay');

        function toggleSidebar() {
            sidebar.classList.toggle('open');
            overlay.classList.toggle('active');
        }

        hamburger.addEventListener('click', toggleSidebar);
        overlay.addEventListener('click', toggleSidebar);

        // ===== CLOSE SIDEBAR ON RESIZE =====
        window.addEventListener('resize', function() {
            if (window.innerWidth > 768) {
                sidebar.classList.remove('open');
                overlay.classList.remove('active');
            }
        });

        // ===== SCROLL TO TOP =====
        const scrollBtn = document.getElementById('scrollTopBtn');
        window.addEventListener('scroll', function() {
            if (window.scrollY > 300) {
                scrollBtn.classList.add('visible');
            } else {
                scrollBtn.classList.remove('visible');
            }
        });

        scrollBtn.addEventListener('click', function() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        // ===== VALIDASI TANGGAL =====
        document.addEventListener('DOMContentLoaded', function() {
            const tanggalMulai = document.getElementById('tanggal_mulai');
            const tanggalSelesai = document.getElementById('tanggal_selesai');
            
            if (tanggalMulai && tanggalSelesai) {
                tanggalMulai.addEventListener('change', function() {
                    if (this.value && tanggalSelesai.value && this.value > tanggalSelesai.value) {
                        alert('Tanggal mulai tidak boleh lebih besar dari tanggal selesai!');
                        this.value = '';
                    }
                });
                
                tanggalSelesai.addEventListener('change', function() {
                    if (this.value && tanggalMulai.value && this.value < tanggalMulai.value) {
                        alert('Tanggal selesai tidak boleh lebih kecil dari tanggal mulai!');
                        this.value = '';
                    }
                });
            }
        });
    </script>
</body>
</html>