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

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

// Data soal yang akan direview
$review_soal = null;
if (!empty($review_soal_id)) {
    try {
        $stmt = $pdo->prepare("SELECT * FROM bank_soal_praktik 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_praktik 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'] ?? '';
        $sub_tinjauan2 = $_POST['sub_tinjauan2'] ?? '';
        $tinjauan3 = $_POST['tinjauan3'] ?? '';
        $tinjauan4 = $_POST['tinjauan4'] ?? '';
        $tujuan = $_POST['tujuan'] ?? '';
        $skenario_klinik = $_POST['skenario_klinik'];
        $tugas_kandidat = $_POST['tugas_kandidat'] ?? '';
        $tugas_penguji = $_POST['tugas_penguji'] ?? '';
        $instruksi_pasien = $_POST['instruksi_pasien'] ?? '';
        $peralatan = $_POST['peralatan'] ?? '';
        $department = $_POST['department'];
        $referensi = $_POST['referensi'] ?? '';
        $penulis = $_POST['penulis'] ?? '';

        // Proses upload gambar jika ada
        $gambar_soal = $_POST['current_gambar'] ?? '';
        if (isset($_FILES['gambar_upload']) && $_FILES['gambar_upload']['error'] == UPLOAD_ERR_OK) {
            $gambar_soal = uploadGambar($_FILES['gambar_upload']);
        } elseif (isset($_POST['hapus_gambar']) && $_POST['hapus_gambar'] == '1') {
            $gambar_soal = '';
        } elseif (!empty($_POST['gambar_soal'])) {
            $gambar_soal = $_POST['gambar_soal'];
        }

        $stmt = $pdo->prepare("UPDATE bank_soal_praktik SET 
            nomor_registrasi = ?, tinjauan1 = ?, tinjauan2 = ?, sub_tinjauan2 = ?, 
            tinjauan3 = ?, tinjauan4 = ?, tujuan = ?, skenario_klinik = ?, 
            tugas_kandidat = ?, tugas_penguji = ?, instruksi_pasien = ?, 
            peralatan = ?, gambar_soal = ?, department = ?, referensi = ?, penulis = ?
            WHERE id = ?");

        $stmt->execute([
            $nomor_registrasi, $tinjauan1, $tinjauan2, $sub_tinjauan2,
            $tinjauan3, $tinjauan4, $tujuan, $skenario_klinik,
            $tugas_kandidat, $tugas_penguji, $instruksi_pasien,
            $peralatan, $gambar_soal, $department, $referensi, $penulis, $id
        ]);

        $success = 'Soal praktik berhasil diperbarui!';
        
        // Redirect untuk menghindari resubmit
        $redirect_url = "list_soal_praktik.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();
    } catch (Exception $e) {
        $error = 'Gagal upload gambar: ' . $e->getMessage();
    }
}

// Fungsi upload gambar (sama seperti di bank_soal_praktik.php)
function uploadGambar($file) {
    $target_dir = "../uploads/gambar_soal/";
    
    if (!file_exists($target_dir)) {
        mkdir($target_dir, 0777, true);
    }
    
    $allowed_types = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
    $max_size = 5 * 1024 * 1024;
    
    $filename = basename($file["name"]);
    $target_file = $target_dir . uniqid() . '_' . preg_replace("/[^a-zA-Z0-9\.]/", "_", $filename);
    $imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
    
    if (!in_array($imageFileType, $allowed_types)) {
        throw new Exception("Hanya file JPG, JPEG, PNG, GIF, dan WebP yang diizinkan.");
    }
    
    if ($file["size"] > $max_size) {
        throw new Exception("Ukuran file terlalu besar. Maksimal 5MB.");
    }
    
    $check = getimagesize($file["tmp_name"]);
    if ($check === false) {
        throw new Exception("File bukan gambar yang valid.");
    }
    
    if (move_uploaded_file($file["tmp_name"], $target_file)) {
        return str_replace('../', '', $target_file);
    } else {
        throw new Exception("Terjadi kesalahan saat mengupload gambar.");
    }
}

// Konfigurasi Pagination
$limit = 10; // Jumlah data per halaman
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$page = max($page, 1); // Pastikan halaman minimal 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_praktik 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_praktik");
        $total_data = $stmt->fetchColumn();
    }
    
    $total_pages = ceil($total_data / $limit);
} catch (PDOException $e) {
    $error = 'Gagal menghitung total data: ' . $e->getMessage();
}

// Ambil data soal praktik berdasarkan department dengan pagination
$soal_praktik = [];
try {
    if (!empty($selected_department)) {
        if (in_array($selected_department, $departments)) {
            // Gunakan string concatenation untuk LIMIT dan OFFSET
            $sql = "SELECT * FROM bank_soal_praktik WHERE department = ? ORDER BY created_at DESC LIMIT $limit OFFSET $offset";
            $stmt = $pdo->prepare($sql);
            $stmt->execute([$selected_department]);
            $soal_praktik = $stmt->fetchAll(PDO::FETCH_ASSOC);
        } else {
            $error = 'Department tidak valid: ' . htmlspecialchars($selected_department);
        }
    } else {
        // Gunakan string concatenation untuk LIMIT dan OFFSET
        $sql = "SELECT * FROM bank_soal_praktik ORDER BY created_at DESC LIMIT $limit OFFSET $offset";
        $stmt = $pdo->query($sql);
        $soal_praktik = $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_praktik 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
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Soal Praktik - SOCA OSCE System</title>
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/css/list_soal_praktik.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: 2px;
        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;
    }

    .gambar-preview {
        max-width: 50px;
        max-height: 50px;
        border-radius: 4px;
        cursor: pointer;
    }

    .gambar-preview:hover {
        opacity: 0.8;
    }

    .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;
    }

    .gambar-review {
        max-width: 100%;
        max-height: 300px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .no-image {
        text-align: center;
        color: #6c757d;
        padding: 40px;
        background: #f8f9fa;
        border-radius: 8px;
        border: 2px dashed #dee2e6;
    }

    @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;
    }

    .upload-container {
        border: 2px dashed #ddd;
        border-radius: 8px;
        padding: 15px;
        text-align: center;
        background: #fafafa;
    }

    .upload-preview {
        max-width: 200px;
        max-height: 150px;
        margin: 10px auto;
        display: none;
    }

    .current-image {
        max-width: 200px;
        max-height: 150px;
        margin: 10px 0;
        border-radius: 4px;
    }

    .file-input-wrapper {
        position: relative;
        display: inline-block;
        margin: 10px 0;
    }

    .file-input-wrapper input[type="file"] {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .file-input-label {
        display: inline-block;
        padding: 8px 16px;
        background: #667eea;
        color: white;
        border-radius: 4px;
        cursor: pointer;
    }

    .upload-options {
        display: flex;
        gap: 20px;
        margin-bottom: 15px;
    }

    .upload-option {
        flex: 1;
    }

    .option-divider {
        text-align: center;
        margin: 10px 0;
        color: #666;
        font-weight: bold;
    }

    @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;
        }
    }
</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"><i class="fas fa-list"></i> Daftar Soal Teori</a></li>
            <li><a href="list_soal_praktik.php" class="active"><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 Praktik</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; ?>

            <!-- Filter Department -->
            <div class="department-filter">
                <h2><i class="fas fa-filter"></i> Filter Berdasarkan Department</h2>
                <p>Pilih department untuk melihat soal praktik yang tersedia:</p>
                
                <div class="department-grid">
                    <a href="list_soal_praktik.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_praktik.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 Praktik -->
            <div class="soal-list-container">
                <div class="section-header">
                    <h2>
                        <i class="fas fa-clipboard-list"></i>
                        <?php if (!empty($selected_department)): ?>
                            Soal Uji Praktik - <?php echo htmlspecialchars($selected_department); ?>
                            <small style="color: #f8f9faff; font-size: 0.8em; margin-left: 10px;">
                                (<?php echo count($soal_praktik); ?> soal dari <?php echo $total_data; ?> total)
                            </small>
                        <?php else: ?>
                            Semua Soal Uji Praktik
                            <small style="color: #f8f9faff; font-size: 0.8em; margin-left: 10px;">
                                (<?php echo count($soal_praktik); ?> 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>

                <?php if (empty($soal_praktik)): ?>
                    <div class="empty-state">
                        <i class="fas fa-stethoscope"></i>
                        <h3>Belum ada soal praktik</h3>
                        <p>
                            <?php if (!empty($selected_department)): ?>
                                Tidak ada soal praktik untuk department <strong><?php echo htmlspecialchars($selected_department); ?></strong>
                            <?php else: ?>
                                Silakan tambah soal praktik melalui menu Bank Soal Praktik
                            <?php endif; ?>
                        </p>
                        <?php if ($_SESSION['user_role'] == 'admin_soal'): ?>
                            <a href="bank_soal_praktik.php" class="btn btn-primary">
                                <i class="fas fa-plus-circle"></i> Tambah Soal Praktik
                            </a>
                        <?php endif; ?>
                    </div>
                <?php else: ?>
                    <table class="data-table">
    <thead>
        <tr>
            <th style="text-align: center">No.</th>
            <th style="text-align: center">No. Registrasi</th>
            <th>Skenario Klinik</th>
            <th>Kompetensi Utama</th>
            <th>Department</th>
            <th>Gambar</th>
            <th>Penulis</th>
            <th>Tanggal Dibuat</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tbody>
        <?php 
        $counter = ($page - 1) * $limit + 1; // Hitung nomor urut berdasarkan halaman
        foreach ($soal_praktik as $soal): ?>
            <tr id="soal-<?php echo $soal['id']; ?>" 
                class="<?php echo $review_soal && $review_soal['id'] == $soal['id'] ? 'highlighted-row' : ''; ?>">
                <td style="text-align: center"><?php echo $counter++; ?></td>
                <td style="text-align: center">
                    <strong><?php echo htmlspecialchars($soal['nomor_registrasi']); ?></strong>
                </td>
                <td>
                    <?php echo strip_tags(substr($soal['skenario_klinik'], 0, 100)); ?>
                    <?php if (strlen($soal['skenario_klinik']) > 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>
                    <?php if (!empty($soal['gambar_soal'])): ?>
                        <?php
                        $gambar_path = $soal['gambar_soal'];
                        if (!filter_var($gambar_path, FILTER_VALIDATE_URL)) {
                            $gambar_path = '../' . $gambar_path;
                        }
                        ?>
                        <img src="<?php echo htmlspecialchars($gambar_path); ?>" 
                             alt="Gambar Soal" 
                             class="gambar-preview"
                             onclick="window.open('<?php echo htmlspecialchars($gambar_path); ?>', '_blank')"
                             onerror="this.style.display='none'">
                    <?php else: ?>
                        <span style="color: #6c757d;">-</span>
                    <?php endif; ?>
                </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_praktik.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_praktik.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_praktik.php?id=<?php echo $soal['id']; ?>" 
                               class="btn btn-delete" 
                               onclick="return confirm('Yakin hapus soal praktik 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 praktik
                            <?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_praktik.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 . '&' : '');
                                    ?>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_praktik.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 '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_praktik.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 . '&' : '');
                                        ?>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_praktik.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 'page=' . $total_pages . '">' . $total_pages . '</a>';
                            }
                            ?>

                            <!-- Tombol Next -->
                            <?php if ($page < $total_pages): ?>
                                <a href="list_soal_praktik.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 . '&' : '');
                                    ?>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); ?>">
                            <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_praktik); ?> soal praktik
                            <?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 Praktik - <?php echo htmlspecialchars($review_soal['nomor_registrasi']); ?>
                                    </h2>
                                    <?php if ($_SESSION['user_role'] == 'admin_soal'): ?>
                                        <a href="list_soal_praktik.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_praktik.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">Kelompok 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">Penyakit/Kelainan (Sub Tinjauan 2)</div>
                                        <div class="info-value"><?php echo htmlspecialchars($review_soal['sub_tinjauan2'] ?? '-'); ?></div>
                                    </div>

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

                                    <div class="info-group">
                                        <div class="info-label">Bidang Ilmu (Tinjauan 4)</div>
                                        <div class="info-value"><?php echo htmlspecialchars($review_soal['tinjauan4'] ?? '-'); ?></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 -->
                                    <div class="info-group">
                                        <div class="info-label">Tujuan</div>
                                        <div class="info-value rich-text"><?php echo nl2br(htmlspecialchars($review_soal['tujuan'] ?? '-')); ?></div>
                                    </div>

                                    <div class="info-group">
                                        <div class="info-label">Skenario Klinik</div>
                                        <div class="info-value rich-text"><?php echo nl2br(htmlspecialchars($review_soal['skenario_klinik'])); ?></div>
                                    </div>

                                    <div class="info-group">
                                        <div class="info-label">Tugas untuk Kandidat</div>
                                        <div class="info-value rich-text"><?php echo nl2br(htmlspecialchars($review_soal['tugas_kandidat'] ?? '-')); ?></div>
                                    </div>

                                    <div class="info-group">
                                        <div class="info-label">Tugas untuk Penguji</div>
                                        <div class="info-value rich-text"><?php echo nl2br(htmlspecialchars($review_soal['tugas_penguji'] ?? '-')); ?></div>
                                    </div>

                                    <div class="info-group">
                                        <div class="info-label">Instruksi Untuk Pasien Simulasi</div>
                                        <div class="info-value rich-text"><?php echo nl2br(htmlspecialchars($review_soal['instruksi_pasien'] ?? '-')); ?></div>
                                    </div>

                                    <div class="info-group">
                                        <div class="info-label">Peralatan yang dibutuhkan</div>
                                        <div class="info-value rich-text"><?php echo nl2br(htmlspecialchars($review_soal['peralatan'] ?? '-')); ?></div>
                                    </div>

                                    <div class="info-group">
                                        <div class="info-label">Referensi</div>
                                        <div class="info-value rich-text"><?php echo nl2br(htmlspecialchars($review_soal['referensi'] ?? '-')); ?></div>
                                    </div>

                                    <!-- Gambar Soal -->
                                    <?php if (!empty($review_soal['gambar_soal'])): ?>
                                        <div class="info-group">
                                            <div class="info-label">Gambar Soal</div>
                                            <?php
                                            $gambar_path = $review_soal['gambar_soal'];
                                            if (!filter_var($gambar_path, FILTER_VALIDATE_URL)) {
                                                $gambar_path = '../' . $gambar_path;
                                            }
                                            ?>
                                            <img src="<?php echo htmlspecialchars($gambar_path); ?>" 
                                                 alt="Gambar Soal" 
                                                 class="gambar-review"
                                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                            <div style="display: none; text-align: center; color: #dc3545;">
                                                <i class="fas fa-exclamation-triangle"></i> Gambar tidak dapat dimuat
                                            </div>
                                        </div>
                                    <?php else: ?>
                                        <div class="info-group">
                                            <div class="info-label">Gambar Soal</div>
                                            <div class="no-image">
                                                <i class="fas fa-image" style="font-size: 3em; margin-bottom: 10px;"></i>
                                                <p>Tidak ada gambar</p>
                                            </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 Praktik - <?php echo htmlspecialchars($edit_soal['nomor_registrasi']); ?>
                                </h2>
                                <a href="list_soal_praktik.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="" enctype="multipart/form-data" class="edit-form">
                                <input type="hidden" name="id" value="<?php echo $edit_soal['id']; ?>">
                                <input type="hidden" name="update_soal" value="1">
                                <input type="hidden" name="current_gambar" value="<?php echo htmlspecialchars($edit_soal['gambar_soal'] ?? ''); ?>">

                                <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">Kelompok 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="sub_tinjauan2">Penyakit/Kelainan (Sub Tinjauan 2)</label>
                                        <input type="text" id="sub_tinjauan2" name="sub_tinjauan2" 
                                               value="<?php echo htmlspecialchars($edit_soal['sub_tinjauan2'] ?? ''); ?>">
                                    </div>

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

                                    <div class="form-group">
                                        <label for="tinjauan4">Bidang Ilmu (Tinjauan 4)</label>
                                        <input type="text" id="tinjauan4" name="tinjauan4" 
                                               value="<?php echo htmlspecialchars($edit_soal['tinjauan4'] ?? ''); ?>">
                                    </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="tujuan">Tujuan</label>
                                        <textarea id="tujuan" name="tujuan"><?php echo htmlspecialchars($edit_soal['tujuan'] ?? ''); ?></textarea>
                                    </div>

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

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

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

                                    <div class="form-group">
                                        <label for="instruksi_pasien">Instruksi Untuk Pasien Simulasi</label>
                                        <textarea id="instruksi_pasien" name="instruksi_pasien"><?php echo htmlspecialchars($edit_soal['instruksi_pasien'] ?? ''); ?></textarea>
                                    </div>

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

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

                                    <!-- Gambar Soal -->
                                    <div class="form-group">
                                        <label>Gambar Soal</label>
                                        
                                        <?php if (!empty($edit_soal['gambar_soal'])): ?>
                                            <div style="margin-bottom: 15px;">
                                                <strong>Gambar Saat Ini:</strong>
                                                <?php
                                                $current_image = $edit_soal['gambar_soal'];
                                                if (!filter_var($current_image, FILTER_VALIDATE_URL)) {
                                                    $current_image = '../' . $current_image;
                                                }
                                                ?>
                                                <img src="<?php echo htmlspecialchars($current_image); ?>" 
                                                     alt="Gambar Saat Ini" 
                                                     class="current-image"
                                                     onerror="this.style.display='none'">
                                                <div style="margin-top: 10px;">
                                                   <!-- <label>
                                                        <input type="checkbox" name="hapus_gambar" value="1">
                                                        Hapus gambar saat ini
                                                    </label>
                                                </div>
                                            </div>
                                        <?php endif; ?>

                                        <div class="upload-options">
                                            <div class="upload-option">
                                                <label><strong>Upload Gambar Baru</strong></label>
                                                <div class="upload-container">
                                                    <div class="file-input-wrapper">
                                                        <input type="file" id="gambar_upload" name="gambar_upload" accept="image/*">
                                                        <span class="file-input-label">
                                                            <i class="fas fa-folder-open"></i> Pilih File
                                                        </span>
                                                    </div>
                                                    <div style="font-size: 0.8em; color: #666; margin-top: 5px;">
                                                        Format: JPG, JPEG, PNG, GIF, WebP (Maks. 5MB)
                                                    </div>
                                                    <img id="uploadPreview" class="upload-preview" src="" alt="Preview">
                                                </div>
                                            </div>
                                            
                                            <div class="option-divider">ATAU</div>
                                            
                                            <div class="upload-option">
                                                <label><strong>Gunakan URL</strong></label>
                                                <input type="text" id="gambar_soal" name="gambar_soal" 
                                                       value="<?php echo htmlspecialchars($edit_soal['gambar_soal'] ?? ''); ?>"
                                                       placeholder="Masukkan URL gambar">
                                            </div>
                                        </div>
                                    </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_praktik.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);
            });
        });

        // Tooltip untuk gambar preview
        const gambarPreviews = document.querySelectorAll('.gambar-preview');
        gambarPreviews.forEach(preview => {
            preview.title = 'Klik untuk melihat gambar lengkap';
        });

        // 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; ?>

        // JavaScript untuk upload gambar preview (hanya untuk edit section)
        const fileInput = document.getElementById('gambar_upload');
        const preview = document.getElementById('uploadPreview');
        const urlInput = document.getElementById('gambar_soal');
        
        if (fileInput && preview && urlInput) {
            fileInput.addEventListener('change', function(e) {
                if (this.files.length) {
                    const file = this.files[0];
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        preview.src = e.target.result;
                        preview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                    
                    // Kosongkan URL input
                    urlInput.value = '';
                }
            });
            
            // Saat URL diisi, kosongkan file input
            urlInput.addEventListener('input', function() {
                if (this.value) {
                    fileInput.value = '';
                    preview.style.display = 'none';
                }
            });

            // 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);
                    });
                });

                // Tooltip untuk gambar preview
                const gambarPreviews = document.querySelectorAll('.gambar-preview');
                gambarPreviews.forEach(preview => {
                    preview.title = 'Klik untuk melihat gambar lengkap';
                });

                // 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; ?>

                // JavaScript untuk upload gambar preview (hanya untuk edit section)
                const fileInput = document.getElementById('gambar_upload');
                const preview = document.getElementById('uploadPreview');
                const urlInput = document.getElementById('gambar_soal');
                
                if (fileInput && preview && urlInput) {
                    fileInput.addEventListener('change', function(e) {
                        if (this.files.length) {
                            const file = this.files[0];
                            const reader = new FileReader();
                            
                            reader.onload = function(e) {
                                preview.src = e.target.result;
                                preview.style.display = 'block';
                            };
                            reader.readAsDataURL(file);
                            
                            // Kosongkan URL input
                            urlInput.value = '';
                        }
                    });
                    
                    // Saat URL diisi, kosongkan file input
                    urlInput.addEventListener('input', function() {
                        if (this.value) {
                            fileInput.value = '';
                            preview.style.display = 'none';
                        }
                    });

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