<?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'];
        
        $current_status_bool = filter_var($current_status, FILTER_VALIDATE_BOOLEAN);
        $new_status = $current_status_bool ? 0 : 1;
        
        $stmt = $pdo->prepare("UPDATE bank_soal_praktik SET digunakan_di_ujian = ? WHERE id = ?");
        $stmt->execute([$new_status, $id]);
        
        $success = 'Status soal berhasil diperbarui!';
        
        $redirect_url = "list_soal_praktik.php?";
        if (!empty($selected_department)) {
            $redirect_url .= "department=" . urlencode($selected_department) . "&";
        }
        if (!empty($_GET['page'])) {
            $redirect_url .= "page=" . $_GET['page'] . "&";
        }
        if (!empty($_GET['status'])) {
            $redirect_url .= "status=" . $_GET['status'] . "&";
        }
        if (!empty($_GET['review_status'])) {
            $redirect_url .= "review_status=" . $_GET['review_status'] . "&";
        }
        header("Location: " . $redirect_url);
        exit;
        
    } catch (PDOException $e) {
        $error = 'Gagal memperbarui status soal: ' . $e->getMessage();
        error_log("Error updating status: " . $e->getMessage());
    }
}

// Data soal yang akan direview/diedit
$review_soal = null;
$edit_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'] ?? '';

        $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_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
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 = 7;
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$page = max($page, 1);
$offset = ($page - 1) * $limit;

$status_filter = $_GET['status'] ?? '';
$review_filter = $_GET['review_status'] ?? '';
$where_conditions = [];
$params = [];

if (!empty($selected_department)) {
    $where_conditions[] = "sp.department = ?";
    $params[] = $selected_department;
}

if ($status_filter === 'used') {
    $where_conditions[] = "sp.digunakan_di_ujian = 1";
} elseif ($status_filter === 'unused') {
    $where_conditions[] = "sp.digunakan_di_ujian = 0";
}

// Filter status review
if ($review_filter === 'belum') {
    $where_conditions[] = "(sp.status_review IS NULL OR sp.status_review = 'belum')";
} elseif ($review_filter === 'disetujui') {
    $where_conditions[] = "sp.status_review = 'disetujui'";
} elseif ($review_filter === 'revisi') {
    $where_conditions[] = "sp.status_review = 'revisi'";
}

$where_sql = '';
if (!empty($where_conditions)) {
    $where_sql = "WHERE " . implode(" AND ", $where_conditions);
}

$total_data = 0;
$total_pages = 1;

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

// Ambil data soal praktik dengan pagination dan filter
$soal_praktik = [];
try {
    $sql = "SELECT sp.*, u.nama_lengkap as nama_reviewer 
            FROM bank_soal_praktik sp 
            LEFT JOIN users_preview u ON sp.direview_oleh = u.id 
            $where_sql 
            ORDER BY 
                CASE 
                    WHEN sp.status_review = 'belum' OR sp.status_review IS NULL THEN 1 
                    WHEN sp.status_review = 'revisi' THEN 2 
                    WHEN sp.status_review = 'disetujui' THEN 3 
                    ELSE 4 
                END,
                sp.created_at DESC 
            LIMIT $limit OFFSET $offset";
    
    if (!empty($params)) {
        $stmt = $pdo->prepare($sql);
        $stmt->execute($params);
    } else {
        $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
}

// Hitung statistik status soal
$stats_used = 0;
$stats_unused = 0;
$stats_belum_review = 0;
$stats_disetujui = 0;
$stats_revisi = 0;

try {
    if (!empty($selected_department)) {
        // Status penggunaan
        $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_praktik WHERE department = ? AND digunakan_di_ujian = 1");
        $stmt->execute([$selected_department]);
        $stats_used = $stmt->fetchColumn();
        
        $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_praktik WHERE department = ? AND digunakan_di_ujian = 0");
        $stmt->execute([$selected_department]);
        $stats_unused = $stmt->fetchColumn();
        
        // Status review
        $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_praktik WHERE department = ? AND (status_review IS NULL OR status_review = 'belum')");
        $stmt->execute([$selected_department]);
        $stats_belum_review = $stmt->fetchColumn();
        
        $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_praktik WHERE department = ? AND status_review = 'disetujui'");
        $stmt->execute([$selected_department]);
        $stats_disetujui = $stmt->fetchColumn();
        
        $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_praktik WHERE department = ? AND status_review = 'revisi'");
        $stmt->execute([$selected_department]);
        $stats_revisi = $stmt->fetchColumn();
    } else {
        // Status penggunaan
        $stmt = $pdo->query("SELECT COUNT(*) FROM bank_soal_praktik WHERE digunakan_di_ujian = 1");
        $stats_used = $stmt->fetchColumn();
        
        $stmt = $pdo->query("SELECT COUNT(*) FROM bank_soal_praktik WHERE digunakan_di_ujian = 0");
        $stats_unused = $stmt->fetchColumn();
        
        // Status review
        $stmt = $pdo->query("SELECT COUNT(*) FROM bank_soal_praktik WHERE status_review IS NULL OR status_review = 'belum'");
        $stats_belum_review = $stmt->fetchColumn();
        
        $stmt = $pdo->query("SELECT COUNT(*) FROM bank_soal_praktik WHERE status_review = 'disetujui'");
        $stats_disetujui = $stmt->fetchColumn();
        
        $stmt = $pdo->query("SELECT COUNT(*) FROM bank_soal_praktik WHERE status_review = 'revisi'");
        $stats_revisi = $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 Praktik - SOCA OSCE System</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* ===== RESET & BASE ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #d4d8dc;
            display: flex;
            min-height: 100vh;
        }

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

        .sidebar::-webkit-scrollbar {
            width: 4px;
        }

        .sidebar::-webkit-scrollbar-track {
            background: transparent;
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.2);
            border-radius: 10px;
        }

        .sidebar-header {
            padding: 25px 20px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            text-align: center;
        }

        .sidebar-header h2 {
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 1px;
            background: linear-gradient(135deg, #60a5fa, #2f42ef);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .sidebar-header p {
            font-size: 12px;
            color: rgba(255,255,255,0.5);
            margin-top: 4px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .sidebar-menu {
            list-style: none;
            padding: 15px 0;
        }

        .sidebar-menu li {
            margin: 2px 12px;
        }

        .sidebar-menu li a {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 16px;
            color: rgba(255,255,255,0.6);
            text-decoration: none;
            border-radius: 12px;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
        }

        .sidebar-menu li a i {
            width: 20px;
            font-size: 16px;
            text-align: center;
        }

        .sidebar-menu li a:hover {
            background: rgba(255,255,255,0.08);
            color: #fff;
            transform: translateX(4px);
        }

        .sidebar-menu li a.active {
            background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(167,139,250,0.2));
            color: #60a5fa;
            box-shadow: inset 3px 0 0 #60a5fa;
        }

        .sidebar-menu .menu-divider {
            height: 1px;
            background: rgba(255,255,255,0.06);
            margin: 12px 20px;
        }

        .sidebar-menu .menu-label {
            padding: 10px 20px 6px;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.25);
            font-weight: 600;
        }

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

        /* ===== HEADER ===== */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .header-left h1 {
            font-size: 28px;
            font-weight: 700;
            color: #1a2332;
            letter-spacing: -0.5px;
        }

        .header-left .subtitle {
            font-size: 14px;
            color: #6b7a8f;
            margin-top: 4px;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .header-right .user-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #fff;
            padding: 8px 16px 8px 12px;
            border-radius: 50px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        }

        .header-right .user-badge .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #60a5fa, #2746f2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 600;
            font-size: 16px;
        }

        .header-right .user-badge .user-name {
            font-weight: 600;
            font-size: 14px;
            color: #1a2332;
        }

        .header-right .user-badge .user-role {
            font-size: 12px;
            color: #6b7a8f;
        }

        .btn-logout {
            background: #fee2e2;
            color: #dc2626;
            border: none;
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-logout:hover {
            background: #fecaca;
            transform: scale(1.02);
        }

        /* ===== ALERT ===== */
        .alert {
            padding: 16px 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .alert-success {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #a7f3d0;
        }

        .alert-error {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #fca5a5;
        }

        .alert i {
            font-size: 18px;
        }

        /* ===== STATS CARDS ===== */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
            margin-bottom: 25px;
        }

        .stat-card {
            background: #fff;
            border-radius: 14px;
            padding: 20px 22px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.04);
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 24px rgba(0,0,0,0.08);
        }

        .stat-card .stat-number {
            font-size: 28px;
            font-weight: 700;
            color: #1a2332;
        }

        .stat-card .stat-label {
            font-size: 13px;
            color: #6b7a8f;
            font-weight: 500;
        }

        .stat-card .stat-icon {
            float: right;
            font-size: 28px;
            opacity: 0.3;
        }

        .stat-card.blue .stat-icon { color: #2563eb; }
        .stat-card.green .stat-icon { color: #059669; }
        .stat-card.red .stat-icon { color: #dc2626; }
        .stat-card.orange .stat-icon { color: #f59e0b; }
        .stat-card.purple .stat-icon { color: #7c3aed; }

        /* ===== FILTER CONTAINER ===== */
        .filter-container {
            background: #fff;
            border-radius: 16px;
            padding: 24px 28px;
            margin-bottom: 25px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.04);
        }

        .filter-container .filter-title {
            font-size: 16px;
            font-weight: 600;
            color: #0c0c0c;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .filter-container .filter-title i {
            color: #60a5fa;
        }

        .filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            margin-top: 12px;
        }

        .filter-card {
            display: block;
            padding: 14px 16px;
            background: #87bbef;
            border-radius: 10px;
            text-decoration: none;
            color: #121212;
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .filter-card:hover {
            background: #eff6ff;
            border-color: #bfdbfe;
            transform: translateY(-2px);
        }

        .filter-card.active {
            background: #eff6ff;
            border-color: #60a5fa;
            box-shadow: 0 2px 12px rgba(96,165,250,0.15);
        }

        .filter-card .filter-icon {
            font-size: 20px;
            color: #0d0d0d;
            margin-bottom: 4px;
        }

        .filter-card .filter-name {
            font-size: 13px;
            font-weight: 500;
        }

        .filter-card .filter-count {
            font-size: 12px;
            color: #6b7a8f;
        }

        /* ===== SOAL LIST ===== */
        .soal-list-container {
            background: #fff;
            border-radius: 16px;
            padding: 24px 28px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.04);
        }

        .list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 18px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .list-title {
            font-size: 18px;
            font-weight: 700;
            color: #1a2332;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .list-title i {
            color: #60a5fa;
        }

        .list-title .badge-total {
            padding: 2px 12px;
            background: #f1f5f9;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 500;
            color: #475569;
        }

        .selected-filter {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px;
            background: #eff6ff;
            color: #2563eb;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 500;
        }

        /* ===== STATUS FILTER ===== */
        .status-filter {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .status-filter-btn {
            padding: 6px 16px;
            border: 2px solid #e2e8f0;
            border-radius: 50px;
            background: #fff;
            color: #475569;
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .status-filter-btn:hover {
            border-color: #60a5fa;
            color: #2563eb;
        }

        .status-filter-btn.active {
            background: #eff6ff;
            border-color: #60a5fa;
            color: #2563eb;
        }

        /* ===== REVIEW BADGE ===== */
        .review-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 50px;
            font-size: 10px;
            font-weight: 600;
        }

        .review-badge.belum {
            background: #fee2e2;
            color: #dc2626;
        }

        .review-badge.disetujui {
            background: #d1fae5;
            color: #059669;
        }

        .review-badge.revisi {
            background: #fef3c7;
            color: #d97706;
        }

        /* ===== TABLE ===== */
        .table-wrapper {
            overflow-x: auto;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .data-table thead {
            background: #87bbef;
        }

        .data-table th {
            padding: 10px 14px;
            text-align: left;
            font-weight: 600;
            color: #0c0c0c;
            border-bottom: 2px solid #e2e8f0;
            white-space: nowrap;
        }

        .data-table td {
            padding: 10px 14px;
            border-bottom: 1px solid #f1f5f9;
            color: #1a2332;
            vertical-align: middle;
        }

        .data-table tbody tr {
            transition: all 0.2s ease;
        }

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

        .data-table tbody tr.highlighted {
            background: #eff6ff !important;
            border-left: 4px solid #60a5fa;
        }

        .data-table tbody tr.unused-row {
            border-left: 3px solid #059669;
        }

        .data-table tbody tr.used-row {
            border-left: 3px solid #dc2626;
        }

        /* ===== BADGES ===== */
        .badge {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 600;
        }

        .badge-department {
            background: #dbeafe;
            color: #2563eb;
        }

        /* ===== STATUS BADGE ===== */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }

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

        .status-badge.used {
            background: #fee2e2;
            color: #dc2626;
        }

        .status-badge.unused {
            background: #d1fae5;
            color: #059669;
        }

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

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

        /* ===== ACTIONS ===== */
        .action-buttons {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }

        .btn-action {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 12px;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            border: none;
            cursor: pointer;
        }

        .btn-action:hover {
            transform: translateY(-1px);
        }

        .btn-review {
            background: #eff6ff;
            color: #2563eb;
        }

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

        .btn-edit {
            background: #fef3c7;
            color: #d97706;
        }

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

        .btn-delete {
            background: #fee2e2;
            color: #dc2626;
        }

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

        .btn-export-word {
            background: #e0e7ff;
            color: #4f46e5;
            padding: 4px 12px;
            border-radius: 6px;
            font-size: 12px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .btn-export-word:hover {
            background: #c7d2fe;
            transform: translateY(-1px);
        }

        /* ===== PAGINATION ===== */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .pagination-info {
            color: #6b7a8f;
            font-size: 13px;
            width: 100%;
            text-align: center;
        }

        .pagination-links {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }

        .pagination a,
        .pagination span {
            display: inline-block;
            padding: 6px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            text-decoration: none;
            color: #475569;
            font-size: 13px;
            min-width: 36px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .pagination a:hover {
            background: #eff6ff;
            border-color: #60a5fa;
            color: #2563eb;
        }

        .pagination .current {
            background: #2563eb;
            color: #fff;
            border-color: #2563eb;
        }

        .pagination .disabled {
            color: #94a3b8;
            cursor: not-allowed;
            background: #f1f5f9;
        }

        .page-input-form {
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .page-input {
            width: 50px;
            padding: 4px 6px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            text-align: center;
            font-size: 13px;
        }

        .page-go-btn {
            padding: 4px 12px;
            background: #2563eb;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.3s ease;
        }

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

        /* ===== EMPTY STATE ===== */
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: #6b7a8f;
        }

        .empty-state i {
            font-size: 48px;
            color: #d1d5db;
            margin-bottom: 12px;
            display: block;
        }

        .empty-state h3 {
            font-size: 18px;
            color: #1a2332;
            margin-bottom: 6px;
        }

        /* ===== REVIEW SECTION ===== */
        .review-section {
            background: #fff;
            border-radius: 16px;
            padding: 28px 32px;
            margin-top: 25px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.04);
            border-left: 4px solid #60a5fa;
        }

        .review-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .review-title {
            font-size: 18px;
            font-weight: 700;
            color: #1a2332;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .review-title i {
            color: #60a5fa;
        }

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

        .close-review {
            background: #fee2e2;
            color: #dc2626;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .close-review:hover {
            background: #fecaca;
            transform: scale(1.05);
        }

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

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

        .info-group {
            background: #f8fafc;
            padding: 14px 18px;
            border-radius: 10px;
            border-left: 3px solid #60a5fa;
        }

        .info-label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #6b7a8f;
            margin-bottom: 4px;
        }

        .info-value {
            font-size: 14px;
            color: #1a2332;
            line-height: 1.6;
        }

        .info-value.rich-text {
            background: #fff;
            padding: 10px 14px;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
        }

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

        .no-image {
            text-align: center;
            color: #6b7a8f;
            padding: 30px;
            background: #f8fafc;
            border-radius: 8px;
            border: 2px dashed #e2e8f0;
        }

        .no-image i {
            font-size: 40px;
            color: #d1d5db;
            margin-bottom: 8px;
        }

        /* ===== EDIT SECTION ===== */
        .edit-section {
            background: #fff;
            border-radius: 16px;
            padding: 28px 32px;
            margin-top: 25px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.04);
            border-left: 4px solid #f59e0b;
        }

        .edit-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .edit-title {
            font-size: 18px;
            font-weight: 700;
            color: #1a2332;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .edit-title i {
            color: #f59e0b;
        }

        .close-edit {
            background: #fee2e2;
            color: #dc2626;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .close-edit:hover {
            background: #fecaca;
            transform: scale(1.05);
        }

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

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

        .form-group label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: #475569;
            margin-bottom: 4px;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 8px 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: #f8fafc;
            font-family: inherit;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #60a5fa;
            box-shadow: 0 0 0 4px rgba(96,165,250,0.1);
            background: #fff;
        }

        .form-group input:disabled,
        .form-group select:disabled {
            background: #f1f5f9;
            cursor: not-allowed;
        }

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

        .form-group .field-hint {
            font-size: 12px;
            color: #6b7a8f;
            margin-top: 2px;
        }

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

        .btn-save {
            padding: 10px 28px;
            background: linear-gradient(135deg, #059669, #10b981);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-save:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(5,150,105,0.3);
        }

        .btn-cancel {
            padding: 10px 28px;
            background: #f1f5f9;
            color: #475569;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-cancel:hover {
            background: #e2e8f0;
        }

        .upload-container {
            border: 2px dashed #e2e8f0;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            background: #f8fafc;
            transition: all 0.3s ease;
        }

        .upload-container:hover {
            border-color: #60a5fa;
            background: #eff6ff;
        }

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

        .current-image {
            max-width: 200px;
            max-height: 150px;
            margin: 10px 0;
            border-radius: 6px;
            border: 2px solid #e2e8f0;
        }

        .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 20px;
            background: linear-gradient(135deg, #2563eb, #7c3aed);
            color: #fff;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            font-size: 14px;
        }

        .file-input-label:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(37,99,235,0.3);
        }

        .upload-options {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 15px;
            align-items: start;
        }

        .upload-option {
            flex: 1;
        }

        .option-divider {
            text-align: center;
            color: #6b7a8f;
            font-weight: 600;
            padding-top: 30px;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 992px) {
            .sidebar {
                width: 220px;
            }
            .main-content {
                margin-left: 220px;
                padding: 20px;
            }
            .review-content {
                grid-template-columns: 1fr;
            }
            .edit-form {
                grid-template-columns: 1fr;
            }
            .upload-options {
                grid-template-columns: 1fr;
            }
            .option-divider {
                padding-top: 5px;
            }
        }

        @media (max-width: 768px) {
            .sidebar {
                width: 0;
                transform: translateX(-100%);
            }
            .sidebar.open {
                width: 280px;
                transform: translateX(0);
            }
            .main-content {
                margin-left: 0;
                padding: 15px;
            }
            .header {
                flex-direction: column;
                align-items: flex-start;
            }
            .filter-grid {
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            }
            .stats-grid {
                grid-template-columns: 1fr 1fr;
            }
            .review-section,
            .edit-section {
                padding: 16px;
            }
            .data-table {
                font-size: 12px;
            }
            .data-table th,
            .data-table td {
                padding: 6px 8px;
            }
            .action-buttons {
                flex-direction: column;
                gap: 3px;
            }
        }

        @media (max-width: 480px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
            .header-left h1 {
                font-size: 22px;
            }
            .filter-grid {
                grid-template-columns: 1fr 1fr;
            }
            .list-header {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        .hamburger {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: #1a2332;
            cursor: pointer;
            padding: 8px;
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            .hamburger {
                display: block;
            }
        }

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

        .sidebar-overlay.active {
            display: block;
        }

        .scroll-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: #2563eb;
            color: #fff;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            font-size: 18px;
            box-shadow: 0 4px 16px rgba(37,99,235,0.3);
            transition: all 0.3s ease;
            opacity: 0;
            visibility: hidden;
            z-index: 50;
        }

        .scroll-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .scroll-top:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 24px rgba(37,99,235,0.4);
        }
    </style>
</head>
<body>
    <!-- Overlay untuk mobile -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <!-- Sidebar -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h2>SOCA/OSCE</h2>
            <p>Admin Panel</p>
        </div>
        <ul class="sidebar-menu">
            <li class="menu-label">Main Menu</li>
            <li><a href="dashboard.php"><i class="fas fa-th-large"></i> Dashboard</a></li>
            
            <li class="menu-divider"></li>
            <li class="menu-label">Soal Teori S1</li>
            <li><a href="bank_soal_teori_s1.php"><i class="fas fa-plus-circle"></i> Tambah Soal</a></li>
            <li><a href="list_soal_teori_s1.php"><i class="fas fa-list"></i> Daftar Soal</a></li>
            
            <li class="menu-divider"></li>
            <li class="menu-label">Soal Teori</li>
            <li><a href="bank_soal_teori.php"><i class="fas fa-plus-circle"></i> Tambah Soal</a></li>
            <li><a href="list_soal_teori.php"><i class="fas fa-list"></i> Daftar Soal</a></li>
            
            <li class="menu-divider"></li>
            <li class="menu-label">Soal Praktik</li>
            <li><a href="bank_soal_praktik.php"><i class="fas fa-plus-circle"></i> Tambah Soal</a></li>
            <li><a href="list_soal_praktik.php" class="active"><i class="fas fa-list"></i> Daftar Soal</a></li>
            
            <li class="menu-divider"></li>
            <li class="menu-label">Lainnya</li>
            <li><a href="aspek_penilaian.php"><i class="fas fa-clipboard-check"></i> Aspek Penilaian</a></li>
            <li><a href="preview_aspek_penilaian.php"><i class="fas fa-eye"></i> Preview Aspek</a></li>
            <li><a href="users.php"><i class="fas fa-users"></i> Kelola Users</a></li>
            <li><a href="../logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
        </ul>
    </div>

    <!-- Main Content -->
    <div class="main-content">
        <!-- Header -->
        <div class="header">
            <div class="header-left">
                <button class="hamburger" id="hamburgerBtn">
                    <i class="fas fa-bars"></i>
                </button>
                <h1>Daftar Soal Praktik</h1>
                <div class="subtitle">Kelola dan review soal ujian praktik untuk program studi Kedokteran Gigi</div>
            </div>
            <div class="header-right">
                <div class="user-badge">
                    <div class="avatar">
                        <?php echo strtoupper(substr($_SESSION['user_name'] ?? 'A', 0, 1)); ?>
                    </div>
                    <div>
                        <div class="user-name"><?php echo $_SESSION['user_name'] ?? 'Admin'; ?></div>
                        <div class="user-role">Admin Soal</div>
                    </div>
                </div>
                <a href="../logout.php" class="btn-logout">
                    <i class="fas fa-sign-out-alt"></i> Logout
                </a>
            </div>
        </div>

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

        <!-- Stats - Penggunaan -->
        <div class="stats-grid">
            <div class="stat-card blue">
                <div class="stat-icon"><i class="fas fa-database"></i></div>
                <div class="stat-number"><?php echo $total_data; ?></div>
                <div class="stat-label">Total Soal Praktik</div>
            </div>
            <div class="stat-card green">
                <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
                <div class="stat-number"><?php echo $stats_unused; ?></div>
                <div class="stat-label">Belum Digunakan</div>
            </div>
            <div class="stat-card red">
                <div class="stat-icon"><i class="fas fa-check-double"></i></div>
                <div class="stat-number"><?php echo $stats_used; ?></div>
                <div class="stat-label">Sudah Digunakan</div>
            </div>
        </div>

        <!-- Stats - Status Review -->
        <div class="stats-grid" style="margin-bottom:25px;">
            <div class="stat-card orange" style="border-left-color:#f59e0b;">
                <div class="stat-icon"><i class="fas fa-clock"></i></div>
                <div class="stat-number"><?php echo $stats_belum_review; ?></div>
                <div class="stat-label">Belum Review</div>
            </div>
            <div class="stat-card green" style="border-left-color:#059669;">
                <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
                <div class="stat-number"><?php echo $stats_disetujui; ?></div>
                <div class="stat-label">Disetujui</div>
            </div>
            <div class="stat-card red" style="border-left-color:#d97706;">
                <div class="stat-icon"><i class="fas fa-exclamation-circle"></i></div>
                <div class="stat-number"><?php echo $stats_revisi; ?></div>
                <div class="stat-label">Perlu Revisi</div>
            </div>
        </div>

        <!-- Filter -->
        <div class="filter-container">
            <div class="filter-title">
                <i class="fas fa-filter"></i> Filter Berdasarkan Department
            </div>

            <div class="filter-grid">
                <a href="list_soal_praktik.php" 
                   class="filter-card <?php echo empty($selected_department) ? 'active' : ''; ?>">
                    <div class="filter-icon"><i class="fas fa-layer-group"></i></div>
                    <div class="filter-name">Semua</div>
                    <div class="filter-count"><?php echo $total_data; ?> 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); ?>" 
                       class="filter-card <?php echo $selected_department == $dept ? 'active' : ''; ?>">
                        <div class="filter-icon"><i class="fas fa-stethoscope"></i></div>
                        <div class="filter-name"><?php echo htmlspecialchars($dept); ?></div>
                        <div class="filter-count"><?php echo $count; ?> soal</div>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>

        <!-- Soal List -->
        <div class="soal-list-container">
            <div class="list-header">
                <div class="list-title">
                    <i class="fas fa-clipboard-list"></i>
                    Daftar Soal Praktik
                    <span class="badge-total"><?php echo count($soal_praktik); ?> dari <?php echo $total_data; ?></span>
                </div>
                
                <?php if (!empty($selected_department)): ?>
                    <span class="selected-filter">
                        <i class="fas fa-tag"></i>
                        <?php echo htmlspecialchars($selected_department); ?>
                        <a href="list_soal_praktik.php" style="color:#2563eb;text-decoration:none;opacity:0.6;">
                            <i class="fas fa-times"></i>
                        </a>
                    </span>
                <?php endif; ?>
            </div>

            <!-- Status Filter -->
            <div class="status-filter">
                <a href="list_soal_praktik.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_praktik.php?<?php 
                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                    echo 'status=unused';
                ?>" 
                   class="status-filter-btn <?php echo ($_GET['status'] ?? '') == 'unused' ? 'active' : ''; ?>">
                    <i class="fas fa-circle" style="color:#059669;"></i> Belum Digunakan
                </a>
                <a href="list_soal_praktik.php?<?php 
                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                    echo 'status=used';
                ?>" 
                   class="status-filter-btn <?php echo ($_GET['status'] ?? '') == 'used' ? 'active' : ''; ?>">
                    <i class="fas fa-circle" style="color:#dc2626;"></i> Sudah Digunakan
                </a>
            </div>

            <!-- Filter Status Review -->
            <div class="status-filter" style="margin-top:10px; border-top:1px solid #e2e8f0; padding-top:10px;">
                <span style="font-weight:600; font-size:13px; color:#475569; margin-right:10px;">
                    <i class="fas fa-clipboard-check"></i> Status Review:
                </span>
                <a href="list_soal_praktik.php?<?php 
                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                    echo !empty($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '';
                ?>" 
                   class="status-filter-btn <?php echo empty($_GET['review_status']) ? 'active' : ''; ?>">
                    Semua
                </a>
                <a href="list_soal_praktik.php?<?php 
                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                    echo !empty($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '';
                    echo 'review_status=belum';
                ?>" 
                   class="status-filter-btn <?php echo ($_GET['review_status'] ?? '') == 'belum' ? 'active' : ''; ?>">
                    <i class="fas fa-clock" style="color:#dc2626;"></i> Belum
                </a>
                <a href="list_soal_praktik.php?<?php 
                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                    echo !empty($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '';
                    echo 'review_status=disetujui';
                ?>" 
                   class="status-filter-btn <?php echo ($_GET['review_status'] ?? '') == 'disetujui' ? 'active' : ''; ?>">
                    <i class="fas fa-check-circle" style="color:#059669;"></i> Disetujui
                </a>
                <a href="list_soal_praktik.php?<?php 
                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                    echo !empty($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '';
                    echo 'review_status=revisi';
                ?>" 
                   class="status-filter-btn <?php echo ($_GET['review_status'] ?? '') == 'revisi' ? 'active' : ''; ?>">
                    <i class="fas fa-exclamation-circle" style="color:#d97706;"></i> Revisi
                </a>
            </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 untuk department <strong><?php echo htmlspecialchars($selected_department); ?></strong>
                        <?php else: ?>
                            Silakan tambahkan soal baru melalui menu Bank Soal Praktik.
                        <?php endif; ?>
                    </p>
                    <?php if ($_SESSION['user_role'] == 'admin_soal'): ?>
                        <a href="bank_soal_praktik.php" class="btn-action btn-review" style="padding:10px 24px;font-size:14px;margin-top:10px;">
                            <i class="fas fa-plus-circle"></i> Tambah Soal
                        </a>
                    <?php endif; ?>
                </div>
            <?php else: ?>
                <div class="table-wrapper">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>No. Registrasi</th>
                                <th>Kompetensi Utama</th>
                                <th>Department</th>
                                <th>Status Review</th>
                                <th>Status Penggunaan</th>
                                <th>Penulis</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                            $counter = ($page - 1) * $limit + 1;
                            foreach ($soal_praktik as $soal): 
                                $status_class = $soal['digunakan_di_ujian'] ? 'used-row' : 'unused-row';
                                $is_highlighted = ($review_soal && $review_soal['id'] == $soal['id']) || ($edit_soal && $edit_soal['id'] == $soal['id']);
                                
                                $review_status = $soal['status_review'] ?? 'belum';
                                $status_label = [
                                    'belum' => 'Belum Direview',
                                    'disetujui' => 'Disetujui',
                                    'revisi' => 'Perlu Revisi'
                                ][$review_status] ?? 'Belum Direview';
                            ?>
                                <tr id="soal-<?php echo $soal['id']; ?>" 
                                    class="<?php echo $status_class; ?> <?php echo $is_highlighted ? 'highlighted' : ''; ?>">
                                    <td><?php echo $counter++; ?></td>
                                    <td><strong><?php echo htmlspecialchars($soal['nomor_registrasi']); ?></strong></td>
                                    <td><?php echo htmlspecialchars(substr($soal['tinjauan1'], 0, 25)) . (strlen($soal['tinjauan1']) > 25 ? '...' : ''); ?></td>
                                    <td><span class="badge badge-department"><?php echo htmlspecialchars($soal['department'] ?? '-'); ?></span></td>
                                    <td>
                                        <span class="review-badge <?php echo $review_status; ?>">
                                            <i class="fas <?php 
                                                echo $review_status == 'disetujui' ? 'fa-check-circle' : 
                                                    ($review_status == 'revisi' ? 'fa-exclamation-circle' : 'fa-clock'); 
                                            ?>"></i>
                                            <?php echo $status_label; ?>
                                        </span>
                                        <?php if (($review_status == 'disetujui' || $review_status == 'revisi') && !empty($soal['nama_reviewer'])): ?>
                                            <br><small style="color:#6b7a8f;font-size:10px;">
                                                <i class="fas fa-user-check"></i> <?php echo htmlspecialchars($soal['nama_reviewer']); ?>
                                                <?php if (!empty($soal['tanggal_review'])): ?>
                                                    <br><span style="color:#94a3b8;font-size:9px;">
                                                        <?php echo date('d/m/Y', strtotime($soal['tanggal_review'])); ?>
                                                    </span>
                                                <?php endif; ?>
                                            </small>
                                        <?php endif; ?>
                                    </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'] ? 'used' : 'unused'; ?>">
                                                    <i class="fas <?php echo $soal['digunakan_di_ujian'] ? 'fa-check-circle' : 'fa-circle'; ?>"></i>
                                                    <?php echo $soal['digunakan_di_ujian'] ? 'Digunakan' : 'Belum'; ?>
                                                </span>
                                            </button>
                                        </form>
                                    </td>
                                    <td><?php echo htmlspecialchars($soal['penulis'] ?? '-'); ?></td>
                                    <td>
                                        <div class="action-buttons">
                                            <a href="list_soal_praktik.php?<?php 
                                                echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                                                echo !empty($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '';
                                                echo !empty($_GET['review_status']) ? 'review_status=' . $_GET['review_status'] . '&' : '';
                                                echo 'page=' . $page . '&';
                                                ?>review_id=<?php echo $soal['id']; ?>" 
                                               class="btn-action btn-review" title="Review Soal">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <?php if ($_SESSION['user_role'] == 'admin_soal'): ?>
                                                <a href="list_soal_praktik.php?<?php 
                                                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                                                    echo !empty($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '';
                                                    echo !empty($_GET['review_status']) ? 'review_status=' . $_GET['review_status'] . '&' : '';
                                                    echo 'page=' . $page . '&';
                                                    ?>edit_id=<?php echo $soal['id']; ?>" 
                                                   class="btn-action btn-edit" title="Edit Soal">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <a href="hapus_soal_praktik.php?id=<?php echo $soal['id']; ?>" 
                                                   class="btn-action btn-delete" 
                                                   onclick="return confirm('Yakin hapus soal ini?')"
                                                   title="Hapus Soal">
                                                    <i class="fas fa-trash"></i>
                                                </a>
                                            <?php endif; ?>
                                            <button onclick="exportSoalPraktikToWord(<?php echo $soal['id']; ?>)" 
                                                    class="btn-export-word" title="Export ke Word">
                                                <i class="fas fa-file-word"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <?php if ($total_pages > 1): ?>
                    <div class="pagination">
                        <div class="pagination-info">
                            Menampilkan <?php echo (($page - 1) * $limit) + 1; ?> - 
                            <?php echo min($page * $limit, $total_data); ?> dari <?php echo $total_data; ?> soal
                        </div>
                        
                        <div class="pagination-links">
                            <?php if ($page > 1): ?>
                                <a href="list_soal_praktik.php?<?php 
                                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : '';
                                    echo !empty($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '';
                                    echo !empty($_GET['review_status']) ? 'review_status=' . $_GET['review_status'] . '&' : '';
                                    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>
                                </a>
                            <?php else: ?>
                                <span class="disabled"><i class="fas fa-chevron-left"></i></span>
                            <?php endif; ?>

                            <?php 
                            $start_page = max(1, $page - 2);
                            $end_page = min($total_pages, $page + 2);
                            
                            if ($start_page > 1) {
                                echo '<a href="list_soal_praktik.php?';
                                echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : '';
                                echo !empty($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '';
                                echo !empty($_GET['review_status']) ? 'review_status=' . $_GET['review_status'] . '&' : '';
                                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 !empty($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '';
                                        echo !empty($_GET['review_status']) ? 'review_status=' . $_GET['review_status'] . '&' : '';
                                        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 !empty($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '';
                                echo !empty($_GET['review_status']) ? 'review_status=' . $_GET['review_status'] . '&' : '';
                                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>';
                            }
                            ?>

                            <?php if ($page < $total_pages): ?>
                                <a href="list_soal_praktik.php?<?php 
                                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : '';
                                    echo !empty($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '';
                                    echo !empty($_GET['review_status']) ? 'review_status=' . $_GET['review_status'] . '&' : '';
                                    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-right"></i>
                                </a>
                            <?php else: ?>
                                <span class="disabled"><i class="fas fa-chevron-right"></i></span>
                            <?php endif; ?>
                        </div>

                        <form method="GET" class="page-input-form">
                            <input type="hidden" name="department" value="<?php echo htmlspecialchars($selected_department); ?>">
                            <input type="hidden" name="status" value="<?php echo htmlspecialchars($_GET['status'] ?? ''); ?>">
                            <input type="hidden" name="review_status" value="<?php echo htmlspecialchars($_GET['review_status'] ?? ''); ?>">
                            <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 style="font-size:13px;color:#6b7a8f;">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 endif; ?>
            <?php endif; ?>
        </div>

        <!-- Review Section -->
        <?php if ($review_soal): ?>
            <div class="review-section" id="reviewSection">
                <div class="review-header">
                    <div class="review-title">
                        <i class="fas fa-file-medical-alt"></i>
                        Review Soal Praktik - <?php echo htmlspecialchars($review_soal['nomor_registrasi']); ?>
                    </div>
                    <div style="display:flex;gap:8px;align-items:center;">
                        <?php if ($_SESSION['user_role'] == 'admin_soal'): ?>
                            <a href="list_soal_praktik.php?<?php 
                                echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                                echo !empty($_GET['status']) ? 'status=' . $_GET['status'] . '&' : '';
                                echo !empty($_GET['review_status']) ? 'review_status=' . $_GET['review_status'] . '&' : '';
                                ?>edit_id=<?php echo $review_soal['id']; ?>" 
                               class="btn-action btn-edit" style="padding:6px 14px;">
                                <i class="fas fa-edit"></i> Edit
                            </a>
                        <?php endif; ?>
                        <button onclick="exportSoalPraktikToWord(<?php echo $review_soal['id']; ?>)" 
                                class="btn-export-word" style="padding:6px 14px;">
                            <i class="fas fa-file-word"></i> Export Word
                        </button>
                        <a href="list_soal_praktik.php<?php 
                            echo !empty($selected_department) ? '?department=' . urlencode($selected_department) : ''; 
                            echo !empty($_GET['status']) ? '&status=' . $_GET['status'] : '';
                            echo !empty($_GET['review_status']) ? '&review_status=' . $_GET['review_status'] : '';
                        ?>" 
                           class="close-review" title="Tutup Review">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="review-content">
                    <div class="review-column">
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-hashtag"></i> Nomor Registrasi</div>
                            <div class="info-value"><strong><?php echo htmlspecialchars($review_soal['nomor_registrasi']); ?></strong></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-building"></i> Department</div>
                            <div class="info-value"><?php echo htmlspecialchars($review_soal['department'] ?? '-'); ?></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-bullseye"></i> Kompetensi Utama</div>
                            <div class="info-value"><?php echo htmlspecialchars($review_soal['tinjauan1']); ?></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-notes-medical"></i> Kelompok Penyakit</div>
                            <div class="info-value"><?php echo htmlspecialchars($review_soal['tinjauan2'] ?? '-'); ?></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-disease"></i> Penyakit/Kelainan</div>
                            <div class="info-value"><?php echo htmlspecialchars($review_soal['sub_tinjauan2'] ?? '-'); ?></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-stethoscope"></i> Ranah Keterampilan Klinis</div>
                            <div class="info-value"><?php echo htmlspecialchars($review_soal['tinjauan3'] ?? '-'); ?></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-graduation-cap"></i> Bidang Ilmu</div>
                            <div class="info-value"><?php echo htmlspecialchars($review_soal['tinjauan4'] ?? '-'); ?></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-user-edit"></i> Penulis</div>
                            <div class="info-value"><?php echo htmlspecialchars($review_soal['penulis'] ?? '-'); ?></div>
                        </div>
                        <?php if (!empty($review_soal['status_review']) && $review_soal['status_review'] != 'belum'): ?>
                            <div class="info-group" style="border-left-color:#f59e0b;">
                                <div class="info-label"><i class="fas fa-comment"></i> Status Review</div>
                                <div class="info-value">
                                    <span class="review-badge <?php echo $review_soal['status_review']; ?>">
                                        <i class="fas <?php echo $review_soal['status_review'] == 'disetujui' ? 'fa-check-circle' : 'fa-exclamation-circle'; ?>"></i>
                                        <?php echo ucfirst($review_soal['status_review']); ?>
                                    </span>
                                    <?php if (!empty($soal['nama_reviewer'])): ?>
                                        <br><small style="color:#6b7a8f;">Oleh: <?php echo htmlspecialchars($soal['nama_reviewer']); ?></small>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>

                    <div class="review-column">
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-bullseye"></i> 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"><i class="fas fa-file-medical"></i> 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"><i class="fas fa-user-md"></i> Tugas 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"><i class="fas fa-user-check"></i> Tugas 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"><i class="fas fa-user-friends"></i> Instruksi Pasien</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"><i class="fas fa-tools"></i> Peralatan</div>
                            <div class="info-value rich-text"><?php echo nl2br(htmlspecialchars($review_soal['peralatan'] ?? '-')); ?></div>
                        </div>

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

                        <?php if (!empty($review_soal['gambar_soal'])): ?>
                            <div class="info-group">
                                <div class="info-label"><i class="fas fa-image"></i> 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.parentElement.querySelector('.no-image').style.display='block';">
                                <div class="no-image" style="display:none;">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    <p>Gambar tidak dapat dimuat</p>
                                </div>
                            </div>
                        <?php else: ?>
                            <div class="info-group">
                                <div class="info-label"><i class="fas fa-image"></i> Gambar Soal</div>
                                <div class="no-image">
                                    <i class="fas fa-image"></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">
                    <div class="edit-title">
                        <i class="fas fa-edit"></i>
                        Edit Soal Praktik - <?php echo htmlspecialchars($edit_soal['nomor_registrasi']); ?>
                    </div>
                    <a href="list_soal_praktik.php<?php 
                        echo !empty($selected_department) ? '?department=' . urlencode($selected_department) : ''; 
                        echo !empty($_GET['status']) ? '&status=' . $_GET['status'] : '';
                        echo !empty($_GET['review_status']) ? '&review_status=' . $_GET['review_status'] : '';
                    ?>" 
                       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-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']); ?>" disabled>
                        <div class="field-hint"><i class="fas fa-lock"></i> Nomor registrasi tidak dapat diubah</div>
                    </div>

                    <div class="form-group">
                        <label for="department">Department *</label>
                        <select id="department" name="department" disabled>
                            <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']); ?>">
                        <div class="field-hint"><i class="fas fa-lock"></i> Department tidak dapat diubah</div>
                    </div>

                    <div class="form-group">
                        <label for="tinjauan1">Kompetensi Utama *</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</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</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</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</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'] ?? ''); ?>" disabled>
                        <div class="field-hint"><i class="fas fa-lock"></i> Penulis tidak dapat diubah</div>
                    </div>

                    <div class="form-group">
                        <label for="tujuan">Tujuan</label>
                        <textarea id="tujuan" name="tujuan" rows="3"><?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" rows="4" required><?php echo htmlspecialchars($edit_soal['skenario_klinik']); ?></textarea>
                    </div>

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

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

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

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

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

                    <div class="form-group">
                        <label>Gambar Soal</label>
                        
                        <?php if (!empty($edit_soal['gambar_soal'])): ?>
                            <div style="margin-bottom:10px;">
                                <strong style="font-size:13px;">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:5px;">
                                    <label style="font-size:13px;font-weight:400;">
                                        <input type="checkbox" name="hapus_gambar" value="1">
                                        Hapus gambar saat ini
                                    </label>
                                </div>
                            </div>
                        <?php endif; ?>

                        <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 Gambar Baru
                                </span>
                            </div>
                            <div style="font-size:12px;color:#6b7a8f;margin-top:5px;">
                                <i class="fas fa-info-circle"></i>
                                Format: JPG, JPEG, PNG, GIF, WebP (Maks. 5MB)
                            </div>
                            <img id="uploadPreview" class="upload-preview" src="" alt="Preview">
                        </div>

                        <div style="margin-top:10px;">
                            <label style="font-size:13px;font-weight:500;">Atau gunakan URL:</label>
                            <input type="text" id="gambar_soal" name="gambar_soal" 
                                   value="<?php echo htmlspecialchars($edit_soal['gambar_soal'] ?? ''); ?>"
                                   placeholder="https://example.com/gambar.jpg"
                                   style="width:100%;padding:8px 12px;border:2px solid #e2e8f0;border-radius:8px;font-size:14px;margin-top:4px;">
                        </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) : ''; 
                            echo !empty($_GET['status']) ? '&status=' . $_GET['status'] : '';
                            echo !empty($_GET['review_status']) ? '&review_status=' . $_GET['review_status'] : '';
                        ?>" 
                           class="btn-cancel">
                            <i class="fas fa-times"></i> Batal
                        </a>
                    </div>
                </form>
            </div>
        <?php endif; ?>
    </div>

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

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

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

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

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

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

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

        // ===== STATUS TOGGLE CONFIRMATION =====
        document.addEventListener('DOMContentLoaded', function() {
            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();
                    }
                });
            });

            // ===== UPLOAD GAMBAR PREVIEW =====
            const fileInput = document.getElementById('gambar_upload');
            const preview = document.getElementById('uploadPreview');
            const urlInput = document.getElementById('gambar_soal');
            
            if (fileInput && preview) {
                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);
                        
                        if (urlInput) {
                            urlInput.value = '';
                        }
                    }
                });
            }
            
            if (urlInput && fileInput) {
                urlInput.addEventListener('input', function() {
                    if (this.value) {
                        fileInput.value = '';
                        preview.style.display = 'none';
                    }
                });
            }

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

        // ===== EXPORT SOAL PRAKTIK KE WORD =====
        function exportSoalPraktikToWord(soalId) {
            <?php if ($review_soal): ?>
                const nomorRegistrasi = '<?php echo htmlspecialchars($review_soal['nomor_registrasi']); ?>';
                const department = '<?php echo htmlspecialchars($review_soal['department'] ?? '-'); ?>';
                const tinjauan1 = '<?php echo htmlspecialchars($review_soal['tinjauan1']); ?>';
                const tinjauan2 = '<?php echo htmlspecialchars($review_soal['tinjauan2'] ?? ''); ?>';
                const subTinjauan2 = '<?php echo htmlspecialchars($review_soal['sub_tinjauan2'] ?? ''); ?>';
                const tinjauan3 = '<?php echo htmlspecialchars($review_soal['tinjauan3'] ?? ''); ?>';
                const tinjauan4 = '<?php echo htmlspecialchars($review_soal['tinjauan4'] ?? ''); ?>';
                const tujuan = `<?php echo addslashes(nl2br($review_soal['tujuan'] ?? '')); ?>`;
                const skenarioKlinik = `<?php echo addslashes(nl2br($review_soal['skenario_klinik'])); ?>`;
                const tugasKandidat = `<?php echo addslashes(nl2br($review_soal['tugas_kandidat'] ?? '')); ?>`;
                const tugasPenguji = `<?php echo addslashes(nl2br($review_soal['tugas_penguji'] ?? '')); ?>`;
                const instruksiPasien = `<?php echo addslashes(nl2br($review_soal['instruksi_pasien'] ?? '')); ?>`;
                const peralatan = `<?php echo addslashes(nl2br($review_soal['peralatan'] ?? '')); ?>`;
                const referensi = `<?php echo addslashes(nl2br($review_soal['referensi'] ?? '')); ?>`;
                const penulis = '<?php echo htmlspecialchars($review_soal['penulis'] ?? '-'); ?>';
                const tanggalDibuat = '<?php echo date('d/m/Y H:i', strtotime($review_soal['created_at'])); ?>';

                const htmlContent = `
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="UTF-8">
                        <title>Soal Praktik - ${nomorRegistrasi}</title>
                        <style>
                            body { font-family: 'Arial', sans-serif; font-size: 11pt; margin: 20px; line-height: 1.6; color: #333; }
                            .header { text-align: center; margin-bottom: 25px; border-bottom: 2px solid #2c3e50; padding-bottom: 15px; }
                            .main-title { font-size: 16pt; font-weight: bold; color: #2c3e50; margin-bottom: 5px; }
                            .sub-title { font-size: 12pt; color: #7f8c8d; margin-bottom: 10px; }
                            .document-info { text-align: center; margin-bottom: 20px; color: #666; font-size: 10pt; }
                            .section { margin-bottom: 25px; page-break-inside: avoid; }
                            .section-title { background: #34495e; color: white; padding: 8px 12px; font-weight: bold; margin-bottom: 15px; border-radius: 4px; font-size: 12pt; }
                            .info-grid { display: table; width: 100%; margin-bottom: 15px; border-collapse: collapse; }
                            .info-row { display: table-row; }
                            .info-label { display: table-cell; font-weight: bold; padding: 8px 12px; background: #ecf0f1; border: 1px solid #bdc3c7; width: 30%; }
                            .info-value { display: table-cell; padding: 8px 12px; border: 1px solid #bdc3c7; }
                            .content-box { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; padding: 15px; margin-bottom: 15px; }
                            .footer { margin-top: 30px; padding-top: 15px; border-top: 1px solid #bdc3c7; text-align: center; font-size: 9pt; color: #7f8c8d; }
                            .highlight-box { background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 5px; padding: 12px; margin: 10px 0; }
                            .empty-text { color: #6c757d; font-style: italic; }
                            .tinjauan-section { margin-bottom: 10px; padding: 8px; background: #f8f9fa; border-radius: 4px; }
                            .tinjauan-label { font-weight: bold; color: #495057; }
                        </style>
                    </head>
                    <body>
                        <div class="header">
                            <div class="main-title">SOAL UJI PRAKTIK - SOCA OSCE SYSTEM</div>
                            <div class="sub-title">Fakultas Kedokteran Gigi</div>
                            <div class="document-info">
                                ${nomorRegistrasi} | Department: ${department} | Dibuat: ${tanggalDibuat}
                            </div>
                        </div>

                        <div class="section">
                            <div class="section-title">INFORMASI DASAR</div>
                            <div class="info-grid">
                                <div class="info-row"><div class="info-label">Nomor Registrasi</div><div class="info-value">${nomorRegistrasi}</div></div>
                                <div class="info-row"><div class="info-label">Department</div><div class="info-value">${department}</div></div>
                                <div class="info-row"><div class="info-label">Penulis</div><div class="info-value">${penulis || '-'}</div></div>
                                <div class="info-row"><div class="info-label">Tanggal Dibuat</div><div class="info-value">${tanggalDibuat}</div></div>
                            </div>
                        </div>

                        <div class="section">
                            <div class="section-title">KLASIFIKASI SOAL</div>
                            <div class="content-box">
                                <div class="tinjauan-section"><span class="tinjauan-label">Kompetensi Utama:</span><br>${tinjauan1 || '-'}</div>
                                <div class="tinjauan-section"><span class="tinjauan-label">Kelompok Penyakit:</span><br>${tinjauan2 || '-'}</div>
                                <div class="tinjauan-section"><span class="tinjauan-label">Penyakit:</span><br>${subTinjauan2 || '-'}</div>
                                <div class="tinjauan-section"><span class="tinjauan-label">Keterampilan Klinis:</span><br>${tinjauan3 || '-'}</div>
                                <div class="tinjauan-section"><span class="tinjauan-label">Bidang Ilmu:</span><br>${tinjauan4 || '-'}</div>
                            </div>
                        </div>

                        ${tujuan ? `<div class="section"><div class="section-title">TUJUAN PEMBELAJARAN</div><div class="content-box">${tujuan}</div></div>` : ''}
                        <div class="section"><div class="section-title">SKENARIO KLINIK</div><div class="content-box">${skenarioKlinik}</div></div>
                        ${tugasKandidat ? `<div class="section"><div class="section-title">TUGAS KANDIDAT</div><div class="content-box">${tugasKandidat}</div></div>` : ''}
                        ${tugasPenguji ? `<div class="section"><div class="section-title">TUGAS PENGUJI</div><div class="content-box">${tugasPenguji}</div></div>` : ''}
                        ${instruksiPasien ? `<div class="section"><div class="section-title">INSTRUKSI PASIEN</div><div class="content-box">${instruksiPasien}</div></div>` : ''}
                        ${peralatan ? `<div class="section"><div class="section-title">PERALATAN</div><div class="content-box">${peralatan}</div></div>` : ''}
                        ${referensi ? `<div class="section"><div class="section-title">REFERENSI</div><div class="content-box">${referensi}</div></div>` : ''}

                        <div class="section">
                            <div class="section-title">CATATAN UNTUK PENGUJI</div>
                            <div class="highlight-box">
                                <strong>Perhatian:</strong><br>
                                - Soal praktik ini menggunakan sistem penilaian berdasarkan aspek penilaian<br>
                                - Pastikan semua peralatan tersedia sebelum ujian dimulai<br>
                                - Soal ini termasuk dalam kompetensi: <strong>${tinjauan1}</strong>
                            </div>
                        </div>

                        <div class="footer">Dokumen dibuat oleh SOCA OSCE System - ${new Date().toLocaleString('id-ID')}</div>
                    </body>
                    </html>
                `;

                const blob = new Blob([htmlContent], { type: 'application/msword' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
                const fileName = `Soal_Praktik_${nomorRegistrasi.replace(/[^a-zA-Z0-9]/g, '_')}_${timestamp}.doc`;
                a.href = url;
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            <?php else: ?>
                alert('Data soal tidak ditemukan untuk diekspor!');
            <?php endif; ?>
        }
    </script>
</body>
</html>