<?php
require_once '../includes/auth.php';
require_once '../includes/functions.php';

if (!isAdmin()) {
    redirect('../login.php');
}

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

// Filter parameters
$ujian_id = $_GET['ujian_id'] ?? '';
$peserta_id = $_GET['peserta_id'] ?? '';
$station_id = $_GET['station_id'] ?? '';

// Ambil data untuk filter
$stmt = $pdo->query("SELECT * FROM ujian WHERE status = 'aktif' OR status = 'selesai' ORDER BY tanggal_ujian DESC");
$ujian_list = $stmt->fetchAll();

$stmt = $pdo->query("SELECT * FROM peserta ORDER BY nama");
$peserta_list = $stmt->fetchAll();

$stmt = $pdo->query("SELECT * FROM stations ORDER BY nama_station");
$stations_list = $stmt->fetchAll();

// Query untuk hasil penilaian
$where_conditions = [];
$params = [];

if (!empty($ujian_id)) {
    $where_conditions[] = "n.ujian_id = ?";
    $params[] = $ujian_id;
}

if (!empty($peserta_id)) {
    $where_conditions[] = "p.id = ?";
    $params[] = $peserta_id;
}

if (!empty($station_id)) {
    $where_conditions[] = "s.id = ?";
    $params[] = $station_id;
}

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

// Query utama untuk hasil penilaian
$query = "
    SELECT 
        u.nama_ujian,
        u.id as ujian_id,
        p.nim,
        p.nama as peserta_nama,
        p.id as peserta_id,
        p.program_studi,
        s.nama_station,
        s.id as station_id,
        s.deskripsi as station_deskripsi,
        s.total_maksimal,
        COUNT(DISTINCT n.aspek_id) as total_aspek,
        SUM(n.nilai) as total_nilai,
        MAX(n.created_at) as waktu_penilaian,
        us.username as penguji_username,
        us.id as penguji_id,
        pg.global_performance,
        pc.catatan_umum,
        pc.created_at as catatan_created_at,
        MAX(n.status_penilaian) as status_penilaian
    FROM penilaian n
    INNER JOIN ujian u ON n.ujian_id = u.id
    INNER JOIN peserta p ON n.peserta_id = p.id
    INNER JOIN stations s ON n.station_id = s.id
    INNER JOIN users us ON n.penguji_id = us.id
    LEFT JOIN penilaian_global pg ON (
        n.ujian_id = pg.ujian_id 
        AND n.peserta_id = pg.peserta_id 
        AND n.station_id = pg.station_id 
        AND n.penguji_id = pg.penguji_id
    )
    LEFT JOIN penilaian_catatan pc ON (
        n.ujian_id = pc.ujian_id 
        AND n.peserta_id = pc.peserta_id 
        AND n.station_id = pc.station_id 
        AND n.penguji_id = pc.penguji_id
    )
    $where_sql
    GROUP BY n.ujian_id, n.peserta_id, n.station_id, n.penguji_id
    ORDER BY p.nim ASC, u.tanggal_ujian DESC, p.nama, s.nama_station
";

$stmt = $pdo->prepare($query);
$stmt->execute($params);
$hasil_penilaian = $stmt->fetchAll();

// Query untuk statistik
$stat_query = "
    SELECT 
        COUNT(DISTINCT n.peserta_id) as total_peserta,
        COUNT(DISTINCT n.station_id) as total_station,
        COUNT(DISTINCT n.penguji_id) as total_penguji,
        AVG(total_nilai) as rata_rata_nilai
    FROM (
        SELECT 
            peserta_id,
            station_id,
            penguji_id,
            SUM(nilai) as total_nilai
        FROM penilaian
        GROUP BY peserta_id, station_id, penguji_id
    ) as subquery
";

try {
    $stmt = $pdo->query($stat_query);
    $statistik = $stmt->fetch();
} catch (PDOException $e) {
    $statistik = [
        'total_peserta' => 0,
        'total_station' => 0,
        'total_penguji' => 0,
        'rata_rata_nilai' => 0
    ];
}

// Query untuk detail penilaian per aspek - PERBAIKAN KOLOM DESKRIPSI
if (isset($_GET['detail'])) {
    $detail_peserta_id = $_GET['detail_peserta'] ?? '';
    $detail_station_id = $_GET['detail_station'] ?? '';
    $detail_ujian_id = $_GET['detail_ujian'] ?? '';
    
    // Ambil penguji_id terlebih dahulu
    $penguji_query = "
        SELECT DISTINCT n.penguji_id, us.username
        FROM penilaian n
        INNER JOIN users us ON n.penguji_id = us.id
        WHERE n.peserta_id = ? AND n.station_id = ? AND n.ujian_id = ?
        LIMIT 1
    ";
    
    try {
        $stmt = $pdo->prepare($penguji_query);
        $stmt->execute([$detail_peserta_id, $detail_station_id, $detail_ujian_id]);
        $penguji_data = $stmt->fetch();
        $penguji_id = $penguji_data['penguji_id'] ?? null;
        $penguji_username = $penguji_data['username'] ?? '';
        
        // Query untuk detail penilaian aspek
        $detail_query = "
            SELECT 
                ap.nama_aspek,
                ap.nomor_urut,
                n.nilai,
                n.catatan,
                us.username as penguji_username,
                n.created_at,
                CASE 
                    WHEN n.nilai = 0 THEN ap.deskripsi_0
                    WHEN n.nilai = 1 THEN ap.deskripsi_1  
                    WHEN n.nilai = 2 THEN ap.deskripsi_2
                    ELSE ''
                END as deskripsi_skor
            FROM penilaian n
            INNER JOIN aspek_penilaian ap ON n.aspek_id = ap.id
            INNER JOIN users us ON n.penguji_id = us.id
            WHERE n.peserta_id = ? AND n.station_id = ? AND n.ujian_id = ? AND n.penguji_id = ?
            ORDER BY ap.nomor_urut
        ";
        
        $stmt = $pdo->prepare($detail_query);
        $stmt->execute([$detail_peserta_id, $detail_station_id, $detail_ujian_id, $penguji_id]);
        $detail_penilaian = $stmt->fetchAll();
        
        // Ambil global performance
        $global_performance = null;
        if ($penguji_id) {
            $global_query = "
                SELECT global_performance 
                FROM penilaian_global 
                WHERE ujian_id = ? AND peserta_id = ? AND station_id = ? AND penguji_id = ?
            ";
            $stmt = $pdo->prepare($global_query);
            $stmt->execute([$detail_ujian_id, $detail_peserta_id, $detail_station_id, $penguji_id]);
            $global_data = $stmt->fetch();
            $global_performance = $global_data['global_performance'] ?? null;
        }
        
        // AMBIL CATATAN UMUM
        $catatan_umum = null;
        if ($penguji_id) {
            $catatan_query = "
                SELECT catatan_umum, created_at 
                FROM penilaian_catatan 
                WHERE ujian_id = ? AND peserta_id = ? AND station_id = ? AND penguji_id = ?
            ";
            $stmt = $pdo->prepare($catatan_query);
            $stmt->execute([$detail_ujian_id, $detail_peserta_id, $detail_station_id, $penguji_id]);
            $catatan_data = $stmt->fetch();
            $catatan_umum = $catatan_data['catatan_umum'] ?? null;
        }
        
    } catch (PDOException $e) {
        $detail_penilaian = [];
        $global_performance = null;
        $catatan_umum = null;
        $error = "Gagal memuat detail penilaian: " . $e->getMessage();
    }
}

// Helper function untuk memotong teks
function truncateText($text, $length = 100) {
    if (strlen($text) <= $length) {
        return $text;
    }
    return substr($text, 0, $length) . '...';
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hasil Penilaian | SOCA OSCE System</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #eef2f6 100%);
            min-height: 100vh;
        }

        /* Main Container Layout */
        .dashboard-wrapper {
            display: flex;
            min-height: 100vh;
        }

        /* Sidebar Modern */
        .sidebar {
            width: 280px;
            background: linear-gradient(180deg, #1a1f2e 0%, #0f1119 100%);
            color: white;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 100;
            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
        }

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

        .logo-area {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 0.5rem;
        }

        .logo-icon {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .logo-text h3 {
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: -0.3px;
            background: linear-gradient(135deg, #fff, #a78bfa);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

        .logo-text p {
            font-size: 0.7rem;
            opacity: 0.7;
            margin-top: 2px;
        }

        .user-info-sidebar {
            padding: 1.2rem;
            background: rgba(255, 255, 255, 0.05);
            margin: 1rem;
            border-radius: 16px;
            text-align: center;
        }

        .user-avatar {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-size: 1.5rem;
        }

        .nav-menu {
            padding: 1rem 0;
        }

        .nav-item {
            padding: 0.75rem 1.5rem;
            margin: 0.25rem 0.75rem;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.2s;
            text-decoration: none;
        }

        .nav-item:hover, .nav-item.active {
            background: rgba(102, 126, 234, 0.2);
            color: white;
        }

        .nav-item i {
            width: 24px;
            font-size: 1.1rem;
        }

        /* Main Content */
        .main-content {
            flex: 1;
            margin-left: 280px;
            padding: 1.5rem 2rem 2rem;
        }

        /* Top Navbar */
        .top-navbar {
            background: white;
            border-radius: 20px;
            padding: 1rem 1.8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .page-title h2 {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #1e293b, #334155);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

        .user-dropdown {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-name {
            font-weight: 600;
            color: #1e293b;
        }

        /* Stats Grid Premium */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: white;
            border-radius: 24px;
            padding: 1.5rem;
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.04);
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(135deg, #667eea, #764ba2);
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.12);
        }

        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .stat-icon {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            color: #667eea;
        }

        .stat-value {
            font-size: 2.2rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1;
            margin-bottom: 0.3rem;
        }

        .stat-label {
            color: #64748b;
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.3px;
        }

        /* Card Styles */
        .card {
            background: white;
            border-radius: 24px;
            padding: 1.8rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.04);
        }

        .card h3 {
            font-size: 1.2rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 1.2rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card h3 i {
            color: #667eea;
            font-size: 1.3rem;
        }

        /* Filter Form */
        .filter-form .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .form-group label {
            font-weight: 600;
            color: #334155;
            font-size: 0.85rem;
        }

        .form-group select, .form-group input {
            padding: 0.75rem 1rem;
            border: 2px solid #e2e8f0;
            border-radius: 14px;
            font-size: 0.9rem;
            font-family: 'Inter', sans-serif;
            transition: all 0.2s;
            background: #f8fafc;
        }

        .form-group select:focus, .form-group input:focus {
            outline: none;
            border-color: #667eea;
            background: white;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .form-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .btn {
            padding: 0.7rem 1.5rem;
            border-radius: 14px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
            font-family: 'Inter', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        }

        .btn-secondary {
            background: #f1f5f9;
            color: #475569;
        }

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

        .btn-success {
            background: #10b981;
            color: white;
        }

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

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

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

        .btn-danger:disabled {
            background: #cbd5e1;
            cursor: not-allowed;
        }

        .btn-info {
            background: #3b82f6;
            color: white;
        }

        .btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.75rem;
        }

        /* Export Actions */
        .export-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        /* Alert Styles */
        .alert {
            padding: 1rem 1.2rem;
            border-radius: 16px;
            margin-bottom: 1.5rem;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .alert-success {
            background: #d1fae5;
            color: #065f46;
            border-left: 4px solid #10b981;
        }

        .alert-error {
            background: #fee2e2;
            color: #991b1b;
            border-left: 4px solid #ef4444;
        }

        .alert-info {
            background: #dbeafe;
            color: #1e40af;
            border-left: 4px solid #3b82f6;
        }

        /* Table Styles */
        .table-container {
            overflow-x: auto;
            border-radius: 20px;
            background: white;
            border: 1px solid #eef2ff;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }

        .data-table thead tr {
            background: linear-gradient(135deg, #1e293b, #0f172a);
            color: white;
        }

        .data-table th {
            padding: 1rem 0.8rem;
            text-align: center;
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .data-table td {
            padding: 0.9rem 0.8rem;
            text-align: center;
            border-bottom: 1px solid #f1f5f9;
            vertical-align: middle;
        }

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

        /* Badge Styles */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 0.4rem 0.9rem;
            border-radius: 30px;
            font-size: 0.7rem;
            font-weight: 600;
        }

        .badge-success {
            background: #d1fae5;
            color: #065f46;
        }

        .badge-warning {
            background: #fed7aa;
            color: #9a3412;
        }

        .badge-danger {
            background: #fee2e2;
            color: #991b1b;
        }

        .badge-secondary {
            background: #e2e8f0;
            color: #475569;
        }

        .badge-info {
            background: #dbeafe;
            color: #1e40af;
        }

        /* Nilai Badge */
        .nilai-badge {
            display: inline-block;
            padding: 0.4rem 1rem;
            border-radius: 30px;
            font-weight: 700;
            font-size: 0.85rem;
            background: #10b981;
            color: white;
        }

        /* Catatan Preview */
        .catatan-preview {
            max-width: 220px;
            max-height: 80px;
            overflow-y: auto;
            font-size: 0.75rem;
            text-align: left;
            padding: 0.5rem;
            background: #f8fafc;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
        }

        .catatan-umum-preview strong {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #667eea;
            font-size: 0.7rem;
            margin-bottom: 5px;
        }

        .catatan-umum-text {
            color: #475569;
            line-height: 1.4;
            word-wrap: break-word;
            white-space: pre-wrap;
        }

        /* Modal Styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            border-radius: 28px;
            width: 90%;
            max-width: 800px;
            max-height: 85vh;
            overflow-y: auto;
            animation: modalSlideIn 0.3s ease;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .modal-header {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            border-radius: 28px 28px 0 0;
        }

        .modal-header h3 {
            font-size: 1.2rem;
            font-weight: 700;
            color: #0f172a;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 1.8rem;
            cursor: pointer;
            color: #94a3b8;
            transition: color 0.2s;
        }

        .close-btn:hover {
            color: #ef4444;
        }

        .modal-body {
            padding: 1.8rem 2rem;
        }

        .modal-footer {
            padding: 1rem 2rem;
            border-top: 1px solid #e2e8f0;
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
        }

        .detail-header {
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #eef2ff;
        }

        .detail-header h4 {
            font-size: 1.1rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 0.5rem;
        }

        .catatan-umum-box {
            background: linear-gradient(135deg, #f8f9ff, #eef2ff);
            border: 1px solid #c7d2fe;
            border-radius: 20px;
            padding: 1.2rem;
            margin-bottom: 1.5rem;
        }

        .catatan-umum-box h5 {
            margin-bottom: 0.8rem;
            color: #4338ca;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .catatan-umum-content {
            line-height: 1.6;
            color: #334155;
            white-space: pre-wrap;
        }

        .table-info {
            padding: 1rem;
            text-align: center;
            font-size: 0.8rem;
            color: #64748b;
            background: #f8fafc;
            border-top: 1px solid #e2e8f0;
        }

        /* Action buttons in table */
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .sidebar {
                width: 250px;
            }
            .main-content {
                margin-left: 250px;
            }
        }

        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
                position: fixed;
            }
            .main-content {
                margin-left: 0;
                padding: 1rem;
            }
            .stats-grid {
                grid-template-columns: 1fr;
            }
            .export-actions {
                flex-direction: column;
            }
            .form-actions {
                flex-direction: column;
            }
            .btn {
                justify-content: center;
            }
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }
        /* Modal hapus khusus */
#deleteConfirmationModal .modal-content {
    max-width: 500px;
}

.filter-info {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    border-left: 4px solid #dc3545;
}

.filter-info ul {
    margin: 5px 0 0 20px;
    padding: 0;
}

.filter-info li {
    margin-bottom: 3px;
}

.text-danger strong {
    color: #dc3545;
}
    </style>
</head>
<body>
<div class="dashboard-wrapper">
    <!-- Sidebar -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <div class="logo-area">
                <div class="logo-icon">
                    <i class="fas fa-tooth"></i>
                </div>
                <div class="logo-text">
                    <h3>SOCA-OSCE</h3>
                    <p>Admin Center</p>
                </div>
            </div>
        </div>
        <div class="user-info-sidebar">
            <div class="user-avatar">
                <i class="fas fa-user-cog"></i>
            </div>
            <div style="font-weight: 600;"><?php echo htmlspecialchars($_SESSION['user_name'] ?? 'Administrator'); ?></div>
            <div style="font-size: 0.7rem; opacity: 0.7;">Administrator</div>
        </div>
        <div class="nav-menu">
            <a href="dashboard.php" class="nav-item"><i class="fas fa-tachometer-alt"></i> <span>Dashboard</span></a>
            <a href="soal.php" class="nav-item"><i class="fas fa-question-circle"></i> <span>Kelola Soal</span></a>
            <a href="ujian.php" class="nav-item"><i class="fas fa-calendar-alt"></i> <span>Kelola Ujian</span></a>
            <a href="peserta.php" class="nav-item"><i class="fas fa-users"></i> <span>Kelola Peserta</span></a>
            <a href="penguji.php" class="nav-item"><i class="fas fa-chalkboard-user"></i> <span>Kelola Penguji</span></a>
            <a href="nilai.php" class="nav-item active"><i class="fas fa-chart-line"></i> <span>Hasil Penilaian</span></a>
            <a href="../logout.php" class="nav-item" style="margin-top: 2rem;"><i class="fas fa-sign-out-alt"></i> <span>Logout</span></a>
        </div>
    </aside>

    <!-- Main Content -->
    <main class="main-content">
        <div class="top-navbar">
            <div class="page-title">
                <h2><i class="fas fa-chart-line" style="margin-right: 10px; color: #667eea;"></i>Hasil Penilaian OSCE</h2>
            </div>
            <div class="user-dropdown">
                <span class="user-name"><?php echo htmlspecialchars($_SESSION['user_name'] ?? 'Admin'); ?></span>
                <i class="fas fa-bell" style="color: #94a3b8;"></i>
            </div>
        </div>

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

        <!-- Statistics -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-header"><div class="stat-icon"><i class="fas fa-users"></i></div></div>
                <div class="stat-value"><?php echo $statistik['total_peserta'] ?? 0; ?></div>
                <div class="stat-label">Total Peserta Dinilai</div>
            </div>
            <div class="stat-card">
                <div class="stat-header"><div class="stat-icon"><i class="fas fa-microscope"></i></div></div>
                <div class="stat-value"><?php echo $statistik['total_station'] ?? 0; ?></div>
                <div class="stat-label">Total Station</div>
            </div>
            <div class="stat-card">
                <div class="stat-header"><div class="stat-icon"><i class="fas fa-user-check"></i></div></div>
                <div class="stat-value"><?php echo $statistik['total_penguji'] ?? 0; ?></div>
                <div class="stat-label">Total Penguji</div>
            </div>
            <div class="stat-card">
                <div class="stat-header"><div class="stat-icon"><i class="fas fa-chart-line"></i></div></div>
                <div class="stat-value"><?php echo number_format($statistik['rata_rata_nilai'] ?? 0, 2); ?></div>
                <div class="stat-label">Rata-rata Nilai</div>
            </div>
        </div>

        <!-- Filter Form -->
        <div class="card">
            <h3><i class="fas fa-filter"></i> Filter Hasil Penilaian</h3>
            <form method="GET" class="filter-form">
                <div class="form-row">
                    <div class="form-group">
                        <label><i class="fas fa-calendar"></i> Ujian</label>
                        <select name="ujian_id">
                            <option value="">Semua Ujian</option>
                            <?php foreach ($ujian_list as $ujian): ?>
                                <option value="<?php echo $ujian['id']; ?>" <?php echo $ujian_id == $ujian['id'] ? 'selected' : ''; ?>>
                                    <?php echo htmlspecialchars($ujian['nama_ujian']); ?> (<?php echo formatTanggal($ujian['tanggal_ujian']); ?>)
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-user-graduate"></i> Peserta</label>
                        <select name="peserta_id">
                            <option value="">Semua Peserta</option>
                            <?php foreach ($peserta_list as $peserta): ?>
                                <option value="<?php echo $peserta['id']; ?>" <?php echo $peserta_id == $peserta['id'] ? 'selected' : ''; ?>>
                                    <?php echo htmlspecialchars($peserta['nim'] . ' - ' . $peserta['nama']); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-clinic-medical"></i> Station</label>
                        <select name="station_id">
                            <option value="">Semua Station</option>
                            <?php foreach ($stations_list as $station): ?>
                                <option value="<?php echo $station['id']; ?>" <?php echo $station_id == $station['id'] ? 'selected' : ''; ?>>
                                    <?php echo htmlspecialchars($station['nama_station']); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Terapkan Filter</button>
                    <a href="nilai.php" class="btn btn-secondary"><i class="fas fa-undo"></i> Reset Filter</a>
                </div>
            </form>
        </div>

        <!-- Export Actions -->
        <div class="export-actions">
            <form method="POST" action="export_nilai_csv.php" style="display: inline;">
                <input type="hidden" name="ujian_id" value="<?php echo $ujian_id; ?>">
                <input type="hidden" name="peserta_id" value="<?php echo $peserta_id; ?>">
                <input type="hidden" name="station_id" value="<?php echo $station_id; ?>">
                <input type="hidden" name="export_type" value="summary">
                <button type="submit" name="export_excel" class="btn btn-success"><i class="fas fa-file-excel"></i> Export Summary</button>
                <button type="button" class="btn btn-danger" onclick="showDeleteConfirmation()" 
            <?php echo empty($hasil_penilaian) ? 'disabled' : ''; ?>>
        <i class="fas fa-trash-alt"></i> Hapus Semua Data
    </button>
            </form>
            <form method="POST" action="export_nilai_csv.php" style="display: inline;">
                <input type="hidden" name="ujian_id" value="<?php echo $ujian_id; ?>">
                <input type="hidden" name="peserta_id" value="<?php echo $peserta_id; ?>">
                <input type="hidden" name="station_id" value="<?php echo $station_id; ?>">
                <input type="hidden" name="export_type" value="detail">
                <button type="submit" name="export_excel" class="btn btn-info"><i class="fas fa-file-excel"></i> Export Detail</button>
            </form>
        </div>

        <!-- Modal Konfirmasi Hapus Semua -->
<div class="modal-overlay" id="deleteConfirmationModal" style="display: none;">
    <div class="modal-content" style="max-width: 500px;">
        <div class="modal-header">
            <h3><i class="fas fa-exclamation-triangle text-danger"></i> Konfirmasi Hapus Data</h3>
            <button type="button" class="close-btn" onclick="closeDeleteModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="alert alert-danger">
                <h4><i class="fas fa-warning"></i> PERINGATAN!</h4>
                <p>Anda akan menghapus <strong>SEMUA DATA PENILAIAN</strong> yang ditampilkan.</p>
                <p><strong>Jumlah data yang akan dihapus: <?php echo count($hasil_penilaian); ?> record</strong></p>
                
                <?php if (!empty($where_conditions)): ?>
                    <div class="filter-info" style="background: #f8f9fa; padding: 10px; border-radius: 4px; margin: 10px 0;">
                        <strong>Filter yang aktif:</strong>
                        <ul style="margin: 5px 0 0 20px;">
                            <?php if (!empty($ujian_id)): ?>
                                <li>Ujian: <?php 
                                    foreach ($ujian_list as $ujian) {
                                        if ($ujian['id'] == $ujian_id) {
                                            echo $ujian['nama_ujian'];
                                            break;
                                        }
                                    }
                                ?></li>
                            <?php endif; ?>
                            <?php if (!empty($peserta_id)): ?>
                                <li>Peserta: <?php 
                                    foreach ($peserta_list as $peserta) {
                                        if ($peserta['id'] == $peserta_id) {
                                            echo $peserta['nama'];
                                            break;
                                        }
                                    }
                                ?></li>
                            <?php endif; ?>
                            <?php if (!empty($station_id)): ?>
                                <li>Station: <?php 
                                    foreach ($stations_list as $station) {
                                        if ($station['id'] == $station_id) {
                                            echo $station['nama_station'];
                                            break;
                                        }
                                    }
                                ?></li>
                            <?php endif; ?>
                        </ul>
                    </div>
                <?php else: ?>
                    <p class="text-danger"><strong>Semua data penilaian akan dihapus tanpa filter!</strong></p>
                <?php endif; ?>
                
                <p class="text-danger"><i class="fas fa-exclamation-circle"></i> 
                    Tindakan ini <strong>TIDAK DAPAT DIBATALKAN</strong>. Pastikan Anda telah membuat backup data.
                </p>
            </div>
            
            <form method="POST" action="delete_all_nilai.php" id="deleteForm">
                <input type="hidden" name="ujian_id" value="<?php echo $ujian_id; ?>">
                <input type="hidden" name="peserta_id" value="<?php echo $peserta_id; ?>">
                <input type="hidden" name="station_id" value="<?php echo $station_id; ?>">
                <input type="hidden" name="delete_type" value="all">
                <input type="hidden" name="confirm_delete" value="1">
                
                <div class="form-group">
                    <label for="confirm_text">Ketik "HAPUS" untuk konfirmasi:</label>
                    <input type="text" id="confirm_text" name="confirm_text" 
                           class="form-control" 
                           placeholder="Ketik HAPUS disini..." 
                           onkeyup="checkDeleteConfirmation()">
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeDeleteModal()">
                <i class="fas fa-times"></i> Batal
            </button>
            <button type="button" class="btn btn-danger" id="confirmDeleteBtn" disabled 
                    onclick="document.getElementById('deleteForm').submit()">
                <i class="fas fa-trash-alt"></i> Hapus Data
            </button>
        </div>
    </div>
</div>



        <!-- Results Table -->
        <div class="card">
            <h3><i class="fas fa-table"></i> Data Hasil Penilaian</h3>
            
            <?php if (empty($hasil_penilaian)): ?>
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i>
                    <?php echo empty($where_conditions) ? 'Belum ada data penilaian.' : 'Tidak ada data penilaian dengan filter yang dipilih.'; ?>
                </div>
            <?php else: ?>
                <div class="table-container">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Peserta</th>
                                <th>Ujian</th>
                                <th>Station</th>
                                <th>Nilai</th>
                                <th>Status</th>
                                <th>Global</th>
                                <th>Catatan</th>
                                <th>Penguji</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($hasil_penilaian as $index => $hasil): ?>
                                <?php
                                $status_badge = '';
                                $status_text = '';
                                switch($hasil['status_penilaian'] ?? 'belum_mulai') {
                                    case 'selesai': $status_badge = 'badge-success'; $status_text = 'Selesai'; break;
                                    case 'mulai_penilaian': $status_badge = 'badge-warning'; $status_text = 'Sedang Dinilai'; break;
                                    default: $status_badge = 'badge-secondary'; $status_text = 'Belum Mulai';
                                }
                                
                                $global_badge = '';
                                $global_text = '';
                                switch($hasil['global_performance'] ?? '') {
                                    case 'lulus': $global_badge = 'badge-success'; $global_text = 'Lulus'; break;
                                    case 'borderline': $global_badge = 'badge-warning'; $global_text = 'Borderline'; break;
                                    case 'tidak_lulus': $global_badge = 'badge-danger'; $global_text = 'Tidak Lulus'; break;
                                    default: $global_badge = 'badge-secondary'; $global_text = 'Belum Dinilai';
                                }
                                ?>
                                <tr>
                                    <td><?php echo $index + 1; ?></td>
                                    <td>
                                        <strong><?php echo htmlspecialchars($hasil['peserta_nama']); ?></strong>
                                        <br><small class="text-muted"><?php echo htmlspecialchars($hasil['nim'] ?? ''); ?></small>
                                    </td>
                                    <td><?php echo htmlspecialchars($hasil['nama_ujian'] ?? ''); ?></td>
                                    <td><?php echo htmlspecialchars($hasil['nama_station'] ?? ''); ?></td>
                                    <td>
                                        <span class="nilai-badge">
                                            <?php echo $hasil['total_nilai'] ?? 0; ?>/<?php echo $hasil['total_maksimal'] ?? 0; ?>
                                        </span>
                                        <br><small>(<?php echo number_format((($hasil['total_nilai'] ?? 0) / max(1, $hasil['total_maksimal'] ?? 1)) * 100, 1); ?>%)</small>
                                    </td>
                                    <td><span class="badge <?php echo $status_badge; ?>"><i class="fas fa-circle" style="font-size: 8px;"></i> <?php echo $status_text; ?></span></td>
                                    <td><span class="badge <?php echo $global_badge; ?>"><?php echo $global_text; ?></span></td>
                                    <td>
                                        <?php if (!empty($hasil['catatan_umum'])): ?>
                                            <div class="catatan-preview">
                                                <div class="catatan-umum-preview">
                                                    <strong><i class="fas fa-sticky-note"></i> Catatan:</strong>
                                                    <div class="catatan-umum-text"><?php echo truncateText(htmlspecialchars($hasil['catatan_umum']), 60); ?></div>
                                                </div>
                                            </div>
                                        <?php else: ?>
                                            <span class="text-muted">-</span>
                                        <?php endif; ?>
                                    </td>
                                    <td><small><?php echo htmlspecialchars($hasil['penguji_username'] ?? ''); ?></small></td>
                                    <td>
                                        <div class="action-buttons">
                                            <a href="?detail=1&detail_peserta=<?php echo $hasil['peserta_id']; ?>&detail_station=<?php echo $hasil['station_id']; ?>&detail_ujian=<?php echo $hasil['ujian_id']; ?>&<?php echo http_build_query($_GET); ?>" 
                                               class="btn btn-primary btn-sm" title="Lihat Detail">
                                                <i class="fas fa-eye"></i> Detail
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
                <div class="table-info">
                    <i class="fas fa-database"></i> Total: <strong><?php echo count($hasil_penilaian); ?></strong> hasil penilaian
                </div>
            <?php endif; ?>
        </div>

        <!-- Legend -->
        <div class="card">
            <h3><i class="fas fa-info-circle"></i> Keterangan Penilaian</h3>
            <div style="display: flex; gap: 1.5rem; flex-wrap: wrap;">
                <div><span class="badge badge-success"><i class="fas fa-check-circle"></i> Lulus</span> - Memenuhi semua kriteria</div>
                <div><span class="badge badge-warning"><i class="fas fa-exclamation-triangle"></i> Borderline</span> - Perlu perbaikan</div>
                <div><span class="badge badge-danger"><i class="fas fa-times-circle"></i> Tidak Lulus</span> - Belum kompeten</div>
                <div><span class="badge badge-secondary"><i class="fas fa-clock"></i> Belum Dinilai</span> - Belum ada penilaian global</div>
            </div>
        </div>
    </main>
</div>

<!-- Modal Konfirmasi Hapus Semua -->
<div class="modal-overlay" id="deleteConfirmationModal" style="display: none;">
    <div class="modal-content" style="max-width: 500px;">
        <div class="modal-header">
            <h3><i class="fas fa-exclamation-triangle text-danger"></i> Konfirmasi Hapus Data</h3>
            <button type="button" class="close-btn" onclick="closeDeleteModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="alert alert-danger">
                <h4><i class="fas fa-warning"></i> PERINGATAN!</h4>
                <p>Anda akan menghapus <strong>SEMUA DATA PENILAIAN</strong> yang ditampilkan.</p>
                <p><strong>Jumlah data yang akan dihapus: <?php echo count($hasil_penilaian); ?> record</strong></p>
                
                <?php if (!empty($where_conditions)): ?>
                    <div class="filter-info" style="background: #f8f9fa; padding: 10px; border-radius: 4px; margin: 10px 0;">
                        <strong>Filter yang aktif:</strong>
                        <ul style="margin: 5px 0 0 20px;">
                            <?php if (!empty($ujian_id)): ?>
                                <li>Ujian: <?php 
                                    foreach ($ujian_list as $ujian) {
                                        if ($ujian['id'] == $ujian_id) {
                                            echo $ujian['nama_ujian'];
                                            break;
                                        }
                                    }
                                ?></li>
                            <?php endif; ?>
                            <?php if (!empty($peserta_id)): ?>
                                <li>Peserta: <?php 
                                    foreach ($peserta_list as $peserta) {
                                        if ($peserta['id'] == $peserta_id) {
                                            echo $peserta['nama'];
                                            break;
                                        }
                                    }
                                ?></li>
                            <?php endif; ?>
                            <?php if (!empty($station_id)): ?>
                                <li>Station: <?php 
                                    foreach ($stations_list as $station) {
                                        if ($station['id'] == $station_id) {
                                            echo $station['nama_station'];
                                            break;
                                        }
                                    }
                                ?></li>
                            <?php endif; ?>
                        </ul>
                    </div>
                <?php else: ?>
                    <p class="text-danger"><strong>Semua data penilaian akan dihapus tanpa filter!</strong></p>
                <?php endif; ?>
                
                <p class="text-danger"><i class="fas fa-exclamation-circle"></i> 
                    Tindakan ini <strong>TIDAK DAPAT DIBATALKAN</strong>. Pastikan Anda telah membuat backup data.
                </p>
            </div>
            
            <form method="POST" action="delete_all_nilai.php" id="deleteForm">
                <input type="hidden" name="ujian_id" value="<?php echo $ujian_id; ?>">
                <input type="hidden" name="peserta_id" value="<?php echo $peserta_id; ?>">
                <input type="hidden" name="station_id" value="<?php echo $station_id; ?>">
                <input type="hidden" name="delete_type" value="all">
                <input type="hidden" name="confirm_delete" value="1">
                
                <div class="form-group">
                    <label for="confirm_text">Ketik "HAPUS" untuk konfirmasi:</label>
                    <input type="text" id="confirm_text" name="confirm_text" 
                           class="form-control" 
                           placeholder="Ketik HAPUS disini..." 
                           onkeyup="checkDeleteConfirmation()">
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeDeleteModal()">
                <i class="fas fa-times"></i> Batal
            </button>
            <button type="button" class="btn btn-danger" id="confirmDeleteBtn" disabled 
                    onclick="document.getElementById('deleteForm').submit()">
                <i class="fas fa-trash-alt"></i> Hapus Data
            </button>
        </div>
    </div>
</div>

<!-- Detail Modal -->
<?php if (isset($_GET['detail']) && !empty($detail_penilaian)): ?>
<div class="modal-overlay" id="detailModal" style="display: block;">
    <div class="modal-content">
        <div class="modal-header">
            <h3><i class="fas fa-clipboard-list"></i> Detail Penilaian</h3>
            <button class="close-btn" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <?php 
            $peserta_detail = null;
            foreach ($peserta_list as $p) { if ($p['id'] == $detail_peserta_id) { $peserta_detail = $p; break; } }
            $station_detail = null;
            foreach ($stations_list as $s) { if ($s['id'] == $detail_station_id) { $station_detail = $s; break; } }
            
            $global_badge_modal = '';
            $global_text_modal = '';
            switch($global_performance ?? '') {
                case 'lulus': $global_badge_modal = 'badge-success'; $global_text_modal = 'Lulus'; break;
                case 'borderline': $global_badge_modal = 'badge-warning'; $global_text_modal = 'Borderline'; break;
                case 'tidak_lulus': $global_badge_modal = 'badge-danger'; $global_text_modal = 'Tidak Lulus'; break;
                default: $global_badge_modal = 'badge-secondary'; $global_text_modal = 'Belum Dinilai';
            }
            ?>
            <div class="detail-header">
                <h4><?php echo htmlspecialchars($peserta_detail['nama'] ?? 'Peserta'); ?> (<?php echo htmlspecialchars($peserta_detail['nim'] ?? 'N/A'); ?>)</h4>
                <p><strong>Station:</strong> <?php echo htmlspecialchars($station_detail['nama_station'] ?? 'Station'); ?> | 
                   <strong>Global Performance:</strong> <span class="badge <?php echo $global_badge_modal; ?>"><?php echo $global_text_modal; ?></span></p>
            </div>

            <?php if (!empty($catatan_umum)): ?>
            <div class="catatan-umum-box">
                <h5><i class="fas fa-sticky-note"></i> Catatan Umum Penguji</h5>
                <div class="catatan-umum-content"><?php echo nl2br(htmlspecialchars($catatan_umum)); ?></div>
            </div>
            <?php endif; ?>

            <div class="table-container">
                <table class="data-table">
                    <thead>
                        <tr><th>No</th><th>Aspek Penilaian</th><th>Nilai</th><th>Deskripsi</th><th>Catatan</th></tr>
                    </thead>
                    <tbody>
                        <?php 
                        $total_nilai = 0;
                        foreach ($detail_penilaian as $index => $detail):
                            $total_nilai += $detail['nilai'];
                        ?>
                            <tr>
                                <td><?php echo $index + 1; ?></td>
                                <td><strong><?php echo htmlspecialchars($detail['nama_aspek']); ?></strong></td>
                                <td><span class="badge badge-success"><?php echo $detail['nilai']; ?></span></td>
                                <td><small><?php echo htmlspecialchars($detail['deskripsi_skor'] ?? '-'); ?></small></td>
                                <td><small><?php echo nl2br(htmlspecialchars($detail['catatan'] ?? '-')); ?></small></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                    <tfoot>
                        <tr style="background: #f1f5f9;">
                            <td colspan="2"><strong>Total Nilai</strong></td>
                            <td colspan="3"><strong><?php echo $total_nilai; ?>/<?php echo $station_detail['total_maksimal'] ?? 0; ?></strong> (<?php echo number_format(($total_nilai / max(1, $station_detail['total_maksimal'] ?? 1)) * 100, 1); ?>%)</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal()">Tutup</button>
        </div>
    </div>
</div>
<?php endif; ?>


<script>
// Export Modal Functions
function showExportOptions() {
    document.getElementById('exportModal').style.display = 'flex';
}

function closeExportModal() {
    document.getElementById('exportModal').style.display = 'none';
}

function toggleExportOptions() {
    const exportType = document.getElementById('export_type').value;
    const stationSelect = document.getElementById('station_select_group');
    
    if (exportType === 'per_station') {
        stationSelect.style.display = 'block';
    } else {
        stationSelect.style.display = 'none';
    }
}

function submitExport() {
    document.getElementById('exportForm').submit();
}

// Close modal when clicking outside
document.addEventListener('click', function(e) {
    if (e.target.id === 'exportModal') {
        closeExportModal();
    }
});

// Close modal with Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeExportModal();
    }
});
</script>

<script>
function closeModal() {
    // Remove detail parameters from URL
    const url = new URL(window.location);
    url.searchParams.delete('detail');
    url.searchParams.delete('detail_peserta');
    url.searchParams.delete('detail_station');
    url.searchParams.delete('detail_ujian');
    window.location.href = url.toString();
}

// Close modal with Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeModal();
    }
});

// Close modal when clicking outside
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('modal-overlay')) {
        closeModal();
    }
});


</script>

<script>
// Fungsi untuk modal hapus semua
function showDeleteConfirmation() {
    document.getElementById('deleteConfirmationModal').style.display = 'flex';
}

function closeDeleteModal() {
    document.getElementById('deleteConfirmationModal').style.display = 'none';
    document.getElementById('confirm_text').value = '';
    document.getElementById('confirmDeleteBtn').disabled = true;
}

function checkDeleteConfirmation() {
    const confirmText = document.getElementById('confirm_text').value;
    const confirmBtn = document.getElementById('confirmDeleteBtn');
    
    if (confirmText.toUpperCase() === 'HAPUS') {
        confirmBtn.disabled = false;
    } else {
        confirmBtn.disabled = true;
    }
}

// Close modal with Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && document.getElementById('deleteConfirmationModal').style.display === 'flex') {
        closeDeleteModal();
    }
});

// Close modal when clicking outside
document.addEventListener('click', function(e) {
    if (e.target.id === 'deleteConfirmationModal') {
        closeDeleteModal();
    }
});
</script>

<?php include 'footer.php'; ?>