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

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

// API endpoint untuk AJAX edit
if (isset($_GET['edit']) && $_SERVER['REQUEST_METHOD'] == 'GET') {
    $id = $_GET['edit'];
    try {
        $stmt = $pdo->prepare("SELECT * FROM aspek_penilaian_praktik WHERE id = ?");
        $stmt->execute([$id]);
        $data = $stmt->fetch(PDO::FETCH_ASSOC);
        
        if ($data) {
            header('Content-Type: application/json');
            echo json_encode([
                'success' => true,
                'id' => $data['id'],
                'nomor_urut' => $data['nomor_urut'],
                'aspek_yang_dinilai' => $data['aspek_yang_dinilai'],
                'skor_dinilai' => $data['skor_dinilai'],
                'keterangan_skor' => $data['keterangan_skor'],
                'status_review' => $data['status_review'] ?? 'belum'
            ]);
        } else {
            echo json_encode(['success' => false, 'message' => 'Data tidak ditemukan']);
        }
        exit;
    } catch (PDOException $e) {
        error_log("Error fetching edit data: " . $e->getMessage());
        echo json_encode(['success' => false, 'message' => 'Gagal mengambil data']);
        exit;
    }
}

// Ambil data unik nomor registrasi untuk filter
$nomor_registrasi_list = [];
try {
    $stmt = $pdo->query("SELECT DISTINCT nomor_registrasi FROM aspek_penilaian_praktik ORDER BY nomor_registrasi");
    $nomor_registrasi_list = $stmt->fetchAll(PDO::FETCH_COLUMN);
} catch (PDOException $e) {
    error_log("Error fetching nomor registrasi: " . $e->getMessage());
}

// Ambil parameter filter
$filter_department = $_GET['department'] ?? '';
$filter_nomor_registrasi = $_GET['nomor_registrasi'] ?? '';
$filter_status = $_GET['status'] ?? '';

// Proses update status review (AJAX)
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['update_status'])) {
    $id = $_POST['id'];
    $status = $_POST['status'];
    
    try {
        if ($status == 'sudah') {
            $stmt = $pdo->prepare("UPDATE aspek_penilaian_praktik 
                                  SET status_review = ?, tanggal_review = NOW(), reviewer_id = ?, updated_at = NOW()
                                  WHERE id = ?");
            $stmt->execute([$status, $_SESSION['user_id'], $id]);
        } else {
            $stmt = $pdo->prepare("UPDATE aspek_penilaian_praktik 
                                  SET status_review = ?, tanggal_review = NULL, reviewer_id = NULL, updated_at = NOW()
                                  WHERE id = ?");
            $stmt->execute([$status, $id]);
        }
        
        echo json_encode(['success' => true, 'message' => 'Status berhasil diupdate']);
        exit;
    } catch (PDOException $e) {
        error_log("Error updating status: " . $e->getMessage());
        echo json_encode(['success' => false, 'message' => 'Gagal mengupdate status: ' . $e->getMessage()]);
        exit;
    }
}

// Proses edit aspek penilaian
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['edit_aspek'])) {
    $id = $_POST['id'];
    $nomor_urut = $_POST['nomor_urut'];
    $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()
                              WHERE id = ?");
        $stmt->execute([$aspek_yang_dinilai, $skor_dinilai, $keterangan_skor, $id]);
        
        $success_message = 'Aspek penilaian berhasil diperbarui!';
    } catch (PDOException $e) {
        $error = 'Gagal memperbarui data: ' . $e->getMessage();
        error_log("Error updating aspek: " . $e->getMessage());
    }
}

// Proses hapus aspek penilaian
if (isset($_GET['delete'])) {
    $id = $_GET['delete'];
    
    try {
        $stmt = $pdo->prepare("DELETE FROM aspek_penilaian_praktik WHERE id = ?");
        $stmt->execute([$id]);
        
        $stmt = $pdo->query("SET @count = 0");
        $stmt = $pdo->query("UPDATE aspek_penilaian_praktik SET nomor_urut = @count:= @count + 1 ORDER BY nomor_urut");
        
        $success_message = 'Aspek penilaian berhasil dihapus!';
        header('Location: preview_aspek_penilaian.php?success=1');
        exit;
    } catch (PDOException $e) {
        $error = 'Gagal menghapus data: ' . $e->getMessage();
        error_log("Error deleting aspek: " . $e->getMessage());
    }
}

// Build query dengan filter
$query = "SELECT ap.*, bs.skenario_klinik, bs.department as soal_department
          FROM aspek_penilaian_praktik ap 
          LEFT JOIN bank_soal_praktik bs ON ap.nomor_registrasi = bs.nomor_registrasi 
          WHERE 1=1";
$params = [];

if (!empty($filter_department)) {
    $query .= " AND ap.department = ?";
    $params[] = $filter_department;
}

if (!empty($filter_nomor_registrasi)) {
    $query .= " AND ap.nomor_registrasi = ?";
    $params[] = $filter_nomor_registrasi;
}

if (!empty($filter_status)) {
    $query .= " AND ap.status_review = ?";
    $params[] = $filter_status;
}

$query .= " ORDER BY ap.department, ap.nomor_urut";

// Ambil data aspek penilaian dari database dengan filter
$aspek_penilaian = [];
$error = '';
try {
    $stmt = $pdo->prepare($query);
    $stmt->execute($params);
    $aspek_penilaian = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $error = 'Gagal mengambil data aspek penilaian: ' . $e->getMessage();
    error_log("Error fetching aspek penilaian: " . $e->getMessage());
    
    try {
        $stmt_simple = $pdo->query("SELECT COUNT(*) as total FROM aspek_penilaian_praktik");
        $count = $stmt_simple->fetch(PDO::FETCH_ASSOC);
        error_log("Total data in aspek_penilaian_praktik: " . $count['total']);
    } catch (PDOException $e2) {
        error_log("Error counting data: " . $e2->getMessage());
    }
}

// Hitung statistik
$total_aspek = count($aspek_penilaian);
$total_departments = count(array_unique(array_column($aspek_penilaian, 'department')));
$total_soal = count(array_unique(array_column($aspek_penilaian, 'nomor_registrasi')));

// Hitung statistik status review
$total_belum_review = 0;
$total_sudah_review = 0;
foreach ($aspek_penilaian as $aspek) {
    $status = $aspek['status_review'] ?? 'belum';
    if ($status == 'sudah') {
        $total_sudah_review++;
    } else {
        $total_belum_review++;
    }
}

// Ambil nama reviewer untuk yang sudah direview
$reviewer_names = [];
if ($total_sudah_review > 0) {
    try {
        $reviewer_ids = array_filter(array_column($aspek_penilaian, 'reviewer_id'));
        if (!empty($reviewer_ids)) {
            $placeholders = str_repeat('?,', count($reviewer_ids) - 1) . '?';
            $stmt_reviewers = $pdo->prepare("SELECT id, name FROM users WHERE id IN ($placeholders)");
            $stmt_reviewers->execute($reviewer_ids);
            $reviewers = $stmt_reviewers->fetchAll(PDO::FETCH_ASSOC);
            foreach ($reviewers as $reviewer) {
                $reviewer_names[$reviewer['id']] = $reviewer['name'];
            }
        }
    } catch (PDOException $e) {
        error_log("Error fetching reviewer names: " . $e->getMessage());
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preview 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">
    <style>
        /* ===== RESET & BASE ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .header-right .user-badge .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #60a5fa, #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;
        }

        .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-danger {
            background: #dc2626;
            color: #fff;
        }

        .btn-danger:hover {
            background: #b91c1c;
            transform: translateY(-2px);
        }

        .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-sm {
            padding: 4px 12px;
            font-size: 12px;
            border-radius: 6px;
        }

        .btn-warning {
            background: #f59e0b;
            color: #fff;
        }

        .btn-warning:hover {
            background: #d97706;
        }

        .btn-info {
            background: #0ea5e9;
            color: #fff;
        }

        .btn-info:hover {
            background: #0284c7;
        }

        /* ===== 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;
        }

        /* ===== FILTER CARD ===== */
        .filter-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);
        }

        .filter-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }

        .filter-header h3 {
            font-size: 16px;
            font-weight: 600;
            color: #1a2332;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .filter-header h3 i {
            color: #60a5fa;
        }

        .filter-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr auto;
            gap: 15px;
            align-items: end;
        }

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

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

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

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

        /* ===== FILTER INFO ===== */
        .filter-info {
            background: #eff6ff;
            padding: 12px 18px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            border: 1px solid #bfdbfe;
        }

        .filter-badge {
            background: #fff;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 500;
            color: #2563eb;
            border: 1px solid #bfdbfe;
        }

        .filter-results {
            margin-left: auto;
            font-size: 13px;
            color: #475569;
        }

        /* ===== PREVIEW CARD ===== */
        .preview-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);
            overflow: hidden;
        }

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

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

        .preview-header h2 i {
            color: #60a5fa;
        }

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

        /* ===== TABLE ===== */
        .table-responsive {
            overflow-x: auto;
            margin: 0 -4px;
        }

        .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;
            white-space: nowrap;
            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 tbody tr {
            transition: all 0.2s ease;
        }

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

        .preview-table .department-header-row td {
            background: #f1f5f9;
            padding: 10px 14px;
            border-bottom: 2px solid #e2e8f0;
        }

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

        .department-info strong {
            font-size: 14px;
            color: #1a2332;
        }

        .department-info small {
            font-size: 12px;
            color: #6b7a8f;
        }

        .department-actions {
            display: flex;
            gap: 6px;
        }

        .text-center {
            text-align: center;
        }

        .department-badge {
            display: inline-block;
            padding: 2px 8px;
            background: #dbeafe;
            color: #2563eb;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
        }

        .aspek-content .aspek-text,
        .keterangan-content .keterangan-text {
            max-height: 80px;
            overflow-y: auto;
            line-height: 1.5;
            font-size: 13px;
        }

        .aspek-content .aspek-text::-webkit-scrollbar,
        .keterangan-content .keterangan-text::-webkit-scrollbar {
            width: 3px;
        }

        .aspek-content .aspek-text::-webkit-scrollbar-thumb,
        .keterangan-content .keterangan-text::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

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

        .skor-empty {
            color: #94a3b8;
        }

        /* ===== STATUS BADGE ===== */
        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

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

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

        .reviewer-info {
            font-size: 10px;
            color: #6b7a8f;
            display: block;
            margin-top: 2px;
        }

        .review-date {
            font-size: 9px;
            color: #94a3b8;
            display: block;
        }

        /* ===== ACTION BUTTONS ===== */
        .action-buttons {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            justify-content: center;
        }

        /* ===== PREVIEW FOOTER ===== */
        .preview-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid #e2e8f0;
            flex-wrap: wrap;
            gap: 10px;
        }

        .total-aspek {
            font-size: 14px;
            color: #475569;
        }

        .total-aspek .stat-separator {
            margin: 0 8px;
            color: #cbd5e1;
        }

        .preview-info {
            font-size: 12px;
            color: #94a3b8;
        }

        /* ===== SUMMARY CARDS ===== */
        .summary-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 16px;
            margin-top: 5px;
        }

        .summary-card {
            background: #fff;
            border-radius: 12px;
            padding: 18px 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.04);
            display: flex;
            align-items: center;
            gap: 14px;
            transition: all 0.3s ease;
        }

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

        .summary-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #fff;
            flex-shrink: 0;
        }

        .summary-card:nth-child(1) .summary-icon { background: linear-gradient(135deg, #2563eb, #60a5fa); }
        .summary-card:nth-child(2) .summary-icon { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
        .summary-card:nth-child(3) .summary-icon { background: linear-gradient(135deg, #059669, #34d399); }
        .summary-card:nth-child(4) .summary-icon { background: linear-gradient(135deg, #d97706, #fbbf24); }
        .summary-card:nth-child(5) .summary-icon { background: linear-gradient(135deg, #dc2626, #f87171); }

        .summary-content h3 {
            font-size: 22px;
            font-weight: 700;
            color: #1a2332;
            line-height: 1.2;
        }

        .summary-content p {
            font-size: 13px;
            color: #6b7a8f;
            margin-top: 2px;
        }

        /* ===== 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 .action-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 992px) {
            .sidebar {
                width: 220px;
            }
            .main-content {
                margin-left: 220px;
                padding: 20px;
            }
            .filter-row {
                grid-template-columns: 1fr 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-row {
                grid-template-columns: 1fr;
            }
            .filter-actions {
                flex-direction: column;
                width: 100%;
            }
            .filter-actions .btn {
                width: 100%;
                justify-content: center;
            }
            .preview-card {
                padding: 16px;
            }
            .preview-table {
                font-size: 12px;
            }
            .preview-table th,
            .preview-table td {
                padding: 6px 8px;
            }
            .summary-cards {
                grid-template-columns: 1fr 1fr;
            }
            .department-header-content {
                flex-direction: column;
                align-items: flex-start;
            }
            .preview-footer {
                flex-direction: column;
                align-items: flex-start;
            }
            .preview-actions {
                flex-direction: column;
                width: 100%;
            }
            .preview-actions .btn {
                width: 100%;
                justify-content: center;
            }
            .action-buttons {
                flex-direction: column;
                align-items: center;
            }
            .action-buttons .btn {
                width: 100%;
                justify-content: center;
            }
        }

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

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

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

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

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

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

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

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

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

    <!-- Main Content -->
    <div class="main-content">
        <!-- Header -->
        <div class="header">
            <div class="header-left">
                <button class="hamburger" id="hamburgerBtn">
                    <i class="fas fa-bars"></i>
                </button>
                <h1>Preview Aspek Penilaian</h1>
                <div class="subtitle">Lihat dan kelola aspek penilaian ujian praktik OSCE</div>
            </div>
            <div class="header-right">
                <div class="user-badge">
                    <div class="avatar">
                        <?php echo strtoupper(substr($_SESSION['user_name'] ?? 'A', 0, 1)); ?>
                    </div>
                    <div>
                        <div class="user-name"><?php echo $_SESSION['user_name'] ?? 'Admin'; ?></div>
                        <div class="user-role">Admin Soal</div>
                    </div>
                </div>
                <div class="header-actions">
                    <a href="aspek_penilaian.php" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus"></i> Tambah Aspek
                    </a>
                    <a href="../logout.php" class="btn-logout">
                        <i class="fas fa-sign-out-alt"></i> Logout
                    </a>
                </div>
            </div>
        </div>

        <!-- Alert -->
        <?php if (!empty($error)): ?>
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-circle"></i>
                <?php echo htmlspecialchars($error); ?>
                <?php if (strpos($error, 'bank_soal_praktik') !== false): ?>
                    <br><small>Note: Tabel bank_soal_praktik mungkin tidak ada. Sistem akan tetap berjalan tanpa informasi tambahan soal.</small>
                <?php endif; ?>
            </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; ?>

        <!-- Filter Section -->
        <div class="filter-card">
            <div class="filter-header">
                <h3><i class="fas fa-filter"></i> Filter Aspek Penilaian</h3>
            </div>
            <form method="GET" class="filter-form">
                <div class="filter-row">
                    <div class="filter-group">
                        <label for="filter_department">Department</label>
                        <select id="filter_department" name="department" class="form-control">
                            <option value="">Semua Department</option>
                            <?php foreach ($departments as $key => $value): ?>
                                <option value="<?php echo $key; ?>" 
                                    <?php echo $filter_department == $key ? 'selected' : ''; ?>>
                                    <?php echo htmlspecialchars($value); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label for="filter_nomor_registrasi">Nomor Registrasi</label>
                        <select id="filter_nomor_registrasi" name="nomor_registrasi" class="form-control">
                            <option value="">Semua Nomor Registrasi</option>
                            <?php foreach ($nomor_registrasi_list as $nomor): ?>
                                <option value="<?php echo $nomor; ?>" 
                                    <?php echo $filter_nomor_registrasi == $nomor ? 'selected' : ''; ?>>
                                    <?php echo htmlspecialchars($nomor); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label for="filter_status">Status Review</label>
                        <select id="filter_status" name="status" class="form-control">
                            <option value="">Semua Status</option>
                            <option value="belum" <?php echo $filter_status == 'belum' ? 'selected' : ''; ?>>Belum Direview</option>
                            <option value="sudah" <?php echo $filter_status == 'sudah' ? 'selected' : ''; ?>>Sudah Direview</option>
                        </select>
                    </div>
                    
                    <div class="filter-actions">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i> Terapkan
                        </button>
                        <a href="preview_aspek_penilaian.php" class="btn btn-secondary">
                            <i class="fas fa-redo"></i> Reset
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <!-- Filter Info -->
        <?php if (!empty($filter_department) || !empty($filter_nomor_registrasi) || !empty($filter_status)): ?>
            <div class="filter-info">
                <span><strong>Filter Aktif:</strong></span>
                <?php if (!empty($filter_department)): ?>
                    <span class="filter-badge">Department: <?php echo $departments[$filter_department] ?? $filter_department; ?></span>
                <?php endif; ?>
                <?php if (!empty($filter_nomor_registrasi)): ?>
                    <span class="filter-badge">Nomor Registrasi: <?php echo $filter_nomor_registrasi; ?></span>
                <?php endif; ?>
                <?php if (!empty($filter_status)): ?>
                    <span class="filter-badge">Status: <?php echo $filter_status == 'sudah' ? 'Sudah Direview' : 'Belum Direview'; ?></span>
                <?php endif; ?>
                <span class="filter-results">Menampilkan <?php echo $total_aspek; ?> aspek</span>
            </div>
        <?php endif; ?>

        <?php if (empty($aspek_penilaian) && empty($error)): ?>
            <div class="empty-state">
                <i class="fas fa-clipboard-list"></i>
                <h3>Belum Ada Aspek Penilaian</h3>
                <p>
                    <?php if (!empty($filter_department) || !empty($filter_nomor_registrasi) || !empty($filter_status)): ?>
                        Tidak ditemukan aspek penilaian dengan filter yang dipilih.
                    <?php else: ?>
                        Silakan tambahkan aspek penilaian terlebih dahulu
                    <?php endif; ?>
                </p>
                <a href="aspek_penilaian.php" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Tambah Aspek Penilaian
                </a>
            </div>
        <?php elseif (!empty($error) && empty($aspek_penilaian)): ?>
            <div class="empty-state">
                <i class="fas fa-exclamation-triangle"></i>
                <h3>Terjadi Kesalahan</h3>
                <p><?php echo htmlspecialchars($error); ?></p>
                <div class="action-buttons">
                    <a href="preview_aspek_penilaian.php" class="btn btn-primary">
                        <i class="fas fa-redo"></i> Coba Lagi
                    </a>
                    <a href="aspek_penilaian.php" class="btn btn-secondary">
                        <i class="fas fa-plus"></i> Tambah Aspek Baru
                    </a>
                </div>
            </div>
        <?php else: ?>
            <!-- Preview Card -->
            <div class="preview-card">
                <div class="preview-header">
                    <h2><i class="fas fa-table"></i> Daftar Aspek Penilaian</h2>
                    <div class="preview-actions">
                        <button onclick="window.print()" class="btn btn-outline btn-sm">
                            <i class="fas fa-print"></i> Print
                        </button>
                        <a href="aspek_penilaian.php" class="btn btn-primary btn-sm">
                            <i class="fas fa-edit"></i> Edit Semua
                        </a>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="preview-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Dept</th>
                                <th>Registrasi</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>
                                <th class="text-center">Status</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                            $current_department = '';
                            $current_nomor_registrasi = '';
                            foreach ($aspek_penilaian as $aspek): 
                                
                                if ($current_department != $aspek['department'] || $current_nomor_registrasi != $aspek['nomor_registrasi']):
                                    $current_department = $aspek['department'];
                                    $current_nomor_registrasi = $aspek['nomor_registrasi'];
                                    
                                    $soal_id = '';
                                    try {
                                        $stmt_soal = $pdo->prepare("SELECT id FROM bank_soal_praktik WHERE nomor_registrasi = ?");
                                        $stmt_soal->execute([$aspek['nomor_registrasi']]);
                                        $soal_data = $stmt_soal->fetch(PDO::FETCH_ASSOC);
                                        $soal_id = $soal_data['id'] ?? '';
                                    } catch (PDOException $e) {
                                        $soal_id = '';
                                    }
                            ?>
                                <tr class="department-header-row">
                                    <td colspan="10" style="padding: 0;">
                                        <div class="department-header-content" style="padding: 10px 14px; background: #f1f5f9;">
                                            <div class="department-info">
                                                <strong>
                                                    <i class="fas fa-building"></i> 
                                                    <?php echo $departments[$aspek['department']] ?? $aspek['department']; ?>
                                                    - 
                                                    <i class="fas fa-file-medical"></i>
                                                    <?php echo $aspek['nomor_registrasi']; ?>
                                                </strong>
                                                <?php if (!empty($aspek['skenario_klinik'])): ?>
                                                    <br><small><?php echo strip_tags(substr($aspek['skenario_klinik'], 0, 100)); ?>...</small>
                                                <?php endif; ?>
                                            </div>
                                            <div class="department-actions">
                                                <?php if (!empty($soal_id)): ?>
                                                    <a href="list_soal_praktik.php?page=1&review_id=<?php echo $soal_id; ?>" 
                                                       class="btn btn-outline btn-sm" target="_blank">
                                                        <i class="fas fa-external-link-alt"></i> Lihat Soal
                                                    </a>
                                                <?php endif; ?>
                                                <button onclick="exportDepartmentToWord('<?php echo $aspek['department']; ?>', '<?php echo $aspek['nomor_registrasi']; ?>', '<?php echo addslashes($departments[$aspek['department']] ?? $aspek['department']); ?>')" 
                                                        class="btn btn-outline btn-sm">
                                                    <i class="fas fa-file-word"></i> Export Word
                                                </button>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            <?php endif; ?>

                                <?php
                                $skor_dinilai = explode(',', $aspek['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);
                                $status_review = $aspek['status_review'] ?? 'belum';
                                $reviewer_name = '';
                                if ($status_review == 'sudah' && !empty($aspek['reviewer_id'])) {
                                    $reviewer_name = $reviewer_names[$aspek['reviewer_id']] ?? 'Reviewer';
                                }
                                ?>
                                <tr data-department="<?php echo $aspek['department']; ?>" data-nomor-registrasi="<?php echo $aspek['nomor_registrasi']; ?>" data-id="<?php echo $aspek['id']; ?>">
                                    <td class="text-center"><?php echo $aspek['nomor_urut']; ?></td>
                                    <td class="text-center">
                                        <span class="department-badge"><?php echo substr($aspek['department'], 0, 3); ?></span>
                                    </td>
                                    <td><small><?php echo $aspek['nomor_registrasi']; ?></small></td>
                                    <td class="aspek-content">
                                        <div class="aspek-text"><?php echo $aspek['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['keterangan_skor']; ?></div>
                                    </td>
                                    <td class="text-center">
                                        <span class="status-badge status-<?php echo $status_review; ?>">
                                            <?php echo $status_review == 'sudah' ? 'Sudah' : 'Belum'; ?>
                                        </span>
                                        <?php if ($status_review == 'sudah' && !empty($reviewer_name)): ?>
                                            <span class="reviewer-info">Oleh: <?php echo $reviewer_name; ?></span>
                                            <?php if (!empty($aspek['tanggal_review'])): ?>
                                                <span class="review-date"><?php echo date('d/m/Y', strtotime($aspek['tanggal_review'])); ?></span>
                                            <?php endif; ?>
                                        <?php endif; ?>
                                    </td>
                                    <td class="text-center">
                                        <div class="action-buttons">
                                            <a href="review_aspek.php?id=<?php echo $aspek['id']; ?>" 
                                               class="btn btn-info btn-sm" title="Review Aspek">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <button onclick="toggleReviewStatus(<?php echo $aspek['id']; ?>, '<?php echo $status_review; ?>')" 
                                                    class="btn btn-<?php echo $status_review == 'sudah' ? 'warning' : 'success'; ?> btn-sm" 
                                                    title="<?php echo $status_review == 'sudah' ? 'Tandai Belum Direview' : 'Tandai Sudah Direview'; ?>">
                                                <i class="fas fa-<?php echo $status_review == 'sudah' ? 'undo' : 'check'; ?>"></i>
                                            </button>
                                            <a href="preview_aspek_penilaian.php?delete=<?php echo $aspek['id']; ?><?php echo !empty($filter_department) ? '&department=' . $filter_department : ''; ?><?php echo !empty($filter_nomor_registrasi) ? '&nomor_registrasi=' . $filter_nomor_registrasi : ''; ?><?php echo !empty($filter_status) ? '&status=' . $filter_status : ''; ?>" 
                                               class="btn btn-danger btn-sm" 
                                               onclick="return confirm('Apakah Anda yakin ingin menghapus aspek ini?')" 
                                               title="Hapus Aspek">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>

                <div class="preview-footer">
                    <div class="total-aspek">
                        <strong>Total: <?php echo $total_aspek; ?> aspek</strong>
                        <?php if ($total_departments > 0): ?>
                            <span class="stat-separator">|</span>
                            <span><?php echo $total_departments; ?> department</span>
                        <?php endif; ?>
                        <?php if ($total_soal > 0): ?>
                            <span class="stat-separator">|</span>
                            <span><?php echo $total_soal; ?> soal</span>
                        <?php endif; ?>
                    </div>
                    <div class="preview-info">
                        <i class="fas fa-clock"></i> Update: <?php echo date('d/m/Y H:i'); ?>
                    </div>
                </div>
            </div>

            <!-- Summary Cards -->
            <div class="summary-cards">
                <div class="summary-card">
                    <div class="summary-icon"><i class="fas fa-list-ol"></i></div>
                    <div class="summary-content">
                        <h3><?php echo $total_aspek; ?></h3>
                        <p>Total Aspek</p>
                    </div>
                </div>
                <div class="summary-card">
                    <div class="summary-icon"><i class="fas fa-building"></i></div>
                    <div class="summary-content">
                        <h3><?php echo $total_departments; ?></h3>
                        <p>Department</p>
                    </div>
                </div>
                <div class="summary-card">
                    <div class="summary-icon"><i class="fas fa-file-medical"></i></div>
                    <div class="summary-content">
                        <h3><?php echo $total_soal; ?></h3>
                        <p>Soal Praktik</p>
                    </div>
                </div>
                <div class="summary-card">
                    <div class="summary-icon"><i class="fas fa-check-circle"></i></div>
                    <div class="summary-content">
                        <h3><?php echo $total_sudah_review; ?></h3>
                        <p>Sudah Direview</p>
                    </div>
                </div>
                <div class="summary-card">
                    <div class="summary-icon"><i class="fas fa-clock"></i></div>
                    <div class="summary-content">
                        <h3><?php echo $total_belum_review; ?></h3>
                        <p>Belum Direview</p>
                    </div>
                </div>
            </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' });
        });

        // ===== TOGGLE REVIEW STATUS =====
        function toggleReviewStatus(id, currentStatus) {
            const newStatus = currentStatus === 'sudah' ? 'belum' : 'sudah';
            const confirmMessage = newStatus === 'sudah' 
                ? 'Apakah Anda yakin ingin menandai aspek ini sebagai SUDAH DIREVIEW?'
                : 'Apakah Anda yakin ingin menandai aspek ini sebagai BELUM DIREVIEW?';
            
            if (!confirm(confirmMessage)) {
                return;
            }
            
            fetch('preview_aspek_penilaian.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `update_status=1&id=${id}&status=${newStatus}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Gagal mengupdate status: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Terjadi kesalahan saat mengupdate status');
            });
        }

        // ===== EXPORT DEPARTMENT TO WORD =====
        function exportDepartmentToWord(department, nomorRegistrasi, departmentName) {
            const rows = document.querySelectorAll(`tr[data-department="${department}"][data-nomor-registrasi="${nomorRegistrasi}"]`);
            
            if (rows.length === 0) {
                alert('Tidak ada data untuk department ini!');
                return;
            }

            let tableHTML = `
                <table border="1" style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 10pt;">
                <thead>
                    <tr style="background-color: #f2f2f2;">
                        <th style="padding: 8px; border: 1px solid #000; text-align: center; width: 5%">No</th>
                        <th style="padding: 8px; border: 1px solid #000; text-align: center; width: 10%">Dept</th>
                        <th style="padding: 8px; border: 1px solid #000; text-align: center; width: 12%">Registrasi</th>
                        <th style="padding: 8px; border: 1px solid #000; text-align: left; width: 25%">Aspek yang Dinilai</th>
                        <th style="padding: 8px; border: 1px solid #000; text-align: center; width: 5%">0</th>
                        <th style="padding: 8px; border: 1px solid #000; text-align: center; width: 5%">1</th>
                        <th style="padding: 8px; border: 1px solid #000; text-align: center; width: 5%">2</th>
                        <th style="padding: 8px; border: 1px solid #000; text-align: left; width: 23%">Keterangan Skor</th>
                        <th style="padding: 8px; border: 1px solid #000; text-align: center; width: 10%">Status</th>
                    </tr>
                </thead>
                <tbody>
            `;

            rows.forEach(row => {
                const cells = row.querySelectorAll('td');
                if (cells.length >= 9) {
                    const statusText = cells[8]?.textContent.trim() || 'Belum';
                    const skor0 = cells[4]?.innerHTML.includes('fa-check') ? '✓' : '-';
                    const skor1 = cells[5]?.innerHTML.includes('fa-check') ? '✓' : '-';
                    const skor2 = cells[6]?.innerHTML.includes('fa-check') ? '✓' : '-';
                    
                    tableHTML += `
                        <tr>
                            <td style="padding: 6px; border: 1px solid #000; text-align: center">${cells[0]?.textContent || ''}</td>
                            <td style="padding: 6px; border: 1px solid #000; text-align: center">${cells[1]?.textContent || ''}</td>
                            <td style="padding: 6px; border: 1px solid #000; text-align: center">${cells[2]?.textContent || ''}</td>
                            <td style="padding: 6px; border: 1px solid #000; text-align: left">${cells[3]?.textContent || ''}</td>
                            <td style="padding: 6px; border: 1px solid #000; text-align: center">${skor0}</td>
                            <td style="padding: 6px; border: 1px solid #000; text-align: center">${skor1}</td>
                            <td style="padding: 6px; border: 1px solid #000; text-align: center">${skor2}</td>
                            <td style="padding: 6px; border: 1px solid #000; text-align: left">${cells[7]?.textContent || ''}</td>
                            <td style="padding: 6px; border: 1px solid #000; text-align: center">${statusText}</td>
                        </tr>
                    `;
                }
            });

            tableHTML += '</tbody></table>';

            const htmlContent = `
                <!DOCTYPE html>
                <html>
                <head>
                    <meta charset="UTF-8">
                    <title>Aspek Penilaian - ${departmentName} - ${nomorRegistrasi}</title>
                    <style>
                        body { font-family: Arial, sans-serif; font-size: 11pt; margin: 20px; line-height: 1.4; }
                        .header { text-align: center; margin-bottom: 20px; border-bottom: 2px solid #333; padding-bottom: 10px; }
                        .department-title { font-size: 16pt; font-weight: bold; color: #2c3e50; margin-bottom: 5px; }
                        .document-info { text-align: center; margin-bottom: 15px; color: #666; font-size: 10pt; }
                        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
                        th { background-color: #f8f9fa; font-weight: bold; }
                        th, td { border: 1px solid #000; padding: 8px; text-align: left; }
                        .text-center { text-align: center; }
                        .summary { margin-top: 20px; padding: 10px; background-color: #f8f9fa; border-left: 4px solid #007bff; }
                    </style>
                </head>
                <body>
                    <div class="header">
                        <div class="department-title">${departmentName} - ${nomorRegistrasi}</div>
                        <div class="document-info">
                            Aspek Penilaian Praktik - SOCA OSCE System<br>
                            Total Aspek: ${rows.length} | Dibuat pada: ${new Date().toLocaleString('id-ID')}
                        </div>
                    </div>
                    
                    ${tableHTML}
                    
                    <div class="summary">
                        <strong>Summary:</strong><br>
                        - Department: ${departmentName}<br>
                        - Nomor Registrasi: ${nomorRegistrasi}<br>
                        - Total Aspek: ${rows.length}<br>
                        - Tanggal Export: ${new Date().toLocaleDateString('id-ID')}
                    </div>
                </body>
                </html>
            `;

            const blob = new Blob([htmlContent], { type: 'application/msword' });
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
            const fileName = `aspek-penilaian-${department}-${nomorRegistrasi}-${timestamp}.doc`
                .replace(/[^a-zA-Z0-9-]/g, '_');
            
            a.href = url;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>