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

{% block title %}{{ title }} - Graduate Women Zambia{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="py-5 bg-light">
    <div class="container text-center">
        <h1 class="display-4 mb-3">Membership Payment</h1>
        <p class="lead">Select your uniform items and review payment details</p>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow">
                    <div class="card-body p-5">
                        <h2 class="card-title text-center mb-4">Payment Details</h2>
                        
                        {% if messages %}
                            {% for message in messages %}
                                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            {% endfor %}
                        {% endif %}

                        <!-- Membership Summary -->
                        <div class="mb-5">
                            <h4 class="mb-4">Membership Summary</h4>
                            <div class="table-responsive">
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <th style="width: 200px">Name:</th>
                                            <td>{{ membership.first_name }} {{ membership.last_name }}</td>
                                        </tr>
                                        <tr>
                                            <th>Membership Type:</th>
                                            <td>{{ membership.get_membership_category_display }}</td>
                                        </tr>
                                        <tr>
                                            <th>Membership Fee:</th>
                                            <td>K{{ membership.total_amount }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Uniform Selection -->
                        <form method="post" novalidate>
                            {% csrf_token %}
                            <h4 class="mb-4">Uniform Selection (Optional)</h4>
                            
                            {% if uniforms %}
                                <div class="row g-4 mb-4">
                                    {% for uniform in uniforms %}
                                        <div class="col-md-6">
                                            <div class="card h-100">
                                                <div class="card-body">
                                                    <div class="form-check">
                                                        <input class="form-check-input uniform-checkbox" 
                                                               type="checkbox" 
                                                               value="{{ uniform.id }}" 
                                                               name="uniforms" 
                                                               id="uniform_{{ uniform.id }}"
                                                               data-price="{{ uniform.price }}">
                                                        <label class="form-check-label w-100" for="uniform_{{ uniform.id }}">
                                                            <h5 class="mb-2">{{ uniform.name }}</h5>
                                                            <p class="text-muted mb-0">K{{ uniform.price }}</p>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="alert alert-info">
                                    No uniform items are currently available.
                                </div>
                            {% endif %}

                            <!-- Total Amount -->
                            <div class="card bg-light mb-4">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <h5 class="mb-0">Total Amount:</h5>
                                        <h4 class="mb-0" id="totalAmount">K{{ membership.total_amount }}</h4>
                                    </div>
                                </div>
                            </div>

                            <div class="text-center">
                                <button type="submit" class="btn btn-primary btn-lg px-5">Proceed to Payment</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.uniform-checkbox');
    const totalAmountElement = document.getElementById('totalAmount');
    const baseFee = parseFloat('{{ membership.total_amount }}');

    function updateTotalAmount() {
        let total = baseFee;
        checkboxes.forEach(function(checkbox) {
            if (checkbox.checked) {
                total += parseFloat(checkbox.dataset.price);
            }
        });
        totalAmountElement.textContent = 'K' + total.toFixed(2);
    }

    checkboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', updateTotalAmount);
    });

    // Auto-dismiss alerts after 5 seconds
    setTimeout(function() {
        document.querySelectorAll('.alert').forEach(function(alert) {
            var bsAlert = new bootstrap.Alert(alert);
            bsAlert.close();
        });
    }, 5000);
});
</script>
{% endblock %}