{% extends 'base.html.twig' %}

{% block title %}Checkout - KitsCo{% endblock %}

{% block body %}
{% include 'shop/_navbar.html.twig' %}

<section class="pt-24 pb-12 bg-gray-50 min-h-screen" data-controller="guest-checkout">
    <div class="max-w-5xl mx-auto px-4 sm:px-6">
        <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6">Checkout</h1>

        <!-- Flash Messages -->
        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="mb-4 px-4 py-3 rounded-lg {{ label == 'success' ? 'bg-green-50 text-green-800 border border-green-200' : 'bg-red-50 text-red-800 border border-red-200' }} text-sm">
                    <i class="bi {{ label == 'success' ? 'bi-check-circle' : 'bi-exclamation-circle' }} mr-1"></i> {{ message }}
                </div>
            {% endfor %}
        {% endfor %}

        <!-- Empty Cart Message -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center hidden" data-guest-checkout-target="emptyMessage">
            <i class="bi bi-cart text-6xl text-gray-300"></i>
            <h2 class="text-xl font-semibold text-gray-800 mt-4">Your cart is empty</h2>
            <p class="text-gray-500 mt-2">Add some products before checking out.</p>
            <a href="{{ path('shop_index') }}" class="inline-block mt-6 bg-kitsco-accent hover:bg-kitsco-dark text-white font-semibold px-6 py-3 rounded-lg transition-colors">
                <i class="bi bi-shop"></i> Browse Products
            </a>
        </div>

        <!-- Checkout Form -->
        <div class="grid lg:grid-cols-3 gap-6" data-guest-checkout-target="form">
            <!-- Customer Details Form -->
            <div class="lg:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                <h2 class="font-bold text-gray-800 text-lg mb-6">
                    <i class="bi bi-person text-kitsco-accent"></i> Your Details
                </h2>

                {{ form_start(form, {
                    'action': path('guest_checkout_complete'),
                    'attr': {
                        'data-action': 'submit->guest-checkout#submitForm'
                    }
                }) }}

                <div class="grid md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Full Name <span class="text-red-500">*</span>
                        </label>
                        {{ form_widget(form.name) }}
                        {{ form_errors(form.name) }}
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Email Address <span class="text-red-500">*</span>
                        </label>
                        {{ form_widget(form.email) }}
                        {{ form_errors(form.email) }}
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Phone Number <span class="text-gray-400 font-normal">(optional)</span>
                        </label>
                        {{ form_widget(form.phone) }}
                        {{ form_errors(form.phone) }}
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            City <span class="text-gray-400 font-normal">(optional)</span>
                        </label>
                        {{ form_widget(form.city) }}
                        {{ form_errors(form.city) }}
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Address <span class="text-gray-400 font-normal">(optional)</span>
                        </label>
                        {{ form_widget(form.address) }}
                        {{ form_errors(form.address) }}
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Country <span class="text-gray-400 font-normal">(optional)</span>
                        </label>
                        {{ form_widget(form.country) }}
                        {{ form_errors(form.country) }}
                    </div>
                </div>

                <p class="text-xs text-gray-400 mt-2"><span class="text-red-500">*</span> Required fields</p>

                {{ form_widget(form.cart_data, {'attr': {'data-guest-checkout-target': 'cartData'}}) }}
                {{ form_rest(form) }}

                <div class="mt-6 pt-6 border-t border-gray-100">
                    <button type="submit" class="w-full bg-kitsco-accent hover:bg-kitsco-dark text-white font-semibold py-3 rounded-lg transition-colors inline-flex items-center justify-center gap-2">
                        <i class="bi bi-check-circle"></i> Place Order
                    </button>
                </div>

                {{ form_end(form) }}

                <p class="text-center text-sm text-gray-500 mt-4">
                    Already have an account? <a href="{{ path('app_login') }}" class="text-kitsco-accent hover:underline">Login</a> to use your saved information
                </p>
            </div>

            <!-- Order Summary -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 h-fit">
                <h2 class="font-bold text-gray-800 text-lg mb-4">Order Summary</h2>

                <!-- Cart Preview -->
                <div class="divide-y divide-gray-100 mb-4" data-guest-checkout-target="preview">
                    <div class="py-4 text-center text-gray-400">
                        <i class="bi bi-arrow-repeat animate-spin"></i>
                        <p class="text-sm mt-1">Loading...</p>
                    </div>
                </div>

                <div class="border-t border-gray-200 pt-4">
                    <div class="flex justify-between text-sm text-gray-600 mb-2">
                        <span>Items (<span data-guest-checkout-target="itemCount">0</span>)</span>
                        <span data-guest-checkout-target="subtotal">Shs0</span>
                    </div>
                    <div class="flex justify-between text-sm text-gray-500 mb-2">
                        <span>Shipping</span>
                        <span>Calculated later</span>
                    </div>
                    <div class="flex justify-between font-bold text-lg pt-2 border-t border-gray-100">
                        <span>Total</span>
                        <span class="text-kitsco-accent" data-guest-checkout-target="subtotal">Shs0</span>
                    </div>
                </div>

                <div class="mt-4 pt-4 border-t border-gray-100">
                    <a href="{{ path('cart_index') }}" class="text-sm text-kitsco-accent hover:underline">
                        <i class="bi bi-arrow-left"></i> Back to Cart
                    </a>
                </div>

                <p class="text-xs text-gray-400 text-center mt-4">
                    <i class="bi bi-shield-check"></i> Secure checkout - Your data is protected
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="bg-kitsco-dark py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
            <p class="text-xs text-white/30">&copy; {{ 'now'|date('Y') }} KitsCo Company Limited. All rights reserved.</p>
            <a href="{{ path('website_home') }}" class="text-xs text-white/40 hover:text-white transition-colors">Back to Main Site</a>
        </div>
    </div>
</footer>
{% endblock %}