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

{% block content %}
<div class="container mt-5 mb-5">
    <h1 class="mb-4 fw-bold">Checkout</h1>

    <form id="checkout-form" method="post">
        {% csrf_token %}

        <div class="row">
            <!-- LEFT COLUMN: Addresses & Contact -->
            <div class="col-lg-7">
                <!-- Shipping Addresses -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">Select Shipping Address</h5>
                    </div>
                    <div class="card-body">
                        {% if saved_addresses %}
                        <div class="row g-3">
                            {% for addr in saved_addresses %}
                            <div class="col-12">
                                <div onclick="selectAddress({{ addr.id }}, this)" 
                                     class="address-card border rounded p-3 {% if addr.is_default %}border-success shadow-sm{% endif %}"
                                     data-id="{{ addr.id }}"
                                     style="cursor: pointer;">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" 
                                               name="shipping_address" 
                                               value="{{ addr.id }}" 
                                               id="addr{{ addr.id }}"
                                               {% if addr.is_default %}checked{% endif %}>
                                        <label class="form-check-label w-100" for="addr{{ addr.id }}">
                                            <strong>{{ addr.address_name }}</strong>
                                            {% if addr.is_default %}
                                                <span class="badge bg-success ms-2">Default</span>
                                            {% endif %}
                                            <p class="mb-1 mt-2 small">{{ addr.full_address|linebreaksbr }}</p>
                                            <small class="text-muted">{{ addr.city }}, {{ addr.state }} • {{ addr.phone }}</small>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="alert alert-warning">
                            No shipping addresses found. 
                            <a href="{% url 'accounts:shipping_address_create' %}" class="alert-link">Add one now</a>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="card shadow-sm">
                    <div class="card-header">
                        <h5>Contact Information <small class="text-muted">(Optional)</small></h5>
                    </div>
                    <div class="card-body">
                        {{ form }}
                    </div>
                </div>
            </div>

            <!-- RIGHT COLUMN: Order Summary & Payment -->
            <div class="col-lg-5">
                <div class="sticky-top" style="top: 20px;">
                    
                    <!-- Payment Options -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="mb-3">Payment Method</h5>
                            
                            <!-- Full Payment -->
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="payment_type" 
                                       value="full" id="fullPayment" checked>
                                <label class="form-check-label fw-bold" for="fullPayment">
                                    Pay Full Amount Now 
                                    <span class="text-success">({{ currency_symbol }}{{ total|convert_currency:currency_rate|floatformat:2 }})</span>
                                </label>
                            </div>

                            <!-- Installment -->
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="payment_type" 
                                       value="installment" id="installmentPayment">
                                <label class="form-check-label fw-bold" for="installmentPayment">
                                    Pay in Installments
                                </label>
                            </div>

                            <!-- Installment Plans -->
                            <div id="installment-options" class="mt-3" style="display: none;">
                                <small class="text-muted d-block mb-2">Choose installment plan:</small>
                                {% for key, plan in installment_plans.items %}
                                <div class="installment-plan-card card mb-2 p-3" 
                                     data-plan-key="{{ key }}"
                                     data-months="{{ plan.months }}">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="mb-1">{{ plan.name }}</h6>
                                            <small class="text-muted">{{ plan.description }}</small>
                                        </div>
                                        <div class="text-end">
                                            <input type="radio" name="plan_code" 
                                                   value="{{ key }}" 
                                                   class="plan-radio">
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>

                    <!-- Order Summary -->
                    <div class="card shadow-sm">
                        <div class="card-header">
                            <strong>Order Summary</strong>
                        </div>
                        <div class="card-body">
                            <div id="full-payment-summary">
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Total Amount</span>
                                    <strong>{{ currency_symbol }}{{ total|convert_currency:currency_rate|floatformat:2 }}</strong>
                                </div>
                            </div>

                            <div id="installment-summary" style="display: none;">
                                <div class="d-flex justify-content-between mb-2">
                                    <span>First Payment (Now)</span>
                                    <strong class="text-success" id="first-payment-display">{{ currency_symbol }}0.00</strong>
                                </div>
                                <small class="text-muted">Remaining balance will be charged automatically monthly</small>
                            </div>

                            <hr>

                            <button type="submit" id="pay-btn" class="btn btn-success btn-lg w-100 py-3">
                                <i class="fas fa-lock"></i> 
                                <span id="pay-btn-text">Proceed to Secure Payment</span>
                            </button>

                            <p class="text-center text-muted small mt-3">
                                🔒 Secured by Flutterwave
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
// Toggle between Full Payment and Installment
document.querySelectorAll('input[name="payment_type"]').forEach(radio => {
    radio.addEventListener('change', function() {
        const installmentOptions = document.getElementById('installment-options');
        const installmentSummary = document.getElementById('installment-summary');
        const fullSummary = document.getElementById('full-payment-summary');
        const payBtnText = document.getElementById('pay-btn-text');

        if (this.value === 'installment') {
            installmentOptions.style.display = 'block';
            fullSummary.style.display = 'none';
            installmentSummary.style.display = 'block';
            payBtnText.textContent = 'Pay First Installment';
        } else {
            installmentOptions.style.display = 'none';
            fullSummary.style.display = 'block';
            installmentSummary.style.display = 'none';
            payBtnText.textContent = 'Proceed to Secure Payment';
        }
    });
});

// Handle Installment Plan Selection
document.querySelectorAll('.installment-plan-card').forEach(card => {
    card.addEventListener('click', function() {
        // Uncheck all radios
        document.querySelectorAll('.plan-radio').forEach(r => r.checked = false);
        
        // Check this card's radio
        const radio = this.querySelector('.plan-radio');
        if (radio) radio.checked = true;

        const months = parseInt(this.dataset.months);
        const total = {{ total|default:0 }};
        const firstPayment = (total / months).toFixed(2);

        document.getElementById('first-payment-display').textContent = 
            '{{ currency_symbol }}' + firstPayment;
    });
});

// Auto-select default address
document.addEventListener('DOMContentLoaded', function() {
    const defaultCard = document.querySelector('.address-card.border-success');
    if (defaultCard) {
        const id = defaultCard.dataset.id;
        selectAddress(id, defaultCard);
    }
});

function selectAddress(id, element) {
    document.querySelectorAll('.address-card').forEach(card => {
        card.classList.remove('border-primary', 'shadow-sm');
    });
    element.classList.add('border-primary', 'shadow-sm');
    
    const radio = document.getElementById('addr' + id);
    if (radio) radio.checked = true;
}
</script>

<style>
.installment-plan-card {
    cursor: pointer;
    transition: all 0.3s ease;
}
.installment-plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.installment-plan-card.selected {
    border-color: #0d6efd !important;
    background-color: #f8f9fa;
}
</style>

{% endblock %}