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

{% block title %}{{ product.name }} - KitsCo Shop{% endblock %}

{% block stylesheets %}
<style>
    .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>

<section class="pt-24 pb-12 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <!-- Breadcrumb -->
        <nav class="mb-6">
            <ol class="flex items-center gap-2 text-sm text-gray-500">
                <li><a href="{{ path('shop_index') }}" class="hover:text-kitsco-accent">Shop</a></li>
                <li><i class="bi bi-chevron-right text-xs"></i></li>
                <li class="text-gray-800">{{ product.name }}</li>
            </ol>
        </nav>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="grid md:grid-cols-2 gap-8 p-6 md:p-8">
                <!-- Product Image -->
                <div class="bg-gray-50 rounded-xl p-8 flex items-center justify-center min-h-[300px]">
                    {% if product.imagePath %}
                        <img src="{{ asset(product.imagePath) }}" alt="{{ product.name }}" class="max-w-full max-h-80 object-contain">
                    {% else %}
                        <div class="text-center text-gray-300">
                            <i class="bi bi-box text-8xl"></i>
                        </div>
                    {% endif %}
                </div>

                <!-- Product Info -->
                <div class="flex flex-col">
                    {% if product.category %}
                        <span class="inline-block w-fit text-xs font-medium text-kitsco-accent bg-kitsco-light px-3 py-1 rounded-full mb-4">{{ product.category.label }}</span>
                    {% endif %}

                    <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-4">{{ product.name }}</h1>

                    {% if product.sku %}
                        <p class="text-sm text-gray-400 mb-4">SKU: {{ product.sku }}</p>
                    {% endif %}

                    {% if product.description %}
                        <div class="text-gray-600 leading-relaxed mb-6">
                            {{ product.description|nl2br }}
                        </div>
                    {% endif %}

                    <div class="mt-auto">
                        <p class="text-3xl font-bold text-kitsco-accent mb-6">Shs{{ product.unitPrice|money }}</p>

                        {% if app.user %}
                            <form action="{{ path('cart_add', {id: product.id}) }}" method="post" class="add-to-cart-form">
                                <div class="flex items-center gap-4 mb-4">
                                    <label class="text-sm font-medium text-gray-700">Quantity:</label>
                                    <div class="flex items-center border border-gray-300 rounded-lg">
                                        <button type="button" class="qty-minus px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-l-lg" onclick="changeQty(-1)">
                                            <i class="bi bi-dash"></i>
                                        </button>
                                        <input type="number" name="quantity" value="1" min="1" max="999" class="w-16 text-center border-0 focus:ring-0" id="quantity-input">
                                        <button type="button" class="qty-plus px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-r-lg" onclick="changeQty(1)">
                                            <i class="bi bi-plus"></i>
                                        </button>
                                    </div>
                                </div>
                                <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-cart-plus"></i> Add to Cart
                                </button>
                            </form>
                        {% else %}
                            <a href="{{ path('app_login') }}" class="w-full block text-center border-2 border-kitsco-accent text-kitsco-accent hover:bg-kitsco-accent hover:text-white font-semibold py-3 rounded-lg transition-colors">
                                <i class="bi bi-person"></i> Login to Order
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

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

{% block javascripts %}
<script>
function changeQty(delta) {
    const input = document.getElementById('quantity-input');
    let val = parseInt(input.value) || 1;
    val = Math.max(1, Math.min(999, val + delta));
    input.value = val;
}

// 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[type="submit"]');
        const originalText = button.innerHTML;
        button.disabled = true;
        button.innerHTML = '<i class="bi bi-arrow-repeat animate-spin"></i> Adding...';

        const formData = new FormData(form);

        try {
            const response = await fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            });
            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 %}