{% extends 'base.html' %}

{% block title %}Checkout - Thangka Arts{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-lg-8">
            <h1 class="fw-bold mb-4">Checkout</h1>
            
            <form method="POST">
                {% csrf_token %}
                
                <!-- Customer Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Customer Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="{{ form.first_name.id_for_label }}" class="form-label">First Name *</label>
                                {{ form.first_name }}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.last_name.id_for_label }}" class="form-label">Last Name *</label>
                                {{ form.last_name }}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.email.id_for_label }}" class="form-label">Email *</label>
                                {{ form.email }}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.phone.id_for_label }}" class="form-label">Phone *</label>
                                {{ form.phone }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Shipping Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Shipping Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label for="{{ form.shipping_address.id_for_label }}" class="form-label">Shipping Address *</label>
                                {{ form.shipping_address }}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.shipping_city.id_for_label }}" class="form-label">City *</label>
                                {{ form.shipping_city }}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.shipping_state.id_for_label }}" class="form-label">State/Province *</label>
                                {{ form.shipping_state }}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.shipping_country.id_for_label }}" class="form-label">Country *</label>
                                {{ form.shipping_country }}
                            </div>
                            <div class="col-md-6">
                                <label for="{{ form.shipping_zip_code.id_for_label }}" class="form-label">ZIP/Postal Code *</label>
                                {{ form.shipping_zip_code }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Billing Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Billing Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="form-check">
                                {{ form.same_as_shipping }}
                                <label class="form-check-label" for="{{ form.same_as_shipping.id_for_label }}">
                                    {{ form.same_as_shipping.label }}
                                </label>
                            </div>
                        </div>
                        
                        <div id="billing-fields">
                            <div class="row g-3">
                                <div class="col-12">
                                    <label for="{{ form.billing_address.id_for_label }}" class="form-label">Billing Address *</label>
                                    {{ form.billing_address }}
                                </div>
                                <div class="col-md-6">
                                    <label for="{{ form.billing_city.id_for_label }}" class="form-label">City *</label>
                                    {{ form.billing_city }}
                                </div>
                                <div class="col-md-6">
                                    <label for="{{ form.billing_state.id_for_label }}" class="form-label">State/Province *</label>
                                    {{ form.billing_state }}
                                </div>
                                <div class="col-md-6">
                                    <label for="{{ form.billing_country.id_for_label }}" class="form-label">Country *</label>
                                    {{ form.billing_country }}
                                </div>
                                <div class="col-md-6">
                                    <label for="{{ form.billing_zip_code.id_for_label }}" class="form-label">ZIP/Postal Code *</label>
                                    {{ form.billing_zip_code }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-grid">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="fas fa-credit-card me-2"></i>Proceed to Payment
                    </button>
                </div>
            </form>
        </div>

        <!-- Order Summary -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">Order Summary</h6>
                </div>
                <div class="card-body">
                    {% for item in cart.items.all %}
                    <div class="d-flex justify-content-between mb-2">
                        <span>{{ item.product.name }} x {{ item.quantity }}</span>
                        <span>${{ item.total_price }}</span>
                    </div>
                    {% endfor %}
                    
                    <hr>
                    
                    <div class="d-flex justify-content-between mb-2">
                        <span>Subtotal:</span>
                        <span>${{ cart.total_price }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Shipping:</span>
                        <span class="text-success">FREE</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Tax:</span>
                        <span>$0.00</span>
                    </div>
                    
                    <hr>
                    
                    <div class="d-flex justify-content-between mb-3">
                        <strong>Total:</strong>
                        <strong class="text-primary">${{ cart.total_price }}</strong>
                    </div>
                    
                    <div class="text-center">
                        <i class="fas fa-shipping-fast fa-2x text-success mb-2"></i>
                        <p class="small text-muted mb-0">Free Worldwide Shipping</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const sameAsShippingCheckbox = document.getElementById('{{ form.same_as_shipping.id_for_label }}');
    const billingFields = document.getElementById('billing-fields');
    
    function toggleBillingFields() {
        if (sameAsShippingCheckbox.checked) {
            billingFields.style.display = 'none';
        } else {
            billingFields.style.display = 'block';
        }
    }
    
    sameAsShippingCheckbox.addEventListener('change', toggleBillingFields);
    toggleBillingFields(); // Initial state
});
</script>
{% endblock %}