{% extends 'base.html' %}
{% block title %}نوبت ثبت شد{% endblock %}

{% block content %}
<div class="row justify-content-center text-center mt-4">
    <div class="col-lg-5 col-md-7">
        <div class="glass-card position-relative overflow-hidden">
            <!-- Decorative circle behind ticket -->
            <div class="position-absolute" style="top: -50px; right: -50px; width: 150px; height: 150px; background: rgba(24,157,95,0.05); border-radius: 50%;"></div>
            
            <div class="mb-4">
                <i class="bi bi-check-circle-fill" style="font-size: 5rem; color: var(--primary); text-shadow: 0 4px 15px rgba(24,157,95,0.4);"></i>
            </div>
            
            <h3 class="mb-3 fw-bold">نوبت شما با موفقیت ثبت شد</h3>
            
            <div class="p-4 rounded-4 mt-4 mb-4" style="background: #f8f9fa; border: 2px dashed var(--primary);">
                <p class="text-muted mb-2">شماره نوبت شما</p>
                <div class="display-1 fw-bold" style="color: var(--primary); letter-spacing: -2px;">{{ ticket }}</div>
            </div>
            
            <p class="text-muted mb-4 fs-5">لطفاً تا زمان فراخوانی شماره در سالن منتظر بمانید.</p>
            
            <hr class="my-4" style="border-color: #e2e8f0;">
            
            <div class="bg-light p-4 rounded-4 text-start border">
                <h5 class="mb-2 fw-bold text-dark"><i class="bi bi-telegram text-info me-2"></i>اتصال به ربات تلگرام</h5>
                <p class="small text-muted mb-3">برای دریافت لحظه‌ای وضعیت نوبت، رسید پرداخت و اطلاعیه‌ها، حساب خود را متصل کنید.</p>
                <a href="https://t.me/YOUR_BOT_USERNAME?start={{ token }}" class="btn btn-info text-white w-100 py-2 fw-bold" target="_blank" style="background: #0088cc; border: none;">
                    اتصال به تلگرام
                </a>
            </div>
            
            <div class="mt-4">
                <a href="/" class="btn btn-outline-secondary w-100 py-2 rounded-3">بازگشت به صفحه اصلی</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}