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

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

// Daftar department kedokteran gigi
$departments = [
    'bedah_mulut' => 'Bedah Mulut',
    'konservasi' => 'Konservasi Gigi',
    'periodonsia' => 'Periodonsia',
    'orthodonti' => 'Orthodonti',
    'prostodonsia' => 'Prostodonsia',
    'pedodonsia' => 'Pedodonsia',
    'radiologi' => 'Radiologi Kedokteran Gigi',
    'ilmu_kesehatan_gigi_masyarakat' => 'Ilmu Kesehatan Gigi Masyarakat',
    'ilmu_material_kedokteran_gigi' => 'Ilmu Material Kedokteran Gigi',
    'odontologi_forensik' => 'Odontologi Forensik'
];

// Ambil parameter
$aspek_id = $_GET['id'] ?? 0;
$filter_department = $_GET['department'] ?? '';
$filter_nomor_registrasi = $_GET['nomor_registrasi'] ?? '';

// Ambil data aspek yang akan di-review
$aspek_data = [];
$soal_data = [];
try {
    $stmt = $pdo->prepare("SELECT ap.*, bs.* 
                          FROM aspek_penilaian_praktik ap 
                          LEFT JOIN bank_soal_praktik bs ON ap.nomor_registrasi = bs.nomor_registrasi 
                          WHERE ap.id = ?");
    $stmt->execute([$aspek_id]);
    $aspek_data = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if (!$aspek_data) {
        throw new Exception('Data aspek tidak ditemukan');
    }
    
} catch (Exception $e) {
    $error = $e->getMessage();
}

// Proses update data aspek
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['update_aspek'])) {
    $aspek_yang_dinilai = $_POST['aspek_yang_dinilai'];
    $keterangan_skor = $_POST['keterangan_skor'];
    $skor_dinilai = implode(',', $_POST['skor_dinilai'] ?? []);
    
    try {
        $stmt = $pdo->prepare("UPDATE aspek_penilaian_praktik 
                              SET aspek_yang_dinilai = ?, skor_dinilai = ?, keterangan_skor = ?, 
                                  updated_at = NOW(), reviewer = ?, reviewed_at = NOW(),
                                  status_review = 'sudah'
                              WHERE id = ?");
        $stmt->execute([
            $aspek_yang_dinilai, 
            $skor_dinilai, 
            $keterangan_skor,
            $_SESSION['user_name'] ?? $_SESSION['user_id'],
            $aspek_id
        ]);
        
        $success_message = 'Aspek penilaian berhasil diperbarui dan direview!';
        
        // Refresh data
        $stmt = $pdo->prepare("SELECT ap.*, bs.* FROM aspek_penilaian_praktik ap 
                              LEFT JOIN bank_soal_praktik bs ON ap.nomor_registrasi = bs.nomor_registrasi 
                              WHERE ap.id = ?");
        $stmt->execute([$aspek_id]);
        $aspek_data = $stmt->fetch(PDO::FETCH_ASSOC);
        
    } catch (PDOException $e) {
        $error = 'Gagal memperbarui data: ' . $e->getMessage();
    }
}

// Build URL kembali dengan filter
$back_url = "review_aspek_penilaian.php";
if (!empty($filter_department)) {
    $back_url .= "?department=" . urlencode($filter_department);
    if (!empty($filter_nomor_registrasi)) {
        $back_url .= "&nomor_registrasi=" . urlencode($filter_nomor_registrasi);
    }
} elseif (!empty($filter_nomor_registrasi)) {
    $back_url .= "?nomor_registrasi=" . urlencode($filter_nomor_registrasi);
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Review Aspek Penilaian - SOCA OSCE System</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tiny.cloud/1/p93sjg5qtxeh4t0y8uynvaig0oo66ac2ahh35s86k31iu0yv/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
    <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); }

        .header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

        /* ===== BUTTONS ===== */
        .btn { padding: 8px 18px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
        .btn-primary { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(37,99,235,0.3); }
        .btn-success { background: linear-gradient(135deg, #059669, #10b981); color: #fff; }
        .btn-success:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(5,150,105,0.3); }
        .btn-secondary { background: #f1f5f9; color: #475569; }
        .btn-secondary:hover { background: #e2e8f0; }
        .btn-outline { background: transparent; color: #475569; border: 2px solid #e2e8f0; }
        .btn-outline:hover { background: #f1f5f9; border-color: #cbd5e1; }
        .btn-danger { background: #dc2626; color: #fff; }
        .btn-danger:hover { background: #b91c1c; transform: translateY(-2px); }
        .btn-sm { padding: 4px 12px; font-size: 12px; border-radius: 6px; }

        /* ===== 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-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
        .alert i { font-size: 18px; }

        /* ===== INFO CARD ===== */
        .info-card { 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); }
        .info-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
        .info-header h3 { font-size: 16px; font-weight: 600; color: #1a2332; display: flex; align-items: center; gap: 10px; }
        .info-header h3 i { color: #60a5fa; }

        .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
        .info-item { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
        .info-item:last-child { border-bottom: none; }
        .info-item strong { color: #475569; font-weight: 600; display: inline-block; min-width: 140px; }
        .info-item span { color: #1a2332; }

        .soal-preview { background: #f8fafc; border-radius: 10px; padding: 16px 20px; margin-top: 16px; border: 1px solid #e2e8f0; }
        .soal-preview h4 { font-size: 14px; font-weight: 600; color: #1a2332; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
        .soal-preview h4 i { color: #60a5fa; }
        .preview-content { font-size: 14px; color: #475569; line-height: 1.6; padding: 10px 12px; background: #fff; border-radius: 6px; border: 1px solid #e2e8f0; }

        /* ===== REVIEW CARD ===== */
        .review-card { 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); border-left: 4px solid #f59e0b; }
        .review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
        .review-header h3 { font-size: 16px; font-weight: 600; color: #1a2332; display: flex; align-items: center; gap: 10px; }
        .review-header h3 i { color: #f59e0b; }

        .form-section { margin-bottom: 24px; }
        .form-section h4 { font-size: 14px; font-weight: 600; color: #1a2332; margin-bottom: 10px; }
        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; font-weight: 600; font-size: 13px; color: #475569; margin-bottom: 4px; }

        .form-control { width: 100%; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 14px; transition: all 0.3s ease; background: #f8fafc; color: #1a2332; font-family: inherit; }
        .form-control:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,0.15); background: #fff; }
        textarea.form-control { min-height: 120px; resize: vertical; }

        .skor-options { display: flex; gap: 20px; flex-wrap: wrap; padding: 8px 0; }
        .checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #475569; cursor: pointer; }
        .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #60a5fa; }

        .form-actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid #e2e8f0; margin-top: 8px; }

        /* ===== PREVIEW CARD ===== */
        .preview-card { 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); }
        .preview-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
        .preview-header h3 { font-size: 16px; font-weight: 600; color: #1a2332; display: flex; align-items: center; gap: 10px; }
        .preview-header h3 i { color: #60a5fa; }

        .preview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .preview-table thead { background: #f8fafc; }
        .preview-table th { padding: 10px 12px; text-align: left; font-weight: 600; color: #475569; border-bottom: 2px solid #e2e8f0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
        .preview-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; color: #1a2332; vertical-align: middle; }
        .preview-table .text-center { text-align: center; }

        .aspek-content .aspek-text { max-height: 80px; overflow-y: auto; line-height: 1.5; font-size: 13px; }
        .aspek-content .aspek-text::-webkit-scrollbar { width: 3px; }
        .aspek-content .aspek-text::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

        .skor-check { color: #059669; font-size: 16px; }
        .skor-empty { color: #94a3b8; }

        .keterangan-content .keterangan-text { max-height: 80px; overflow-y: auto; line-height: 1.5; font-size: 13px; }
        .keterangan-content .keterangan-text::-webkit-scrollbar { width: 3px; }
        .keterangan-content .keterangan-text::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

        /* ===== EMPTY STATE ===== */
        .empty-state { text-align: center; padding: 60px 20px; color: #6b7a8f; background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.04); }
        .empty-state i { font-size: 56px; color: #d1d5db; margin-bottom: 16px; display: block; }
        .empty-state h3 { font-size: 20px; color: #1a2332; margin-bottom: 8px; }
        .empty-state p { font-size: 14px; margin-bottom: 16px; }
        .empty-state .btn { margin-top: 8px; }

        /* ===== TINYMCE OVERRIDE ===== */
        .tox-tinymce { border-radius: 10px !important; border: 2px solid #e2e8f0 !important; }
        .tox-tinymce:focus-within { border-color: #60a5fa !important; box-shadow: 0 0 0 4px rgba(96,165,250,0.15) !important; }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 992px) { .sidebar { width: 220px; } .main-content { margin-left: 220px; padding: 20px; } }
        @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; } 
            .info-grid { grid-template-columns: 1fr; } 
            .form-actions { flex-direction: column; } 
            .form-actions .btn { width: 100%; justify-content: center; } 
            .preview-table { font-size: 12px; } 
            .preview-table th, .preview-table td { padding: 6px 8px; } 
        }
        @media (max-width: 480px) { .header-left h1 { font-size: 22px; } }

        .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"><i class="fas fa-clipboard-check"></i> Review Soal Praktik</a></li>
            <li><a href="review_aspek_penilaian.php" class="active"><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 Aspek Penilaian</h1>
                <div class="subtitle">Review dan edit aspek penilaian ujian praktik</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>
                <div class="header-actions">
                    <a href="<?php echo $back_url; ?>" class="btn btn-outline btn-sm">
                        <i class="fas fa-arrow-left"></i> Kembali
                    </a>
                    <a href="../logout.php" class="btn-logout">
                        <i class="fas fa-sign-out-alt"></i> Logout
                    </a>
                </div>
            </div>
        </div>

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

        <?php if (isset($success_message)): ?>
            <div class="alert alert-success">
                <i class="fas fa-check-circle"></i>
                <?php echo htmlspecialchars($success_message); ?>
            </div>
        <?php endif; ?>

        <?php if (!empty($aspek_data)): ?>
            <!-- Info Card -->
            <div class="info-card">
                <div class="info-header">
                    <h3><i class="fas fa-info-circle"></i> Informasi Soal</h3>
                </div>
                <div class="info-grid">
                    <div class="info-item">
                        <strong>Department:</strong>
                        <span><?php echo $departments[$aspek_data['department']] ?? $aspek_data['department']; ?></span>
                    </div>
                    <div class="info-item">
                        <strong>Nomor Registrasi:</strong>
                        <span><?php echo htmlspecialchars($aspek_data['nomor_registrasi']); ?></span>
                    </div>
                    <div class="info-item">
                        <strong>Nomor Urut Aspek:</strong>
                        <span><?php echo $aspek_data['nomor_urut']; ?></span>
                    </div>
                    <div class="info-item">
                        <strong>Dibuat:</strong>
                        <span><?php echo date('d/m/Y H:i', strtotime($aspek_data['created_at'])); ?></span>
                    </div>
                    <?php if (!empty($aspek_data['reviewer'])): ?>
                        <div class="info-item">
                            <strong>Direview oleh:</strong>
                            <span><?php echo htmlspecialchars($aspek_data['reviewer']); ?></span>
                        </div>
                        <div class="info-item">
                            <strong>Tanggal Review:</strong>
                            <span><?php echo date('d/m/Y H:i', strtotime($aspek_data['reviewed_at'])); ?></span>
                        </div>
                    <?php else: ?>
                        <div class="info-item">
                            <strong>Status:</strong>
                            <span><span class="status-badge status-belum">Belum Direview</span></span>
                        </div>
                    <?php endif; ?>
                </div>
                
                <?php if (!empty($aspek_data['skenario_klinik'])): ?>
                    <div class="soal-preview">
                        <h4><i class="fas fa-file-medical"></i> Skenario Klinik</h4>
                        <div class="preview-content">
                            <?php echo $aspek_data['skenario_klinik']; ?>
                        </div>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Review Card -->
            <div class="review-card">
                <div class="review-header">
                    <h3><i class="fas fa-edit"></i> Review & Edit Aspek Penilaian</h3>
                </div>
                <form method="POST" class="review-form">
                    <input type="hidden" name="update_aspek" value="1">
                    
                    <div class="form-section">
                        <h4>Aspek Yang Dinilai</h4>
                        <div class="form-group">
                            <textarea id="aspek_yang_dinilai" name="aspek_yang_dinilai" 
                                      class="tinymce-editor form-control" rows="6"><?php echo htmlspecialchars($aspek_data['aspek_yang_dinilai']); ?></textarea>
                        </div>
                    </div>

                    <div class="form-section">
                        <h4>Skor Yang Dinilai</h4>
                        <div class="form-group">
                            <div class="skor-options">
                                <?php
                                $skor_dinilai = explode(',', $aspek_data['skor_dinilai']);
                                $has_skor_0 = in_array('0', $skor_dinilai);
                                $has_skor_1 = in_array('1', $skor_dinilai);
                                $has_skor_2 = in_array('2', $skor_dinilai);
                                ?>
                                <label class="checkbox-label">
                                    <input type="checkbox" name="skor_dinilai[]" value="0" <?php echo $has_skor_0 ? 'checked' : ''; ?>> 
                                    Skor 0
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox" name="skor_dinilai[]" value="1" <?php echo $has_skor_1 ? 'checked' : ''; ?>> 
                                    Skor 1
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox" name="skor_dinilai[]" value="2" <?php echo $has_skor_2 ? 'checked' : ''; ?>> 
                                    Skor 2
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <h4>Keterangan Skor</h4>
                        <div class="form-group">
                            <textarea id="keterangan_skor" name="keterangan_skor" 
                                      class="tinymce-editor form-control" rows="6"><?php echo htmlspecialchars($aspek_data['keterangan_skor']); ?></textarea>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save"></i> Simpan & Tandai Sudah Direview
                        </button>
                        <a href="<?php echo $back_url; ?>" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Batal
                        </a>
                        <button type="button" onclick="resetForm()" class="btn btn-outline">
                            <i class="fas fa-redo"></i> Reset
                        </button>
                    </div>
                </form>
            </div>

            <!-- Preview Card -->
            <div class="preview-card">
                <div class="preview-header">
                    <h3><i class="fas fa-eye"></i> Preview Hasil</h3>
                </div>
                <div class="table-responsive">
                    <table class="preview-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Aspek yang Dinilai</th>
                                <th class="text-center">0</th>
                                <th class="text-center">1</th>
                                <th class="text-center">2</th>
                                <th>Keterangan Skor</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center"><?php echo $aspek_data['nomor_urut']; ?></td>
                                <td class="aspek-content">
                                    <div class="aspek-text">
                                        <?php echo $aspek_data['aspek_yang_dinilai']; ?>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <?php if ($has_skor_0): ?>
                                        <span class="skor-check"><i class="fas fa-check-circle"></i></span>
                                    <?php else: ?>
                                        <span class="skor-empty">−</span>
                                    <?php endif; ?>
                                </td>
                                <td class="text-center">
                                    <?php if ($has_skor_1): ?>
                                        <span class="skor-check"><i class="fas fa-check-circle"></i></span>
                                    <?php else: ?>
                                        <span class="skor-empty">−</span>
                                    <?php endif; ?>
                                </td>
                                <td class="text-center">
                                    <?php if ($has_skor_2): ?>
                                        <span class="skor-check"><i class="fas fa-check-circle"></i></span>
                                    <?php else: ?>
                                        <span class="skor-empty">−</span>
                                    <?php endif; ?>
                                </td>
                                <td class="keterangan-content">
                                    <div class="keterangan-text">
                                        <?php echo $aspek_data['keterangan_skor']; ?>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        <?php else: ?>
            <div class="empty-state">
                <i class="fas fa-exclamation-circle"></i>
                <h3>Data Aspek Tidak Ditemukan</h3>
                <p>Aspek penilaian yang diminta tidak ditemukan dalam database.</p>
                <a href="<?php echo $back_url; ?>" class="btn btn-primary">
                    <i class="fas fa-arrow-left"></i> Kembali ke Preview
                </a>
            </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' });
        });

        // ===== INIT TINYMCE =====
        tinymce.init({
            selector: '.tinymce-editor',
            plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table help wordcount',
            toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | table media | code',
            menubar: 'file edit view insert format tools table help',
            height: 200,
            content_style: 'body { font-family: Arial, sans-serif; font-size: 14px; }',
            license_key: 'gpl',
            promotion: false,
            branding: false
        });

        // ===== RESET FORM =====
        function resetForm() {
            if (confirm('Apakah Anda yakin ingin mengembalikan data ke keadaan semula?')) {
                // Reset TinyMCE content
                setTimeout(() => {
                    <?php if (!empty($aspek_data)): ?>
                        if (tinymce.get('aspek_yang_dinilai')) {
                            tinymce.get('aspek_yang_dinilai').setContent(`<?php echo addslashes($aspek_data['aspek_yang_dinilai']); ?>`);
                        }
                        if (tinymce.get('keterangan_skor')) {
                            tinymce.get('keterangan_skor').setContent(`<?php echo addslashes($aspek_data['keterangan_skor']); ?>`);
                        }
                    <?php endif; ?>
                }, 100);
                
                // Reset checkboxes
                document.querySelectorAll('input[name="skor_dinilai[]"]').forEach(checkbox => {
                    <?php if (!empty($aspek_data)): ?>
                        const val = checkbox.value;
                        const skorDinilai = `<?php echo $aspek_data['skor_dinilai']; ?>`.split(',');
                        checkbox.checked = skorDinilai.includes(val);
                    <?php endif; ?>
                });
            }
        }
    </script>
</body>
</html>