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

{% block title %}Booking Confirmation - PRACA{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h2 class="h4 mb-0">Booking Confirmation</h2>
                </div>
                <div class="card-body">
                    <div class="alert alert-success" role="alert">
                        <h4 class="alert-heading">Thank you for your booking!</h4>
                        <p>Your booking has been received and is pending confirmation. We've sent a confirmation email to <strong>{{ booking.customer_email }}</strong>.</p>
                        <hr>
                        <p class="mb-0">Booking Reference: <strong>{{ booking.booking_number }}</strong></p>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <h5 class="mb-3">Booking Details</h5>
                            <ul class="list-unstyled">
                                <li class="mb-2"><strong>Equipment:</strong> {{ booking.equipment.name }}</li>
                                <li class="mb-2"><strong>Dates:</strong> {{ booking.start_date|date:"M j, Y" }} to {{ booking.end_date|date:"M j, Y" }}</li>
                                <li class="mb-2"><strong>Duration:</strong> {{ booking.total_days }} day{{ booking.total_days|pluralize }}</li>
                                <li class="mb-2"><strong>Pickup Time:</strong> {{ booking.pickup_time|default:"To be confirmed" }}</li>
                                {% if booking.delivery_required %}
                                <li class="mb-2"><strong>Delivery Address:</strong> {{ booking.delivery_address }}</li>
                                {% endif %}
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h5 class="mb-3">Pricing Summary</h5>
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <tbody>
                                        <tr>
                                            <td>Daily Rate ({{ booking.total_days }} days)</td>
                                            <td class="text-end">KSh {{ booking.equipment.daily_rate|floatformat:2|intcomma }}</td>
                                        </tr>
                                        <tr>
                                            <td>Subtotal</td>
                                            <td class="text-end">KSh {{ booking.subtotal|floatformat:2|intcomma }}</td>
                                        </tr>
                                        {% if booking.delivery_fee %}
                                        <tr>
                                            <td>Delivery Fee</td>
                                            <td class="text-end">KSh {{ booking.delivery_fee|floatformat:2|intcomma }}</td>
                                        </tr>
                                        {% endif %}
                                        <tr>
                                            <td>Tax (16%)</td>
                                            <td class="text-end">KSh {{ booking.tax_amount|floatformat:2|intcomma }}</td>
                                        </tr>
                                        <tr class="table-active fw-bold">
                                            <td>Total Amount</td>
                                            <td class="text-end">KSh {{ booking.total_amount|floatformat:2|intcomma }}</td>
                                        </tr>
                                        {% if booking.equipment.security_deposit > 0 %}
                                        <tr>
                                            <td>Security Deposit (refundable)</td>
                                            <td class="text-end">KSh {{ booking.equipment.security_deposit|floatformat:2|intcomma }}</td>
                                        </tr>
                                        {% endif %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <h5>What's Next?</h5>
                        <ol>
                            <li>You'll receive a confirmation email with your booking details</li>
                            <li>Our team will review your request and confirm availability</li>
                            <li>Once confirmed, you'll receive payment instructions</li>
                            <li>After payment is received, your booking will be confirmed</li>
                        </ol>
                    </div>

                    <div class="d-flex justify-content-between mt-4">
                        <a href="{% url 'equipment:home' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i> Back to Home
                        </a>
                        <a href="{% url 'bookings:booking_detail' booking_number=booking.booking_number %}" class="btn btn-primary">
                            View Booking Details <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Track booking confirmation with analytics
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof window.gtag === 'function') {
            const purchaseData = {
                'transaction_id': '{{ booking.booking_number }}',
                'value': parseFloat('{{ booking.total_amount|default:0 }}'),
                'currency': 'KES',
                'tax': parseFloat('{{ booking.tax_amount|default:0 }}'),
                'shipping': parseFloat('{{ booking.delivery_fee|default:0 }}'),
                'items': [{
                    'id': '{{ booking.equipment.id }}',
                    'name': '{{ booking.equipment.name|escapejs }}',
                    'brand': '{{ booking.equipment.brand|default:"PRACA"|escapejs }}',
                    'category': '{{ booking.equipment.category.name|default:"Equipment"|escapejs }}',
                    'price': parseFloat('{{ booking.equipment.daily_rate|default:0 }}'),
                    'quantity': parseInt('{{ booking.total_days|default:1 }}', 10)
                }]
            };
            window.gtag('event', 'purchase', purchaseData);
        }
    });
</script>
{% endblock %}