<?php
declare(strict_types=1);

session_start();

error_reporting(E_ALL);
ini_set('display_errors', '1'); // set to 0 in production

require_once __DIR__ . '/db.php';

if (!isset($_SESSION['admin'])) {
    http_response_code(403);
    exit('Access denied');
}

if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

/*
|--------------------------------------------------------------------------
| Config
|--------------------------------------------------------------------------
*/
$spentColumn = 'amount'; // <-- change this if your spent column has another name

$allowedStatuses = [
    'PENDING',
    'PROCESSING',
    'SUCCESSFUL',
    'FAILED',
    'COMPLETED',
];

/*
|--------------------------------------------------------------------------
| Helpers
|--------------------------------------------------------------------------
*/
function e(?string $value): string
{
    return htmlspecialchars($value ?? '', ENT_QUOTES, 'UTF-8');
}

function jsonResponse(array $payload, int $statusCode = 200): void
{
    http_response_code($statusCode);
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($payload, JSON_UNESCAPED_UNICODE);
    exit;
}

function formatMoney(float $value): string
{
    return number_format($value, 2);
}

/*
|--------------------------------------------------------------------------
| Dashboard Stats
|--------------------------------------------------------------------------
*/
$stats = [
    'today' => ['count' => 0, 'spent' => 0.00],
    'week' => ['count' => 0, 'spent' => 0.00],
    'month' => ['count' => 0, 'spent' => 0.00],
    'total' => ['count' => 0, 'spent' => 0.00],
];

$spentExpr = "COALESCE(CAST($spentColumn AS DECIMAL(15,2)), 0)";

$statsSql = "
    SELECT
        SUM(CASE WHEN DATE(created_at) = CURDATE() THEN 1 ELSE 0 END) AS today_count,
        SUM(CASE WHEN DATE(created_at) = CURDATE() THEN {$spentExpr} ELSE 0 END) AS today_spent,

        SUM(CASE WHEN YEARWEEK(created_at, 1) = YEARWEEK(CURDATE(), 1) THEN 1 ELSE 0 END) AS week_count,
        SUM(CASE WHEN YEARWEEK(created_at, 1) = YEARWEEK(CURDATE(), 1) THEN {$spentExpr} ELSE 0 END) AS week_spent,

        SUM(CASE WHEN YEAR(created_at) = YEAR(CURDATE()) AND MONTH(created_at) = MONTH(CURDATE()) THEN 1 ELSE 0 END) AS month_count,
        SUM(CASE WHEN YEAR(created_at) = YEAR(CURDATE()) AND MONTH(created_at) = MONTH(CURDATE()) THEN {$spentExpr} ELSE 0 END) AS month_spent,

        COUNT(*) AS total_count,
        SUM({$spentExpr}) AS total_spent
    FROM ipe_requests
";

$statsResult = $conn->query($statsSql);

if ($statsResult instanceof mysqli_result) {
    $statsRow = $statsResult->fetch_assoc();

    if ($statsRow) {
        $stats['today']['count'] = (int)($statsRow['today_count'] ?? 0);
        $stats['today']['spent'] = (float)($statsRow['today_spent'] ?? 0);

        $stats['week']['count'] = (int)($statsRow['week_count'] ?? 0);
        $stats['week']['spent'] = (float)($statsRow['week_spent'] ?? 0);

        $stats['month']['count'] = (int)($statsRow['month_count'] ?? 0);
        $stats['month']['spent'] = (float)($statsRow['month_spent'] ?? 0);

        $stats['total']['count'] = (int)($statsRow['total_count'] ?? 0);
        $stats['total']['spent'] = (float)($statsRow['total_spent'] ?? 0);
    }
}

/*
|--------------------------------------------------------------------------
| AJAX Update
|--------------------------------------------------------------------------
*/
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['update_request'])) {
    $csrfToken = (string)($_POST['csrf_token'] ?? '');

    if (!hash_equals($_SESSION['csrf_token'], $csrfToken)) {
        jsonResponse([
            'status'  => 'error',
            'message' => 'Invalid CSRF token.',
        ], 419);
    }

    $id          = filter_input(INPUT_POST, 'id', FILTER_VALIDATE_INT);
    $status      = strtoupper(trim((string)($_POST['status'] ?? '')));
    $reply       = trim((string)($_POST['reply'] ?? ''));
    $rawResponse = (string)($_POST['raw_response'] ?? '');

    if (!$id) {
        jsonResponse([
            'status'  => 'error',
            'message' => 'Invalid request ID.',
        ], 422);
    }

    if (!in_array($status, $allowedStatuses, true)) {
        jsonResponse([
            'status'  => 'error',
            'message' => 'Invalid status value.',
        ], 422);
    }

    $stmt = $conn->prepare("
        UPDATE ipe_requests
        SET
            status = ?,
            reply = ?,
            raw_response = ?,
            admin_updated_at = NOW()
        WHERE id = ?
    ");

    if (!$stmt) {
        jsonResponse([
            'status'  => 'error',
            'message' => 'Failed to prepare update statement.',
        ], 500);
    }

    $stmt->bind_param('sssi', $status, $reply, $rawResponse, $id);

    if ($stmt->execute()) {
        jsonResponse([
            'status'  => 'success',
            'message' => 'Request updated successfully.',
        ]);
    }

    jsonResponse([
        'status'  => 'error',
        'message' => 'Update failed.',
    ], 500);
}

/*
|--------------------------------------------------------------------------
| Search + Fetch
|--------------------------------------------------------------------------
*/
$search = trim((string)($_GET['search'] ?? ''));
$rows   = [];

if ($search !== '') {
    $like = '%' . $search . '%';

    $stmt = $conn->prepare("
        SELECT *
        FROM ipe_requests
        WHERE
            `user` LIKE ?
            OR tracking_id LIKE ?
            OR transaction_id LIKE ?
        ORDER BY id DESC
    ");

    if ($stmt) {
        $stmt->bind_param('sss', $like, $like, $like);
        $stmt->execute();
        $result = $stmt->get_result();
    } else {
        $result = false;
    }
} else {
    $result = $conn->query("
        SELECT *
        FROM ipe_requests
        ORDER BY id DESC
    ");
}

if ($result instanceof mysqli_result) {
    while ($row = $result->fetch_assoc()) {
        $rows[] = $row;
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>IPE Admin Panel</title>
    <style>
        :root{
            --bg:#071a2f;
            --bg-2:#091f39;
            --panel:#0b2545;
            --panel-2:#12345a;
            --line:rgba(255,255,255,.12);
            --text:#f5f7fb;
            --muted:#9db0c7;
            --primary:#00c896;
            --primary-dark:#06251b;
            --white:#ffffff;
            --danger:#ff6177;
            --warning:#ffb020;
            --success:#39d98a;
            --info:#4ba4ff;
            --shadow:0 12px 32px rgba(0,0,0,.28);
            --radius:16px;
        }

        *{
            box-sizing:border-box;
        }

        html,body{
            margin:0;
            padding:0;
        }

        body{
            background:linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
            color:var(--text);
            font-family:Inter, Arial, Helvetica, sans-serif;
            padding:20px;
        }

        .container{
            max-width:1450px;
            margin:0 auto;
            display:grid;
            gap:20px;
        }

        .card{
            background:rgba(11,37,69,.96);
            border:1px solid var(--line);
            border-radius:var(--radius);
            padding:20px;
            box-shadow:var(--shadow);
        }

        .topbar{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
        }

        .title{
            margin:0;
            font-size:28px;
            line-height:1.15;
            font-weight:800;
        }

        .subtitle{
            margin-top:6px;
            color:var(--muted);
            font-size:14px;
        }

        .search-form{
            display:flex;
            gap:10px;
            align-items:center;
            flex-wrap:wrap;
        }

        .stats-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:20px;
        }

        .stat-card{
            background:linear-gradient(180deg, rgba(18,52,90,.98) 0%, rgba(11,37,69,.98) 100%);
        }

        .stat-label{
            color:var(--muted);
            font-size:13px;
            text-transform:uppercase;
            letter-spacing:.08em;
            font-weight:800;
            margin-bottom:14px;
        }

        .stat-row{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:10px;
            padding:8px 0;
            border-bottom:1px solid rgba(255,255,255,.08);
        }

        .stat-row:last-child{
            border-bottom:none;
            padding-bottom:0;
        }

        .stat-name{
            color:#cfe0f5;
            font-size:14px;
            font-weight:600;
        }

        .stat-value{
            color:#ffffff;
            font-size:18px;
            font-weight:800;
        }

        .input,
        .select,
        .textarea,
        .report-editor{
            width:100%;
            border:1px solid #d8e0ec;
            background:#f8fbff;
            color:#0b1220;
            border-radius:10px;
            padding:10px 12px;
            font:inherit;
            outline:none;
        }

        .input:focus,
        .select:focus,
        .textarea:focus,
        .report-editor:focus{
            border-color:#4ba4ff;
            box-shadow:0 0 0 3px rgba(75,164,255,.15);
        }

        .search-input{
            width:min(360px, 100%);
        }

        .textarea{
            min-height:92px;
            resize:vertical;
        }

        .btn{
            border:none;
            border-radius:10px;
            padding:10px 14px;
            font:inherit;
            font-weight:700;
            cursor:pointer;
            transition:transform .15s ease, opacity .15s ease, filter .15s ease;
        }

        .btn:hover{
            transform:translateY(-1px);
            filter:brightness(1.02);
        }

        .btn:disabled{
            opacity:.7;
            cursor:not-allowed;
            transform:none;
        }

        .btn-primary{
            background:var(--primary);
            color:var(--primary-dark);
        }

        .btn-secondary{
            background:#ffffff;
            color:#111827;
        }

        .btn-ghost{
            background:#eaf1fb;
            color:#10233f;
        }

        .flash{
            display:none;
            margin-bottom:16px;
            padding:12px 14px;
            border-radius:12px;
            font-weight:700;
        }

        .flash.show{
            display:block;
        }

        .flash.success{
            background:rgba(57,217,138,.12);
            color:#7bf0b2;
            border:1px solid rgba(57,217,138,.28);
        }

        .flash.error{
            background:rgba(255,97,119,.12);
            color:#ff9baa;
            border:1px solid rgba(255,97,119,.28);
        }

        .table-wrap{
            overflow-x:auto;
            border-radius:14px;
        }

        table{
            width:100%;
            border-collapse:collapse;
            min-width:1150px;
        }

        th, td{
            padding:14px 12px;
            text-align:left;
            vertical-align:top;
            border-bottom:1px solid var(--line);
        }

        th{
            color:#d7e4f8;
            font-size:12px;
            text-transform:uppercase;
            letter-spacing:.05em;
            font-weight:800;
        }

        td{
            color:#eef4ff;
            font-size:14px;
        }

        .status-pill{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:110px;
            padding:6px 10px;
            border-radius:999px;
            font-size:12px;
            font-weight:800;
            margin-bottom:10px;
            text-transform:uppercase;
        }

        .status-pending{
            background:rgba(255,176,32,.14);
            color:var(--warning);
        }

        .status-processing{
            background:rgba(75,164,255,.14);
            color:var(--info);
        }

        .status-successful,
        .status-completed{
            background:rgba(57,217,138,.14);
            color:var(--success);
        }

        .status-failed{
            background:rgba(255,97,119,.14);
            color:#ff8f9f;
        }

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

        .mono{
            font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size:13px;
        }

        .date{
            color:#d6e0ef;
            white-space:nowrap;
        }

        .empty-state{
            color:var(--muted);
            padding:24px 8px;
        }

        .modal{
            display:none;
            position:fixed;
            inset:0;
            background:rgba(3,10,22,.78);
            z-index:9999;
            align-items:center;
            justify-content:center;
            padding:20px;
        }

        .modal.is-open{
            display:flex;
        }

        .modal-box{
            width:min(960px, 100%);
            max-height:88vh;
            background:#ffffff;
            color:#0b1220;
            border-radius:18px;
            overflow:hidden;
            box-shadow:0 24px 60px rgba(0,0,0,.35);
        }

        .modal-header{
            background:var(--panel);
            color:#ffffff;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:16px 20px;
        }

        .modal-title{
            font-size:18px;
            font-weight:800;
        }

        .icon-btn{
            background:transparent;
            color:#ffffff;
            border:none;
            font-size:26px;
            line-height:1;
            cursor:pointer;
        }

        .modal-body{
            padding:20px;
            max-height:calc(88vh - 70px);
            overflow:auto;
        }

        .report-editor{
            min-height:360px;
            resize:vertical;
            font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size:13px;
            line-height:1.55;
        }

        .modal-actions{
            display:flex;
            justify-content:flex-end;
            gap:10px;
            margin-top:14px;
            flex-wrap:wrap;
        }

        .muted-note{
            margin-top:10px;
            color:#5b6b82;
            font-size:12px;
        }

        @media (max-width: 1100px){
            .stats-grid{
                grid-template-columns:repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 900px){
            body{
                padding:14px;
            }

            .card{
                padding:16px;
            }

            .title{
                font-size:24px;
            }

            .search-input{
                width:100%;
            }

            .modal{
                padding:12px;
            }

            .modal-box{
                max-height:92vh;
            }

            .report-editor{
                min-height:280px;
            }
        }

        @media (max-width: 640px){
            .stats-grid{
                grid-template-columns:1fr;
            }
        }
    </style>
</head>
<body>
<div class="container">

    <section class="card">
        <div class="topbar">
            <div>
                <h1 class="title">IPE Admin Panel</h1>
                <div class="subtitle">Manage requests, update statuses, edit replies, and view or edit raw reports.</div>
            </div>

            <form method="get" class="search-form">
                <input
                    class="input search-input"
                    type="text"
                    name="search"
                    placeholder="Search user / tracking / transaction"
                    value="<?= e($search) ?>"
                >
                <button type="submit" class="btn btn-primary">Search</button>
            </form>
        </div>
    </section>

    <section class="stats-grid">
        <div class="card stat-card">
            <div class="stat-label">Today</div>
            <div class="stat-row">
                <span class="stat-name">Today Count</span>
                <span class="stat-value"><?= $stats['today']['count'] ?></span>
            </div>
            <div class="stat-row">
                <span class="stat-name">Today Spent</span>
                <span class="stat-value"><?= formatMoney($stats['today']['spent']) ?></span>
            </div>
        </div>

        <div class="card stat-card">
            <div class="stat-label">Weekly</div>
            <div class="stat-row">
                <span class="stat-name">Weekly Count</span>
                <span class="stat-value"><?= $stats['week']['count'] ?></span>
            </div>
            <div class="stat-row">
                <span class="stat-name">Weekly Spent</span>
                <span class="stat-value"><?= formatMoney($stats['week']['spent']) ?></span>
            </div>
        </div>

        <div class="card stat-card">
            <div class="stat-label">Monthly</div>
            <div class="stat-row">
                <span class="stat-name">Monthly Count</span>
                <span class="stat-value"><?= $stats['month']['count'] ?></span>
            </div>
            <div class="stat-row">
                <span class="stat-name">Monthly Spent</span>
                <span class="stat-value"><?= formatMoney($stats['month']['spent']) ?></span>
            </div>
        </div>

        <div class="card stat-card">
            <div class="stat-label">Total</div>
            <div class="stat-row">
                <span class="stat-name">Total Count</span>
                <span class="stat-value"><?= $stats['total']['count'] ?></span>
            </div>
            <div class="stat-row">
                <span class="stat-name">Total Spent</span>
                <span class="stat-value"><?= formatMoney($stats['total']['spent']) ?></span>
            </div>
        </div>
    </section>

    <section class="card">
        <div id="flash" class="flash"></div>

        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>User</th>
                        <th>Tracking</th>
                        <th>Transaction</th>
                        <th>Status</th>
                        <th>Reply</th>
                        <th>Report</th>
                        <th>Action</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
                <?php if (empty($rows)): ?>
                    <tr>
                        <td colspan="9" class="empty-state">No requests found.</td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($rows as $row): ?>
                        <?php
                            $id = (int)($row['id'] ?? 0);
                            $currentStatus = strtoupper((string)($row['status'] ?? 'PENDING'));

                            $statusClass = match ($currentStatus) {
                                'SUCCESSFUL' => 'status-successful',
                                'COMPLETED'  => 'status-completed',
                                'FAILED'     => 'status-failed',
                                'PROCESSING' => 'status-processing',
                                default      => 'status-pending',
                            };
                        ?>
                        <tr id="row-<?= $id ?>">
                            <td><?= $id ?></td>

                            <td><?= e($row['user'] ?? '') ?></td>

                            <td class="mono"><?= e($row['tracking_id'] ?? '') ?></td>

                            <td class="mono"><?= e($row['transaction_id'] ?? '') ?></td>

                            <td>
                                <div
                                    class="status-pill <?= $statusClass ?>"
                                    id="status-pill-<?= $id ?>"
                                >
                                    <?= e($currentStatus) ?>
                                </div>

                                <select class="select" id="status-<?= $id ?>">
                                    <?php foreach ($allowedStatuses as $status): ?>
                                        <option
                                            value="<?= e($status) ?>"
                                            <?= $currentStatus === $status ? 'selected' : '' ?>
                                        >
                                            <?= e($status) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </td>

                            <td>
                                <textarea class="textarea" id="reply-<?= $id ?>"><?= e($row['reply'] ?? '') ?></textarea>
                            </td>

                            <td>
                                <button
                                    type="button"
                                    class="btn btn-secondary"
                                    data-view-report="<?= $id ?>"
                                >
                                    View / Edit
                                </button>

                                <textarea id="report-data-<?= $id ?>" hidden><?= e($row['raw_response'] ?? '') ?></textarea>
                            </td>

                            <td>
                                <div class="actions">
                                    <button
                                        type="button"
                                        class="btn btn-primary"
                                        data-save-request="<?= $id ?>"
                                    >
                                        Update
                                    </button>
                                </div>
                            </td>

                            <td class="date"><?= e((string)($row['created_at'] ?? '')) ?></td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
                </tbody>
            </table>
        </div>
    </section>
</div>

<div class="modal" id="reportModal" aria-hidden="true">
    <div class="modal-box">
        <div class="modal-header">
            <div class="modal-title">Raw Report</div>
            <button type="button" class="icon-btn" id="closeModalBtn" aria-label="Close">×</button>
        </div>

        <div class="modal-body">
            <textarea id="modalReportInput" class="report-editor" placeholder="Edit raw report content here..."></textarea>

            <div class="modal-actions">
                <button type="button" class="btn btn-ghost" id="formatJsonBtn">Format JSON</button>
                <button type="button" class="btn btn-primary" id="saveModalReportBtn">Save Report</button>
            </div>

            <div class="muted-note">
                Tip: You can edit the raw report here and save it directly without closing the admin page.
            </div>
        </div>
    </div>
</div>

<script>
    const csrfToken = <?= json_encode($_SESSION['csrf_token']) ?>;

    const flash = document.getElementById('flash');
    const modal = document.getElementById('reportModal');
    const modalReportInput = document.getElementById('modalReportInput');
    const closeModalBtn = document.getElementById('closeModalBtn');
    const saveModalReportBtn = document.getElementById('saveModalReportBtn');
    const formatJsonBtn = document.getElementById('formatJsonBtn');

    let currentReportId = null;

    function showFlash(message, type = 'success') {
        flash.textContent = message;
        flash.className = `flash show ${type}`;

        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });

        clearTimeout(showFlash._timer);
        showFlash._timer = setTimeout(() => {
            flash.className = 'flash';
            flash.textContent = '';
        }, 3500);
    }

    function getStatusClass(status) {
        const s = String(status || '').toUpperCase();

        switch (s) {
            case 'SUCCESSFUL':
                return 'status-successful';
            case 'COMPLETED':
                return 'status-completed';
            case 'FAILED':
                return 'status-failed';
            case 'PROCESSING':
                return 'status-processing';
            default:
                return 'status-pending';
        }
    }

    function updateStatusPill(id, status) {
        const pill = document.getElementById(`status-pill-${id}`);
        if (!pill) return;

        pill.className = `status-pill ${getStatusClass(status)}`;
        pill.textContent = String(status || '').toUpperCase();
    }

    function openModal(id) {
        currentReportId = id;

        const source = document.getElementById(`report-data-${id}`);
        modalReportInput.value = source ? source.value : '';

        modal.classList.add('is-open');
        modal.setAttribute('aria-hidden', 'false');

        setTimeout(() => {
            modalReportInput.focus();
        }, 60);
    }

    function closeModal() {
        modal.classList.remove('is-open');
        modal.setAttribute('aria-hidden', 'true');
        modalReportInput.value = '';
        currentReportId = null;
    }

    async function saveRequest(id, button = null) {
        const status = document.getElementById(`status-${id}`)?.value ?? '';
        const reply = document.getElementById(`reply-${id}`)?.value ?? '';
        const rawResponse = document.getElementById(`report-data-${id}`)?.value ?? '';

        const body = new URLSearchParams({
            update_request: '1',
            csrf_token: csrfToken,
            id: String(id),
            status,
            reply,
            raw_response: rawResponse
        });

        if (button) {
            button.disabled = true;
            button.dataset.originalText = button.textContent;
            button.textContent = 'Saving...';
        }

        try {
            const response = await fetch(window.location.href, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body
            });

            let data = null;

            try {
                data = await response.json();
            } catch (jsonError) {
                throw new Error('Server returned an invalid response.');
            }

            if (!response.ok || data.status !== 'success') {
                throw new Error(data.message || 'Update failed.');
            }

            updateStatusPill(id, status);
            showFlash(data.message || 'Updated successfully.', 'success');
            return true;
        } catch (error) {
            showFlash(error.message || 'Something went wrong.', 'error');
            return false;
        } finally {
            if (button) {
                button.disabled = false;
                button.textContent = button.dataset.originalText || 'Save';
            }
        }
    }

    document.querySelectorAll('[data-view-report]').forEach(button => {
        button.addEventListener('click', () => {
            const id = button.getAttribute('data-view-report');
            openModal(id);
        });
    });

    document.querySelectorAll('[data-save-request]').forEach(button => {
        button.addEventListener('click', async () => {
            const id = button.getAttribute('data-save-request');
            await saveRequest(id, button);
        });
    });

    saveModalReportBtn.addEventListener('click', async () => {
        if (!currentReportId) return;

        const hiddenField = document.getElementById(`report-data-${currentReportId}`);
        if (hiddenField) {
            hiddenField.value = modalReportInput.value;
        }

        const ok = await saveRequest(currentReportId, saveModalReportBtn);
        if (ok) {
            closeModal();
        }
    });

    formatJsonBtn.addEventListener('click', () => {
        const text = modalReportInput.value.trim();

        if (!text) {
            showFlash('Report is empty.', 'error');
            return;
        }

        try {
            const parsed = JSON.parse(text);
            modalReportInput.value = JSON.stringify(parsed, null, 2);
        } catch (e) {
            showFlash('Report content is not valid JSON.', 'error');
        }
    });

    closeModalBtn.addEventListener('click', closeModal);

    modal.addEventListener('click', (event) => {
        if (event.target === modal) {
            closeModal();
        }
    });

    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && modal.classList.contains('is-open')) {
            closeModal();
        }
    });
</script>
</body>
</html>