<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Secure Payment - <?= get_option('site_name', 'Your Site') ?></title>
    <link rel="shortcut icon" type="image/x-icon" href="<?= BASE_SITE . get_option('site_icon', BASE_SITE . "assets/images/favicon.png") ?>">
    <?= link_asset('css/style4.css') ?>
    <?= link_asset('toast/toastr.min.css') ?>
    <?= script_asset('js/jquery.js') ?>
    <?= script_asset('toast/toastr.min.js') ?>

    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <style>
        :root {
            --bg1: <?= $bg ?>;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Nunito', sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }

        /* ── per-status body bg ── */
        body.s-success { background: #f0f5ff; }
        body.s-error   { background: #fff3f4; }

        /* ════════════════════════════
           CARD
        ════════════════════════════ */
        .card {
            width: 100%;
            max-width: 460px;
            border-radius: 24px;
            overflow: hidden;
            background: #fff;
        }

        body.s-success .card {
            box-shadow: 0 8px 40px rgba(0, 87, 208, 0.13);
        }
        body.s-error .card {
            box-shadow: 0 8px 40px rgba(208, 0, 40, 0.12);
        }

        /* ════════════════════════════
           HEADER
        ════════════════════════════ */
        .card-header {
            padding: 28px 28px 24px;
            display: flex;
            align-items: center;
            gap: 16px;
            border-bottom: 1px solid;
        }

        body.s-success .card-header {
            background: #eef4ff;
            border-color: #d5e5ff;
        }
        body.s-error .card-header {
            background: #fff0f1;
            border-color: #ffd5d8;
        }

        .logo-box {
            width: 60px;
            height: 60px;
            border-radius: 14px;
            overflow: hidden;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        body.s-success .logo-box { box-shadow: 0 2px 12px rgba(0,87,208,0.12); }
        body.s-error   .logo-box { box-shadow: 0 2px 12px rgba(208,0,40,0.10); }

        .logo-box img {
            width: 52px;
            height: 52px;
            object-fit: contain;
        }

        .header-info { flex: 1; min-width: 0; }

        .business-name {
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: -0.01em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        body.s-success .business-name { color: #1a3066; }
        body.s-error   .business-name { color: #661a22; }

        .secure-label {
            font-size: 0.72rem;
            font-weight: 500;
            margin-top: 2px;
        }
        body.s-success .secure-label { color: #7a9ed0; }
        body.s-error   .secure-label { color: #d07a85; }

        /* status pill */
        .status-pill {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 13px;
            border-radius: 50px;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            flex-shrink: 0;
        }

        body.s-success .status-pill {
            background: #0057d0;
            color: #fff;
        }
        body.s-error .status-pill {
            background: #d00028;
            color: #fff;
        }

        .pill-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }
        body.s-success .pill-dot { background: #7dd7ff; }
        body.s-error   .pill-dot { background: #ffaaaa; }

        /* ════════════════════════════
           SECTION TITLE
        ════════════════════════════ */
        .section-title {
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            padding: 22px 28px 12px;
        }
        body.s-success .section-title { color: #0057d0; }
        body.s-error   .section-title { color: #d00028; }

        /* ════════════════════════════
           DETAIL ROWS
        ════════════════════════════ */
        .detail-list {
            list-style: none;
            padding: 0 20px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .detail-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            border-radius: 12px;
            gap: 12px;
        }

        body.s-success .detail-row { background: #f5f9ff; }
        body.s-error   .detail-row { background: #fff5f6; }

        body.s-success .detail-row.big { background: #e8f0ff; }
        body.s-error   .detail-row.big { background: #ffe8eb; }

        .row-label {
            font-size: 0.76rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        body.s-success .row-label { color: #7a99c8; }
        body.s-error   .row-label { color: #c87a85; }

        .row-label svg { flex-shrink: 0; }

        .row-value {
            font-size: 0.82rem;
            font-weight: 700;
            text-align: right;
            word-break: break-all;
            max-width: 58%;
        }
        body.s-success .row-value { color: #1a3066; }
        body.s-error   .row-value { color: #661a22; }

        /* amount */
        .row-value.amount {
            font-size: 1.2rem;
            font-weight: 800;
            letter-spacing: -0.02em;
        }
        body.s-success .row-value.amount { color: #0057d0; }
        body.s-error   .row-value.amount { color: #d00028; }

        /* status value */
        .row-value.status-val {
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.06em;
        }
        body.s-success .row-value.status-val { color: #0057d0; }
        body.s-error   .row-value.status-val { color: #d00028; }

        /* ════════════════════════════
           FOOTER
        ════════════════════════════ */
        .card-footer {
            padding: 20px 20px 24px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* notice */
        .notice {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 10px;
            font-size: 0.75rem;
            font-weight: 600;
            background: #fffae8;
            border: 1px solid #ffe08a;
            color: #7a5e00;
        }
        .notice svg { flex-shrink: 0; color: #d4a000; }

        /* countdown bar */
        .countdown-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px;
            border-radius: 14px;
            border: 1.5px solid;
        }

        body.s-success .countdown-bar {
            background: #f0f6ff;
            border-color: #c5d9ff;
        }
        body.s-error .countdown-bar {
            background: #fff0f2;
            border-color: #ffc5cc;
        }

        .countdown-left {
            font-size: 0.78rem;
            font-weight: 600;
            line-height: 1.5;
        }
        body.s-success .countdown-left { color: #3a5a99; }
        body.s-error   .countdown-left { color: #993a45; }

        .countdown-left span {
            display: block;
            font-size: 0.7rem;
            font-weight: 500;
            opacity: 0.65;
            margin-top: 1px;
        }

        /* number bubble */
        .countdown-num-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

        .countdown-num-box {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 800;
            letter-spacing: -0.03em;
        }
        body.s-success .countdown-num-box {
            background: #0057d0;
            color: #fff;
        }
        body.s-error .countdown-num-box {
            background: #d00028;
            color: #fff;
        }

        .countdown-sec-label {
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        body.s-success .countdown-sec-label { color: #7a99c8; }
        body.s-error   .countdown-sec-label { color: #c87a85; }

        /* ════════════════════════════
           PROGRESS BAR
        ════════════════════════════ */
        .progress-track {
            height: 4px;
            border-radius: 99px;
            overflow: hidden;
        }
        body.s-success .progress-track { background: #dce8ff; }
        body.s-error   .progress-track { background: #ffd5d8; }

        .progress-fill {
            height: 100%;
            border-radius: 99px;
            width: 100%;
            transform-origin: left;
            transition: transform 1s linear;
        }
        body.s-success .progress-fill { background: #0057d0; }
        body.s-error   .progress-fill { background: #d00028; }

        /* ════════════════════════════
           PHONE
        ════════════════════════════ */
        @media (max-width: 420px) {
            .card { border-radius: 18px; }
            .card-header { padding: 20px 18px 18px; gap: 12px; }
            .logo-box { width: 50px; height: 50px; border-radius: 11px; }
            .logo-box img { width: 42px; height: 42px; }
            .business-name { font-size: 0.9rem; }
            .section-title { padding: 18px 18px 10px; }
            .detail-list { padding: 0 12px; gap: 5px; }
            .detail-row { padding: 10px 12px; border-radius: 10px; }
            .row-value.amount { font-size: 1.05rem; }
            .card-footer { padding: 14px 12px 18px; gap: 8px; }
            .countdown-bar { padding: 12px 14px; }
        }
    </style>
</head>

<body class="s-<?= strtolower($status) === 'success' ? 'success' : 'error' ?>">

<div class="card">

    <!-- HEADER -->
    <div class="card-header">
        <div class="logo-box">
            <img src="<?= BASE_SITE . @$business_logo; ?>" alt="<?= @$business_name; ?>">
        </div>
        <div class="header-info">
            <div class="business-name"><?= @$business_name; ?></div>
            <div class="secure-label">Secure Payment Gateway</div>
        </div>
        <div class="status-pill">
            <div class="pill-dot"></div>
            <?= strtoupper($status); ?>
        </div>
    </div>

    <!-- DETAILS -->
    <div class="section-title">Transaction Details</div>

    <ul class="detail-list">

        <li class="detail-row">
            <span class="row-label">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
                Payment Type
            </span>
            <span class="row-value"><?= ucwords($temp_method); ?></span>
        </li>

        <li class="detail-row">
            <span class="row-label">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                Transaction ID
            </span>
            <span class="row-value"><?= $temp_transaction_id; ?></span>
        </li>

        <li class="detail-row big">
            <span class="row-label">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                Amount
            </span>
            <span class="row-value amount"><?= currency_format($temp_amount); ?></span>
        </li>

        <li class="detail-row">
            <span class="row-label">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                Status
            </span>
            <span class="row-value status-val"><?= strtoupper($status); ?></span>
        </li>

    </ul>

    <!-- FOOTER -->
    <div class="card-footer">

        <div class="notice">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
            Please don't close the browser!
        </div>

        <div class="countdown-bar">
            <div class="countdown-left">
                You will be redirected
                <span>Please wait a moment…</span>
            </div>
            <div class="countdown-num-wrap">
                <div class="countdown-num-box">
                    <span id="redirect_countdown">5</span>
                </div>
                <div class="countdown-sec-label">seconds</div>
            </div>
        </div>

        <div class="progress-track">
            <div class="progress-fill" id="prog-fill"></div>
        </div>

    </div>
</div>

<script>
    showToast('<?= $message ?>', '<?= $status ?>');

    var timeleft    = 5;
    var total       = 5;
    var redirectUrl = "<?= $redirect_url; ?>";
    var fill        = document.getElementById('prog-fill');

    // initial bar full
    fill.style.transform = 'scaleX(1)';

    var downloadTimer = setInterval(function () {
        if (timeleft <= 0) {
            clearInterval(downloadTimer);
            window.location.replace(redirectUrl);
        } else {
            document.getElementById("redirect_countdown").innerHTML = timeleft;
            fill.style.transform = 'scaleX(' + (timeleft / total) + ')';
        }
        timeleft -= 1;
    }, 1000);
</script>

</body>
</html>
