{% extends 'base.html' %}

{% block title %}Payment - Order #{{ order.order_number }} - Thangka Arts{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'orders:order_list' %}">My Orders</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'orders:order_detail' order.id %}">Order #{{ order.order_number }}</a></li>
                    <li class="breadcrumb-item active">Payment</li>
                </ol>
            </nav>

            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">Complete Payment</h4>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6>Order Summary</h6>
                            <p class="mb-1">Order #{{ order.order_number }}</p>
                            <p class="mb-1">Total Amount: <strong>${{ order.total_amount }}</strong></p>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <h6>Payment Method</h6>
                            <p class="mb-0">Credit/Debit Card via Stripe</p>
                        </div>
                    </div>

                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        Your payment will be processed securely through Stripe. No credit card information is stored on our servers.
                    </div>

                    <div id="payment-form">
                        <div id="card-element" class="form-control mb-3" style="height: 40px; padding: 10px;">
                            <!-- Stripe Card Element will be inserted here -->
                        </div>
                        <div id="card-errors" class="alert alert-danger" style="display: none;"></div>
                        
                        <div class="d-grid">
                            <button id="submit-payment" class="btn btn-primary btn-lg">
                                <i class="fas fa-credit-card me-2"></i>Pay ${{ order.total_amount }}
                            </button>
                        </div>
                    </div>

                    <div class="text-center mt-3">
                        <a href="{% url 'orders:order_detail' order.id %}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Order
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://js.stripe.com/v3/"></script>
<script>
const stripe = Stripe('{{ stripe_publishable_key }}');
const elements = stripe.elements();

// Create card element
const card = elements.create('card', {
    style: {
        base: {
            fontSize: '16px',
            color: '#424770',
            '::placeholder': {
                color: '#aab7c4',
            },
        },
        invalid: {
            color: '#9e2146',
        },
    },
});

card.mount('#card-element');

// Handle form submission
const form = document.getElementById('payment-form');
const submitButton = document.getElementById('submit-payment');
const errorElement = document.getElementById('card-errors');

submitButton.addEventListener('click', async (event) => {
    event.preventDefault();
    submitButton.disabled = true;
    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing...';

    try {
        // Create payment intent
        const response = await fetch('{% url "orders:payment" order.id %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            },
        });

        const data = await response.json();

        if (data.error) {
            throw new Error(data.error);
        }

        // Confirm payment
        const { error, paymentIntent } = await stripe.confirmCardPayment(data.client_secret, {
            payment_method: {
                card: card,
                billing_details: {
                    name: '{{ order.full_name }}',
                    email: '{{ order.email }}',
                },
            },
        });

        if (error) {
            throw new Error(error.message);
        }

        // Payment successful
        if (paymentIntent.status === 'succeeded') {
            window.location.href = '{% url "orders:payment_success" order.id %}';
        }

    } catch (error) {
        errorElement.textContent = error.message;
        errorElement.style.display = 'block';
        submitButton.disabled = false;
        submitButton.innerHTML = '<i class="fas fa-credit-card me-2"></i>Pay ${{ order.total_amount }}';
    }
});

// Handle card errors
card.addEventListener('change', ({ error }) => {
    if (error) {
        errorElement.textContent = error.message;
        errorElement.style.display = 'block';
    } else {
        errorElement.style.display = 'none';
    }
});
</script>
{% endblock %}