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

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

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

// 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 submit review
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submit_review'])) {
    try {
        $id = $_POST['id'];
        $status_review = $_POST['status_review'];
        $komentar_reviewer = $_POST['komentar_reviewer'] ?? '';
        $rekomendasi = $_POST['rekomendasi'] ?? '';

        $stmt = $pdo->prepare("UPDATE bank_soal_praktik SET 
            status_review = ?, 
            komentar_reviewer = ?, 
            rekomendasi = ?,
            direview_oleh = ?,
            tanggal_review = NOW()
            WHERE id = ?");
        
        $stmt->execute([
            $status_review, 
            $komentar_reviewer, 
            $rekomendasi,
            $_SESSION['user_id'],
            $id
        ]);

        $success = 'Review soal berhasil disimpan!';
        
        $redirect_url = "review_soal_praktik.php?";
        if (!empty($selected_department)) {
            $redirect_url .= "department=" . urlencode($selected_department) . "&";
        }
        $redirect_url .= "review_id=" . $id;
        header("Location: " . $redirect_url);
        exit;

    } catch (PDOException $e) {
        $error = 'Gagal menyimpan review: ' . $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 = ?,
            updated_at = NOW()
            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 = "review_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.");
    }
}

// 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);
        
        if (!empty($review_soal['direview_oleh'])) {
            $stmt_user = $pdo->prepare("SELECT username, name, nama FROM users_preview WHERE id = ?");
            $stmt_user->execute([$review_soal['direview_oleh']]);
            $user_data = $stmt_user->fetch(PDO::FETCH_ASSOC);
            
            if ($user_data) {
                $review_soal['nama_reviewer'] = $user_data['name'] ?? $user_data['nama'] ?? $user_data['username'] ?? 'Unknown';
            }
        }
    } 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();
    }
}

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

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

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

// Filter berdasarkan status review
$status_filter = $_GET['status'] ?? '';
$where_conditions = ["status_review IN ('belum', 'revisi')"];
$params = [];

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

if ($status_filter === 'belum') {
    $where_conditions[] = "status_review = 'belum'";
} elseif ($status_filter === 'revisi') {
    $where_conditions[] = "status_review = 'revisi'";
}

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

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

// Ambil data soal praktik dengan pagination dan filter
$soal_praktik = [];
try {
    $sql = "SELECT * FROM bank_soal_praktik $where_sql ORDER BY 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);
    
    foreach ($soal_praktik as &$soal) {
        if (!empty($soal['direview_oleh'])) {
            try {
                $stmt_user = $pdo->prepare("SELECT username, name, nama FROM users_preview WHERE id = ?");
                $stmt_user->execute([$soal['direview_oleh']]);
                $user_data = $stmt_user->fetch(PDO::FETCH_ASSOC);
                
                if ($user_data) {
                    $soal['nama_reviewer'] = $user_data['name'] ?? $user_data['nama'] ?? $user_data['username'] ?? 'Unknown';
                }
            } catch (PDOException $e) {
                $soal['nama_reviewer'] = 'Error';
            }
        }
    }
    unset($soal);
    
} catch (PDOException $e) {
    $error = 'Gagal mengambil data soal: ' . $e->getMessage();
}

// Hitung jumlah soal per department yang perlu direview
$department_counts = [];
try {
    $stmt = $pdo->query("SELECT department, COUNT(*) as count FROM bank_soal_praktik WHERE department IS NOT NULL AND department != '' AND status_review IN ('belum', 'revisi') 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 review
$stats_belum = 0;
$stats_revisi = 0;
$stats_disetujui = 0;
try {
    if (!empty($selected_department)) {
        $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_praktik WHERE department = ? AND status_review = 'belum'");
        $stmt->execute([$selected_department]);
        $stats_belum = $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();
        
        $stmt = $pdo->prepare("SELECT COUNT(*) FROM bank_soal_praktik WHERE department = ? AND status_review = 'disetujui'");
        $stmt->execute([$selected_department]);
        $stats_disetujui = $stmt->fetchColumn();
    } else {
        $stmt = $pdo->query("SELECT COUNT(*) FROM bank_soal_praktik WHERE status_review = 'belum'");
        $stats_belum = $stmt->fetchColumn();
        
        $stmt = $pdo->query("SELECT COUNT(*) FROM bank_soal_praktik WHERE status_review = 'revisi'");
        $stats_revisi = $stmt->fetchColumn();
        
        $stmt = $pdo->query("SELECT COUNT(*) FROM bank_soal_praktik WHERE status_review = 'disetujui'");
        $stats_disetujui = $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>Review 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: #f0f4f8; display: flex; min-height: 100vh; }

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

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

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

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

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

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

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

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

        /* ===== FILTER DEPARTMENT ===== */
        .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: #1a2332; 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: #f8fafc; border-radius: 10px; text-decoration: none; color: #1a2332; 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: #60a5fa; 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; }
        .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; }

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

        /* ===== BADGES ===== */
        .badge { display: inline-block; padding: 3px 12px; border-radius: 50px; font-size: 11px; font-weight: 600; }
        .badge-department { background: #dbeafe; color: #2563eb; }
        .badge-status { background: #f1f5f9; color: #475569; }
        .badge-status.belum { background: #fef3c7; color: #d97706; }
        .badge-status.revisi { background: #fee2e2; color: #dc2626; }
        .badge-status.disetujui { background: #d1fae5; color: #059669; }

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

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

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

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

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

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

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

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

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

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

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

        /* ===== RESPONSIVE ===== */
        @media (max-width: 992px) { .sidebar { width: 220px; } .main-content { margin-left: 220px; padding: 20px; } .review-content { grid-template-columns: 1fr; } .edit-form { grid-template-columns: 1fr; } }
        @media (max-width: 768px) { .sidebar { width: 0; transform: translateX(-100%); } .sidebar.open { width: 280px; transform: translateX(0); } .main-content { margin-left: 0; padding: 15px; } .header { flex-direction: column; align-items: flex-start; } .filter-tabs { flex-direction: column; } .filter-tab { width: 100%; justify-content: center; } .filter-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .stats-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 480px) { .header-left h1 { font-size: 22px; } .stats-grid { grid-template-columns: 1fr; } }

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

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

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

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

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

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

        <!-- Stats Cards -->
        <div class="stats-grid">
            <div class="stat-card blue">
                <div class="stat-icon"><i class="fas fa-tasks"></i></div>
                <div class="stat-number"><?php echo $total_data; ?></div>
                <div class="stat-label">Perlu Review</div>
            </div>
            <div class="stat-card orange">
                <div class="stat-icon"><i class="fas fa-clock"></i></div>
                <div class="stat-number"><?php echo $stats_belum; ?></div>
                <div class="stat-label">Belum Direview</div>
            </div>
            <div class="stat-card red">
                <div class="stat-icon"><i class="fas fa-redo"></i></div>
                <div class="stat-number"><?php echo $stats_revisi; ?></div>
                <div class="stat-label">Perlu Revisi</div>
            </div>
            <div class="stat-card green">
                <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">Sudah Disetujui</div>
            </div>
        </div>

        <!-- Filter Tabs -->
        <div class="filter-tabs">
            <a href="review_soal_praktik.php?status=" class="filter-tab <?php echo empty($status_filter) ? 'active' : ''; ?>">
                <i class="fas fa-layer-group"></i> Semua Status
                <span class="badge-count"><?php echo $total_perlu_review; ?></span>
            </a>
            <a href="review_soal_praktik.php?status=belum" class="filter-tab <?php echo $status_filter === 'belum' ? 'active' : ''; ?>">
                <i class="fas fa-clock"></i> Belum
                <span class="badge-count"><?php echo $stats_belum; ?></span>
            </a>
            <a href="review_soal_praktik.php?status=revisi" class="filter-tab <?php echo $status_filter === 'revisi' ? 'active' : ''; ?>">
                <i class="fas fa-redo"></i> Revisi
                <span class="badge-count"><?php echo $stats_revisi; ?></span>
            </a>
        </div>

        <!-- Filter Department -->
        <div class="filter-container">
            <div class="filter-title">
                <i class="fas fa-filter"></i> Filter Berdasarkan Department
            </div>
            <div class="filter-grid">
                <a href="review_soal_praktik.php<?php echo $status_filter ? '?status=' . $status_filter : ''; ?>" 
                   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 
                        $total_soal = 0;
                        foreach ($department_counts as $count) { $total_soal += $count; }
                        echo $total_soal; 
                        ?> soal
                    </div>
                </a>
                
                <?php foreach ($departments as $dept): ?>
                    <?php $count = $department_counts[$dept] ?? 0; ?>
                    <a href="review_soal_praktik.php?department=<?php echo urlencode($dept); ?><?php echo $status_filter ? '&status=' . $status_filter : ''; ?>" 
                       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>

        <!-- Daftar Soal -->
        <div class="soal-list-container">
            <div class="list-header">
                <div class="list-title">
                    <i class="fas fa-clipboard-list"></i>
                    <?php if (!empty($selected_department)): ?>
                        Soal Praktik - <?php echo htmlspecialchars($selected_department); ?>
                    <?php else: ?>
                        Semua Soal Praktik
                    <?php endif; ?>
                    <span style="font-size:14px; font-weight:400; color:#6b7a8f;">
                        (<?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="review_soal_praktik.php<?php echo $status_filter ? '?status=' . $status_filter : ''; ?>" style="color:#2563eb;text-decoration:none;opacity:0.6;">
                            <i class="fas fa-times"></i>
                        </a>
                    </span>
                <?php endif; ?>
            </div>

            <?php if (empty($soal_praktik)): ?>
                <div class="empty-state">
                    <i class="fas fa-check-circle" style="color:#059669;"></i>
                    <h3>Tidak ada soal yang perlu direview</h3>
                    <p>
                        <?php if (!empty($selected_department)): ?>
                            Semua soal praktik untuk department <strong><?php echo htmlspecialchars($selected_department); ?></strong> sudah direview.
                        <?php else: ?>
                            Semua soal praktik sudah direview atau tidak ada soal yang memerlukan review saat ini.
                        <?php endif; ?>
                    </p>
                </div>
            <?php else: ?>
                <div class="table-wrapper">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>No. Registrasi</th>
                                <th>Kompetensi Utama</th>
                                <th>Department</th>
                                <th>Status</th>
                                <th>Reviewer</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                            $counter = ($page - 1) * $limit + 1;
                            foreach ($soal_praktik as $soal): 
                                $status_class = $soal['status_review'] ?? 'belum';
                                $status_label = [
                                    'belum' => 'Belum',
                                    'revisi' => 'Revisi',
                                    'disetujui' => 'Disetujui'
                                ][$status_class] ?? 'Belum';
                            ?>
                                <tr id="soal-<?php echo $soal['id']; ?>" 
                                    class="<?php echo ($review_soal && $review_soal['id'] == $soal['id']) || ($edit_soal && $edit_soal['id'] == $soal['id']) ? 'highlighted' : ''; ?>">
                                    <td><?php echo $counter++; ?></td>
                                    <td><strong><?php echo htmlspecialchars($soal['nomor_registrasi']); ?></strong></td>
                                    <td><?php echo htmlspecialchars($soal['tinjauan1']); ?></td>
                                    <td><span class="badge badge-department"><?php echo htmlspecialchars($soal['department'] ?? '-'); ?></span></td>
                                    <td>
                                        <span class="badge badge-status <?php echo $status_class; ?>">
                                            <?php echo $status_label; ?>
                                        </span>
                                    </td>
                                    <td>
                                        <?php if (!empty($soal['nama_reviewer'])): ?>
                                            <?php echo htmlspecialchars($soal['nama_reviewer']); ?>
                                            <?php if (!empty($soal['tanggal_review'])): ?>
                                                <br><small style="color:#94a3b8;font-size:10px;"><?php echo date('d/m/Y', strtotime($soal['tanggal_review'])); ?></small>
                                            <?php endif; ?>
                                        <?php else: ?>
                                            <span style="color:#94a3b8;font-size:12px;">-</span>
                                        <?php endif; ?>
                                    </td>
                                    <td>
                                        <div class="action-buttons">
                                            <a href="review_soal_praktik.php?<?php 
                                                echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                                                echo $status_filter ? 'status=' . $status_filter . '&' : '';
                                                echo 'page=' . $page . '&';
                                                ?>review_id=<?php echo $soal['id']; ?>" 
                                               class="btn-action btn-review">
                                                <i class="fas fa-eye"></i> Review
                                            </a>
                                            <a href="review_soal_praktik.php?<?php 
                                                echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : ''; 
                                                echo $status_filter ? 'status=' . $status_filter . '&' : '';
                                                echo 'page=' . $page . '&';
                                                ?>edit_id=<?php echo $soal['id']; ?>" 
                                               class="btn-action btn-edit">
                                                <i class="fas fa-edit"></i> Edit
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <?php if ($total_pages > 1): ?>
                <div class="pagination">
                    <div class="pagination-info">
                        Menampilkan <?php echo (($page - 1) * $limit) + 1; ?> - 
                        <?php echo min($page * $limit, $total_data); ?> dari <?php echo $total_data; ?> soal
                    </div>
                    <div class="pagination-links">
                        <?php if ($page > 1): ?>
                            <a href="review_soal_praktik.php?<?php 
                                echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : '';
                                echo $status_filter ? 'status=' . $status_filter . '&' : '';
                                ?>page=<?php echo $page - 1; ?>">
                                <i class="fas fa-chevron-left"></i>
                            </a>
                        <?php else: ?>
                            <span class="disabled"><i class="fas fa-chevron-left"></i></span>
                        <?php endif; ?>

                        <?php 
                        $start_page = max(1, $page - 2);
                        $end_page = min($total_pages, $page + 2);
                        for ($i = $start_page; $i <= $end_page; $i++): 
                            if ($i == $page): ?>
                                <span class="current"><?php echo $i; ?></span>
                            <?php else: ?>
                                <a href="review_soal_praktik.php?<?php 
                                    echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : '';
                                    echo $status_filter ? 'status=' . $status_filter . '&' : '';
                                    ?>page=<?php echo $i; ?>"><?php echo $i; ?></a>
                            <?php endif;
                        endfor; ?>

                        <?php if ($page < $total_pages): ?>
                            <a href="review_soal_praktik.php?<?php 
                                echo !empty($selected_department) ? 'department=' . urlencode($selected_department) . '&' : '';
                                echo $status_filter ? 'status=' . $status_filter . '&' : '';
                                ?>page=<?php echo $page + 1; ?>">
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        <?php else: ?>
                            <span class="disabled"><i class="fas fa-chevron-right"></i></span>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endif; ?>
            <?php endif; ?>
        </div>

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

                <div class="review-content">
                    <div class="review-column">
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-hashtag"></i> Nomor Registrasi</div>
                            <div class="info-value"><strong><?php echo htmlspecialchars($review_soal['nomor_registrasi']); ?></strong></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-building"></i> Department</div>
                            <div class="info-value"><?php echo htmlspecialchars($review_soal['department'] ?? '-'); ?></div>
                        </div>
                        <div class="info-group">
                            <div class="info-label"><i class="fas fa-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="badge badge-status <?php echo $review_soal['status_review']; ?>">
                                        <?php echo ucfirst($review_soal['status_review']); ?>
                                    </span>
                                    <?php if (!empty($review_soal['nama_reviewer'])): ?>
                                        <br><small style="color:#6b7a8f;">Oleh: <?php echo htmlspecialchars($review_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; ?>

                        <?php if (!empty($review_soal['komentar_reviewer']) || !empty($review_soal['rekomendasi'])): ?>
                            <div class="info-group" style="border-left-color:#f59e0b;">
                                <div class="info-label"><i class="fas fa-comment"></i> Review Sebelumnya</div>
                                <?php if (!empty($review_soal['komentar_reviewer'])): ?>
                                    <div style="margin-bottom:8px;">
                                        <strong style="font-size:12px;color:#6b7a8f;">Komentar:</strong>
                                        <div class="info-value rich-text" style="background:#fef3c7;border-color:#fcd34d;font-size:13px;"><?php echo nl2br(htmlspecialchars($review_soal['komentar_reviewer'])); ?></div>
                                    </div>
                                <?php endif; ?>
                                <?php if (!empty($review_soal['rekomendasi'])): ?>
                                    <div>
                                        <strong style="font-size:12px;color:#6b7a8f;">Rekomendasi:</strong>
                                        <div class="info-value rich-text" style="background:#fef3c7;border-color:#fcd34d;font-size:13px;"><?php echo nl2br(htmlspecialchars($review_soal['rekomendasi'])); ?></div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Form Review -->
                <div class="review-form">
                    <h3><i class="fas fa-edit"></i> Form Review</h3>
                    <form method="POST" action="">
                        <input type="hidden" name="id" value="<?php echo $review_soal['id']; ?>">
                        <input type="hidden" name="submit_review" value="1">

                        <div class="form-group">
                            <label for="status_review">Status Review <span class="required" style="color:#dc2626;">*</span></label>
                            <select id="status_review" name="status_review" class="form-control" required>
                                <option value="">-- Pilih Status --</option>
                                <option value="disetujui" <?php echo $review_soal['status_review'] == 'disetujui' ? 'selected' : ''; ?>>Disetujui</option>
                                <option value="revisi" <?php echo $review_soal['status_review'] == 'revisi' ? 'selected' : ''; ?>>Perlu Revisi</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="komentar_reviewer">Komentar Reviewer</label>
                            <textarea id="komentar_reviewer" name="komentar_reviewer" class="form-control" rows="4" placeholder="Berikan komentar atau masukan untuk perbaikan soal..."><?php echo htmlspecialchars($review_soal['komentar_reviewer'] ?? ''); ?></textarea>
                        </div>

                        <div class="form-group">
                            <label for="rekomendasi">Rekomendasi</label>
                            <textarea id="rekomendasi" name="rekomendasi" class="form-control" rows="3" placeholder="Berikan rekomendasi untuk perbaikan soal..."><?php echo htmlspecialchars($review_soal['rekomendasi'] ?? ''); ?></textarea>
                            <span class="field-hint"><i class="fas fa-info-circle"></i> Rekomendasi akan membantu pembuat soal untuk memperbaiki kualitas soal.</span>
                        </div>

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

        <!-- Edit Section -->
        <?php if ($edit_soal): ?>
            <div class="edit-section" id="editSection">
                <div class="edit-header">
                    <div class="edit-title">
                        <i class="fas fa-edit"></i>
                        Edit Soal Praktik - <?php echo htmlspecialchars($edit_soal['nomor_registrasi']); ?>
                    </div>
                    <a href="review_soal_praktik.php<?php echo !empty($selected_department) ? '?department=' . urlencode($selected_department) : ''; ?><?php echo $status_filter ? '&status=' . $status_filter : ''; ?>" 
                       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>Nomor Registrasi</label>
                        <input type="text" value="<?php echo htmlspecialchars($edit_soal['nomor_registrasi']); ?>" disabled>
                        <div class="field-hint"><i class="fas fa-lock"></i> Nomor registrasi tidak dapat diubah</div>
                    </div>

                    <div class="form-group">
                        <label for="department">Department <span class="required" style="color:#dc2626;">*</span></label>
                        <select id="department" name="department" class="form-control" required>
                            <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>
                    </div>

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

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

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

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

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

                    <div class="form-group">
                        <label for="skenario_klinik">Skenario Klinik <span class="required" style="color:#dc2626;">*</span></label>
                        <textarea id="skenario_klinik" name="skenario_klinik" class="form-control" 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" class="form-control" 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" class="form-control" 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" class="form-control" 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" class="form-control" rows="3"><?php echo htmlspecialchars($edit_soal['peralatan'] ?? ''); ?></textarea>
                    </div>

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

                    <div class="form-group">
                        <label>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="review_soal_praktik.php<?php echo !empty($selected_department) ? '?department=' . urlencode($selected_department) : ''; ?><?php echo $status_filter ? '&status=' . $status_filter : ''; ?>" 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' });
        });

        // ===== UPLOAD GAMBAR PREVIEW =====
        document.addEventListener('DOMContentLoaded', function() {
            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; ?>
        });
    </script>
</body>
</html>