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

{% block title %}Shopping Cart - KitsCo{% endblock %}

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

<section class="pt-24 pb-12 bg-gray-50 min-h-screen" data-controller="guest-cart">
    <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">Shopping Cart</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 (hidden by default, shown by JS if needed) -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center hidden" data-guest-cart-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 to get started.</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>

        <!-- Cart Content -->
        <div class="grid lg:grid-cols-3 gap-6" data-guest-cart-target="cartContent">
            <!-- Cart Items -->
            <div class="lg:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                <div class="divide-y divide-gray-100" data-guest-cart-target="items">
                    <!-- Items will be loaded by JS -->
                    <div class="py-8 text-center text-gray-400">
                        <i class="bi bi-arrow-repeat animate-spin text-2xl"></i>
                        <p class="mt-2">Loading cart...</p>
                    </div>
                </div>

                <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between items-center">
                    <button type="button" data-action="click->guest-cart#clearCart" class="text-sm text-gray-500 hover:text-red-500 transition-colors">
                        <i class="bi bi-trash"></i> Clear Cart
                    </button>
                    <a href="{{ path('shop_index') }}" class="text-sm text-kitsco-accent hover:underline">
                        <i class="bi bi-arrow-left"></i> Continue Shopping
                    </a>
                </div>
            </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>

                <div class="space-y-3 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Items (<span data-guest-cart-target="itemCount">0</span>)</span>
                        <span class="text-gray-800" data-guest-cart-target="subtotal">Shs0</span>
                    </div>
                    <div class="flex justify-between text-gray-500">
                        <span>Shipping</span>
                        <span>Calculated at checkout</span>
                    </div>
                </div>

                <div class="border-t border-gray-100 my-4 pt-4">
                    <div class="flex justify-between font-bold text-lg">
                        <span>Subtotal</span>
                        <span class="text-kitsco-accent" data-guest-cart-target="total">Shs0</span>
                    </div>
                </div>

                <a href="{{ path('guest_checkout_index') }}" class="w-full block text-center bg-kitsco-accent hover:bg-kitsco-dark text-white font-semibold py-3 rounded-lg transition-colors">
                    Proceed to Checkout
                </a>

                <div class="text-center mt-4">
                    <p class="text-xs text-gray-400 mb-2">
                        <i class="bi bi-shield-check"></i> Secure checkout - Your data is protected
                    </p>
                    <p class="text-xs text-gray-500">
                        Have an account? <a href="{{ path('app_login') }}" class="text-kitsco-accent hover:underline">Login</a> to save your cart
                    </p>
                </div>
            </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 %}