{% extends "base/base.html" %}
{% load static %}

{% block title %}Payment Processing - {{ block.super }}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card text-center">
                <div class="card-body py-5">
                    <div class="mb-4">
                        <div class="spinner-border text-primary mb-3" style="width: 4rem; height: 4rem;" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <h3 class="mb-3">Processing Your Payment</h3>
                        <p class="text-muted">Please complete the payment on your phone</p>
                        <p class="lead">
                            <strong>Amount:</strong> KES {{ payment.amount|floatformat:2 }}
                        </p>
                        <p class="text-muted">
                            Transaction Reference: {{ payment.transaction_reference }}
                        </p>
                    </div>
                    
                    <div id="payment-status" class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        Waiting for payment confirmation...
                    </div>
                    
                    <div class="mt-4">
                        <p class="text-muted small mb-2">Having trouble with the payment?</p>
                        <a href="{% url 'payments:process_booking_payment' booking_id=payment.booking.id %}" class="btn btn-outline-primary me-2">
                            <i class="fas fa-sync-alt me-2"></i>Try Again
                        </a>
                        <a href="{% url 'bookings:booking_detail' payment.booking.booking_number %}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Booking
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const paymentStatus = document.getElementById('payment-status');
    const checkInterval = 5000; // Check every 5 seconds
    const maxChecks = 12; // Max 1 minute (12 * 5s)
    let checkCount = 0;
    
    // Function to check payment status
    function checkPaymentStatus() {
        if (checkCount >= maxChecks) {
            paymentStatus.innerHTML = `
                <i class="fas fa-exclamation-triangle me-2"></i>
                Payment check timed out. Please check your M-Pesa messages for confirmation.
            `;
            return;
        }
        
        fetch(`/api/payments/status/{{ payment.transaction_reference }}/`)
            .then(response => response.json())
            .then(data => {
                checkCount++;
                
                if (data.status === 'completed') {
                    // Payment completed successfully
                    paymentStatus.innerHTML = `
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle me-2"></i>
                            Payment received! Redirecting to booking confirmation...
                        </div>
                    `;
                    
                    // Redirect to success page after a short delay
                    setTimeout(() => {
                        window.location.href = `{% url 'payments:payment_success' reference=payment.transaction_reference %}`;
                    }, 2000);
                } else if (data.status === 'failed') {
                    // Payment failed
                    paymentStatus.innerHTML = `
                        <div class="alert alert-danger">
                            <i class="fas fa-times-circle me-2"></i>
                            Payment failed: ${data.message || 'Please try again.'}
                        </div>
                    `;
                } else {
                    // Still processing, check again after interval
                    setTimeout(checkPaymentStatus, checkInterval);
                }
            })
            .catch(error => {
                console.error('Error checking payment status:', error);
                checkCount++;
                if (checkCount < maxChecks) {
                    setTimeout(checkPaymentStatus, checkInterval);
                } else {
                    paymentStatus.innerHTML = `
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Unable to verify payment status. Please check your M-Pesa messages.
                        </div>
                    `;
                }
            });
    }
    
    // Start checking payment status
    setTimeout(checkPaymentStatus, checkInterval);
});
</script>
{% endblock %}