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

{% block title %}Payment Successful - 3ncount{% endblock %}

{% block page_pretitle %}Payment{% endblock %}
{% block page_title %}Payment Successful!{% endblock %}

{% block content %}

<div class="row justify-content-center">
    <div class="col-md-8">
        <!-- Success Card -->
        <div class="card bg-success text-white text-center p-5">
            <div class="card-body">
                <div class="mb-4">
                    <i class="ti ti-circle-check" style="font-size: 5rem;"></i>
                </div>
                <h1 class="mb-3">Payment Successful!</h1>
                <p class="lead mb-4">
                    Your payment has been processed successfully.
                </p>
                
                {% if session_id %}
                <div class="alert alert-light text-dark mt-3">
                    <small>
                        <strong>Transaction ID:</strong><br>
                        <code>{{ session_id }}</code>
                    </small>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Invoice Details -->
        {% if invoice %}
        <div class="card mt-4">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ti ti-file-invoice me-2"></i>Invoice Details
                </h3>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-6">
                        <strong>Invoice Number:</strong>
                    </div>
                    <div class="col-6 text-end">
                        {{ invoice.invoice_number }}
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-6">
                        <strong>Date:</strong>
                    </div>
                    <div class="col-6 text-end">
                        {{ invoice.invoice_date|date:"d M Y" }}
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-6">
                        <strong>Amount:</strong>
                    </div>
                    <div class="col-6 text-end">
                        <strong>{{ invoice.currency }} {{ invoice.total_amount|floatformat:2 }}</strong>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-6">
                        <strong>Status:</strong>
                    </div>
                    <div class="col-6 text-end">
                        <span class="badge bg-{% if invoice.status == 'PAID' %}success{% else %}warning{% endif %}">
                            {{ invoice.get_status_display }}
                        </span>
                    </div>
                </div>
                
                {% if invoice.line_items %}
                <hr>
                <h4 class="mb-3">Items</h4>
                {% for item in invoice.line_items %}
                <div class="row mb-2">
                    <div class="col-8">
                        {{ item.description }}
                    </div>
                    <div class="col-4 text-end">
                        {{ invoice.currency }} {{ item.amount }}
                    </div>
                </div>
                {% endfor %}
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- Current Balance -->
        {% if credit_balance %}
        <div class="card mt-4 bg-primary text-white">
            <div class="card-body text-center">
                <h4 class="mb-2">Your New Credit Balance</h4>
                <h1 class="mb-0">{{ credit_balance.balance|floatformat:0 }}</h1>
                <p class="mb-0">AI Credits Available</p>
            </div>
        </div>
        {% endif %}

        <!-- Action Buttons -->
        <div class="card mt-4">
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-md-6">
                        <a href="{% url 'tenants:credit_topup' %}" class="btn btn-primary w-100">
                            <i class="ti ti-coins me-2"></i>Buy More Credits
                        </a>
                    </div>
                    <div class="col-md-6">
                        <a href="{% url 'tenants:billing_history' %}" class="btn btn-outline-primary w-100">
                            <i class="ti ti-history me-2"></i>View Billing History
                        </a>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{% url 'core:dashboard' %}" class="btn btn-secondary w-100">
                        <i class="ti ti-home me-2"></i>Back to Dashboard
                    </a>
                </div>
            </div>
        </div>

        <!-- Important Note -->
        <div class="alert alert-info mt-4">
            <h4 class="alert-heading">
                <i class="ti ti-info-circle me-2"></i>What Happens Next?
            </h4>
            <p class="mb-0">
                {% if invoice.status == 'PAID' %}
                    Your credits have been added to your account and are ready to use immediately!
                {% else %}
                    Your payment is being processed. Credits will be added to your account within a few minutes.
                    You'll receive an email confirmation once the credits are available.
                {% endif %}
            </p>
        </div>

        {% if invoice.status != 'PAID' %}
        <div class="alert alert-warning mt-3">
            <p class="mb-0">
                <i class="ti ti-clock me-2"></i>
                <strong>Note:</strong> If your credits don't appear within 10 minutes, please contact support 
                with your transaction ID: <code>{{ session_id }}</code>
            </p>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}