{% extends 'base.html' %}
{% load widget_tweaks %}
{% load shop_extras %}

{% block content %}
<div class="container mt-5 mb-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-calendar-alt"></i> Choose Your Installment Plan
                    </h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>Order #{{ order.id }}</strong> - Total Amount: ${{ order.total|floatformat:2 }}
                    </div>

                    <form method="post" id="installment-form">
                        {% csrf_token %}
                        
                        <div class="row">
                            {% for key, plan in installment_plans.items %}
                            <div class="col-md-6 mb-3">
                                <div class="card h-100 border-primary installment-plan-card" 
                                     data-plan-code="{{ plan.plan_code }}">
                                    <div class="card-body text-center">
                                        <h5 class="card-title text-primary">{{ plan.name }}</h5>
                                        <p class="card-text text-muted">{{ plan.description }}</p>
                                        
                                        <div class="plan-details mt-3">
                                            <div class="mb-2">
                                                <strong class="text-success fs-4">
                                                    ${{ order.total|div:plan.months|floatformat:2 }}
                                                </strong>
                                                <small class="text-muted d-block">per month</small>
                                            </div>
                                            <div class="mb-2">
                                                <small class="text-muted">Duration: {{ plan.months }} months</small>
                                            </div>
                                            <div class="mb-3">
                                                <small class="text-muted">
                                                    Total: ${{ order.total|floatformat:2 }}
                                                </small>
                                            </div>
                                        </div>
                                        
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" 
                                                   name="plan_code" value="{{ plan.plan_code }}" 
                                                   id="plan_{{ key }}">
                                            <label class="form-check-label fw-bold" for="plan_{{ key }}">
                                                Select This Plan
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>

                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-success btn-lg px-5">
                                <i class="fas fa-credit-card"></i> Proceed to Payment
                            </button>
                            <br>
                            <a href="{% url 'shop:checkout' %}" class="btn btn-outline-secondary mt-2">
                                <i class="fas fa-arrow-left"></i> Back to Checkout
                            </a>
                        </div>
                    </form>

                    <div class="mt-4">
                        <h6 class="text-muted mb-3">
                            <i class="fas fa-shield-alt"></i> Secure Payment Information
                        </h6>
                        <div class="row text-center">
                            <div class="col-4">
                                <i class="fas fa-lock fa-2x text-success mb-2"></i>
                                <br>
                                <small class="text-muted">SSL Encrypted</small>
                            </div>
                            <div class="col-4">
                                <i class="fas fa-credit-card fa-2x text-primary mb-2"></i>
                                <br>
                                <small class="text-muted">Multiple Cards</small>
                            </div>
                            <div class="col-4">
                                <i class="fas fa-mobile-alt fa-2x text-info mb-2"></i>
                                <br>
                                <small class="text-muted">Mobile Friendly</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.installment-plan-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.installment-plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.installment-plan-card.selected {
    border-color: #0d6efd !important;
    background-color: #f8f9fa;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle plan selection
    document.querySelectorAll('.installment-plan-card').forEach(card => {
        card.addEventListener('click', function() {
            // Remove selected class from all cards
            document.querySelectorAll('.installment-plan-card').forEach(c => {
                c.classList.remove('selected');
            });
            
            // Add selected class to clicked card
            this.classList.add('selected');
            
            // Check the radio button
            const radio = this.querySelector('input[type="radio"]');
            if (radio) {
                radio.checked = true;
            }
        });
    });

    // Handle radio button changes
    document.querySelectorAll('input[name="plan_code"]').forEach(radio => {
        radio.addEventListener('change', function() {
            // Remove selected class from all cards
            document.querySelectorAll('.installment-plan-card').forEach(c => {
                c.classList.remove('selected');
            });
            
            // Add selected class to parent card
            this.closest('.installment-plan-card').classList.add('selected');
        });
    });
});
</script>
{% endblock %}