<?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 - DIPERBAIKI
// Asumsi struktur tabel penilaian berdasarkan kode sebelumnya
$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,
        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
    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
    $where_sql
    GROUP BY n.ujian_id, n.peserta_id, n.station_id, n.penguji_id
    ORDER BY u.tanggal_ujian DESC, p.nama, s.nama_station
";

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

// Query untuk statistik - DIPERBAIKI
$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) {
    // Jika masih error, gunakan query yang lebih sederhana
    $statistik = [
        'total_peserta' => 0,
        'total_station' => 0,
        'total_penguji' => 0,
        'rata_rata_nilai' => 0
    ];
}

// Query untuk detail penilaian per aspek
if (isset($_GET['detail'])) {
    $detail_peserta_id = $_GET['detail_peserta'] ?? '';
    $detail_station_id = $_GET['detail_station'] ?? '';
    $detail_ujian_id = $_GET['detail_ujian'] ?? '';
    
    $detail_query = "
        SELECT 
            ap.nama_aspek,
            ap.deskripsi as aspek_deskripsi,
            n.nilai,
            n.catatan,
            us.username as penguji_username,
            n.created_at
        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 = ?
        ORDER BY ap.nomor_urut
    ";
    
    try {
        $stmt = $pdo->prepare($detail_query);
        $stmt->execute([$detail_peserta_id, $detail_station_id, $detail_ujian_id]);
        $detail_penilaian = $stmt->fetchAll();
    } catch (PDOException $e) {
        $detail_penilaian = [];
        $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) . '...';
}
?>

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

<div class="content">
    <div class="page-header">
        <h2><i class="fas fa-chart-bar"></i> Hasil Penilaian</h2>
    </div>
    
    <?php if ($success): ?>
        <div class="alert alert-success"><?php echo $success; ?></div>
    <?php endif; ?>
    
    <?php if ($error): ?>
        <div class="alert alert-error"><?php echo $error; ?></div>
    <?php endif; ?>

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

    <!-- Filter Form -->
    <div class="card">
        <h3>Filter Hasil Penilaian</h3>
        
        <form method="GET" class="filter-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="ujian_id">Ujian</label>
                    <select id="ujian_id" 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 $ujian['nama_ujian']; ?> (<?php echo formatTanggal($ujian['tanggal_ujian']); ?>)
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="peserta_id">Peserta</label>
                    <select id="peserta_id" 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 $peserta['nim'] . ' - ' . $peserta['nama']; ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="station_id">Station</label>
                    <select id="station_id" 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 $station['nama_station']; ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-filter"></i> Terapkan Filter
                </button>
                <a href="nilai.php" class="btn btn-secondary">
                    <i class="fas fa-times"></i> Reset Filter
                </a>
            </div>
        </form>
    </div>

    <!-- Detail Penilaian 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>Detail Penilaian</h3>
                <button type="button" class="close-btn" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <?php 
                // Cari data peserta, station, dan ujian
                $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;
                    }
                }
                
                $ujian_detail = null;
                foreach ($ujian_list as $u) {
                    if ($u['id'] == $detail_ujian_id) {
                        $ujian_detail = $u;
                        break;
                    }
                }
                ?>
                
                <div class="detail-header">
                    <h4>
                        <?php echo $peserta_detail ? $peserta_detail['nama'] : 'Peserta Tidak Ditemukan'; ?> 
                        (<?php echo $peserta_detail ? $peserta_detail['nim'] : 'N/A'; ?>)
                    </h4>
                    <p>
                        <strong>Station:</strong> <?php echo $station_detail ? $station_detail['nama_station'] : 'Station Tidak Ditemukan'; ?> | 
                        <strong>Ujian:</strong> <?php echo $ujian_detail ? $ujian_detail['nama_ujian'] : 'Ujian Tidak Ditemukan'; ?>
                    </p>
                </div>
                
                <div class="table-container">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Aspek Penilaian</th>
                                <th>Deskripsi</th>
                                <th>Nilai</th>
                                <th>Catatan</th>
                                <th>Penguji</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                            $total_nilai = 0;
                            $max_nilai = 0;
                            ?>
                            <?php foreach ($detail_penilaian as $index => $detail): ?>
                                <?php 
                                $total_nilai += $detail['nilai'];
                                $max_nilai += 2; // Asumsi maksimal nilai per aspek adalah 2
                                ?>
                                <tr>
                                    <td><?php echo $index + 1; ?></td>
                                    <td><strong><?php echo $detail['nama_aspek']; ?></strong></td>
                                    <td><small><?php echo $detail['aspek_deskripsi']; ?></small></td>
                                    <td>
                                        <span class="nilai-badge nilai-<?php echo $detail['nilai']; ?>">
                                            <?php echo $detail['nilai']; ?>
                                        </span>
                                    </td>
                                    <td>
                                        <?php if ($detail['catatan']): ?>
                                            <small><?php echo nl2br(htmlspecialchars($detail['catatan'])); ?></small>
                                        <?php else: ?>
                                            <span class="text-muted">-</span>
                                        <?php endif; ?>
                                    </td>
                                    <td><small><?php echo $detail['penguji_username']; ?></small></td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3"><strong>Total</strong></td>
                                <td><strong><?php echo $total_nilai; ?>/<?php echo $max_nilai; ?></strong></td>
                                <td colspan="2">
                                    <strong>Persentase: <?php echo $max_nilai > 0 ? number_format(($total_nilai / $max_nilai) * 100, 1) : 0; ?>%</strong>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">Tutup</button>
            </div>
        </div>
    </div>
    <?php endif; ?>

   <!-- Hasil Penilaian -->
<div class="card">
    <h3>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>Aspek</th>
                        <th>Total Nilai</th>
                        <th>Catatan</th>
                        <th>Penguji</th>
                        <th>Waktu</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php 
                    // Preload semua penguji ID sekaligus untuk optimasi
                    $penguji_usernames = array_unique(array_column($hasil_penilaian, 'penguji_username'));
                    if (!empty($penguji_usernames)) {
                        $placeholders = str_repeat('?,', count($penguji_usernames) - 1) . '?';
                        $penguji_stmt = $pdo->prepare("SELECT id, username FROM users WHERE username IN ($placeholders)");
                        $penguji_stmt->execute($penguji_usernames);
                        $penguji_map = [];
                        foreach ($penguji_stmt->fetchAll() as $p) {
                            $penguji_map[$p['username']] = $p['id'];
                        }
                    } else {
                        $penguji_map = [];
                    }
                    
                    // Preload catatan untuk semua hasil penilaian sekaligus
                    $catatan_data_map = [];
                    if (!empty($hasil_penilaian)) {
                        $conditions = [];
                        $params = [];
                        
                        foreach ($hasil_penilaian as $hasil) {
                            $penguji_id = $penguji_map[$hasil['penguji_username']] ?? null;
                            if ($penguji_id) {
                                $conditions[] = "(n.ujian_id = ? AND n.peserta_id = ? AND n.station_id = ? AND n.penguji_id = ?)";
                                $params[] = $hasil['ujian_id'];
                                $params[] = $hasil['peserta_id'];
                                $params[] = $hasil['station_id'];
                                $params[] = $penguji_id;
                            }
                        }
                        
                        if (!empty($conditions)) {
                            $catatan_query = "
                                SELECT n.ujian_id, n.peserta_id, n.station_id, n.penguji_id, n.catatan, ap.nama_aspek
                                FROM penilaian n
                                INNER JOIN aspek_penilaian ap ON n.aspek_id = ap.id
                                WHERE (" . implode(" OR ", $conditions) . ")
                                AND n.catatan IS NOT NULL AND n.catatan != ''
                                ORDER BY n.ujian_id, n.peserta_id, n.station_id, n.penguji_id, ap.nomor_urut
                            ";
                            
                            $catatan_stmt = $pdo->prepare($catatan_query);
                            $catatan_stmt->execute($params);
                            $all_catatan = $catatan_stmt->fetchAll();
                            
                            // Group catatan by composite key
                            foreach ($all_catatan as $catatan) {
                                $key = $catatan['ujian_id'] . '_' . $catatan['peserta_id'] . '_' . $catatan['station_id'] . '_' . $catatan['penguji_id'];
                                if (!isset($catatan_data_map[$key])) {
                                    $catatan_data_map[$key] = [];
                                }
                                $catatan_data_map[$key][] = $catatan;
                            }
                        }
                    }
                    ?>
                    
                    <?php foreach ($hasil_penilaian as $index => $hasil): ?>
                        <?php
                        // Ambil catatan dari preloaded data
                        $penguji_id = $penguji_map[$hasil['penguji_username']] ?? null;
                        $catatan_data = [];
                        if ($penguji_id) {
                            $key = $hasil['ujian_id'] . '_' . $hasil['peserta_id'] . '_' . $hasil['station_id'] . '_' . $penguji_id;
                            $catatan_data = $catatan_data_map[$key] ?? [];
                        }
                        ?>
                        <tr>
                            <td><?php echo $index + 1; ?></td>
                            <td>
                                <strong><?php echo $hasil['peserta_nama']; ?></strong>
                                <br>
                                <small class="text-muted">
                                    <?php echo $hasil['nim']; ?> | <?php echo $hasil['program_studi']; ?>
                                </small>
                            </td>
                            <td>
                                <?php echo $hasil['nama_ujian']; ?>
                            </td>
                            <td>
                                <?php echo $hasil['nama_station']; ?>
                                <?php if ($hasil['station_deskripsi']): ?>
                                    <br>
                                    <small class="text-muted"><?php echo truncateText($hasil['station_deskripsi'], 50); ?></small>
                                <?php endif; ?>
                            </td>
                            <td>
                                <span class="badge badge-info"><?php echo $hasil['total_aspek']; ?> aspek</span>
                            </td>
                            <td>
                                <span class="nilai-badge nilai-<?php echo $hasil['total_nilai']; ?>">
                                    <?php echo $hasil['total_nilai']; ?>
                                </span>
                            </td>
                            <td>
                                <div class="catatan-preview">
                                    <?php if (!empty($catatan_data)): ?>
                                        <?php 
                                        $catatan_count = 0;
                                        $valid_catatan_count = 0;
                                        foreach ($catatan_data as $catatan_item): 
                                            if (!empty(trim($catatan_item['catatan']))):
                                                $valid_catatan_count++;
                                                if ($valid_catatan_count <= 2): // Tampilkan maksimal 2 catatan preview ?>
                                                    <div class="catatan-preview-item">
                                                        <strong><?php echo htmlspecialchars($catatan_item['nama_aspek']); ?>:</strong>
                                                        <span class="catatan-text"><?php echo truncateText($catatan_item['catatan'], 30); ?></span>
                                                    </div>
                                                <?php endif;
                                            endif;
                                        endforeach; 
                                        
                                        if ($valid_catatan_count > 2): ?>
                                            <div class="catatan-more">
                                                <small class="text-muted">+<?php echo $valid_catatan_count - 2; ?> catatan lainnya</small>
                                            </div>
                                        <?php endif;
                                        
                                        if ($valid_catatan_count === 0): ?>
                                            <span class="text-muted"><em>Tidak ada catatan</em></span>
                                        <?php endif; ?>
                                    <?php else: ?>
                                        <span class="text-muted"><em>Tidak ada catatan</em></span>
                                    <?php endif; ?>
                                </div>
                            </td>
                            <td>
                                <small><?php echo $hasil['penguji_username']; ?></small>
                            </td>
                            <td>
                                <small><?php echo formatTanggal($hasil['waktu_penilaian']); ?></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-sm btn-info" title="Lihat Detail">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        
        <div class="table-info">
            Total: <strong><?php echo count($hasil_penilaian); ?></strong> hasil penilaian
        </div>
    <?php endif; ?>
</div>

<style>
  /* Catatan Preview Styles */
.catatan-preview {
    max-width: 200px;
    max-height: 80px;
    overflow-y: auto;
    font-size: 0.8rem;
}

.catatan-preview-item {
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #f0f0f0;
}

.catatan-preview-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.catatan-preview-item strong {
    display: block;
    font-size: 0.75rem;
    color: #495057;
    margin-bottom: 0.1rem;
}

.catatan-text {
    color: #6c757d;
    line-height: 1.3;
    word-wrap: break-word;
}

.catatan-more {
    margin-top: 0.25rem;
    text-align: center;
}

/* Scrollbar untuk catatan preview */
.catatan-preview::-webkit-scrollbar {
    width: 4px;
}

.catatan-preview::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.catatan-preview::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.catatan-preview::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Badge styles */
.badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-info {
    background: #3498db;
    color: white;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.stat-info h3 {
    margin: 0;
    font-size: 1.8rem;
    color: #2c3e50;
}

.stat-info p {
    margin: 0.25rem 0 0 0;
    color: #7f8c8d;
    font-size: 0.9rem;
}

.filter-form {
    margin-top: 1rem;
}

.nilai-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.8rem;
    display: inline-block;
}

.nilai-0 { background: #e74c3c; color: white; }
.nilai-1 { background: #e74c3c; color: white; }
.nilai-2 { background: #f39c12; color: white; }
.nilai-3 { background: #f39c12; color: white; }
.nilai-4 { background: #27ae60; color: white; }
.nilai-5 { background: #27ae60; color: white; }
.nilai-6 { background: #27ae60; color: white; }

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

.modal-content {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    text-align: right;
}

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

.detail-header h4 {
    margin: 0 0 0.5rem 0;
    color: #2c3e50;
}

.detail-header p {
    margin: 0;
    color: #6c757d;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .stat-card {
        flex-direction: column;
        text-align: center;
    }
    
    .filter-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
        margin: 1rem;
    }
}
</style>

<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>

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