{% extends "base.html" %}
{% load i18n %}

{% block title %}{% trans "Checkout - Payment Plan" %}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-md-8">
            <h1>{% trans "Select Your Payment Plan" %}</h1>
            <p class="text-muted">{% trans "Choose how you want to pay for your order" %}</p>
            
            <form method="post" class="mt-4">
                {% csrf_token %}
                
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title mb-3">{% trans "Order Summary" %}</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>{% trans "Subtotal" %}:</strong> ${{ subtotal|floatformat:2 }}</p>
                            </div>
                            <div class="col-md-6 text-right">
                                <a href="{% url 'shop:cart' %}" class="btn btn-sm btn-outline-secondary">
                                    {% trans "Edit Cart" %}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title mb-3">{% trans "Choose Payment Plan" %}</h5>
                        
                        {% for option in payment_options %}
                        <div class="form-check mb-3">
                            <input 
                                type="radio" 
                                name="num_installments" 
                                value="{{ option.months }}"
                                id="plan_{{ option.months }}"
                                class="form-check-input installment-radio"
                                data-months="{{ option.months }}"
                                data-total="{{ subtotal }}"
                                {% if option.months == 1 %}checked{% endif %}
                            >
                            <label class="form-check-label" for="plan_{{ option.months }}">
                                <strong>{{ option.label }}</strong>
                                <span class="d-block text-muted small">
                                    {% if option.months > 1 %}
                                        $<span class="monthly-amount">{{ subtotal|div:option.months|floatformat:2 }}</span>/month
                                    {% else %}
                                        {% trans "Pay full amount today" %}
                                    {% endif %}
                                </span>
                            </label>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
                <div class="alert alert-info" role="alert">
                    <h6 class="alert-heading">{% trans "How It Works" %}</h6>
                    <ul class="mb-0 small">
                        <li>{% trans "Choose your payment plan above" %}</li>
                        <li>{% trans "Provide your card information on the next page" %}</li>
                        <li>{% trans "Your card will be charged automatically each month" %}</li>
                        <li>{% trans "Track payments and manage your installments anytime" %}</li>
                    </ul>
                </div>
                
                <div class="form-check mb-3">
                    <input 
                        type="checkbox" 
                        name="agree_terms" 
                        id="agree_terms" 
                        class="form-check-input"
                        required
                    >
                    <label class="form-check-label" for="agree_terms">
                        {% trans "I agree to the installment payment terms and conditions" %}
                    </label>
                </div>
                
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary btn-lg">
                        {% trans "Continue to Payment Setup" %}
                    </button>
                    <a href="{% url 'shop:cart' %}" class="btn btn-outline-secondary">
                        {% trans "Cancel" %}
                    </a>
                </div>
            </form>
        </div>
        
        <div class="col-md-4">
            <div class="card sticky-top" style="top: 20px;">
                <div class="card-body">
                    <h6 class="card-title">{% trans "Pricing Breakdown" %}</h6>
                    <div id="pricing-breakdown">
                        <div class="d-flex justify-content-between mb-2">
                            <span>{% trans "Subtotal" %}:</span>
                            <strong>${{ subtotal|floatformat:2 }}</strong>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between">
                            <span id="breakdown-label">{% trans "Total" %}:</span>
                            <strong>${{ subtotal|floatformat:2 }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const radios = document.querySelectorAll('.installment-radio');
    
    radios.forEach(radio => {
        radio.addEventListener('change', function() {
            const months = parseInt(this.dataset.months);
            const total = parseFloat(this.dataset.total);
            const monthlyAmount = (total / months).toFixed(2);
            
            // Update all monthly amounts
            document.querySelectorAll('.monthly-amount').forEach(el => {
                el.textContent = monthlyAmount;
            });
        });
    });
});
</script>
{% endblock %}