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

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

$error = '';
$success = '';
$edit_mode = false;
$editing_soal = null;

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

// Handle edit mode
if (isset($_GET['edit_id']) && !empty($_GET['edit_id'])) {
    $edit_mode = true;
    try {
        $stmt = $pdo->prepare("SELECT * FROM bank_soal_teori WHERE id = ?");
        $stmt->execute([$_GET['edit_id']]);
        $editing_soal = $stmt->fetch(PDO::FETCH_ASSOC);
        
        if (!$editing_soal) {
            $error = 'Soal tidak ditemukan!';
            $edit_mode = false;
        }
    } catch (PDOException $e) {
        $error = 'Gagal mengambil data soal: ' . $e->getMessage();
        $edit_mode = false;
    }
}

// Handle update soal
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['update_soal'])) {
    $soal_id = $_POST['soal_id'] ?? '';
    $nomor_registrasi = $_POST['nomor_registrasi'] ?? '';
    $tinjauan1 = $_POST['tinjauan1'] ?? '';
    $tinjauan2 = $_POST['tinjauan2'] ?? '';
    $tinjauan3 = $_POST['tinjauan3'] ?? '';
    $vignette = $_POST['vignette'] ?? '';
    $pertanyaan = $_POST['pertanyaan'] ?? '';
    $pilihan_a = $_POST['pilihan_a'] ?? '';
    $pilihan_b = $_POST['pilihan_b'] ?? '';
    $pilihan_c = $_POST['pilihan_c'] ?? '';
    $pilihan_d = $_POST['pilihan_d'] ?? '';
    $pilihan_e = $_POST['pilihan_e'] ?? '';
    $kunci = $_POST['kunci'] ?? '';
    $department = $_POST['department'] ?? '';
    $alasan_singkat = $_POST['alasan_singkat'] ?? '';
    $referensi = $_POST['referensi'] ?? '';
    $penulis = $_POST['penulis'] ?? '';
    
    // Validasi data
    if (empty($nomor_registrasi) || empty($tinjauan1) || empty($pertanyaan)) {
        $error = 'Nomor Registrasi, Tinjauan 1, dan Pertanyaan harus diisi!';
    } else {
        try {
            $stmt = $pdo->prepare("UPDATE bank_soal_teori SET 
                nomor_registrasi = ?, tinjauan1 = ?, tinjauan2 = ?, tinjauan3 = ?, 
                vignette = ?, pertanyaan = ?, pilihan_a = ?, pilihan_b = ?, 
                pilihan_c = ?, pilihan_d = ?, pilihan_e = ?, kunci = ?, 
                department = ?, alasan_singkat = ?, referensi = ?, penulis = ?
                WHERE id = ?");
            
            $stmt->execute([
                $nomor_registrasi, $tinjauan1, $tinjauan2, $tinjauan3,
                $vignette, $pertanyaan, $pilihan_a, $pilihan_b,
                $pilihan_c, $pilihan_d, $pilihan_e, $kunci,
                $department, $alasan_singkat, $referensi, $penulis, $soal_id
            ]);
            
            $success = 'Soal berhasil diperbarui!';
            $edit_mode = false;
            
            // Redirect ke preview mode setelah update
            header('Location: ?preview_id=' . $soal_id . '&department=' . urlencode($department));
            exit;
            
        } catch (PDOException $e) {
            $error = 'Terjadi kesalahan: ' . $e->getMessage();
        }
    }
}

// Handle cancel edit
if (isset($_GET['cancel_edit']) && isset($_GET['preview_id'])) {
    $edit_mode = false;
    $department = $_GET['department'] ?? '';
    header('Location: ?preview_id=' . $_GET['preview_id'] . '&department=' . urlencode($department));
    exit;
}

// Ambil department yang dipilih
$selected_department = $_GET['department'] ?? '';

// Ambil data soal dari database berdasarkan department
$soal_teori = [];
$search = '';

try {
    if (!empty($selected_department)) {
        if (isset($_GET['search']) && !empty($_GET['search'])) {
            $search = $_GET['search'];
            $stmt = $pdo->prepare("SELECT * FROM bank_soal_teori 
                                  WHERE department = ? AND (nomor_registrasi LIKE ? OR pertanyaan LIKE ? OR tinjauan1 LIKE ?)
                                  ORDER BY created_at DESC");
            $searchTerm = "%$search%";
            $stmt->execute([$selected_department, $searchTerm, $searchTerm, $searchTerm]);
        } else {
            $stmt = $pdo->prepare("SELECT * FROM bank_soal_teori WHERE department = ? ORDER BY created_at DESC");
            $stmt->execute([$selected_department]);
        }
    } else {
        // Jika tidak ada department yang dipilih, tampilkan semua
        if (isset($_GET['search']) && !empty($_GET['search'])) {
            $search = $_GET['search'];
            $stmt = $pdo->prepare("SELECT * FROM bank_soal_teori 
                                  WHERE nomor_registrasi LIKE ? OR pertanyaan LIKE ? OR tinjauan1 LIKE ?
                                  ORDER BY department, created_at DESC");
            $searchTerm = "%$search%";
            $stmt->execute([$searchTerm, $searchTerm, $searchTerm]);
        } else {
            $stmt = $pdo->query("SELECT * FROM bank_soal_teori ORDER BY department, created_at DESC");
        }
    }
    $soal_teori = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $error = 'Gagal mengambil data soal: ' . $e->getMessage();
}

// Ambil soal tertentu untuk preview
$preview_soal = null;
if (isset($_GET['preview_id']) && !empty($_GET['preview_id'])) {
    try {
        $stmt = $pdo->prepare("SELECT * FROM bank_soal_teori WHERE id = ?");
        $stmt->execute([$_GET['preview_id']]);
        $preview_soal = $stmt->fetch(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        $error = 'Gagal mengambil data preview: ' . $e->getMessage();
    }
}

// Jika dalam mode edit, gunakan data yang sedang diedit
if ($edit_mode && $editing_soal) {
    $preview_soal = $editing_soal;
    $selected_department = $editing_soal['department'];
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lihat Soal Teori - SOCA OSCE System</title>
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/css/list_soal_teori.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<style>
    .sidebar {
        width: 250px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }

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

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

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

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

    .sidebar-menu i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
    }
    
    /* Department Filter Styles */
.department-filter {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

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

.department-btn {
    padding: 12px 15px;
    border: 2px solid #984ae7ff;
    border-radius: 6px;
    background: white;
    color: #495057;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
    position: relative;
}

.department-btn:hover {
    border-color: #007bff;
    background: #f8f9fa;
    transform: translateY(-2px);
}

.department-btn.active {
    border-color: #007bff;
    background: #3fc8baff;
    color: white;
}

.department-btn .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #439f0aff;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 15px;
}

.department-info {
    background: #e7f3ff;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    border-left: 4px solid #007bff;
}

.department-info h3 {
    margin: 0 0 5px 0;
    color: #0056b3;
}

.department-info p {
    margin: 0;
    color: #495057;
}

/* Responsive Design */
@media (max-width: 768px) {
    .department-buttons {
        grid-template-columns: 1fr;
    }
    
    .soal-meta .department {
        display: block;
        margin-bottom: 5px;
    }
}

/* Preview Container */
.preview-container {
    background: #a2c7efff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.preview-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Penting untuk flexbox scrolling */
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    flex-shrink: 0; /* Mencegah header menyusut */
}

.preview-actions {
    display: flex;
    gap: 10px;
}

.preview-section h3 {
    color: #333;
    border-bottom: 2px solid #f9fcff;
    padding-bottom: 8px;
    margin-bottom: 15px;
    font-size: 16px;
}

/* Header Section */
.header-section {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 30px;
}

.registrasi-info {
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

/* EDIT FORM STYLES - PERBAIKAN UTAMA */
.edit-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.edit-form-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    min-height: 0;
}

.form-section {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 6px;
    margin-bottom: 25px;
    border-left: 4px solid #007bff;
}

.section-title {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 18px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

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

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.form-group input[type="text"],
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input[type="text"]:focus,
.form-group select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}


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

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
}

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

.btn-success:hover {
    background: #1e7e34;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #545b62;
}

.btn-edit {
    background: #ffc107;
    color: #212529;
    padding: 6px 12px;
    font-size: 12px;
}

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

.btn-delete {
    background: #dc3545;
    color: white;
    padding: 6px 12px;
    font-size: 12px;
}

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

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

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

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* Custom Scrollbar */
.soal-preview-content::-webkit-scrollbar,
.edit-form-container::-webkit-scrollbar,
.soal-items::-webkit-scrollbar {
    width: 8px;
}

.soal-preview-content::-webkit-scrollbar-track,
.edit-form-container::-webkit-scrollbar-track,
.soal-items::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.soal-preview-content::-webkit-scrollbar-thumb,
.edit-form-container::-webkit-scrollbar-thumb,
.soal-items::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.soal-preview-content::-webkit-scrollbar-thumb:hover,
.edit-form-container::-webkit-scrollbar-thumb:hover,
.soal-items::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>
<body>
    <div class="sidebar">
        <ul class="sidebar-menu">
            <li><a href="dashboard.php"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
            <li><a href="bank_soal_teori.php"><i class="fas fa-book"></i> Bank Soal Teori</a></li>
            <li><a href="bank_soal_praktik.php"><i class="fas fa-clipboard-check"></i> Bank Soal Praktik</a></li>
            <li><a href="list_soal_teori.php" class="active"><i class="fas fa-list"></i> Daftar Soal Teori</a></li>
            <li><a href="list_soal_praktik.php"><i class="fas fa-list"></i> Daftar Soal Praktik</a></li>
            <li><a href="../logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
        </ul>
    </div>

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

        <div class="content">
            <!-- Department Filter -->
            <div class="department-filter">
                <h3><i class="fas fa-filter"></i> Filter Berdasarkan Department</h3>
                <p class="text-muted">Pilih department untuk melihat soal teori yang tersedia</p>
                
                <div class="department-buttons">
                    <div class="department-btn <?php echo empty($selected_department) ? 'active' : ''; ?>" 
                         onclick="window.location.href='?department='">
                        <i class="fas fa-layer-group"></i> Semua Department
                    </div>
                    <?php foreach ($departments as $dept): 
                        $stmt = $pdo->prepare("SELECT COUNT(*) as total FROM bank_soal_teori WHERE department = ?");
                        $stmt->execute([$dept]);
                        $count = $stmt->fetch(PDO::FETCH_ASSOC)['total'];
                    ?>
                        <div class="department-btn <?php echo $selected_department == $dept ? 'active' : ''; ?>" 
                             onclick="window.location.href='?department=<?php echo urlencode($dept); ?>'">
                            <i class="fas fa-stethoscope"></i> <?php echo $dept; ?>
                            <span class="badge"><?php echo $count; ?></span>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>

            <?php if (!empty($selected_department)): ?>
                <div class="department-info">
                    <h3><i class="fas fa-hospital"></i> <?php echo htmlspecialchars($selected_department); ?></h3>
                    <p>Menampilkan <?php echo count($soal_teori); ?> soal teori untuk department ini</p>
                </div>
            <?php endif; ?>

            <!-- Search Box -->
            <div class="search-box">
                <form method="GET" action="">
                    <?php if (!empty($selected_department)): ?>
                        <input type="hidden" name="department" value="<?php echo htmlspecialchars($selected_department); ?>">
                    <?php endif; ?>
                    <div class="search-input-group">
                        <input type="text" name="search" placeholder="Cari berdasarkan nomor registrasi, pertanyaan, atau kompetensi..." 
                               value="<?php echo htmlspecialchars($search); ?>">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i> Cari
                        </button>
                        <?php if (!empty($search)): ?>
                            <a href="?department=<?php echo urlencode($selected_department); ?>" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Clear
                            </a>
                        <?php endif; ?>
                    </div>
                </form>
            </div>

            <div class="layout-container">
                <!-- List Soal -->
                <div class="soal-list-container">
                    <div class="section-header">
                        <h2>
                            <i class="fas fa-list"></i> 
                            <?php if (!empty($selected_department)): ?>
                                Daftar Soal Teori - <?php echo htmlspecialchars($selected_department); ?>
                            <?php else: ?>
                                Daftar Semua Soal Teori
                            <?php endif; ?>
                        </h2>
                        <span class="badge"><?php echo count($soal_teori); ?> soal</span>
                    </div>

                    <?php if (empty($soal_teori)): ?>
                        <div class="empty-state">
                            <i class="fas fa-inbox"></i>
                            <h3>
                                <?php if (!empty($selected_department)): ?>
                                    Belum ada soal teori untuk department <?php echo htmlspecialchars($selected_department); ?>
                                <?php else: ?>
                                    Belum ada soal teori
                                <?php endif; ?>
                            </h3>
                            <p>Silakan tambah soal teori terlebih dahulu</p>
                            <a href="bank_soal_teori.php" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Tambah Soal Teori
                            </a>
                        </div>
                    <?php else: ?>
                        <div class="soal-items">
                            <?php foreach ($soal_teori as $soal): ?>
                                <div class="soal-item <?php echo ($preview_soal && $preview_soal['id'] == $soal['id']) ? 'active' : ''; ?>"
                                     onclick="window.location.href='?preview_id=<?php echo $soal['id']; ?>&department=<?php echo urlencode($selected_department); ?>'">
                                    <div class="soal-header">
                                        <h4><?php echo htmlspecialchars($soal['nomor_registrasi']); ?></h4>
                                        <span class="kunci-badge">Kunci: <?php echo htmlspecialchars($soal['kunci'] ?? '-'); ?></span>
                                    </div>
                                    <div class="soal-preview">
                                        <?php echo strip_tags(substr($soal['pertanyaan'], 0, 150)); ?>...
                                    </div>
                                    <div class="soal-meta">
                                        <?php if (empty($selected_department)): ?>
                                            <span class="department"><?php echo htmlspecialchars($soal['department'] ?? '-'); ?></span>
                                        <?php endif; ?>
                                        <span class="date"><?php echo date('d/m/Y', strtotime($soal['created_at'])); ?></span>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Preview/Edit Container -->
                <div class="preview-container">
                    <?php if ($preview_soal): ?>
                        <div class="preview-content">
                            <div class="preview-header">
                                <h2>
                                    <i class="fas fa-<?php echo $edit_mode ? 'edit' : 'eye'; ?>"></i> 
                                    <?php echo $edit_mode ? 'Edit Soal' : 'Preview Soal'; ?>
                                </h2>
                                <div class="preview-actions">
                                    <?php if ($edit_mode): ?>
                                        <button type="submit" form="editSoalForm" class="btn btn-success">
                                            <i class="fas fa-save"></i> Simpan
                                        </button>
                                        <a href="?cancel_edit=1&preview_id=<?php echo $preview_soal['id']; ?>&department=<?php echo urlencode($selected_department); ?>" class="btn btn-secondary">
                                            <i class="fas fa-times"></i> Batal
                                        </a>
                                    <?php else: ?>
                                        <a href="?edit_id=<?php echo $preview_soal['id']; ?>&department=<?php echo urlencode($selected_department); ?>" class="btn btn-edit">
                                            <i class="fas fa-edit"></i> Edit
                                        </a>
                                        <a href="hapus_soal_teori.php?id=<?php echo $preview_soal['id']; ?>&department=<?php echo urlencode($selected_department); ?>" 
                                           class="btn btn-delete" 
                                           onclick="return confirm('Yakin hapus soal ini?')">
                                            <i class="fas fa-trash"></i> Hapus
                                        </a>
                                        <button onclick="printPreview()" class="btn btn-primary">
                                            <i class="fas fa-print"></i> Print
                                        </button>
                                    <?php endif; ?>
                                </div>
                            </div>

            <?php if ($edit_mode): ?>
    <!-- EDIT FORM -->
    <form method="POST" action="" id="editSoalForm" class="edit-form">
        <input type="hidden" name="soal_id" value="<?php echo $preview_soal['id']; ?>">
        <input type="hidden" name="update_soal" value="1">
        
        <div class="edit-form-container">
            <div class="form-section">
                <h3 class="section-title">Informasi Dasar</h3>
                
                 <div class="form-group">
                    <label for="nomor_registrasi">Nomor Registrasi Soal *</label>
                    <input type="text" id="nomor_registrasi" name="nomor_registrasi" 
                           value="<?php echo htmlspecialchars($preview_soal['nomor_registrasi']); ?>" 
                           readonly
                           style="background-color: #f8f9fa; color: #6c757d; cursor: not-allowed;">
                    <small class="form-text text-muted">Nomor registrasi tidak dapat diubah</small>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="tinjauan1">Kompetensi Utama *</label>
                        <input type="text" id="tinjauan1" name="tinjauan1" 
                               value="<?php echo htmlspecialchars($preview_soal['tinjauan1']); ?>" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="tinjauan2">Penyakit/Kelainan</label>
                        <input type="text" id="tinjauan2" name="tinjauan2" 
                               value="<?php echo htmlspecialchars($preview_soal['tinjauan2'] ?? ''); ?>">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="tinjauan3">Bidang Ilmu & Keterampilan KG</label>
                    <input type="text" id="tinjauan3" name="tinjauan3" 
                           value="<?php echo htmlspecialchars($preview_soal['tinjauan3'] ?? ''); ?>">
                </div>
            </div>

            <div class="form-section">
                <h3 class="section-title">Konten Soal</h3>
                
                <div class="form-group">
                    <label for="vignette">Vignette</label>
                    <div class="text-editor" id="vignette_editor_container">
                        <div class="toolbar">
                            <button type="button" data-command="bold" title="Bold"><b>B</b></button>
                            <button type="button" data-command="italic" title="Italic"><i>I</i></button>
                            <button type="button" data-command="underline" title="Underline"><u>U</u></button>
                            <button type="button" data-command="insertUnorderedList" title="Bullet List">• List</button>
                            <button type="button" data-command="insertOrderedList" title="Numbered List">1. List</button>
                            <button type="button" data-command="uploadImage" title="Upload Gambar"><i class="fas fa-image"></i></button>
                            <select class="font-size-selector" title="Ukuran Font">
                                <option value="">Ukuran Font</option>
                                <option value="1">Sangat Kecil</option>
                                <option value="2">Kecil</option>
                                <option value="3">Normal</option>
                                <option value="4">Sedang</option>
                                <option value="5">Besar</option>
                                <option value="6">Sangat Besar</option>
                                <option value="7">Terbesar</option>
                            </select>
                        </div>
                        <!-- Ganti textarea dengan contenteditable DIV -->
                        <div id="vignette_editor" class="rich-text" contenteditable="true"><?php echo $preview_soal['vignette'] ?? ''; ?></div>
                        <input type="hidden" id="vignette" name="vignette" value="<?php echo htmlspecialchars($preview_soal['vignette'] ?? ''); ?>">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="pertanyaan">Pertanyaan/Instruksi *</label>
                    <div class="text-editor" id="pertanyaan_editor_container">
                        <div class="toolbar">
                            <button type="button" data-command="bold" title="Bold"><b>B</b></button>
                            <button type="button" data-command="italic" title="Italic"><i>I</i></button>
                            <button type="button" data-command="underline" title="Underline"><u>U</u></button>
                            <button type="button" data-command="insertUnorderedList" title="Bullet List">• List</button>
                            <button type="button" data-command="insertOrderedList" title="Numbered List">1. List</button>
                            <button type="button" data-command="uploadImage" title="Upload Gambar"><i class="fas fa-image"></i></button>
                            <select class="font-size-selector" title="Ukuran Font">
                                <option value="">Ukuran Font</option>
                                <option value="1">Sangat Kecil</option>
                                <option value="2">Kecil</option>
                                <option value="3">Normal</option>
                                <option value="4">Sedang</option>
                                <option value="5">Besar</option>
                                <option value="6">Sangat Besar</option>
                                <option value="7">Terbesar</option>
                            </select>
                        </div>
                        <!-- Ganti textarea dengan contenteditable DIV -->
                        <div id="pertanyaan_editor" class="rich-text" contenteditable="true"><?php echo $preview_soal['pertanyaan'] ?? ''; ?></div>
                        <input type="hidden" id="pertanyaan" name="pertanyaan" value="<?php echo htmlspecialchars($preview_soal['pertanyaan'] ?? ''); ?>" required>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h3 class="section-title">Pilihan Jawaban</h3>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="pilihan_a">Pilihan A</label>
                        <input type="text" id="pilihan_a" name="pilihan_a" 
                               value="<?php echo htmlspecialchars($preview_soal['pilihan_a'] ?? ''); ?>">
                    </div>
                    
                    <div class="form-group">
                        <label for="pilihan_b">Pilihan B</label>
                        <input type="text" id="pilihan_b" name="pilihan_b" 
                               value="<?php echo htmlspecialchars($preview_soal['pilihan_b'] ?? ''); ?>">
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="pilihan_c">Pilihan C</label>
                        <input type="text" id="pilihan_c" name="pilihan_c" 
                               value="<?php echo htmlspecialchars($preview_soal['pilihan_c'] ?? ''); ?>">
                    </div>
                    
                    <div class="form-group">
                        <label for="pilihan_d">Pilihan D</label>
                        <input type="text" id="pilihan_d" name="pilihan_d" 
                               value="<?php echo htmlspecialchars($preview_soal['pilihan_d'] ?? ''); ?>">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="pilihan_e">Pilihan E</label>
                    <input type="text" id="pilihan_e" name="pilihan_e" 
                           value="<?php echo htmlspecialchars($preview_soal['pilihan_e'] ?? ''); ?>">
                </div>
                
                <div class="form-group">
                    <label for="kunci">Kunci Jawaban</label>
                    <select id="kunci" name="kunci">
                        <option value="">-- Pilih Kunci Jawaban --</option>
                        <option value="A" <?php echo ($preview_soal['kunci'] ?? '') == 'A' ? 'selected' : ''; ?>>A</option>
                        <option value="B" <?php echo ($preview_soal['kunci'] ?? '') == 'B' ? 'selected' : ''; ?>>B</option>
                        <option value="C" <?php echo ($preview_soal['kunci'] ?? '') == 'C' ? 'selected' : ''; ?>>C</option>
                        <option value="D" <?php echo ($preview_soal['kunci'] ?? '') == 'D' ? 'selected' : ''; ?>>D</option>
                        <option value="E" <?php echo ($preview_soal['kunci'] ?? '') == 'E' ? 'selected' : ''; ?>>E</option>
                    </select>
                </div>
            </div>

            <div class="form-section">
                <h3 class="section-title">Informasi Tambahan</h3>

                <div class="form-group">
                    <label for="department">Department *</label>
                    <input type="text" id="department" name="department" 
                           value="<?php echo htmlspecialchars($preview_soal['department']); ?>" 
                           readonly
                           style="background-color: #f8f9fa; color: #6c757d; cursor: not-allowed;">
                    <small class="form-text text-muted">Department tidak dapat diubah</small>
                </div>
                
                
                <div class="form-group">
                    <label for="alasan_singkat">Alasan Singkat</label>
                    <div class="text-editor" id="alasan_singkat_editor_container">
                        <div class="toolbar">
                            <button type="button" data-command="bold" title="Bold"><b>B</b></button>
                            <button type="button" data-command="italic" title="Italic"><i>I</i></button>
                            <button type="button" data-command="underline" title="Underline"><u>U</u></button>
                            <button type="button" data-command="uploadImage" title="Upload Gambar"><i class="fas fa-image"></i></button>
                        </div>
                        <!-- Ganti textarea dengan contenteditable DIV -->
                        <div id="alasan_singkat_editor" class="rich-text" contenteditable="true"><?php echo $preview_soal['alasan_singkat'] ?? ''; ?></div>
                        <input type="hidden" id="alasan_singkat" name="alasan_singkat" value="<?php echo htmlspecialchars($preview_soal['alasan_singkat'] ?? ''); ?>">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="referensi">Referensi</label>
                    <div class="text-editor" id="referensi_editor_container">
                        <div class="toolbar">
                            <button type="button" data-command="bold" title="Bold"><b>B</b></button>
                            <button type="button" data-command="italic" title="Italic"><i>I</i></button>
                            <button type="button" data-command="underline" title="Underline"><u>U</u></button>
                            <button type="button" data-command="uploadImage" title="Upload Gambar"><i class="fas fa-image"></i></button>
                        </div>
                        <!-- Ganti textarea dengan contenteditable DIV -->
                        <div id="referensi_editor" class="rich-text" contenteditable="true"><?php echo $preview_soal['referensi'] ?? ''; ?></div>
                        <input type="hidden" id="referensi" name="referensi" value="<?php echo htmlspecialchars($preview_soal['referensi'] ?? ''); ?>">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="penulis">Penulis</label>
                    <input type="text" id="penulis" name="penulis" 
                           value="<?php echo htmlspecialchars($preview_soal['penulis'] ?? ''); ?>" 
                           readonly
                           style="background-color: #f8f9fa; color: #6c757d; cursor: not-allowed;">
                    <small class="form-text text-muted">Penulis tidak dapat diubah</small>
                </div>
            </div>
        </div>
        
        
        <!-- Form Actions di luar scrollable container -->
        <div class="form-actions">
            <button type="submit" class="btn btn-success">
                <i class="fas fa-save"></i> Simpan Perubahan
            </button>
            <a href="?cancel_edit=1&preview_id=<?php echo $preview_soal['id']; ?>" class="btn btn-secondary">
                <i class="fas fa-times"></i> Batal
            </a>
        </div>
    </form>
<?php else: ?>
                                   <!-- PREVIEW CONTENT -->
<div class="soal-preview-content" id="printableArea">
    <!-- Header dengan nomor registrasi -->
    <div class="preview-section header-section">
        <div class="registrasi-info">
            <strong>No. Registrasi Soal:</strong> 
            <?php echo htmlspecialchars($preview_soal['nomor_registrasi']); ?>
        </div>
    </div>

    <!-- Vignette -->
    <?php if (!empty($preview_soal['vignette'])): ?>
        <div class="preview-section vignette-section">
            <h3>Vignette:</h3>
            <div class="vignette-content">
                <?php echo $preview_soal['vignette']; ?>
            </div>
        </div>
    <?php endif; ?>

    <!-- Pertanyaan -->
    <div class="preview-section pertanyaan-section">
        <h3>Pertanyaan / Instruksi:</h3>
        <div class="pertanyaan-content">
            <?php echo $preview_soal['pertanyaan']; ?>
        </div>
    </div>

    <!-- Pilihan Jawaban -->
    <div class="preview-section pilihan-section">
        <h3>Pilihan Jawaban:</h3>
        <div class="pilihan-list">
            <?php if (!empty($preview_soal['pilihan_a'])): ?>
                <div class="pilihan-item <?php echo $preview_soal['kunci'] == 'A' ? 'kunci-jawaban' : ''; ?>">
                    <strong>Pilihan A:</strong> <?php echo htmlspecialchars($preview_soal['pilihan_a']); ?>
                    <?php if ($preview_soal['kunci'] == 'A'): ?>
                        <span class="kunci-label">✓ Kunci Jawaban</span>
                    <?php endif; ?>
                </div>
            <?php endif; ?>

            <?php if (!empty($preview_soal['pilihan_b'])): ?>
                <div class="pilihan-item <?php echo $preview_soal['kunci'] == 'B' ? 'kunci-jawaban' : ''; ?>">
                    <strong>Pilihan B:</strong> <?php echo htmlspecialchars($preview_soal['pilihan_b']); ?>
                    <?php if ($preview_soal['kunci'] == 'B'): ?>
                        <span class="kunci-label">✓ Kunci Jawaban</span>
                    <?php endif; ?>
                </div>
            <?php endif; ?>

            <?php if (!empty($preview_soal['pilihan_c'])): ?>
                <div class="pilihan-item <?php echo $preview_soal['kunci'] == 'C' ? 'kunci-jawaban' : ''; ?>">
                    <strong>Pilihan C:</strong> <?php echo htmlspecialchars($preview_soal['pilihan_c']); ?>
                    <?php if ($preview_soal['kunci'] == 'C'): ?>
                        <span class="kunci-label">✓ Kunci Jawaban</span>
                    <?php endif; ?>
                </div>
            <?php endif; ?>

            <?php if (!empty($preview_soal['pilihan_d'])): ?>
                <div class="pilihan-item <?php echo $preview_soal['kunci'] == 'D' ? 'kunci-jawaban' : ''; ?>">
                    <strong>Pilihan D:</strong> <?php echo htmlspecialchars($preview_soal['pilihan_d']); ?>
                    <?php if ($preview_soal['kunci'] == 'D'): ?>
                        <span class="kunci-label">✓ Kunci Jawaban</span>
                    <?php endif; ?>
                </div>
            <?php endif; ?>

            <?php if (!empty($preview_soal['pilihan_e'])): ?>
                <div class="pilihan-item <?php echo $preview_soal['kunci'] == 'E' ? 'kunci-jawaban' : ''; ?>">
                    <strong>Pilihan E:</strong> <?php echo htmlspecialchars($preview_soal['pilihan_e']); ?>
                    <?php if ($preview_soal['kunci'] == 'E'): ?>
                        <span class="kunci-label">✓ Kunci Jawaban</span>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Informasi Tambahan -->
    <div class="preview-section info-section">
        <div class="info-grid">
            <?php if (!empty($preview_soal['alasan_singkat'])): ?>
                <div class="info-item">
                    <strong>Alasan Singkat:</strong>
                    <div class="info-content">
                        <?php echo $preview_soal['alasan_singkat']; ?>
                    </div>
                </div>
            <?php endif; ?>

            <?php if (!empty($preview_soal['referensi'])): ?>
                <div class="info-item">
                    <strong>Referensi:</strong>
                    <div class="info-content">
                        <?php echo $preview_soal['referensi']; ?>
                    </div>
                </div>
            <?php endif; ?>

            <?php if (!empty($preview_soal['penulis'])): ?>
                <div class="info-item">
                    <strong>Penulis:</strong>
                    <div class="info-content">
                        <?php echo htmlspecialchars($preview_soal['penulis']); ?>
                    </div>
                </div>
            <?php endif; ?>

            <?php if (!empty($preview_soal['department'])): ?>
                <div class="info-item">
                    <strong>Department:</strong>
                    <div class="info-content">
                        <?php echo htmlspecialchars($preview_soal['department']); ?>
                    </div>
                </div>
            <?php endif; ?>

            <?php if (!empty($preview_soal['tinjauan1'])): ?>
                <div class="info-item">
                    <strong>Tinjauan 1 : Kompetensi Utama:</strong>
                    <div class="info-content">
                        <?php echo htmlspecialchars($preview_soal['tinjauan1']); ?>
                    </div>
                </div>
            <?php endif; ?>

            <?php if (!empty($preview_soal['tinjauan2'])): ?>
                <div class="info-item">
                    <strong>Tinjauan 2 :Penyakit/Kelainan:</strong>
                    <div class="info-content">
                        <?php echo htmlspecialchars($preview_soal['tinjauan2']); ?>
                    </div>
                </div>
            <?php endif; ?>

            <?php if (!empty($preview_soal['tinjauan3'])): ?>
                <div class="info-item">
                    <strong>Tinjauan 3 : Bidang Ilmu & Keterampilan KG:</strong>
                    <div class="info-content">
                        <?php echo htmlspecialchars($preview_soal['tinjauan3']); ?>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>
            <?php endif; ?>
                         <!--   <div class="preview-placeholder">
                                <i class="fas fa-file-alt"></i>
                                <h3>Pilih soal untuk melihat preview</h3>
                                <p>Klik pada salah satu soal di daftar sebelah kiri untuk melihat detail lengkap</p>
                            </div> -->
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../assets/js/list_soal_teori.js"></script>
</body>
</html>