{% extends 'base.html' %}
{% load static %}

{% block content %}
<style>
    .success-container {
        max-width: 600px;
        margin: 50px auto;
        padding: 30px;
        background: #C2EFB3;
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        color: white;
        text-align: center;
        direction: rtl;
    }
    
    .success-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 20px auto;
        display: block;
    }
    
    .success-title {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #002e21;
    }
    
    .meeting-info {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        padding: 25px;
        margin: 25px 0;
        backdrop-filter: blur(10px);
    }
    
    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px 0;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .info-label {
        font-weight: bold;
        color: #002e21;
    }
    
    .info-value {
        color: #009A6E;
        font-weight: 500;
    }
    
    .payment-details {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        padding: 20px;
        margin: 20px 0;
    }
    
    .ref-id {
        background: #4CAF50;
        color: white;
        padding: 10px 20px;
        border-radius: 25px;
        display: inline-block;
        margin: 15px 0;
        font-weight: bold;
    }
    
    .next-steps {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 20px;
        margin: 20px 0;
        border-right: 4px solid #4CAF50;
    }
    
    .steps-title {
        font-weight: bold;
        margin-bottom: 15px;
        color: #4CAF50;
    }
    
    .step-item {
        margin: 10px 0;
        padding: 8px 0;
        display: flex;
        align-items: center;
        color: #009A6E;
    }
    
    .step-number {
        background: #4CAF50;
        color: white;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        font-size: 14px;
        font-weight: bold;
    }
    
    .app-button {
        background: #4CAF50;
        color: white;
        padding: 15px 30px;
        border-radius: 25px;
        text-decoration: none;
        display: inline-block;
        margin: 20px 10px;
        font-weight: bold;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }
    
    .app-button:hover {
        background: #45a049;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
        color: white;
        text-decoration: none;
    }
    
    .error-container {
        background: white;
        border-radius: 20px;
        padding: 30px;
        max-width: 600px;
        margin: 50px auto;
        text-align: center;
        color: black;
        direction: rtl;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    
    .error-icon {
        font-size: 80px;
        color: #ffeb3b;
        margin-bottom: 20px;
    }
</style>

<div class="container">
    {% if success %}
        <div class="success-container">
            <svg class="success-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
                <g>
                    <g data-name="Layer 2">
                        <path fill="#38e894" d="M21.07 8.82a1.25 1.25 0 0 1-.49-1.18c.42-2.64-.06-3.45-.42-3.81S19 3 16.36 3.42a1.27 1.27 0 0 1-1.18-.49C13.44.61 12.53.34 12 .34s-1.44.27-3.18 2.59a1.27 1.27 0 0 1-1.18.49C5 3 4.2 3.48 3.84 3.83S3 5 3.42 7.64a1.25 1.25 0 0 1-.49 1.18C.61 10.56.35 11.47.35 12s.26 1.44 2.58 3.18a1.25 1.25 0 0 1 .49 1.18c-.38 2.66.06 3.45.42 3.81s1.14.79 3.8.41a1.25 1.25 0 0 1 1.18.49c1.74 2.32 2.65 2.59 3.18 2.59s1.44-.27 3.18-2.59a1.25 1.25 0 0 1 1.18-.49c2.67.38 3.44-.06 3.8-.41s.8-1.15.42-3.81a1.25 1.25 0 0 1 .49-1.18c2.32-1.74 2.58-2.65 2.58-3.18s-.26-1.44-2.58-3.18z" opacity="1" data-original="#38e894"></path>
                        <path fill="#ffffff" d="M11.5 15.5a1 1 0 0 1-.71-.29l-2-2a1 1 0 0 1 1.42-1.42l1.29 1.3 3.29-3.3a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.42l-4 4a1 1 0 0 1-.71.29z" opacity="1" data-original="#ffffff"></path>
                    </g>
                </g>
            </svg>
            <h1 class="success-title">{{ title }}</h1>
            
            <div class="meeting-info">
                <h3 style="margin-bottom: 20px; color: #4CAF50;">اطلاعات جلسه مشاوره</h3>
                
                <div class="info-row">
                    <span class="info-label">نام کاربر:</span>
                    <span class="info-value">{{ user_name }}</span>
                </div>
                
                <div class="info-row">
                    <span class="info-label">تاریخ جلسه:</span>
                    <span class="info-value">{{ meeting_date }}</span>
                </div>
                
                <div class="info-row">
                    <span class="info-label">ساعت جلسه:</span>
                    <span class="info-value">{{ meeting_time }}</span>
                </div>
                
                <div class="info-row">
                    <span class="info-label">مدت زمان:</span>
                    <span class="info-value">{{ duration }} دقیقه</span>
                </div>
                
                <div class="info-row">
                    <span class="info-label">نوع پرداخت:</span>
                    <span class="info-value">{{ payment_type }}</span>
                </div>
            </div>
            
            <div class="payment-details">
                <h4 style="margin-bottom: 15px; color:#002e21">جزئیات پرداخت</h4>
                <div class="ref-id">
                    شماره پیگیری: {{ ref_id }}
                </div>
                <p style="margin: 10px 0; font-size: 14px; color:#002e21">مبلغ پرداختی: {{ amount }} تومان</p>
            </div>
            
            <div class="next-steps">
                <h4 class="steps-title">مراحل بعدی</h4>
                <div class="step-item">
                    <span class="step-number">1</span>
                    <span>جلسه شما به درمانگر اختصاص داده خواهد شد</span>
                </div>
                <div class="step-item">
                    <span class="step-number">2</span>
                    <span>اطلاعیه زمان دقیق جلسه برای شما ارسال می‌شود</span>
                </div>
                <div class="step-item">
                    <span class="step-number">3</span>
                    <span>لینک ورود به جلسه در زمان مقرر فعال خواهد شد</span>
                </div>
            </div>
            
            <div style="margin-top: 30px;">
                <a href="{{ deep_link_url }}" class="app-button" id="return-to-app-btn">بازگشت به اپلیکیشن</a>
                
                <!-- Debug information (remove in production) -->
                {% if debug %}
                <div style="margin-top: 15px; padding: 10px; background: rgba(255,255,255,0.2); border-radius: 8px; font-size: 12px; color: #002e21;">
                    <strong>Debug Info:</strong><br>
                    Deep Link: {{ deep_link_url }}<br>
                    Timeslot ID: {{ timeslot_id }}<br>
                    Transaction ID: {{ transaction_id }}
                </div>
                {% endif %}
            </div>
        </div>
    {% else %}
        <div class="error-container">
            <div class="error-icon">❌</div>
            <h1 class="success-title">{{ title }}</h1>
            <p style="font-size: 18px; margin: 20px 0;">{{ message }}</p>
            <a href="{{ deep_link_url }}" class="app-button" id="return-to-app-btn">بازگشت به اپلیکیشن</a>
        </div>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const returnBtn = document.getElementById('return-to-app-btn');
    if (returnBtn) {
        returnBtn.addEventListener('click', function(e) {
            e.preventDefault();
            
            const deepLinkUrl = this.href;
            const fallbackUrl = 'https://lacto.ir';
            
            // Try to open the deep link
            window.location.href = deepLinkUrl;
            
            // Fallback: if deep link doesn't work, redirect to website after a short delay
            setTimeout(function() {
                // Check if we're still on the same page (deep link didn't work)
                if (window.location.href === window.location.href) {
                    window.location.href = fallbackUrl;
                }
            }, 2000);
        });
    }
    
    // Also handle the case where user might click the button multiple times
    let isRedirecting = false;
    
    function handleDeepLinkRedirect(deepLinkUrl, fallbackUrl) {
        if (isRedirecting) return;
        isRedirecting = true;
        
        try {
            // Try deep link first
            window.location.href = deepLinkUrl;
            
            // Fallback after delay
            setTimeout(function() {
                if (!isRedirecting) return;
                window.location.href = fallbackUrl;
            }, 2000);
        } catch (error) {
            console.error('Deep link error:', error);
            window.location.href = fallbackUrl;
        }
    }
    
    // Add click handler with the redirect function
    if (returnBtn) {
        returnBtn.onclick = function(e) {
            e.preventDefault();
            const deepLinkUrl = this.href;
            const fallbackUrl = 'https://lacto.ir';
            handleDeepLinkRedirect(deepLinkUrl, fallbackUrl);
        };
    }
});
</script>
{% endblock %}