{% 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">
    <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' : (label == 'info' ? 'bg-blue-50 text-blue-800 border border-blue-200' : 'bg-red-50 text-red-800 border border-red-200') }} text-sm">
                    <i class="bi {{ label == 'success' ? 'bi-check-circle' : (label == 'info' ? 'bi-info-circle' : 'bi-exclamation-circle') }} mr-1"></i> {{ message }}
                </div>
            {% endfor %}
        {% endfor %}

        <div class="grid lg:grid-cols-3 gap-6">
            <!-- Main Content -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Billing Info -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                    <h2 class="font-bold text-gray-800 text-lg mb-4 flex items-center gap-2">
                        <i class="bi bi-person-circle text-kitsco-accent"></i> Billing Information
                    </h2>
                    <div class="grid sm:grid-cols-2 gap-4 text-sm">
                        <div>
                            <p class="text-gray-500">Company/Name</p>
                            <p class="font-medium text-gray-800">{{ customer.name }}</p>
                        </div>
                        {% if customer.contactPerson %}
                        <div>
                            <p class="text-gray-500">Contact Person</p>
                            <p class="font-medium text-gray-800">{{ customer.contactPerson }}</p>
                        </div>
                        {% endif %}
                        {% if customer.contactEmail %}
                        <div>
                            <p class="text-gray-500">Email</p>
                            <p class="font-medium text-gray-800">{{ customer.contactEmail }}</p>
                        </div>
                        {% endif %}
                        {% if customer.phone %}
                        <div>
                            <p class="text-gray-500">Phone</p>
                            <p class="font-medium text-gray-800">{{ customer.phone }}</p>
                        </div>
                        {% endif %}
                        {% if customer.formattedAddress %}
                        <div class="sm:col-span-2">
                            <p class="text-gray-500">Address</p>
                            <p class="font-medium text-gray-800">{{ customer.formattedAddress }}</p>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Order Items -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                    <h2 class="font-bold text-gray-800 text-lg mb-4 flex items-center gap-2">
                        <i class="bi bi-box-seam text-kitsco-accent"></i> Order Items
                    </h2>
                    <div class="divide-y divide-gray-100">
                        {% for item in cart.items %}
                        <div class="flex items-center gap-4 py-3">
                            <div class="w-16 h-16 bg-gray-50 rounded-lg flex items-center justify-center shrink-0">
                                {% if item.product.imagePath %}
                                    <img src="{{ asset(item.product.imagePath) }}" alt="{{ item.product.name }}" class="max-w-full max-h-full object-contain">
                                {% else %}
                                    <i class="bi bi-box text-xl text-gray-300"></i>
                                {% endif %}
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="font-medium text-gray-800">{{ item.product.name }}</p>
                                <p class="text-sm text-gray-500">{{ item.formattedUnitPrice }} x {{ item.quantity }}</p>
                            </div>
                            <p class="font-medium text-gray-800">{{ item.formattedLineTotal }}</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <!-- Payment Notice -->
                <div class="bg-blue-50 rounded-2xl border border-blue-100 p-6">
                    <h2 class="font-bold text-blue-800 text-lg mb-2 flex items-center gap-2">
                        <i class="bi bi-info-circle"></i> How it works
                    </h2>
                    <p class="text-sm text-blue-700 leading-relaxed">
                        After placing your order, you'll receive a <strong>Proforma Invoice</strong> for review.
                        Our team will confirm product availability and finalize pricing including shipping costs.
                        Payment instructions will be provided once the order is confirmed.
                    </p>
                </div>

                <!-- Place Order -->
                <form action="{{ path('checkout_complete') }}" method="post">
                    <input type="hidden" name="_token" value="{{ csrf_token('checkout') }}">
                    <button type="submit" class="w-full bg-kitsco-accent hover:bg-kitsco-dark text-white font-semibold py-4 rounded-lg transition-colors inline-flex items-center justify-center gap-2 text-lg">
                        <i class="bi bi-bag-check"></i> Place Order
                    </button>
                </form>

                <p class="text-xs text-gray-400 text-center">
                    By placing your order, you agree to receive a proforma invoice for this order.
                </p>
            </div>

            <!-- Order Summary Sidebar -->
            <div>
                {% include 'checkout/_order_summary.html.twig' %}
            </div>
        </div>

        <div class="mt-6 text-center">
            <a href="{{ path('cart_index') }}" class="inline-flex items-center gap-2 text-kitsco-accent hover:underline">
                <i class="bi bi-arrow-left"></i> Back to Cart
            </a>
        </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 %}