<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex,nofollow">
    {% if redirect_to %}<meta http-equiv="refresh" content="{{ delay }};url={{ redirect_to }}">{% endif %}
    <title>نتیجه پرداخت</title>
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
    <style>
        @font-face {
            font-family: 'Vazirmatn';
            src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
            font-weight: 400; font-display: swap;
        }
        @font-face {
            font-family: 'Vazirmatn';
            src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
            font-weight: 700; font-display: swap;
        }
        :root {
            /* هم‌تراز با تم پنل clinic-pro (assets/admin/styles.css) */
            --ok:#15a35a; --ok-soft:#e6f6ed;
            --err:#e0394a; --err-soft:#fdebed;
            --warn:#d98a09; --warn-soft:#fcf2df;
            --ink:#0f1b2e; --muted:#56657c; --line:#e4e9f1;
            --primary:#5457dd; --primary-600:#464ac9;
            --shadow-lg:0 12px 32px rgba(15,27,46,.12), 0 4px 10px rgba(15,27,46,.06);
            --ease:cubic-bezier(.22,.61,.36,1);
        }
        * { box-sizing: border-box; }
        html, body { height: 100%; }
        body {
            margin:0; font-family:'Vazirmatn', ui-sans-serif, system-ui, sans-serif; color:var(--ink);
            background: radial-gradient(1200px 600px at 50% -10%, #e9eefb 0%, #eef2f8 45%, #e6ecf4 100%);
            min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
        }
        .card {
            position:relative; overflow:hidden; background:var(--surface,#fff); border:1px solid var(--line);
            border-radius:24px; box-shadow:var(--shadow-lg); width:100%; max-width:420px;
            padding:40px 28px 30px; text-align:center; animation:rise .45s var(--ease) both;
        }
        @keyframes rise { from { opacity:0; transform:translateY(14px) scale(.98); } }
        .accent { position:absolute; inset:0 0 auto 0; height:6px; }
        .accent.ok { background:linear-gradient(90deg,#15a35a,#3fca7d); }
        .accent.err { background:linear-gradient(90deg,#e0394a,#f07a86); }
        .accent.warn { background:linear-gradient(90deg,#d98a09,#f2b545); }

        .badge { width:96px; height:96px; margin:6px auto 20px; position:relative; }
        .badge .ring {
            position:absolute; inset:0; border-radius:50%;
            animation:pop .5s cubic-bezier(.2,.8,.2,1.2) .05s both;
        }
        .badge.ok .ring { background:var(--ok-soft); }
        .badge.err .ring { background:var(--err-soft); }
        .badge.warn .ring { background:var(--warn-soft); }
        .badge svg { position:absolute; inset:0; width:96px; height:96px; }
        @keyframes pop { from { transform:scale(.4); opacity:0; } }
        .draw { fill:none; stroke-width:6; stroke-linecap:round; stroke-linejoin:round;
                stroke-dasharray:80; stroke-dashoffset:80; animation:draw .6s ease .35s forwards; }
        .badge.ok .draw { stroke:var(--ok); }
        .badge.err .draw { stroke:var(--err); }
        .badge.warn .draw { stroke:var(--warn); }
        @keyframes draw { to { stroke-dashoffset:0; } }

        h1 { font-size:21px; font-weight:700; margin:0 0 8px; }
        p.msg { color:var(--muted); font-size:14px; margin:0 auto 22px; line-height:2; max-width:320px; }

        .amount { font-size:15px; color:var(--muted); margin-bottom:22px; }
        .amount b { display:block; font-size:26px; color:var(--ink); margin-top:4px; font-weight:700; }
        .amount b small { font-size:14px; font-weight:400; color:var(--muted); }

        .rows { text-align:right; background:#f6f8fc; border:1px solid var(--line); border-radius:14px;
                padding:6px 14px; margin-bottom:22px; }
        .row { display:flex; justify-content:space-between; align-items:center; padding:11px 0; font-size:13.5px; }
        .row + .row { border-top:1px dashed var(--line); }
        .row span { color:var(--muted); }
        .row b { font-weight:700; font-variant-numeric:tabular-nums; }
        .btn { display:block; width:100%; padding:13px; border-radius:12px; text-decoration:none;
               font-weight:700; font-size:15px; background:var(--primary); color:#fff; border:none; cursor:pointer;
               transition:filter .15s, transform .05s; }
        .btn:hover { background:var(--primary-600); }
        .btn:active { transform:translateY(1px); }
        .hint { color:#9aa1ad; font-size:12.5px; margin:6px 0 0; }
        .brand { margin-top:20px; font-size:11.5px; color:#aeb4c0; letter-spacing:.2px; }
    </style>
</head>
<body>
    {% set kind = status == 'success' ? 'ok' : (status == 'pending' ? 'warn' : 'err') %}
    <div class="card">
        <div class="accent {{ kind }}"></div>

        <div class="badge {{ kind }}">
            <div class="ring"></div>
            <svg viewBox="0 0 96 96" aria-hidden="true">
                {% if status == 'success' %}
                    <path class="draw" d="M30 50 L44 63 L68 35"/>
                {% elseif status == 'pending' %}
                    <path class="draw" d="M48 30 L48 50 L62 58"/>
                    <circle class="draw" cx="48" cy="48" r="0.5"/>
                {% else %}
                    <path class="draw" d="M36 36 L60 60"/>
                    <path class="draw" d="M60 36 L36 60"/>
                {% endif %}
            </svg>
        </div>

        <h1>{{ title }}</h1>
        <p class="msg">{{ message }}</p>

        {% if payment %}
            <div class="amount">
                مبلغ
                <b>{{ payment.amount_rials|number_format(0, '.', ',') }} <small>ریال</small></b>
            </div>
            <div class="rows">
                <div class="row"><span>شماره سفارش</span><b dir="ltr">{{ payment.order_id }}</b></div>
                {% if payment.reference_id %}<div class="row"><span>شماره مرجع</span><b dir="ltr">{{ payment.reference_id }}</b></div>{% endif %}
                <div class="row"><span>درگاه</span><b>{{ payment.gateway == 'sep' ? 'سپ (سامان کیش)' : (payment.gateway == 'mellat' ? 'بانک ملت' : payment.gateway) }}</b></div>
            </div>
        {% endif %}

        {% if redirect_to %}
            <a class="btn" href="{{ redirect_to }}">بازگشت به سایت</a>
            <p class="hint">در حال انتقال خودکار طی <b id="cd">{{ delay }}</b> ثانیه…</p>
        {% else %}
            <p class="hint">می‌توانید این صفحه را ببندید و به برنامه بازگردید.</p>
        {% endif %}

        <div class="brand">پرداخت امن از طریق درگاه بانکی</div>
    </div>

    {% if redirect_to %}
    <script>
        (function () {
            var n = {{ delay }}, el = document.getElementById('cd');
            var t = setInterval(function () {
                n -= 1;
                if (el) el.textContent = n > 0 ? n : 0;
                if (n <= 0) { clearInterval(t); window.location.href = {{ redirect_to|json_encode|raw }}; }
            }, 1000);
        })();
    </script>
    {% endif %}
</body>
</html>
