{% 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">
    <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 %}

        {% if not cart.empty %}
            <div class="grid lg:grid-cols-3 gap-6">
                <!-- Cart Items -->
                <div class="lg:col-span-2 bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                    {% include 'cart/_cart_items.html.twig' %}

                    <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between items-center">
                        <form action="{{ path('cart_clear') }}" method="post" class="clear-cart-form">
                            <button type="button" class="text-sm text-gray-500 hover:text-red-500 transition-colors"
                                    onclick="window.confirmDialog?.confirmForm(this.closest('form'), 'Clear Cart', 'Are you sure you want to clear your cart?', 'Clear Cart', 'danger')">
                                <i class="bi bi-trash"></i> Clear Cart
                            </button>
                        </form>
                        <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 ({{ cart.itemCount }})</span>
                            <span class="text-gray-800" id="cart-subtotal">{{ cart.formattedSubtotal }}</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" id="cart-total">{{ cart.formattedSubtotal }}</span>
                        </div>
                    </div>

                    <a href="{{ path('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>

                    <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>
        {% else %}
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center">
                <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>
        {% endif %}
    </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 %}

{% block javascripts %}
<script>
// Handle quantity forms via AJAX
document.querySelectorAll('.qty-form button').forEach(button => {
    button.addEventListener('click', async (e) => {
        e.preventDefault();
        const form = button.closest('form');
        const quantity = button.value;

        try {
            const formData = new FormData();
            formData.append('quantity', quantity);

            const response = await fetch(form.action, {
                method: 'POST',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                body: formData
            });
            const data = await response.json();

            if (data.success) {
                if (parseInt(quantity) <= 0) {
                    // Item removed, reload page
                    window.location.reload();
                } else {
                    // Update the UI
                    const item = button.closest('[id^="cart-item-"]');
                    const qtySpan = item.querySelector('.text-center');
                    qtySpan.textContent = quantity;

                    // Update minus button
                    const minusBtn = item.querySelector('button[value]');
                    minusBtn.value = parseInt(quantity) - 1;
                    minusBtn.disabled = parseInt(quantity) <= 1;

                    // Update plus button
                    const plusBtn = item.querySelectorAll('button[value]')[1];
                    plusBtn.value = parseInt(quantity) + 1;

                    // Update totals
                    document.getElementById('cart-subtotal').textContent = data.cartTotal;
                    document.getElementById('cart-total').textContent = data.cartTotal;

                    // Update badge
                    const badge = document.getElementById('cart-badge');
                    if (badge) badge.textContent = data.cartCount;
                }
            }
        } catch (error) {
            console.error('Error updating quantity:', error);
        }
    });
});

// Handle remove forms
document.querySelectorAll('.remove-form').forEach(form => {
    form.addEventListener('submit', async (e) => {
        e.preventDefault();

        try {
            const response = await fetch(form.action, {
                method: 'POST',
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            });
            const data = await response.json();

            if (data.success) {
                window.location.reload();
            }
        } catch (error) {
            console.error('Error removing item:', error);
        }
    });
});
</script>
{% endblock %}