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

{% 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: Addresses -->
            <div class="col-lg-7">
                <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: Summary -->
            <div class="col-lg-5">
                <div class="mt-4">
    <h5>Payment Option</h5>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="payment_type" value="full" id="fullPayment" checked>
        <label class="form-check-label" for="fullPayment">
            Pay Full Amount Now (${{ total|floatformat:2 }})
        </label>
    </div>
    
    <div class="form-check mt-2">
        <input class="form-check-input" type="radio" name="payment_type" value="installment" id="installmentPayment">
        <label class="form-check-label" for="installmentPayment">
            Pay in Installments
        </label>
    </div>

                <!-- Installment Plans (shown when installment selected) -->
                <div id="installment-options" class="mt-3" style="display:none;">
                    <small class="text-muted d-block mb-2">Choose your installment plan:</small>
                    {% for key, plan in installment_plans.items %}
                    <div class="card mb-2 border-primary installment-plan-card" 
                         data-plan-code="{{ plan.plan_code }}"
                         data-months="{{ plan.months }}">
                        <div class="card-body p-3">
                            <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 class="mt-2">
                                        <div class="mb-1">
                                            <strong class="text-success">
                                                Monthly: ${{ total|div:plan.months|floatformat:2 }}
                                            </strong>
                                        </div>
                                        <div class="mb-1">
                                            <small class="text-muted">
                                                First Payment: ${{ total|div:plan.months|floatformat:2 }}
                                            </small>
                                        </div>
                                        <div class="mb-0">
                                            <small class="text-muted">
                                                Total: ${{ total|floatformat:2 }}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <small class="text-muted d-block">{{ plan.months }} months</small>
                                    <div class="form-check">
                                        <input class="form-check-input plan-radio" type="radio" 
                                               name="plan_code" value="{{ plan.plan_code }}" 
                                               id="plan_{{ key }}">
                                        <label class="form-check-label fw-bold" for="plan_{{ key }}">
                                            Select
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    
                    <!-- Selected Plan Summary -->
                    <div id="selected-plan-summary" class="mt-3 p-3 bg-light rounded" style="display:none;">
                        <h6 class="text-primary mb-2">Payment Summary</h6>
                        <div class="row">
                            <div class="col-6">
                                <small class="text-muted">First Payment (Now):</small>
                                <br>
                                <strong class="text-success" id="first-payment-amount">$0.00</strong>
                            </div>
                            <div class="col-6">
                                <small class="text-muted">Remaining Installments:</small>
                                <br>
                                <strong class="text-primary" id="remaining-installments">0</strong>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                <div class="card shadow-sm sticky-top" style="top: 20px;">
                    <div class="card-header">
                        <strong>Order Summary</strong>
                    </div>
                    <div class="card-body">
                        {% if original_total and total_discount %}
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span>Subtotal</span>
                                <span class="text-muted text-decoration-line-through">
                                    ${{ original_total|floatformat:2 }}
                                </span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="text-success">Discount</span>
                                <span class="text-success">-${{ total_discount|floatformat:2 }}</span>
                            </div>
                            <hr class="my-2">
                        {% endif %}
                        
                        <!-- Payment Amount Display -->
                        <div id="payment-amount-display">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">Total</h6>
                                <h5 class="fw-bold text-success mb-0">${{ total|floatformat:2 }}</h5>
                            </div>
                        </div>
                        
                        <div id="installment-payment-display" style="display:none;">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span>Total Amount</span>
                                <span class="text-muted">${{ total|floatformat:2 }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">First Payment (Now)</h6>
                                <h5 class="fw-bold text-success mb-0" id="checkout-payment-amount">$0.00</h5>
                            </div>
                            <small class="text-muted d-block mt-1">
                                Remaining installments will be charged automatically
                            </small>
                        </div>

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

                        <p class="text-center text-muted small mt-3">
                            🔒 Secured by Paystack
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<script>
document.querySelectorAll('input[name="payment_type"]').forEach(radio => {
    radio.addEventListener('change', function() {
        const installmentOptions = document.getElementById('installment-options');
        const selectedPlanSummary = document.getElementById('selected-plan-summary');
        const paymentAmountDisplay = document.getElementById('payment-amount-display');
        const installmentPaymentDisplay = document.getElementById('installment-payment-display');
        const payBtnText = document.getElementById('pay-btn-text');
        
        if (this.value === 'installment') {
            installmentOptions.style.display = 'block';
            paymentAmountDisplay.style.display = 'none';
            installmentPaymentDisplay.style.display = 'block';
            payBtnText.textContent = 'Pay First Installment';
        } else {
            installmentOptions.style.display = 'none';
            selectedPlanSummary.style.display = 'none';
            paymentAmountDisplay.style.display = 'block';
            installmentPaymentDisplay.style.display = 'none';
            payBtnText.textContent = 'Proceed to Secure Payment';
            // Clear any selected plan
            document.querySelectorAll('.plan-radio').forEach(r => r.checked = false);
            document.querySelectorAll('.installment-plan-card').forEach(c => c.classList.remove('selected'));
        }
    });
});

// Handle installment plan selection
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.plan-radio').forEach(radio => {
        radio.addEventListener('change', function() {
            const planCard = this.closest('.installment-plan-card');
            const planCode = planCard.getAttribute('data-plan-code');
            const months = parseInt(planCard.getAttribute('data-months'));
            const total = {{ total|default:0 }};
            const monthlyAmount = total / months;
            
            // Remove selected class from all cards
            document.querySelectorAll('.installment-plan-card').forEach(c => {
                c.classList.remove('selected');
            });
            
            // Add selected class to current card
            planCard.classList.add('selected');
            
            // Update payment summary in installment options
            document.getElementById('first-payment-amount').textContent = '$' + monthlyAmount.toFixed(2);
            document.getElementById('remaining-installments').textContent = (months - 1) + ' payments';
            document.getElementById('selected-plan-summary').style.display = 'block';
            
            // Update checkout payment amount in order summary
            document.getElementById('checkout-payment-amount').textContent = '$' + monthlyAmount.toFixed(2);
        });
    });
    
    // Handle plan card clicks
    document.querySelectorAll('.installment-plan-card').forEach(card => {
        card.addEventListener('click', function() {
            const radio = this.querySelector('.plan-radio');
            if (radio) {
                radio.checked = true;
                radio.dispatchEvent(new Event('change'));
            }
        });
    });
});

function selectAddress(id, element) {
    // Remove active class from all cards
    document.querySelectorAll('.address-card').forEach(card => {
        card.classList.remove('border-primary', 'shadow-sm');
    });

    // Add active styling to clicked card
    element.classList.add('border-primary', 'shadow-sm');

    // Set the hidden radio input value
    const radio = document.getElementById('addr' + id);
    if (radio) radio.checked = true;
}

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

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

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

.installment-plan-card.selected {
    border-color: #0d6efd !important;
    background-color: #f8f9fa;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}
</style>

{% endblock %}