{% extends 'base/layout.html' %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-6 text-white">Checkout</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Order Summary -->
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold mb-4 text-white">Order Summary</h2>
            <p class="text-gray-300 text-lg mb-2">Total Items: <span class="font-semibold text-white">{{ cart.items.count }}</span></p>
            <p class="text-gray-300 text-2xl font-bold mb-4">Total: ${{ cart.total_price }}</p>
            
            <div class="mt-4 pt-4 border-t border-gray-700">
                <a href="{% url 'store:cart' %}" class="text-blue-400 hover:text-blue-300 transition-colors">← Back to Cart</a>
            </div>
        </div>

        <!-- Checkout Form -->
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold mb-4 text-white">Shipping & Payment</h2>
            
            {% if not form.fields.shipping_address.queryset.exists or not form.fields.payment_method.queryset.exists %}
                <div class="bg-yellow-900/50 border border-yellow-600 text-yellow-200 p-4 rounded mb-4">
                    <p class="font-bold">Missing Information</p>
                    <p class="text-sm mt-1">Please add a shipping address and payment method to your profile before checking out.</p>
                    <div class="mt-3">
                        <a href="{% url 'users:profile' %}" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded text-sm inline-block">Update Profile</a>
                    </div>
                </div>
            {% endif %}

            <form method="post" class="space-y-6">
                {% csrf_token %}
                {% if form.non_field_errors %}
                    <div class="bg-red-500/80 text-white p-3 rounded">{{ form.non_field_errors }}</div>
                {% endif %}
                
                <div class="space-y-4">
                    {% for field in form %}
                        <div class="flex flex-col">
                            <label for="{{ field.id_for_label }}" class="text-gray-300 mb-1 font-medium">{{ field.label }}</label>
                            {{ field }}
                             {% if field.errors %}<p class="text-red-400 text-sm mt-1">{{ field.errors.0 }}</p>{% endif %}
                        </div>
                    {% endfor %}
                </div>

                <button type="submit" class="w-full mt-2 bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded transition duration-200 shadow-lg transform active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed" 
                    {% if not form.fields.shipping_address.queryset.exists or not form.fields.payment_method.queryset.exists %}disabled{% endif %}>
                    Place Order (${{ cart.total_price }})
                </button>
            </form>
        </div>
    </div>
</div>

<style>
    /* basic styling for form inputs */
    select {
        background-color: var(--input-bg);
        border: 1px solid var(--border-color);
        color: var(--text-color);
        padding: 0.75rem;
        border-radius: 0.375rem;
        width: 100%;
    }
    select:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
    }
</style>
{% endblock %}