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

{% block content %}
<style>
    .success-container {
        max-width: 600px;
        margin: 50px auto;
        padding: 30px;
        background: white;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        color: #333;
        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: #4CAF50;
    }
    
    .plan-info {
        background: #f5f5f5;
        border-radius: 15px;
        padding: 25px;
        margin: 25px 0;
        border: 1px solid #e0e0e0;
    }
    
    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px 0;
        padding: 10px 0;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .info-row:last-child {
        border-bottom: none;
    }
    
    .info-label {
        font-weight: bold;
        color: #666;
        font-size: 16px;
    }
    
    .info-value {
        color: #333;
        font-weight: 600;
        font-size: 16px;
    }
    
    .payment-details {
        background: #f5f5f5;
        border-radius: 15px;
        padding: 20px;
        margin: 20px 0;
        border: 1px solid #e0e0e0;
    }
    
    .ref-id {
        background: #4CAF50;
        color: white;
        padding: 12px 25px;
        border-radius: 25px;
        display: inline-block;
        margin: 15px 0;
        font-weight: bold;
        font-size: 16px;
        border: 2px solid #45a049;
    }
    
    .plan-badge {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
        padding: 8px 20px;
        border-radius: 20px;
        display: inline-block;
        font-weight: bold;
        font-size: 14px;
        margin: 10px 0;
    }
    
    .duration-badge {
        background: #E3F2FD;
        color: #1976D2;
        padding: 6px 15px;
        border-radius: 15px;
        display: inline-block;
        font-size: 14px;
        margin: 5px;
        border: 1px solid #BBDEFB;
    }
    
    .next-steps {
        background: #f5f5f5;
        border-radius: 15px;
        padding: 20px;
        margin: 20px 0;
        border-right: 4px solid #4CAF50;
        border: 1px solid #e0e0e0;
    }
    
    .steps-title {
        font-weight: bold;
        margin-bottom: 15px;
        color: #4CAF50;
        font-size: 18px;
    }
    
    .step-item {
        margin: 12px 0;
        padding: 10px;
        display: flex;
        align-items: center;
        color: #666;
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    
    .step-number {
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        min-width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 12px;
        font-size: 16px;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .app-button {
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        padding: 16px 40px;
        border-radius: 30px;
        text-decoration: none;
        display: inline-block;
        margin: 20px 10px;
        font-weight: bold;
        font-size: 18px;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
    }
    
    .app-button:hover {
        background: linear-gradient(135deg, #45a049 0%, #388e3c 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5);
        color: white;
        text-decoration: none;
    }
    
    .app-button:active {
        transform: translateY(0);
    }
    
    .error-container {
        background: white;
        border-radius: 20px;
        padding: 30px;
        max-width: 600px;
        margin: 50px auto;
        text-align: center;
        color: #333;
        direction: rtl;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .error-icon {
        font-size: 80px;
        color: #f44336;
        margin-bottom: 20px;
    }
    
    .error-title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #f44336;
    }
    
    .error-message {
        font-size: 16px;
        color: #666;
        margin: 20px 0;
        line-height: 1.6;
    }
    
    .debug-info {
        margin-top: 20px;
        padding: 15px;
        background: #f5f5f5;
        border-radius: 10px;
        font-size: 12px;
        color: #666;
        text-align: right;
        border: 1px solid #e0e0e0;
    }
    
    .welcome-message {
        background: #E8F5E9;
        border-radius: 15px;
        padding: 20px;
        margin: 20px 0;
        border: 1px solid #C8E6C9;
        line-height: 1.8;
    }
    
    .welcome-message h4 {
        color: #4CAF50;
        margin-bottom: 15px;
        font-size: 18px;
    }
    
    .welcome-message p {
        color: #2E7D32;
        font-size: 15px;
        margin: 10px 0;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .success-container, .error-container {
        animation: fadeInUp 0.6s ease-out;
    }
</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>
            
            {% if plan_name %}
            <div class="plan-badge">{{ plan_name }}</div>
            {% endif %}
            
            {% if duration %}
            <div class="duration-badge">اعتبار: {{ duration }} روز</div>
            {% endif %}
            
            <div class="plan-info">
                <h3 style="margin-bottom: 20px; color: #4CAF50; font-size: 20px;">اطلاعات پرداخت</h3>
                
                {% if user_name %}
                <div class="info-row">
                    <span class="info-label">نام کاربر:</span>
                    <span class="info-value">{{ user_name }}</span>
                </div>
                {% endif %}
                
                {% if plan_name %}
                <div class="info-row">
                    <span class="info-label">پلن خریداری شده:</span>
                    <span class="info-value">{{ plan_name }}</span>
                </div>
                {% endif %}
                
                {% if duration %}
                <div class="info-row">
                    <span class="info-label">مدت اعتبار:</span>
                    <span class="info-value">{{ duration }} روز</span>
                </div>
                {% endif %}
                
                {% if payment_date %}
                <div class="info-row">
                    <span class="info-label">تاریخ پرداخت:</span>
                    <span class="info-value">{{ payment_date }}</span>
                </div>
                {% endif %}
            </div>
            
            <div class="payment-details">
                <h4 style="margin-bottom: 15px; color: #4CAF50; font-size: 18px;">جزئیات تراکنش</h4>
                {% if ref_id %}
                <div class="ref-id">
                    شماره پیگیری: {{ ref_id }}
                </div>
                {% endif %}
                {% if amount %}
                <p style="margin: 15px 0; font-size: 16px; color: #333;">مبلغ پرداختی: {{ amount }} تومان</p>
                {% endif %}
                {% if discount_applied %}
                <p style="margin: 10px 0; font-size: 14px; color: #4CAF50;">✓ تخفیف اعمال شد</p>
                {% endif %}
            </div>
            
            <div class="welcome-message">
                <h4>🎉 به جمع لاکتو خوش آمدید!</h4>
                <p>پرداخت شما با موفقیت انجام شد و اشتراک شما فعال گردید.</p>
                <p>اکنون می‌توانید از تمام امکانات پلن خود استفاده کنید.</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 class="debug-info">
                    <strong>Debug Info:</strong><br>
                    Deep Link: {{ deep_link_url }}<br>
                    Plan ID: {{ plan_id }}<br>
                    Transaction ID: {{ transaction_id }}<br>
                    Payment ID: {{ payment_id }}<br>
                    Status: {{ status }}
                </div>
                {% endif %}
            </div>
        </div>
    {% else %}
        <div class="error-container">
            <div class="error-icon">❌</div>
            <h1 class="error-title">{{ title }}</h1>
            <p class="error-message">{{ message }}</p>
            
            {% if error_details %}
            <div style="background: #ffebee; padding: 15px; border-radius: 10px; margin: 20px 0;">
                <p style="color: #c62828; font-size: 14px;">{{ error_details }}</p>
            </div>
            {% endif %}
            
            <a href="{{ deep_link_url }}" class="app-button" id="return-to-app-btn" style="background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%); box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4);">
                بازگشت به اپلیکیشن
            </a>
            
            {% if debug %}
            <div style="margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 10px; font-size: 12px; color: #666; text-align: right;">
                <strong>Debug Info:</strong><br>
                Deep Link: {{ deep_link_url }}<br>
                Error: {{ message }}
            </div>
            {% endif %}
        </div>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const returnBtn = document.getElementById('return-to-app-btn');
    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) {
                    // If still on this page, redirect to website
                    window.location.href = fallbackUrl;
                }
            }, 2500);
        } catch (error) {
            console.error('Deep link error:', error);
            window.location.href = fallbackUrl;
        }
    }
    
    // Add click handler with the redirect function
    if (returnBtn) {
        returnBtn.addEventListener('click', function(e) {
            e.preventDefault();
            const deepLinkUrl = this.href;
            const fallbackUrl = 'https://lacto.ir';
            handleDeepLinkRedirect(deepLinkUrl, fallbackUrl);
        });
    }
});
</script>
{% endblock %}