<?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 = '';

// Ambil ID soal untuk review/edit
$review_soal_id = $_GET['review_id'] ?? '';
$edit_soal_id = $_GET['edit_id'] ?? '';

// Data soal yang akan direview/diedit
$review_soal = null;
$edit_soal = null;

// Data soal yang akan direview
if (!empty($review_soal_id)) {
    try {
        $stmt = $pdo->prepare("SELECT bt.*, u.nama_lengkap as nama_penulis 
                              FROM bank_soal_teori_s1 bt 
                              LEFT JOIN users_preview u ON bt.penulis = u.id 
                              WHERE bt.id = ?");
        $stmt->execute([$review_soal_id]);
        $review_soal = $stmt->fetch(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        $error = 'Gagal mengambil data soal untuk review: ' . $e->getMessage();
    }
}

// Data soal yang akan diedit
if (!empty($edit_soal_id)) {
    try {
        $stmt = $pdo->prepare("SELECT bt.*, u.nama_lengkap as nama_penulis 
                              FROM bank_soal_teori_s1 bt 
                              LEFT JOIN users_preview u ON bt.penulis = u.id 
                              WHERE bt.id = ?");
        $stmt->execute([$edit_soal_id]);
        $edit_soal = $stmt->fetch(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        $error = 'Gagal mengambil data soal untuk edit: ' . $e->getMessage();
    }
}

// Proses submit review
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submit_review'])) {
    try {
        $id = $_POST['id'];
        $status_review = $_POST['status_review'];
        $catatan_review = $_POST['catatan_review'] ?? '';
        
        $stmt = $pdo->prepare("UPDATE bank_soal_teori_s1 SET 
                              direview_oleh = ?, 
                              tanggal_review = NOW(), 
                              status_review = ?, 
                              catatan_review = ?
                              WHERE id = ?");
        
        $stmt->execute([
            $_SESSION['user_id'],
            $status_review,
            $catatan_review,
            $id
        ]);
        
        $success = 'Review berhasil disimpan!';
        
        header("Location: review_soal_teori_s1.php?review_id=" . $id);
        exit;
        
    } catch (PDOException $e) {
        $error = 'Gagal menyimpan review: ' . $e->getMessage();
    }
}

// Proses update soal (edit oleh reviewer)
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['update_soal'])) {
    try {
        $id = $_POST['id'];
        $tinjauan1 = $_POST['tinjauan1'];
        $tinjauan2 = $_POST['tinjauan2'] ?? '';
        $tinjauan3 = $_POST['tinjauan3'] ?? '';
        $semester = $_POST['semester'];
        $blok = $_POST['blok'];
        $cpmk = $_POST['cpmk'];
        $vignette = $_POST['vignette'] ?? '';
        $pertanyaan = $_POST['pertanyaan'];
        $pilihan_a = $_POST['pilihan_a'] ?? '';
        $pilihan_b = $_POST['pilihan_b'] ?? '';
        $pilihan_c = $_POST['pilihan_c'] ?? '';
        $pilihan_d = $_POST['pilihan_d'] ?? '';
        $pilihan_e = $_POST['pilihan_e'] ?? '';
        $kunci = $_POST['kunci'] ?? '';
        $alasan_singkat = $_POST['alasan_singkat'] ?? '';
        $referensi = $_POST['referensi'] ?? '';
        $catatan_perubahan = $_POST['catatan_perubahan'] ?? '';

        $stmt = $pdo->prepare("UPDATE bank_soal_teori_s1 SET 
                              tinjauan1 = ?, tinjauan2 = ?, tinjauan3 = ?,
                              semester = ?, blok = ?, cpmk = ?,
                              vignette = ?, pertanyaan = ?, 
                              pilihan_a = ?, pilihan_b = ?, pilihan_c = ?, pilihan_d = ?, pilihan_e = ?,
                              kunci = ?, alasan_singkat = ?, referensi = ?,
                              direview_oleh = ?, tanggal_review = NOW(), status_review = 'sudah',
                              catatan_review = CONCAT(COALESCE(catatan_review, ''), '\n\n--- EDIT OLEH REVIEWER ---\n', ?)
                              WHERE id = ?");

        $stmt->execute([
            $tinjauan1, $tinjauan2, $tinjauan3,
            $semester, $blok, $cpmk,
            $vignette, $pertanyaan,
            $pilihan_a, $pilihan_b, $pilihan_c, $pilihan_d, $pilihan_e,
            $kunci, $alasan_singkat, $referensi,
            $_SESSION['user_id'],
            $catatan_perubahan,
            $id
        ]);
        
        $success = 'Soal S1 berhasil diperbarui dan ditandai sebagai sudah direview!';
        
        header("Location: review_soal_teori_s1.php?review_id=" . $id);
        exit;

    } catch (PDOException $e) {
        $error = 'Gagal memperbarui soal: ' . $e->getMessage();
    }
}

// Data semester dan blok
$semester_options = ['Gasal', 'Genap'];
$blok_options = [
    'Gasal' => [
        'Blok 1', 'Blok 2', 'Blok 3', 'Blok 7', 'Blok 8', 'Blok 9', 
        'Blok 13', 'Blok 14', 'Blok 15', 'Blok 16', 'Blok 17', 
        'Blok 21', 'Blok 22', 'Blok 23'
    ],
    'Genap' => [
        'Blok 4', 'Blok 5', 'Blok 6', 'Blok 10', 'Blok 11', 'Blok 12',
        'Blok 18', 'Blok 19', 'Blok 20'
    ]
];

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

// Filter status review
$status_filter = $_GET['status'] ?? 'perlu';

$where_conditions = [];
$params = [];

if ($status_filter === 'perlu') {
    $where_conditions[] = "status_review IN ('belum', 'revisi')";
} elseif ($status_filter === 'sudah') {
    $where_conditions[] = "status_review = 'sudah' AND direview_oleh = ?";
    $params[] = $_SESSION['user_id'];
} elseif ($status_filter === 'semua') {
    // Tidak ada filter tambahan
}

// Bangun query dengan filter
$where_sql = '';
if (!empty($where_conditions)) {
    $where_sql = "WHERE " . implode(" AND ", $where_conditions);
}

// Hitung total data dengan filter
$total_data = 0;
$total_pages = 1;

try {
    $count_sql = "SELECT COUNT(*) FROM bank_soal_teori_s1 $where_sql";
    
    if (!empty($params)) {
        $stmt = $pdo->prepare($count_sql);
        $stmt->execute($params);
    } else {
        $stmt = $pdo->query($count_sql);
    }
    $total_data = $stmt->fetchColumn();
    
    $total_pages = ceil($total_data / $limit);
} catch (PDOException $e) {
    $error = 'Gagal menghitung total data: ' . $e->getMessage();
}

// Hitung jumlah yang perlu review (untuk badge)
$total_perlu_review = 0;
try {
    $stmt = $pdo->query("SELECT COUNT(*) FROM bank_soal_teori_s1 WHERE status_review IN ('belum', 'revisi')");
    $total_perlu_review = $stmt->fetchColumn();
} catch (PDOException $e) {
    // Kolom mungkin belum ada, abaikan
}

// Ambil data soal S1 dengan pagination dan filter
$soal_teori = [];
try {
    $sql = "SELECT bt.*, u.nama_lengkap as nama_reviewer 
            FROM bank_soal_teori_s1 bt 
            LEFT JOIN users_preview u ON bt.direview_oleh = u.id 
            $where_sql 
            ORDER BY 
                CASE WHEN status_review = 'revisi' THEN 1 
                     WHEN status_review = 'belum' THEN 2 
                     ELSE 3 END,
                created_at DESC 
            LIMIT $limit OFFSET $offset";
    
    if (!empty($params)) {
        $stmt = $pdo->prepare($sql);
        $stmt->execute($params);
    } else {
        $stmt = $pdo->query($sql);
    }
    $soal_teori = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
} catch (PDOException $e) {
    $error = 'Gagal mengambil data soal S1: ' . $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Review Soal Teori S1 - 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; }

        /* ===== FILTER TABS ===== */
        .filter-tabs { display: flex; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; }
        .filter-tab { padding: 10px 24px; border: 2px solid #e2e8f0; border-radius: 50px; background: #fff; color: #475569; text-decoration: none; transition: all 0.3s; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
        .filter-tab:hover { border-color: #60a5fa; color: #2563eb; }
        .filter-tab.active { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; border-color: transparent; }
        .filter-tab .badge-count { background: rgba(255,255,255,0.2); padding: 2px 10px; border-radius: 50px; font-size: 12px; }

        /* ===== 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; }
        .data-table tbody tr.highlighted { background: #eff6ff !important; border-left: 4px solid #60a5fa; }

        /* ===== BADGES ===== */
        .badge { display: inline-block; padding: 3px 12px; border-radius: 50px; font-size: 11px; font-weight: 600; }
        .badge-department { background: #dbeafe; color: #2563eb; }
        .badge-semester { background: #fef3c7; color: #d97706; }
        .badge-blok { background: #ede9fe; color: #7c3aed; }
        .badge-cpmk { background: #fce4ec; color: #c62828; }

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

        /* ===== 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; }
        .btn-edit { background: #fef3c7; color: #d97706; }
        .btn-edit:hover { background: #fde68a; }

        /* ===== REVIEW SECTION ===== */
        .review-section { background: #fff; border-radius: 16px; padding: 28px 32px; margin-top: 25px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.04); border-left: 4px solid #60a5fa; }
        .review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
        .review-title { font-size: 18px; font-weight: 700; color: #1a2332; display: flex; align-items: center; gap: 10px; }
        .review-title i { color: #60a5fa; }
        .close-review { background: #fee2e2; color: #dc2626; border: none; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; text-decoration: none; }
        .close-review:hover { background: #fecaca; transform: scale(1.05); }

        .review-content { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
        .review-column { display: flex; flex-direction: column; gap: 14px; }
        .info-group { background: #f8fafc; padding: 14px 18px; border-radius: 10px; border-left: 3px solid #60a5fa; }
        .info-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7a8f; margin-bottom: 4px; }
        .info-value { font-size: 14px; color: #1a2332; line-height: 1.6; }
        .info-value.rich-text { background: #fff; padding: 10px 14px; border-radius: 6px; border: 1px solid #e2e8f0; }

        .review-form { background: #f8fafc; padding: 20px 24px; border-radius: 12px; margin-top: 20px; border: 1px solid #e2e8f0; }
        .review-form h3 { font-size: 16px; font-weight: 600; color: #1a2332; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
        .review-form h3 i { color: #60a5fa; }

        /* ===== EDIT SECTION ===== */
        .edit-section { background: #fff; border-radius: 16px; padding: 28px 32px; margin-top: 25px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.04); border-left: 4px solid #f59e0b; }
        .edit-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
        .edit-title { font-size: 18px; font-weight: 700; color: #1a2332; display: flex; align-items: center; gap: 10px; }
        .edit-title i { color: #f59e0b; }
        .close-edit { background: #fee2e2; color: #dc2626; border: none; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; text-decoration: none; }
        .close-edit:hover { background: #fecaca; transform: scale(1.05); }

        .edit-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .form-group { margin-bottom: 4px; }
        .form-group label { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 4px; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: all 0.3s ease; background: #f8fafc; font-family: inherit; }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,0.1); background: #fff; }
        .form-group input:disabled, .form-group select:disabled { background: #f1f5f9; cursor: not-allowed; }
        .form-group textarea { min-height: 80px; resize: vertical; }
        .form-group .field-hint { font-size: 12px; color: #6b7a8f; margin-top: 2px; }

        .form-actions { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; padding-top: 16px; border-top: 1px solid #e2e8f0; margin-top: 8px; }
        .btn-save { padding: 10px 28px; background: linear-gradient(135deg, #059669, #10b981); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; }
        .btn-save:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(5,150,105,0.3); }
        .btn-cancel { padding: 10px 28px; background: #f1f5f9; color: #475569; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
        .btn-cancel:hover { background: #e2e8f0; }

        .warning-note { background: #fef3c7; border: 1px solid #fcd34d; padding: 14px 18px; border-radius: 8px; margin-bottom: 16px; color: #92400e; display: flex; align-items: flex-start; gap: 10px; }
        .warning-note i { font-size: 18px; margin-top: 2px; }

        /* ===== EMPTY STATE ===== */
        .empty-state { text-align: center; padding: 50px 20px; color: #6b7a8f; }
        .empty-state i { font-size: 48px; color: #d1d5db; margin-bottom: 12px; display: block; }
        .empty-state h3 { font-size: 18px; color: #1a2332; margin-bottom: 6px; }

        /* ===== 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; } .review-content { grid-template-columns: 1fr; } .edit-form { grid-template-columns: 1fr; } }
        @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-tabs { flex-direction: column; } .filter-tab { width: 100%; justify-content: center; } }
        @media (max-width: 480px) { .header-left h1 { font-size: 22px; } }

        .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" class="active"><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="preview_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"><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>Review Soal Teori S1</h1>
                <div class="subtitle">Review dan validasi soal teori program S1</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; ?>

        <!-- Filter Tabs -->
        <div class="filter-tabs">
            <a href="review_soal_teori_s1.php?status=perlu" class="filter-tab <?php echo $status_filter === 'perlu' ? 'active' : ''; ?>">
                <i class="fas fa-tasks"></i> Perlu Review
                <span class="badge-count"><?php echo $total_perlu_review; ?></span>
            </a>
            <a href="review_soal_teori_s1.php?status=sudah" class="filter-tab <?php echo $status_filter === 'sudah' ? 'active' : ''; ?>">
                <i class="fas fa-check-circle"></i> Sudah Direview
                <span class="badge-count">
                    <?php 
                    $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_teori_s1 WHERE status_review = 'sudah' AND direview_oleh = ?");
                    $stmt->execute([$_SESSION['user_id']]);
                    echo $stmt->fetchColumn(); 
                    ?>
                </span>
            </a>
            <a href="review_soal_teori_s1.php?status=semua" class="filter-tab <?php echo $status_filter === 'semua' ? 'active' : ''; ?>">
                <i class="fas fa-layer-group"></i> Semua Soal
                <span class="badge-count">
                    <?php 
                    $stmt = $pdo->query("SELECT COUNT(*) FROM bank_soal_teori_s1");
                    echo $stmt->fetchColumn(); 
                    ?>
                </span>
            </a>
        </div>

        <!-- Daftar Soal -->
        <div class="soal-list-container">
            <div class="list-header">
                <div class="list-title">
                    <i class="fas fa-clipboard-list"></i>
                    <?php 
                    if ($status_filter === 'perlu') echo 'Soal S1 yang Perlu Direview';
                    elseif ($status_filter === 'sudah') echo 'Soal S1 yang Sudah Anda Review';
                    else echo 'Semua Soal Teori S1';
                    ?>
                    <span style="font-size:14px; font-weight:400; color:#6b7a8f;">
                        (<?php echo count($soal_teori); ?> dari <?php echo $total_data; ?>)
                    </span>
                </div>
            </div>

            <?php if (empty($soal_teori)): ?>
                <div class="empty-state">
                    <i class="fas fa-check-circle"></i>
                    <h3>Tidak ada soal S1 yang perlu direview</h3>
                    <p>Semua soal S1 sudah direview atau tidak ada soal yang memerlukan review saat ini.</p>
                </div>
            <?php else: ?>
                <div class="table-wrapper">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>No. Registrasi</th>
                                <th>Kompetensi Utama</th>
                                <th>Department</th>
                                <th>Semester</th>
                                <th>Blok</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                            $counter = ($page - 1) * $limit + 1;
                            foreach ($soal_teori as $soal): 
                                $status_class = 'belum';
                                $status_text = 'Belum Direview';
                                
                                if ($soal['status_review'] == 'sudah') {
                                    $status_class = 'sudah';
                                    $status_text = 'Sudah Direview';
                                } elseif ($soal['status_review'] == 'revisi') {
                                    $status_class = 'revisi';
                                    $status_text = 'Perlu Revisi';
                                }
                            ?>
                                <tr id="soal-<?php echo $soal['id']; ?>" 
                                    class="<?php echo ($review_soal && $review_soal['id'] == $soal['id']) || ($edit_soal && $edit_soal['id'] == $soal['id']) ? 'highlighted' : ''; ?>">
                                    <td><?php echo $counter++; ?></td>
                                    <td><strong><?php echo htmlspecialchars($soal['nomor_registrasi']); ?></strong></td>
                                    <td><?php echo htmlspecialchars($soal['tinjauan1']); ?></td>
                                    <td><span class="badge badge-department"><?php echo htmlspecialchars($soal['department'] ?? '-'); ?></span></td>
                                    <td><span class="badge badge-semester"><?php echo htmlspecialchars($soal['semester'] ?? '-'); ?></span></td>
                                    <td><span class="badge badge-blok"><?php echo htmlspecialchars($soal['blok'] ?? '-'); ?></span></td>
                                    <td>
                                        <span class="review-badge <?php echo $status_class; ?>">
                                            <i class="fas <?php echo $status_class == 'sudah' ? 'fa-check-circle' : ($status_class == 'revisi' ? 'fa-exclamation-circle' : 'fa-clock'); ?>"></i>
                                            <?php echo $status_text; ?>
                                        </span>
                                        <?php if ($soal['status_review'] == 'sudah' && !empty($soal['nama_reviewer'])): ?>
                                            <br><small style="color:#6b7a8f;font-size:10px;">Oleh: <?php echo htmlspecialchars($soal['nama_reviewer']); ?></small>
                                        <?php endif; ?>
                                    </td>
                                    <td>
                                        <div class="action-buttons">
                                            <a href="review_soal_teori_s1.php?review_id=<?php echo $soal['id']; ?>&status=<?php echo $status_filter; ?>&page=<?php echo $page; ?>" 
                                               class="btn-action btn-review">
                                                <i class="fas fa-eye"></i> 
                                                <?php echo $soal['status_review'] == 'belum' ? 'Review' : 'Lihat'; ?>
                                            </a>
                                            <?php if ($soal['status_review'] != 'sudah' || $_SESSION['user_id'] == $soal['direview_oleh']): ?>
                                                <a href="review_soal_teori_s1.php?edit_id=<?php echo $soal['id']; ?>&status=<?php echo $status_filter; ?>&page=<?php echo $page; ?>" 
                                                   class="btn-action btn-edit">
                                                    <i class="fas fa-edit"></i> Edit
                                                </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; ?> soal
                    </div>
                    <div class="pagination-links">
                        <?php if ($page > 1): ?>
                            <a href="review_soal_teori_s1.php?status=<?php echo $status_filter; ?>&page=<?php echo $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="review_soal_teori_s1.php?status=<?php echo $status_filter; ?>&page=<?php echo $i; ?>"><?php echo $i; ?></a>
                            <?php endif;
                        endfor; ?>

                        <?php if ($page < $total_pages): ?>
                            <a href="review_soal_teori_s1.php?status=<?php echo $status_filter; ?>&page=<?php echo $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>

        <!-- Review Section -->
        <?php if ($review_soal): ?>
            <div class="review-section" id="reviewSection">
                <div class="review-header">
                    <div class="review-title">
                        <i class="fas fa-file-medical-alt"></i>
                        <?php echo $review_soal['status_review'] == 'belum' ? 'Review' : 'Lihat Review'; ?> - <?php echo htmlspecialchars($review_soal['nomor_registrasi']); ?>
                    </div>
                    <div style="display:flex; gap:8px; align-items:center;">
                        <?php if ($review_soal['status_review'] != 'sudah' || $_SESSION['user_id'] == $review_soal['direview_oleh']): ?>
                            <a href="review_soal_teori_s1.php?edit_id=<?php echo $review_soal['id']; ?>&status=<?php echo $status_filter; ?>&page=<?php echo $page; ?>" 
                               class="btn-action btn-edit" style="padding:6px 14px;">
                                <i class="fas fa-edit"></i> Edit
                            </a>
                        <?php endif; ?>
                        <a href="review_soal_teori_s1.php?status=<?php echo $status_filter; ?>&page=<?php echo $page; ?>" 
                           class="close-review" title="Tutup">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="review-content">
                    <div class="review-column">
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-hashtag"></i> Nomor Registrasi</div>
                            <div class="info-value"><strong><?php echo htmlspecialchars($review_soal['nomor_registrasi']); ?></strong></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-building"></i> Department</div>
                            <div class="info-value"><?php echo htmlspecialchars($review_soal['department'] ?? '-'); ?></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-calendar-alt"></i> Semester</div>
                            <div class="info-value"><span class="badge badge-semester"><?php echo htmlspecialchars($review_soal['semester'] ?? '-'); ?></span></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-cube"></i> Blok</div>
                            <div class="info-value"><span class="badge badge-blok"><?php echo htmlspecialchars($review_soal['blok'] ?? '-'); ?></span></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-tasks"></i> CPMK</div>
                            <div class="info-value"><span class="badge badge-cpmk"><?php echo htmlspecialchars($review_soal['cpmk'] ?? '-'); ?></span></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-bullseye"></i> Kompetensi Utama</div>
                            <div class="info-value"><?php echo htmlspecialchars($review_soal['tinjauan1']); ?></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-notes-medical"></i> Penyakit/Kelainan</div>
                            <div class="info-value"><?php echo htmlspecialchars($review_soal['tinjauan2'] ?? '-'); ?></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-graduation-cap"></i> Bidang Ilmu</div>
                            <div class="info-value"><?php echo htmlspecialchars($review_soal['tinjauan3'] ?? '-'); ?></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-key"></i> Kunci Jawaban</div>
                            <div class="info-value"><strong><?php echo htmlspecialchars($review_soal['kunci'] ?? '-'); ?></strong></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-user-edit"></i> Penulis</div>
                            <div class="info-value"><?php echo htmlspecialchars($review_soal['nama_penulis'] ?? $review_soal['penulis'] ?? '-'); ?></div>
                        </div>
                    </div>

                    <div class="review-column">
                        <?php if (!empty($review_soal['vignette'])): ?>
                            <div class="info-group">
                                <div class="info-label"><i class="fas fa-image"></i> Vignette</div>
                                <div class="info-value rich-text"><?php echo $review_soal['vignette']; ?></div>
                            </div>
                        <?php endif; ?>

                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-question-circle"></i> Pertanyaan</div>
                            <div class="info-value rich-text"><?php echo $review_soal['pertanyaan']; ?></div>
                        </div>

                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-list-ul"></i> Pilihan Jawaban</div>
                            <div class="info-value">
                                <?php if (!empty($review_soal['pilihan_a'])): ?>
                                    <div style="padding:6px 10px;margin:4px 0;border-radius:6px;background:<?php echo $review_soal['kunci'] == 'A' ? '#d1fae5' : '#fff'; ?>;border:1px solid <?php echo $review_soal['kunci'] == 'A' ? '#059669' : '#e2e8f0'; ?>;">
                                        <strong>A.</strong> <?php echo htmlspecialchars($review_soal['pilihan_a']); ?>
                                        <?php if ($review_soal['kunci'] == 'A'): ?><span style="color:#059669;margin-left:8px;">✓ Kunci</span><?php endif; ?>
                                    </div>
                                <?php endif; ?>
                                <?php if (!empty($review_soal['pilihan_b'])): ?>
                                    <div style="padding:6px 10px;margin:4px 0;border-radius:6px;background:<?php echo $review_soal['kunci'] == 'B' ? '#d1fae5' : '#fff'; ?>;border:1px solid <?php echo $review_soal['kunci'] == 'B' ? '#059669' : '#e2e8f0'; ?>;">
                                        <strong>B.</strong> <?php echo htmlspecialchars($review_soal['pilihan_b']); ?>
                                        <?php if ($review_soal['kunci'] == 'B'): ?><span style="color:#059669;margin-left:8px;">✓ Kunci</span><?php endif; ?>
                                    </div>
                                <?php endif; ?>
                                <?php if (!empty($review_soal['pilihan_c'])): ?>
                                    <div style="padding:6px 10px;margin:4px 0;border-radius:6px;background:<?php echo $review_soal['kunci'] == 'C' ? '#d1fae5' : '#fff'; ?>;border:1px solid <?php echo $review_soal['kunci'] == 'C' ? '#059669' : '#e2e8f0'; ?>;">
                                        <strong>C.</strong> <?php echo htmlspecialchars($review_soal['pilihan_c']); ?>
                                        <?php if ($review_soal['kunci'] == 'C'): ?><span style="color:#059669;margin-left:8px;">✓ Kunci</span><?php endif; ?>
                                    </div>
                                <?php endif; ?>
                                <?php if (!empty($review_soal['pilihan_d'])): ?>
                                    <div style="padding:6px 10px;margin:4px 0;border-radius:6px;background:<?php echo $review_soal['kunci'] == 'D' ? '#d1fae5' : '#fff'; ?>;border:1px solid <?php echo $review_soal['kunci'] == 'D' ? '#059669' : '#e2e8f0'; ?>;">
                                        <strong>D.</strong> <?php echo htmlspecialchars($review_soal['pilihan_d']); ?>
                                        <?php if ($review_soal['kunci'] == 'D'): ?><span style="color:#059669;margin-left:8px;">✓ Kunci</span><?php endif; ?>
                                    </div>
                                <?php endif; ?>
                                <?php if (!empty($review_soal['pilihan_e'])): ?>
                                    <div style="padding:6px 10px;margin:4px 0;border-radius:6px;background:<?php echo $review_soal['kunci'] == 'E' ? '#d1fae5' : '#fff'; ?>;border:1px solid <?php echo $review_soal['kunci'] == 'E' ? '#059669' : '#e2e8f0'; ?>;">
                                        <strong>E.</strong> <?php echo htmlspecialchars($review_soal['pilihan_e']); ?>
                                        <?php if ($review_soal['kunci'] == 'E'): ?><span style="color:#059669;margin-left:8px;">✓ Kunci</span><?php endif; ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>

                        <?php if (!empty($review_soal['alasan_singkat'])): ?>
                            <div class="info-group">
                                <div class="info-label"><i class="fas fa-info-circle"></i> Alasan Singkat</div>
                                <div class="info-value rich-text"><?php echo $review_soal['alasan_singkat']; ?></div>
                            </div>
                        <?php endif; ?>

                        <?php if (!empty($review_soal['referensi'])): ?>
                            <div class="info-group">
                                <div class="info-label"><i class="fas fa-book"></i> Referensi</div>
                                <div class="info-value rich-text"><?php echo $review_soal['referensi']; ?></div>
                            </div>
                        <?php endif; ?>

                        <?php if ($review_soal['status_review'] != 'belum' && !empty($review_soal['catatan_review'])): ?>
                            <div class="info-group" style="border-left-color:#f59e0b;">
                                <div class="info-label"><i class="fas fa-comment"></i> Catatan Review</div>
                                <div class="info-value rich-text" style="background:#fef3c7;border-color:#fcd34d;"><?php echo nl2br(htmlspecialchars($review_soal['catatan_review'])); ?></div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Form Review -->
                <?php if ($review_soal['status_review'] == 'belum' || $review_soal['status_review'] == 'revisi'): ?>
                    <div class="review-form">
                        <h3><i class="fas fa-edit"></i> Form Review</h3>
                        <form method="POST" action="">
                            <input type="hidden" name="id" value="<?php echo $review_soal['id']; ?>">
                            <input type="hidden" name="submit_review" value="1">
                            
                            <div class="form-group">
                                <label for="status_review">Status Review <span class="required" style="color:#dc2626;">*</span></label>
                                <select id="status_review" name="status_review" class="form-control" required>
                                    <option value="sudah">✓ Setujui (Soal sudah baik)</option>
                                    <option value="revisi">✎ Perlu Revisi (Ada yang perlu diperbaiki)</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="catatan_review">Catatan Review</label>
                                <textarea id="catatan_review" name="catatan_review" class="form-control" rows="4" placeholder="Berikan catatan atau saran perbaikan untuk soal ini..."><?php echo htmlspecialchars($review_soal['catatan_review'] ?? ''); ?></textarea>
                                <span class="field-hint"><i class="fas fa-info-circle"></i> Catatan ini akan dilihat oleh pembuat soal untuk perbaikan.</span>
                            </div>

                            <div style="display: flex; gap: 10px; margin-top: 10px;">
                                <button type="submit" class="btn-save">
                                    <i class="fas fa-paper-plane"></i> Submit Review
                                </button>
                                <a href="review_soal_teori_s1.php?status=<?php echo $status_filter; ?>&page=<?php echo $page; ?>" class="btn-cancel">
                                    <i class="fas fa-times"></i> Batal
                                </a>
                            </div>
                        </form>
                    </div>
                <?php endif; ?>
            </div>
        <?php endif; ?>

        <!-- Edit Section -->
        <?php if ($edit_soal): ?>
            <div class="edit-section" id="editSection">
                <div class="edit-header">
                    <div class="edit-title">
                        <i class="fas fa-edit"></i>
                        Edit Soal - <?php echo htmlspecialchars($edit_soal['nomor_registrasi']); ?>
                    </div>
                    <a href="review_soal_teori_s1.php?status=<?php echo $status_filter; ?>&page=<?php echo $page; ?>" 
                       class="close-edit" title="Tutup Edit">
                        <i class="fas fa-times"></i>
                    </a>
                </div>

                <div class="warning-note">
                    <i class="fas fa-exclamation-triangle"></i>
                    <div>
                        <strong>Perhatian:</strong> Anda sebagai reviewer dapat langsung mengedit soal ini. 
                        Perubahan yang dilakukan akan otomatis menandai soal sebagai "Sudah Direview".
                    </div>
                </div>

                <form method="POST" action="" class="edit-form">
                    <input type="hidden" name="id" value="<?php echo $edit_soal['id']; ?>">
                    <input type="hidden" name="update_soal" value="1">

                    <div class="form-group">
                        <label>Nomor Registrasi</label>
                        <input type="text" value="<?php echo htmlspecialchars($edit_soal['nomor_registrasi']); ?>" disabled>
                        <div class="field-hint"><i class="fas fa-lock"></i> Nomor registrasi tidak dapat diubah</div>
                    </div>

                    <div class="form-group">
                        <label>Department</label>
                        <input type="text" value="<?php echo htmlspecialchars($edit_soal['department'] ?? '-'); ?>" disabled>
                        <div class="field-hint"><i class="fas fa-lock"></i> Department tidak dapat diubah</div>
                    </div>

                    <div class="form-group">
                        <label for="semester">Semester <span class="required" style="color:#dc2626;">*</span></label>
                        <select id="semester" name="semester" class="form-control" required>
                            <option value="">-- Pilih Semester --</option>
                            <?php foreach ($semester_options as $semester): ?>
                                <option value="<?php echo $semester; ?>" 
                                    <?php echo $edit_soal['semester'] == $semester ? 'selected' : ''; ?>>
                                    <?php echo $semester; ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="blok">Blok <span class="required" style="color:#dc2626;">*</span></label>
                        <select id="blok" name="blok" class="form-control" required>
                            <option value="">-- Pilih Blok --</option>
                            <?php 
                            if (!empty($edit_soal['semester']) && isset($blok_options[$edit_soal['semester']])) {
                                foreach ($blok_options[$edit_soal['semester']] as $blok) {
                                    $selected = $edit_soal['blok'] == $blok ? 'selected' : '';
                                    echo "<option value=\"$blok\" $selected>$blok</option>";
                                }
                            }
                            ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="cpmk">CPMK <span class="required" style="color:#dc2626;">*</span></label>
                        <input type="text" id="cpmk" name="cpmk" class="form-control" value="<?php echo htmlspecialchars($edit_soal['cpmk']); ?>" required>
                    </div>

                    <div class="form-group">
                        <label for="tinjauan1">Kompetensi Utama <span class="required" style="color:#dc2626;">*</span></label>
                        <input type="text" id="tinjauan1" name="tinjauan1" class="form-control" value="<?php echo htmlspecialchars($edit_soal['tinjauan1']); ?>" required>
                    </div>

                    <div class="form-group">
                        <label for="tinjauan2">Penyakit/Kelainan</label>
                        <input type="text" id="tinjauan2" name="tinjauan2" class="form-control" value="<?php echo htmlspecialchars($edit_soal['tinjauan2'] ?? ''); ?>">
                    </div>

                    <div class="form-group">
                        <label for="tinjauan3">Bidang Ilmu</label>
                        <input type="text" id="tinjauan3" name="tinjauan3" class="form-control" value="<?php echo htmlspecialchars($edit_soal['tinjauan3'] ?? ''); ?>">
                    </div>

                    <div class="form-group">
                        <label>Penulis</label>
                        <input type="text" value="<?php echo htmlspecialchars($edit_soal['nama_penulis'] ?? $edit_soal['penulis'] ?? '-'); ?>" disabled>
                        <div class="field-hint"><i class="fas fa-lock"></i> Penulis tidak dapat diubah</div>
                    </div>

                    <div class="form-group">
                        <label for="vignette">Vignette</label>
                        <textarea id="vignette" name="vignette" class="form-control" rows="3"><?php echo htmlspecialchars($edit_soal['vignette'] ?? ''); ?></textarea>
                    </div>

                    <div class="form-group">
                        <label for="pertanyaan">Pertanyaan/Instruksi <span class="required" style="color:#dc2626;">*</span></label>
                        <textarea id="pertanyaan" name="pertanyaan" class="form-control" rows="4" required><?php echo htmlspecialchars($edit_soal['pertanyaan']); ?></textarea>
                    </div>

                    <div class="form-group">
                        <label for="pilihan_a">Pilihan A</label>
                        <input type="text" id="pilihan_a" name="pilihan_a" class="form-control" value="<?php echo htmlspecialchars($edit_soal['pilihan_a'] ?? ''); ?>">
                    </div>

                    <div class="form-group">
                        <label for="pilihan_b">Pilihan B</label>
                        <input type="text" id="pilihan_b" name="pilihan_b" class="form-control" value="<?php echo htmlspecialchars($edit_soal['pilihan_b'] ?? ''); ?>">
                    </div>

                    <div class="form-group">
                        <label for="pilihan_c">Pilihan C</label>
                        <input type="text" id="pilihan_c" name="pilihan_c" class="form-control" value="<?php echo htmlspecialchars($edit_soal['pilihan_c'] ?? ''); ?>">
                    </div>

                    <div class="form-group">
                        <label for="pilihan_d">Pilihan D</label>
                        <input type="text" id="pilihan_d" name="pilihan_d" class="form-control" value="<?php echo htmlspecialchars($edit_soal['pilihan_d'] ?? ''); ?>">
                    </div>

                    <div class="form-group">
                        <label for="pilihan_e">Pilihan E</label>
                        <input type="text" id="pilihan_e" name="pilihan_e" class="form-control" value="<?php echo htmlspecialchars($edit_soal['pilihan_e'] ?? ''); ?>">
                    </div>

                    <div class="form-group">
                        <label for="kunci">Kunci Jawaban</label>
                        <select id="kunci" name="kunci" class="form-control">
                            <option value="">-- Pilih Kunci --</option>
                            <option value="A" <?php echo ($edit_soal['kunci'] ?? '') == 'A' ? 'selected' : ''; ?>>A</option>
                            <option value="B" <?php echo ($edit_soal['kunci'] ?? '') == 'B' ? 'selected' : ''; ?>>B</option>
                            <option value="C" <?php echo ($edit_soal['kunci'] ?? '') == 'C' ? 'selected' : ''; ?>>C</option>
                            <option value="D" <?php echo ($edit_soal['kunci'] ?? '') == 'D' ? 'selected' : ''; ?>>D</option>
                            <option value="E" <?php echo ($edit_soal['kunci'] ?? '') == 'E' ? 'selected' : ''; ?>>E</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="alasan_singkat">Alasan Singkat</label>
                        <textarea id="alasan_singkat" name="alasan_singkat" class="form-control" rows="3"><?php echo htmlspecialchars($edit_soal['alasan_singkat'] ?? ''); ?></textarea>
                    </div>

                    <div class="form-group">
                        <label for="referensi">Referensi</label>
                        <textarea id="referensi" name="referensi" class="form-control" rows="3"><?php echo htmlspecialchars($edit_soal['referensi'] ?? ''); ?></textarea>
                    </div>

                    <div class="form-group">
                        <label for="catatan_perubahan">Catatan Perubahan <span class="required" style="color:#dc2626;">*</span></label>
                        <textarea id="catatan_perubahan" name="catatan_perubahan" class="form-control" rows="3" required placeholder="Jelaskan perubahan yang Anda lakukan pada soal ini..."></textarea>
                        <div class="field-hint"><i class="fas fa-info-circle"></i> Catatan ini akan dicatat dalam riwayat review</div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn-save">
                            <i class="fas fa-save"></i> Simpan & Tandai Sudah Review
                        </button>
                        <a href="review_soal_teori_s1.php?status=<?php echo $status_filter; ?>&page=<?php echo $page; ?>" class="btn-cancel">
                            <i class="fas fa-times"></i> Batal
                        </a>
                    </div>
                </form>
            </div>
        <?php endif; ?>
    </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' });
        });

        // ===== UPDATE BLOK DROPDOWN =====
        const blokOptions = <?php echo json_encode($blok_options); ?>;

        function updateBlokDropdown() {
            const semesterSelect = document.getElementById('semester');
            const blokSelect = document.getElementById('blok');
            
            if (!semesterSelect || !blokSelect) return;
            
            const selectedSemester = semesterSelect.value;
            blokSelect.innerHTML = '<option value="">-- Pilih Blok --</option>';
            
            if (selectedSemester && blokOptions[selectedSemester]) {
                blokOptions[selectedSemester].forEach(blok => {
                    const option = document.createElement('option');
                    option.value = blok;
                    option.textContent = blok;
                    blokSelect.appendChild(option);
                });
            }
        }

        // ===== INIT =====
        document.addEventListener('DOMContentLoaded', function() {
            const semesterSelect = document.getElementById('semester');
            if (semesterSelect) {
                semesterSelect.addEventListener('change', updateBlokDropdown);
            }

            // Scroll ke section yang aktif
            <?php if ($edit_soal): ?>
                setTimeout(() => {
                    document.getElementById('editSection')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }, 300);
            <?php elseif ($review_soal): ?>
                setTimeout(() => {
                    document.getElementById('reviewSection')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }, 300);
            <?php endif; ?>
        });
    </script>
</body>
</html>