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

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

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h4 class="mb-0">Complete Your Booking</h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h5>Booking Summary</h5>
                        <p>Booking: {{ booking.booking_number }}</p>
                        <p>Equipment: {{ booking.equipment.name }}</p>
                        <p>Rental Period: {{ booking.start_date|date:"M j, Y" }} to {{ booking.end_date|date:"M j, Y" }} ({{ booking.total_days }} days)</p>
                        <hr>
                        <p>Subtotal: KES {{ booking.subtotal|floatformat:2 }}</p>
                        <p>Tax (16%): KES {{ booking.tax_amount|floatformat:2 }}</p>
                        <p>Transport Fee: KES {{ booking.transport_fee|floatformat:2 }}{% if booking.is_cbd %} <span class="badge bg-success">10% CBD Discount Applied</span>{% endif %}</p>
                        <p class="fw-bold">Total Amount: KES {{ booking.total_amount|floatformat:2 }}</p>
                        <p class="fw-bold">Deposit (40%): KES {{ booking.deposit_amount|floatformat:2 }}</p>
                    </div>

                    <form method="post" id="mpesa-payment-form" class="mt-4">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="phone_number" class="form-label">M-Pesa Phone Number</label>
                            <div class="input-group">
                                <span class="input-group-text">+254</span>
                                <input type="tel" 
                                       class="form-control" 
                                       id="phone_number" 
                                       name="phone_number" 
                                       value="{{ form.phone_number.value|default:'' }}"
                                       placeholder="e.g., 712345678" 
                                       required
                                       pattern="[0-9]{9}" 
                                       title="Please enter a valid 9-digit M-Pesa number">
                            </div>
                            <div class="form-text">Enter your M-Pesa registered phone number</div>
                            {% if form.phone_number.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.phone_number.errors.0 }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-mobile-alt me-2"></i> Pay KES {{ booking.deposit_amount|floatformat:2 }} via M-Pesa
                            </button>
                            <a href="{% url 'bookings:booking_detail' booking.booking_number %}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-2"></i> Back to Booking Details
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('mpesa-payment-form');
    
    form.addEventListener('submit', function(e) {
        const submitButton = form.querySelector('button[type="submit"]');
        submitButton.disabled = true;
        submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Processing...';
    });
});
</script>
{% endblock %}