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

// Cek apakah user sudah login
if (!isset($_SESSION['user_id'])) {
    header('Location: ../login.php');
    exit;
}

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

// Daftar department kedokteran gigi
$departments = [
    'Odontologi Forensik',
    'Konservasi Gigi', 
    'Bedah Mulut',
    'Periodonsia',
    'Orthodonti',
    'Prostodonsia',
    'Ilmu Kesehatan Gigi Masyarakat',
    'Ilmu Kedokteran Gigi Anak',
    'Radiologi Kedokteran Gigi',
    'Penyakit Mulut'
];

// Ambil department dari parameter URL
$selected_department = $_GET['department'] ?? '';

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

// Proses toggle status sudah digunakan
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['toggle_status'])) {
    try {
        $id = $_POST['id'];
        $current_status = $_POST['current_status'];
        $new_status = $current_status ? 0 : 1;
        
        $stmt = $pdo->prepare("UPDATE bank_soal_teori SET digunakan_di_ujian = ? WHERE id = ?");
        $stmt->execute([$new_status, $id]);
        
        $success = 'Status soal berhasil diperbarui!';
        
        // Redirect untuk menghindari resubmit
        $redirect_url = "list_soal_teori.php?";
        if (!empty($selected_department)) {
            $redirect_url .= "department=" . urlencode($selected_department) . "&";
        }
        if (!empty($_GET['page'])) {
            $redirect_url .= "page=" . $_GET['page'] . "&";
        }
        header("Location: " . $redirect_url);
        exit;
        
    } catch (PDOException $e) {
        $error = 'Gagal memperbarui status soal: ' . $e->getMessage();
    }
}

// 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 * FROM bank_soal_teori WHERE 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();
    }
}

if (!empty($edit_soal_id)) {
    try {
        $stmt = $pdo->prepare("SELECT * FROM bank_soal_teori WHERE 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 update jika form edit disubmit
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['update_soal'])) {
    try {
        $id = $_POST['id'];
        $nomor_registrasi = $_POST['nomor_registrasi'];
        $tinjauan1 = $_POST['tinjauan1'];
        $tinjauan2 = $_POST['tinjauan2'] ?? '';
        $tinjauan3 = $_POST['tinjauan3'] ?? '';
        $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'] ?? '';
        $department = $_POST['department'];
        $alasan_singkat = $_POST['alasan_singkat'] ?? '';
        $referensi = $_POST['referensi'] ?? '';
        $penulis = $_POST['penulis'] ?? '';

        $stmt = $pdo->prepare("UPDATE bank_soal_teori SET 
            nomor_registrasi = ?, tinjauan1 = ?, tinjauan2 = ?, tinjauan3 = ?, 
            vignette = ?, pertanyaan = ?, pilihan_a = ?, pilihan_b = ?, 
            pilihan_c = ?, pilihan_d = ?, pilihan_e = ?, kunci = ?, 
            department = ?, alasan_singkat = ?, referensi = ?, penulis = ?
            WHERE id = ?");

        $stmt->execute([
            $nomor_registrasi, $tinjauan1, $tinjauan2, $tinjauan3,
            $vignette, $pertanyaan, $pilihan_a, $pilihan_b,
            $pilihan_c, $pilihan_d, $pilihan_e, $kunci,
            $department, $alasan_singkat, $referensi, $penulis, $id
        ]);

        $success = 'Soal teori berhasil diperbarui!';
        
        // Redirect untuk menghindari resubmit
        $redirect_url = "list_soal_teori.php?";
        if (!empty($selected_department)) {
            $redirect_url .= "department=" . urlencode($selected_department) . "&";
        }
        $redirect_url .= "edit_id=" . $id;
        header("Location: " . $redirect_url);
        exit;

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

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

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

try {
    if (!empty($selected_department)) {
        if (in_array($selected_department, $departments)) {
            $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_teori WHERE department = ?");
            $stmt->execute([$selected_department]);
            $total_data = $stmt->fetchColumn();
        } else {
            $error = 'Department tidak valid: ' . htmlspecialchars($selected_department);
        }
    } else {
        $stmt = $pdo->query("SELECT COUNT(*) FROM bank_soal_teori");
        $total_data = $stmt->fetchColumn();
    }
    
    $total_pages = ceil($total_data / $limit);
} catch (PDOException $e) {
    $error = 'Gagal menghitung total data: ' . $e->getMessage();
}

// Ambil data soal teori berdasarkan department dengan pagination
$soal_teori = [];
try {
    if (!empty($selected_department)) {
        if (in_array($selected_department, $departments)) {
            $sql = "SELECT * FROM bank_soal_teori WHERE department = ? ORDER BY created_at DESC LIMIT $limit OFFSET $offset";
            $stmt = $pdo->prepare($sql);
            $stmt->execute([$selected_department]);
            $soal_teori = $stmt->fetchAll(PDO::FETCH_ASSOC);
        }
    } else {
        $sql = "SELECT * FROM bank_soal_teori ORDER BY created_at DESC LIMIT $limit OFFSET $offset";
        $stmt = $pdo->query($sql);
        $soal_teori = $stmt->fetchAll(PDO::FETCH_ASSOC);
    }
} catch (PDOException $e) {
    $error = 'Gagal mengambil data soal: ' . $e->getMessage();
}

// Hitung jumlah soal per department
$department_counts = [];
try {
    $stmt = $pdo->query("SELECT department, COUNT(*) as count FROM bank_soal_teori WHERE department IS NOT NULL AND department != '' GROUP BY department");
    $department_counts_result = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    foreach ($department_counts_result as $row) {
        $department_counts[$row['department']] = $row['count'];
    }
} catch (PDOException $e) {
    // Ignore error untuk count
}

// Hitung statistik status soal
$stats_used = 0;
$stats_unused = 0;
try {
    if (!empty($selected_department)) {
        $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_teori WHERE department = ? AND digunakan_di_ujian = 1");
        $stmt->execute([$selected_department]);
        $stats_used = $stmt->fetchColumn();
        
        $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_teori WHERE department = ? AND digunakan_di_ujian = 0");
        $stmt->execute([$selected_department]);
        $stats_unused = $stmt->fetchColumn();
    } else {
        $stmt = $pdo->query("SELECT COUNT(*) FROM bank_soal_teori WHERE digunakan_di_ujian = 1");
        $stats_used = $stmt->fetchColumn();
        
        $stmt = $pdo->query("SELECT COUNT(*) FROM bank_soal_teori WHERE digunakan_di_ujian = 0");
        $stats_unused = $stmt->fetchColumn();
    }
} catch (PDOException $e) {
    // Ignore error untuk stats
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Soal Teori - SOCA OSCE System</title>
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/css/list_soal_teori.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<style>
    .sidebar {
        width: 250px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }

    .sidebar-menu {
        list-style: none;
        padding: 1rem 0;
    }

    .sidebar-menu li {
        margin-bottom: 0.5rem;
    }

    .sidebar-menu a {
        display: flex;
        align-items: center;
        padding: 0.75rem 1.5rem;
        color: #080808ff;
        text-decoration: none;
        transition: all 0.3s;
    }

    .sidebar-menu a:hover,
    .sidebar-menu a.active {
        background: #1436d0ff;
        color: white;
    }

    .sidebar-menu i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
    }

    .department-filter {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .department-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
        margin-top: 15px;
    }

    .department-card {
        background: white;
        border: 2px solid #667eea;
        border-radius: 8px;
        padding: 15px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
        text-decoration: none;
        color: inherit;
    }

    .department-card:hover {
        border-color: #667eea;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
    }

    .department-card.active {
        border-color: #667eea;
        background: #f0f4ff;
    }

    .department-icon {
        font-size: 2em;
        color: #667eea;
        margin-bottom: 10px;
    }

    .department-name {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .department-count {
        color: #439f0aff;
        font-size: 0.9em;
    }

    .soal-list-container {
        background: #f8f8faff;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #f8f8faff;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .selected-department {
        background: #667eea;
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: bold;
    }

    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 4em;
        color: #dee2e6;
        margin-bottom: 20px;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    .data-table th,
    .data-table td {
        padding: 12px;
        text-align: center;
        vertical-align: middle;
        border-bottom: 1px solid #1970c7ff;
    }

    .data-table th {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        font-weight: bold;
        color: #f8fafbff;
        text-align: center; 
        vertical-align: middle;
    }

    .data-table tr:hover {
        background: #abc9e7ff;
    }

    .btn {
        display: inline-block;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 0.9em;
    }

    .btn-review {
        background: #28a745;
        color: white;
    }

    .btn-review:hover {
        background: #218838;
    }

    .btn-edit {
        background: #ffc107;
        color: #212529;
    }

    .btn-edit:hover {
        background: #e0a800;
    }

    .btn-delete {
        background: #dc3545;
        color: white;
    }

    .btn-delete:hover {
        background: #c82333;
    }

    .action-buttons {
        display: flex;
        gap: 5px;
    }

    .badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.8em;
        font-weight: bold;
    }

    .badge-success {
        background: #d4edda;
        color: #155724;
    }

    /* Styles untuk Review Section */
    .review-section {
        background: #afbbf1ff;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-top: 20px;
        border-left: 5px solid #667eea;
    }

    .review-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid #667eea;
    }

    .review-title {
        color: #2109bbff;
        margin: 0;
    }

    .close-review {
        background: #dc3545;
        color: white;
        border: none;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2em;
    }

    .close-review:hover {
        background: #c82333;
    }

    .review-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .review-column {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .info-group {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        border-left: 4px solid #667eea;
    }

    .info-label {
        font-weight: bold;
        color: #495057;
        margin-bottom: 8px;
        font-size: 0.9em;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-value {
        color: #212529;
        line-height: 1.6;
    }

    .info-value.rich-text {
        background: white;
        padding: 12px;
        border-radius: 5px;
        border: 1px solid #e9ecef;
    }

    @media (max-width: 768px) {
        .review-content {
            grid-template-columns: 1fr;
        }
    }

    .highlighted-row {
        background: #e3f2fd !important;
        border-left: 4px solid #2196f3;
    }

    /* Additional Styles untuk Edit Section */
    .edit-section {
        background: #afbbf1ff;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-top: 20px;
        border-left: 5px solid #ffc107;
    }

    .edit-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid #f8f9fa;
    }

    .edit-title {
        color: #2109bbff;
        margin: 0;
    }

    .close-edit {
        background: #dc3545;
        color: white;
        border: none;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2em;
    }

    .close-edit:hover {
        background: #c82333;
    }

    .edit-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .form-column {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        color: #495057;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 14px;
    }

    .form-group textarea {
        min-height: 80px;
        resize: vertical;
    }

    .form-actions {
        grid-column: 1 / -1;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #e9ecef;
    }

    .btn-save {
        background: #28a745;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .btn-save:hover {
        background: #218838;
    }

    .btn-cancel {
        background: #6c757d;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        text-decoration: none;
    }

    .btn-cancel:hover {
        background: #5a6268;
    }

    @media (max-width: 768px) {
        .edit-form {
            grid-template-columns: 1fr;
        }
    }

    .review-title-container {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
    }

    .review-title-container .btn-edit {
        background: #ffc107;
        color: #212529;
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none;
        font-size: 0.9em;
        transition: all 0.3s;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .review-title-container .btn-edit:hover {
        background: #e0a800;
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
    }
    /* Styles untuk Pagination */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 25px 0 15px 0;
        gap: 10px;
        flex-wrap: wrap;
    }

    .pagination-info {
        color: #6c757d;
        font-size: 0.9em;
        margin-bottom: 10px;
        text-align: center;
        width: 100%;
    }

    .pagination-links {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination a, 
    .pagination span {
        display: inline-block;
        padding: 8px 12px;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        text-decoration: none;
        color: #007bff;
        font-size: 0.9em;
        min-width: 40px;
        text-align: center;
        transition: all 0.3s;
    }

    .pagination a:hover {
        background: #007bff;
        color: white;
        border-color: #007bff;
    }

    .pagination .current {
        background: #007bff;
        color: white;
        border-color: #007bff;
    }

    .pagination .disabled {
        color: #6c757d;
        cursor: not-allowed;
        background: #f8f9fa;
    }

    .pagination .disabled:hover {
        background: #f8f9fa;
        color: #6c757d;
        border-color: #dee2e6;
    }

    .page-input-form {
        display: flex;
        gap: 5px;
        align-items: center;
        margin-left: 10px;
    }

    .page-input {
        width: 60px;
        padding: 6px 8px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        text-align: center;
        font-size: 0.9em;
    }

    .page-go-btn {
        padding: 6px 12px;
        background: #28a745;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.9em;
        transition: background 0.3s;
    }

    .page-go-btn:hover {
        background: #218838;
    }

    @media (max-width: 768px) {
        .pagination {
            flex-direction: column;
            gap: 15px;
        }
        
        .page-input-form {
            margin-left: 0;
            margin-top: 10px;
        }
    }
    /* Styles untuk Status Soal */
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.8em;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s;
    }

    .status-used {
        background: #dc3545;
        color: white;
    }

    .status-unused {
        background: #28a745;
        color: white;
    }

    .status-badge:hover {
        opacity: 0.8;
        transform: scale(1.05);
    }

    .status-toggle-form {
        display: inline;
    }

    .status-toggle-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    /* Filter Status */
    .status-filter {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }

    .status-filter-btn {
        padding: 8px 16px;
        border: 2px solid #667eea;
        border-radius: 20px;
        background: white;
        color: #667eea;
        cursor: pointer;
        transition: all 0.3s;
        text-decoration: none;
        font-size: 0.9em;
    }

    .status-filter-btn:hover,
    .status-filter-btn.active {
        background: #667eea;
        color: white;
    }

    .stats-container {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        border-left: 4px solid #667eea;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }

    .stat-item {
        text-align: center;
        padding: 10px;
        border-radius: 6px;
    }

    .stat-used {
        background: #f8d7da;
        border: 1px solid #f5c6cb;
    }

    .stat-unused {
        background: #d1ecf1;
        border: 1px solid #bee5eb;
    }

    .stat-total {
        background: #e2e3e5;
        border: 1px solid #d6d8db;
    }

    .stat-number {
        font-size: 1.5em;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .stat-label {
        font-size: 0.9em;
        color: #6c757d;
    }

    /* Highlight untuk soal belum digunakan */
    .unused-row {
        background: #f0fff0 !important;
    }

    .used-row {
        background: #fff0f0 !important;
    }
</style>
</style>
<body>
    <div class="sidebar">
        <ul class="sidebar-menu">
            <li><a href="dashboard.php"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
            <li><a href="bank_soal_teori.php"><i class="fas fa-book"></i> Bank Soal Teori</a></li>
            <li><a href="bank_soal_praktik.php"><i class="fas fa-clipboard-check"></i> Bank Soal Praktik</a></li>
            <li><a href="list_soal_teori.php" class="active"><i class="fas fa-list"></i> Daftar Soal Teori</a></li>
            <li><a href="list_soal_praktik.php"><i class="fas fa-list"></i> Daftar Soal Praktik</a></li>
            <li><a href="../logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
        </ul>
    </div>

    <div class="main-content">
        <div class="header">
            <h1>Daftar Soal Teori</h1>
            <div class="user-info">
                <span><i class="fas fa-user"></i> Halo, <?php echo $_SESSION['user_name'] ?? 'Admin'; ?></span>
                <a href="../logout.php" class="btn btn-danger btn-sm">
                    <i class="fas fa-sign-out-alt"></i> Logout
                </a>
            </div>
        </div>

        <div class="content">
            <?php if ($error): ?>
                <div class="alert alert-error"><?php echo $error; ?></div>
            <?php endif; ?>
            
            <?php if ($success): ?>
                <div class="alert alert-success"><?php echo $success; ?></div>
            <?php endif; ?>

            <!-- Statistik Soal -->
            <div class="stats-container">
                <h3><i class="fas fa-chart-bar"></i> Statistik Soal</h3>
                <div class="stats-grid">
                    <div class="stat-item stat-total">
                        <div class="stat-number"><?php echo $total_data; ?></div>
                        <div class="stat-label">Total Soal</div>
                    </div>
                    <div class="stat-item stat-unused">
                        <div class="stat-number"><?php echo $stats_unused; ?></div>
                        <div class="stat-label">Belum Digunakan</div>
                    </div>
                    <div class="stat-item stat-used">
                        <div class="stat-number"><?php echo $stats_used; ?></div>
                        <div class="stat-label">Sudah Digunakan</div>
                    </div>
                </div>
            </div>

            <!-- Filter Department -->
            <div class="department-filter">
                <h2><i class="fas fa-filter"></i> Filter Berdasarkan Department</h2>
                <p>Pilih department untuk melihat soal teori yang tersedia:</p>
                
                <div class="department-grid">
                    <a href="list_soal_teori.php<?php echo $review_soal_id ? '?review_id=' . $review_soal_id : ''; ?>" 
                       class="department-card <?php echo empty($selected_department) ? 'active' : ''; ?>">
                        <div class="department-icon">
                            <i class="fas fa-layer-group"></i>
                        </div>
                        <div class="department-name">Semua Department</div>
                        <div class="department-count">
                            <?php 
                            $total_soal = 0;
                            foreach ($department_counts as $count) {
                                $total_soal += $count;
                            }
                            echo $total_soal; 
                            ?> soal
                        </div>
                    </a>
                    
                    <?php foreach ($departments as $dept): ?>
                        <?php $count = $department_counts[$dept] ?? 0; ?>
                        <a href="list_soal_teori.php?department=<?php echo urlencode($dept); ?><?php echo $review_soal_id ? '&review_id=' . $review_soal_id : ''; ?>" 
                           class="department-card <?php echo $selected_department == $dept ? 'active' : ''; ?>">
                            <div class="department-icon">
                                <i class="fas fa-stethoscope"></i>
                            </div>
                            <div class="department-name"><?php echo htmlspecialchars($dept); ?></div>
                            <div class="department-count">
                                <?php echo $count; ?> soal
                            </div>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- Daftar Soal Teori -->
            <div class="soal-list-container">
                <div class="section-header">
                    <h2>
                        <i class="fas fa-clipboard-list"></i>
                        <?php if (!empty($selected_department)): ?>
                            Soal Uji Teori - <?php echo htmlspecialchars($selected_department); ?>
                            <small style="color: #f8f9faff; font-size: 0.8em; margin-left: 10px;">
                                (<?php echo count($soal_teori); ?> soal dari <?php echo $total_data; ?> total)
                            </small>
                        <?php else: ?>
                            Semua Soal Uji Teori
                            <small style="color: #f8f9faff; font-size: 0.8em; margin-left: 10px;">
                                (<?php echo count($soal_teori); ?> soal dari <?php echo $total_data; ?> total)
                            </small>
                        <?php endif; ?>
                    </h2>
                    
                    <?php if (!empty($selected_department)): ?>
                        <span class="selected-department">
                            <i class="fas fa-tag"></i>
                            <?php echo htmlspecialchars($selected_department); ?>
                        </span>
                    <?php endif; ?>
                </div>

                <!-- Filter Status -->
                <div class="status-filter">
                    <a href="list_soal_teori.php?<?php echo !empty($selected_department) ? 'department=' . urlencode($selected_department) : ''; ?>" 
                       class="status-filter-btn <?php echo empty($_GET['status']) ? 'active' : ''; ?>">
                        <i class="fas fa-layer-group"></i> Semua Status
                    </a>
                    <a href="list_soal_teori.php?<?php echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; ?>status=unused" 
                       class="status-filter-btn <?php echo ($_GET['status'] ?? '') == 'unused' ? 'active' : ''; ?>">
                        <i class="fas fa-circle" style="color: #28a745;"></i> Belum Digunakan
                    </a>
                    <a href="list_soal_teori.php?<?php echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; ?>status=used" 
                       class="status-filter-btn <?php echo ($_GET['status'] ?? '') == 'used' ? 'active' : ''; ?>">
                        <i class="fas fa-circle" style="color: #dc3545;"></i> Sudah Digunakan
                    </a>
                </div>

                <?php if (empty($soal_teori)): ?>
                    <div class="empty-state">
                        <i class="fas fa-book"></i>
                        <h3>Belum ada soal teori</h3>
                        <p>
                            <?php if (!empty($selected_department)): ?>
                                Tidak ada soal teori untuk department <strong><?php echo htmlspecialchars($selected_department); ?></strong>
                            <?php else: ?>
                                Silakan tambah soal teori melalui menu Bank Soal Teori
                            <?php endif; ?>
                        </p>
                        <?php if ($_SESSION['user_role'] == 'admin_soal'): ?>
                            <a href="bank_soal_teori.php" class="btn btn-primary">
                                <i class="fas fa-plus-circle"></i> Tambah Soal Teori
                            </a>
                        <?php endif; ?>
                    </div>
                <?php else: ?>
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>No. Registrasi</th>
                                <th>Pertanyaan</th>
                                <th>Kompetensi Utama</th>
                                <th>Department</th>
                                <th>Status</th>
                                <th>Kunci Jawaban</th>
                                <th>Penulis</th>
                                <th>Tanggal Dibuat</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                            $counter = ($page - 1) * $limit + 1;
                            foreach ($soal_teori as $soal): 
                                $status_class = $soal['digunakan_di_ujian'] ? 'used-row' : 'unused-row';
                            ?>
                                <tr id="soal-<?php echo $soal['id']; ?>" 
                                    class="<?php echo $status_class; ?> <?php echo $review_soal && $review_soal['id'] == $soal['id'] ? 'highlighted-row' : ''; ?>">
                                    <td><?php echo $counter++; ?></td>
                                    <td>
                                        <strong><?php echo htmlspecialchars($soal['nomor_registrasi']); ?></strong>
                                    </td>
                                    <td>
                                        <?php echo strip_tags(substr($soal['pertanyaan'], 0, 100)); ?>
                                        <?php if (strlen($soal['pertanyaan']) > 100): ?>...<?php endif; ?>
                                    </td>
                                    <td><?php echo htmlspecialchars($soal['tinjauan1']); ?></td>
                                    <td>
                                        <span class="badge badge-success">
                                            <?php echo htmlspecialchars($soal['department'] ?? '-'); ?>
                                        </span>
                                    </td>
                                    <td>
                                        <form method="POST" action="" class="status-toggle-form">
                                            <input type="hidden" name="toggle_status" value="1">
                                            <input type="hidden" name="id" value="<?php echo $soal['id']; ?>">
                                            <input type="hidden" name="current_status" value="<?php echo $soal['digunakan_di_ujian']; ?>">
                                            <button type="submit" class="status-toggle-btn" 
                                                    title="<?php echo $soal['digunakan_di_ujian'] ? 'Tandai sebagai belum digunakan' : 'Tandai sebagai sudah digunakan'; ?>">
                                                <span class="status-badge <?php echo $soal['digunakan_di_ujian'] ? 'status-used' : 'status-unused'; ?>">
                                                    <i class="fas <?php echo $soal['digunakan_di_ujian'] ? 'fa-check-circle' : 'fa-times-circle'; ?>"></i>
                                                    <?php echo $soal['digunakan_di_ujian'] ? 'Sudah Digunakan' : 'Belum Digunakan'; ?>
                                                </span>
                                            </button>
                                        </form>
                                    </td>
                                    <td>
                                        <strong><?php echo htmlspecialchars($soal['kunci'] ?? '-'); ?></strong>
                                    </td>
                                    <td><?php echo htmlspecialchars($soal['penulis'] ?? '-'); ?></td>
                                    <td><?php echo date('d/m/Y H:i', strtotime($soal['created_at'])); ?></td>
                                    <td>
                                        <div class="action-buttons">
                                            <a href="list_soal_teori.php?<?php 
                                                echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                                                echo 'page=' . $page . '&';
                                                ?>review_id=<?php echo $soal['id']; ?>" 
                                               class="btn btn-review" title="Review Soal">
                                                <i class="fas fa-eye"></i> Review
                                            </a>
                                            <?php if ($_SESSION['user_role'] == 'admin_soal'): ?>
                                                <a href="list_soal_teori.php?<?php 
                                                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                                                    echo 'page=' . $page . '&';
                                                    ?>edit_id=<?php echo $soal['id']; ?>" 
                                                   class="btn btn-edit" title="Edit Soal">
                                                    <i class="fas fa-edit"></i> Edit
                                                </a>
                                                <a href="hapus_soal_teori.php?id=<?php echo $soal['id']; ?>" 
                                                   class="btn btn-delete" 
                                                   onclick="return confirm('Yakin hapus soal teori ini?')"
                                                   title="Hapus Soal">
                                                    <i class="fas fa-trash"></i> Hapus
                                                </a>
                                            <?php endif; ?>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                    
                    <!-- 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 teori
                            <?php if (!empty($selected_department)): ?>
                                untuk department <strong><?php echo htmlspecialchars($selected_department); ?></strong>
                            <?php endif; ?>
                        </div>
                        
                        <div class="pagination-links">
                            <!-- Tombol Previous -->
                            <?php if ($page > 1): ?>
                                <a href="list_soal_teori.php?<?php 
                                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : '';
                                    echo ($review_soal_id ? 'review_id=' . $review_soal_id . '&' : '');
                                    echo ($edit_soal_id ? 'edit_id=' . $edit_soal_id . '&' : '');
                                    echo (isset($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '');
                                    ?>page=<?php echo $page - 1; ?>">
                                    <i class="fas fa-chevron-left"></i> Prev
                                </a>
                            <?php else: ?>
                                <span class="disabled"><i class="fas fa-chevron-left"></i> Prev</span>
                            <?php endif; ?>

                            <!-- Tombol Halaman -->
                            <?php 
                            $start_page = max(1, $page - 2);
                            $end_page = min($total_pages, $page + 2);
                            
                            if ($start_page > 1) {
                                echo '<a href="list_soal_teori.php?';
                                echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : '';
                                echo ($review_soal_id ? 'review_id=' . $review_soal_id . '&' : '');
                                echo ($edit_soal_id ? 'edit_id=' . $edit_soal_id . '&' : '');
                                echo (isset($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '');
                                echo 'page=1">1</a>';
                                if ($start_page > 2) echo '<span class="disabled">...</span>';
                            }
                            
                            for ($i = $start_page; $i <= $end_page; $i++): 
                                if ($i == $page): ?>
                                    <span class="current"><?php echo $i; ?></span>
                                <?php else: ?>
                                    <a href="list_soal_teori.php?<?php 
                                        echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : '';
                                        echo ($review_soal_id ? 'review_id=' . $review_soal_id . '&' : '');
                                        echo ($edit_soal_id ? 'edit_id=' . $edit_soal_id . '&' : '');
                                        echo (isset($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '');
                                        ?>page=<?php echo $i; ?>">
                                        <?php echo $i; ?>
                                    </a>
                                <?php endif;
                            endfor;
                            
                            if ($end_page < $total_pages) {
                                if ($end_page < $total_pages - 1) echo '<span class="disabled">...</span>';
                                echo '<a href="list_soal_teori.php?';
                                echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : '';
                                echo ($review_soal_id ? 'review_id=' . $review_soal_id . '&' : '');
                                echo ($edit_soal_id ? 'edit_id=' . $edit_soal_id . '&' : '');
                                echo (isset($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '');
                                echo 'page=' . $total_pages . '">' . $total_pages . '</a>';
                            }
                            ?>

                            <!-- Tombol Next -->
                            <?php if ($page < $total_pages): ?>
                                <a href="list_soal_teori.php?<?php 
                                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : '';
                                    echo ($review_soal_id ? 'review_id=' . $review_soal_id . '&' : '');
                                    echo ($edit_soal_id ? 'edit_id=' . $edit_soal_id . '&' : '');
                                    echo (isset($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '');
                                    ?>page=<?php echo $page + 1; ?>">
                                    Next <i class="fas fa-chevron-right"></i>
                                </a>
                            <?php else: ?>
                                <span class="disabled">Next <i class="fas fa-chevron-right"></i></span>
                            <?php endif; ?>
                        </div>

                        <!-- Form Lompat ke Halaman -->
                        <form method="GET" class="page-input-form">
                            <input type="hidden" name="department" value="<?php echo htmlspecialchars($selected_department); ?>">
                            <input type="hidden" name="review_id" value="<?php echo htmlspecialchars($review_soal_id); ?>">
                            <input type="hidden" name="edit_id" value="<?php echo htmlspecialchars($edit_soal_id); ?>">
                            <input type="hidden" name="status" value="<?php echo htmlspecialchars($_GET['status'] ?? ''); ?>">
                            <span>Lompat ke:</span>
                            <input type="number" name="page" class="page-input" 
                                   min="1" max="<?php echo $total_pages; ?>" 
                                   value="<?php echo $page; ?>" required>
                            <button type="submit" class="page-go-btn">Go</button>
                        </form>
                    </div>
                    <?php else: ?>
                        <div style="margin-top: 20px; text-align: center; color: #6c757d;">
                            <i class="fas fa-info-circle"></i>
                            Menampilkan <?php echo count($soal_teori); ?> soal teori
                            <?php if (!empty($selected_department)): ?>
                                untuk department <strong><?php echo htmlspecialchars($selected_department); ?></strong>
                            <?php endif; ?>
                        </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-container">
                            <h2 class="review-title">
                                <i class="fas fa-file-medical-alt"></i>
                                Review Soal Uji Teori - <?php echo htmlspecialchars($review_soal['nomor_registrasi']); ?>
                            </h2>
                            <?php if ($_SESSION['user_role'] == 'admin_soal'): ?>
                                <a href="list_soal_teori.php?<?php 
                                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                                    ?>edit_id=<?php echo $review_soal['id']; ?>" 
                                   class="btn btn-edit" 
                                   title="Edit Soal Ini">
                                    <i class="fas fa-edit"></i> Edit Soal Ini
                                </a>
                            <?php endif; ?>
                        </div>
                        <a href="list_soal_teori.php<?php echo !empty($selected_department) ? '?department=' . urlencode($selected_department) : ''; ?>" 
                           class="close-review" title="Tutup Review">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>

                    <div class="review-content">
                        <div class="review-column">
                            <!-- Informasi Dasar -->
                            <div class="info-group">
                                <div class="info-label">Nomor Registrasi</div>
                                <div class="info-value"><?php echo htmlspecialchars($review_soal['nomor_registrasi']); ?></div>
                            </div>

                            <div class="info-group">
                                <div class="info-label">Department</div>
                                <div class="info-value"><?php echo htmlspecialchars($review_soal['department'] ?? '-'); ?></div>
                            </div>

                            <div class="info-group">
                                <div class="info-label">Kompetensi Utama (Tinjauan 1)</div>
                                <div class="info-value"><?php echo htmlspecialchars($review_soal['tinjauan1']); ?></div>
                            </div>

                            <div class="info-group">
                                <div class="info-label">Penyakit/Kelainan (Tinjauan 2)</div>
                                <div class="info-value"><?php echo htmlspecialchars($review_soal['tinjauan2'] ?? '-'); ?></div>
                            </div>

                            <div class="info-group">
                                <div class="info-label">Bidang Ilmu & Keterampilan KG (Tinjauan 3)</div>
                                <div class="info-value"><?php echo htmlspecialchars($review_soal['tinjauan3'] ?? '-'); ?></div>
                            </div>

                            <div class="info-group">
                                <div class="info-label">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">Penulis</div>
                                <div class="info-value"><?php echo htmlspecialchars($review_soal['penulis'] ?? '-'); ?></div>
                            </div>
                        </div>

                        <div class="review-column">
                            <!-- Konten Soal -->
                            <?php if (!empty($review_soal['vignette'])): ?>
                                <div class="info-group">
                                    <div class="info-label">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">Pertanyaan / Instruksi</div>
                                <div class="info-value rich-text"><?php echo $review_soal['pertanyaan']; ?></div>
                            </div>

                            <!-- Pilihan Jawaban -->
                            <div class="info-group">
                                <div class="info-label">Pilihan Jawaban</div>
                                <div class="info-value">
                                    <?php if (!empty($review_soal['pilihan_a'])): ?>
                                        <div style="margin-bottom: 8px; <?php echo $review_soal['kunci'] == 'A' ? 'background: #d4edda; padding: 8px; border-radius: 4px;' : ''; ?>">
                                            <strong>A:</strong> <?php echo htmlspecialchars($review_soal['pilihan_a']); ?>
                                            <?php if ($review_soal['kunci'] == 'A'): ?><span style="color: #28a745; margin-left: 10px;">✓ Kunci Jawaban</span><?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                    
                                    <?php if (!empty($review_soal['pilihan_b'])): ?>
                                        <div style="margin-bottom: 8px; <?php echo $review_soal['kunci'] == 'B' ? 'background: #d4edda; padding: 8px; border-radius: 4px;' : ''; ?>">
                                            <strong>B:</strong> <?php echo htmlspecialchars($review_soal['pilihan_b']); ?>
                                            <?php if ($review_soal['kunci'] == 'B'): ?><span style="color: #28a745; margin-left: 10px;">✓ Kunci Jawaban</span><?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                    
                                    <?php if (!empty($review_soal['pilihan_c'])): ?>
                                        <div style="margin-bottom: 8px; <?php echo $review_soal['kunci'] == 'C' ? 'background: #d4edda; padding: 8px; border-radius: 4px;' : ''; ?>">
                                            <strong>C:</strong> <?php echo htmlspecialchars($review_soal['pilihan_c']); ?>
                                            <?php if ($review_soal['kunci'] == 'C'): ?><span style="color: #28a745; margin-left: 10px;">✓ Kunci Jawaban</span><?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                    
                                    <?php if (!empty($review_soal['pilihan_d'])): ?>
                                        <div style="margin-bottom: 8px; <?php echo $review_soal['kunci'] == 'D' ? 'background: #d4edda; padding: 8px; border-radius: 4px;' : ''; ?>">
                                            <strong>D:</strong> <?php echo htmlspecialchars($review_soal['pilihan_d']); ?>
                                            <?php if ($review_soal['kunci'] == 'D'): ?><span style="color: #28a745; margin-left: 10px;">✓ Kunci Jawaban</span><?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                    
                                    <?php if (!empty($review_soal['pilihan_e'])): ?>
                                        <div style="margin-bottom: 8px; <?php echo $review_soal['kunci'] == 'E' ? 'background: #d4edda; padding: 8px; border-radius: 4px;' : ''; ?>">
                                            <strong>E:</strong> <?php echo htmlspecialchars($review_soal['pilihan_e']); ?>
                                            <?php if ($review_soal['kunci'] == 'E'): ?><span style="color: #28a745; margin-left: 10px;">✓ Kunci Jawaban</span><?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>

                            <?php if (!empty($review_soal['alasan_singkat'])): ?>
                                <div class="info-group">
                                    <div class="info-label">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">Referensi</div>
                                    <div class="info-value rich-text"><?php echo $review_soal['referensi']; ?></div>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            <?php endif; ?>

            <!-- Edit Section -->
            <?php if ($edit_soal && $_SESSION['user_role'] == 'admin_soal'): ?>
                <div class="edit-section" id="editSection">
                    <div class="edit-header">
                        <h2 class="edit-title">
                            <i class="fas fa-edit"></i>
                            Edit Soal Teori - <?php echo htmlspecialchars($edit_soal['nomor_registrasi']); ?>
                        </h2>
                        <a href="list_soal_teori.php<?php echo !empty($selected_department) ? '?department=' . urlencode($selected_department) : ''; ?>" 
                           class="close-edit" title="Tutup Edit">
                            <i class="fas fa-times"></i>
                        </a>
                    </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-column">
                            <!-- Informasi Dasar -->
                            <div class="form-group">
                                <label for="nomor_registrasi">Nomor Registrasi *</label>
                                <input type="text" id="nomor_registrasi" name="nomor_registrasi" 
                                       value="<?php echo htmlspecialchars($edit_soal['nomor_registrasi']); ?>" 
                                       readonly 
                                       style="background-color: #ccd0d5ff; cursor: not-allowed;">
                                <small style="color: #e26810ff; font-size: 0.8em;">
                                    <i class="fas fa-lock"></i> Nomor registrasi tidak dapat diubah
                                </small>
                            </div>

                            <div class="form-group">
                                <label for="department">Department *</label>
                                <select id="department" name="department" 
                                        disabled 
                                        style="background-color: #ccd0d5ff; cursor: not-allowed;">
                                    <option value="">-- Pilih Department --</option>
                                    <?php foreach ($departments as $dept): ?>
                                        <option value="<?php echo htmlspecialchars($dept); ?>" 
                                            <?php echo $edit_soal['department'] == $dept ? 'selected' : ''; ?>>
                                            <?php echo htmlspecialchars($dept); ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                                <input type="hidden" name="department" value="<?php echo htmlspecialchars($edit_soal['department']); ?>">
                                <small style="color: #e26810ff; font-size: 0.8em;">
                                    <i class="fas fa-lock"></i> Department tidak dapat diubah
                                </small>
                            </div>

                            <div class="form-group">
                                <label for="tinjauan1">Kompetensi Utama (Tinjauan 1) *</label>
                                <input type="text" id="tinjauan1" name="tinjauan1" 
                                       value="<?php echo htmlspecialchars($edit_soal['tinjauan1']); ?>" required>
                            </div>

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

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

                            <div class="form-group">
                                <label for="penulis">Penulis</label>
                                <input type="text" id="penulis" name="penulis" 
                                       value="<?php echo htmlspecialchars($edit_soal['penulis'] ?? ''); ?>" 
                                       readonly 
                                       style="background-color: #ccd0d5ff; cursor: not-allowed;">
                                <small style="color: #e26810ff; font-size: 0.8em;">
                                    <i class="fas fa-lock"></i> Penulis tidak dapat diubah
                                </small>
                            </div>
                        </div>

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

                            <div class="form-group">
                                <label for="pertanyaan">Pertanyaan/Instruksi *</label>
                                <textarea id="pertanyaan" name="pertanyaan" required><?php echo htmlspecialchars($edit_soal['pertanyaan']); ?></textarea>
                            </div>

                            <!-- Pilihan Jawaban -->
                            <div class="form-group">
                                <label for="pilihan_a">Pilihan A</label>
                                <input type="text" id="pilihan_a" name="pilihan_a" 
                                       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" 
                                       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" 
                                       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" 
                                       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" 
                                       value="<?php echo htmlspecialchars($edit_soal['pilihan_e'] ?? ''); ?>">
                            </div>

                            <div class="form-group">
                                <label for="kunci">Kunci Jawaban</label>
                                <select id="kunci" name="kunci">
                                    <option value="">-- Pilih Kunci Jawaban --</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"><?php echo htmlspecialchars($edit_soal['alasan_singkat'] ?? ''); ?></textarea>
                            </div>

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

                        <div class="form-actions">
                            <button type="submit" class="btn-save">
                                <i class="fas fa-save"></i> Simpan Perubahan
                            </button>
                            <a href="list_soal_teori.php<?php echo !empty($selected_department) ? '?department=' . urlencode($selected_department) : ''; ?>" 
                               class="btn-cancel">
                                <i class="fas fa-times"></i> Batal
                            </a>
                        </div>
                    </form>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <script>
    // JavaScript untuk enhanced user experience
    document.addEventListener('DOMContentLoaded', function() {
        // Smooth scroll untuk department filter
        const departmentCards = document.querySelectorAll('.department-card');
        departmentCards.forEach(card => {
            card.addEventListener('click', function(e) {
                card.style.opacity = '0.7';
                setTimeout(() => {
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }, 100);
            });
        });

        // Highlight row yang sedang direview/diedit
        <?php if ($review_soal || $edit_soal): ?>
            const highlightedId = <?php echo $review_soal ? $review_soal['id'] : ($edit_soal ? $edit_soal['id'] : 'null'); ?>;
            if (highlightedId) {
                const highlightedRow = document.getElementById('soal-' + highlightedId);
                if (highlightedRow) {
                    highlightedRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        <?php endif; ?>

        // Scroll ke edit section jika ada
        const editSection = document.getElementById('editSection');
        if (editSection) {
            setTimeout(() => {
                editSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 300);
        }

        // Konfirmasi perubahan status
        const statusForms = document.querySelectorAll('.status-toggle-form');
        statusForms.forEach(form => {
            form.addEventListener('submit', function(e) {
                const currentStatus = this.querySelector('input[name="current_status"]').value;
                const message = currentStatus == '1' 
                    ? 'Apakah Anda yakin ingin menandai soal ini sebagai BELUM DIGUNAKAN?'
                    : 'Apakah Anda yakin ingin menandai soal ini sebagai SUDAH DIGUNAKAN?';
                
                if (!confirm(message)) {
                    e.preventDefault();
                }
            });
        });
    });
    </script>

    <script>
    // JavaScript untuk enhanced user experience
    document.addEventListener('DOMContentLoaded', function() {
        // Smooth scroll untuk department filter
        const departmentCards = document.querySelectorAll('.department-card');
        departmentCards.forEach(card => {
            card.addEventListener('click', function(e) {
                card.style.opacity = '0.7';
                setTimeout(() => {
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }, 100);
            });
        });

        // Highlight row yang sedang direview/diedit
        <?php if ($review_soal || $edit_soal): ?>
            const highlightedId = <?php echo $review_soal ? $review_soal['id'] : ($edit_soal ? $edit_soal['id'] : 'null'); ?>;
            if (highlightedId) {
                const highlightedRow = document.getElementById('soal-' + highlightedId);
                if (highlightedRow) {
                    highlightedRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        <?php endif; ?>

        // Scroll ke edit section jika ada
        const editSection = document.getElementById('editSection');
        if (editSection) {
            setTimeout(() => {
                editSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 300);
        }
    });
    </script>

    <script>
    // JavaScript untuk enhanced user experience
    document.addEventListener('DOMContentLoaded', function() {
        // Smooth scroll untuk department filter
        const departmentCards = document.querySelectorAll('.department-card');
        departmentCards.forEach(card => {
            card.addEventListener('click', function(e) {
                card.style.opacity = '0.7';
                setTimeout(() => {
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }, 100);
            });
        });

        // Highlight row yang sedang direview/diedit
        <?php if ($review_soal || $edit_soal): ?>
            const highlightedId = <?php echo $review_soal ? $review_soal['id'] : ($edit_soal ? $edit_soal['id'] : 'null'); ?>;
            if (highlightedId) {
                const highlightedRow = document.getElementById('soal-' + highlightedId);
                if (highlightedRow) {
                    highlightedRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        <?php endif; ?>

        // Scroll ke edit section jika ada
        const editSection = document.getElementById('editSection');
        if (editSection) {
            setTimeout(() => {
                editSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 300);
        }
    });
    </script>
</body>
</html>