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

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

{% block stylesheets %}
<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .toast {
        animation: slideIn 0.3s ease-out;
    }
    @keyframes slideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
</style>
{% endblock %}

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

<!-- Toast Container -->
<div id="toast-container" class="fixed top-20 right-4 z-50 space-y-2"></div>

<!-- Hero -->
<section class="bg-gradient-to-r from-kitsco-dark to-kitsco-accent pt-24 pb-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="text-center">
            <h1 class="text-3xl md:text-4xl font-bold text-white mb-4">Shop HWC Tools</h1>
            <p class="text-white/70 max-w-2xl mx-auto">Browse our selection of eco-friendly human-wildlife conflict mitigation tools. All products are designed to safely deter wildlife without causing harm.</p>
        </div>
    </div>
</section>

<!-- Flash Messages -->
{% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="max-w-7xl mx-auto px-4 sm:px-6 mt-4">
            <div class="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>
        </div>
    {% endfor %}
{% endfor %}

<!-- Products Grid -->
<section class="py-12 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        {% if products|length > 0 %}
            <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                {% for product in products %}
                    {% include 'shop/_product_card.html.twig' %}
                {% endfor %}
            </div>
        {% else %}
            <div class="text-center py-16">
                <i class="bi bi-box text-6xl text-gray-300"></i>
                <p class="text-gray-500 mt-4">No products available at the moment.</p>
                <a href="{{ path('website_home') }}#contact" class="inline-block mt-4 text-kitsco-accent hover:underline">Contact us for custom orders</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>
// Toast notification function
function showToast(message, type = 'success') {
    const container = document.getElementById('toast-container');
    const toast = document.createElement('div');
    toast.className = `toast px-4 py-3 rounded-lg shadow-lg ${type === 'success' ? 'bg-green-500' : 'bg-red-500'} text-white text-sm flex items-center gap-2`;
    toast.innerHTML = `<i class="bi ${type === 'success' ? 'bi-check-circle' : 'bi-exclamation-circle'}"></i> ${message}`;
    container.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}

// Update cart badge
function updateCartBadge(count) {
    let badge = document.getElementById('cart-badge');
    const cartLink = document.querySelector('a[href*="cart"]');

    if (count > 0) {
        if (!badge && cartLink) {
            badge = document.createElement('span');
            badge.id = 'cart-badge';
            badge.className = 'absolute -top-2 -right-2 bg-kitsco-accent text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center';
            cartLink.appendChild(badge);
        }
        if (badge) badge.textContent = count;
    } else if (badge) {
        badge.remove();
    }
}

// AJAX add to cart
document.querySelectorAll('.add-to-cart-form').forEach(form => {
    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        const button = form.querySelector('button');
        const originalText = button.innerHTML;
        button.disabled = true;
        button.innerHTML = '<i class="bi bi-arrow-repeat animate-spin"></i> Adding...';

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

            if (data.success) {
                showToast(data.message);
                updateCartBadge(data.cartCount);
            } else {
                showToast(data.error || 'Failed to add to cart', 'error');
            }
        } catch (error) {
            showToast('An error occurred', 'error');
        } finally {
            button.disabled = false;
            button.innerHTML = originalText;
        }
    });
});
</script>
{% endblock %}