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

{% block title %}
Accueil     - {{ parent() }}
{% endblock %}

{% block body %}
    <h1 class="text-4xl font-extrabold mb-12 text-center">Nos produits vedettes</h1>

    <div id="product-grid" class="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-8">
        {% for product in product_top %}
            <div class="product-item bg-white shadow-lg rounded-lg overflow-hidden transition-shadow duration-300" data-category="{{ product.category.id }}">
                <!-- Galerie d'Images avec Swiper.js -->
                <a href="{{ path('app_product_show', {'id': product.id}) }}" class="block">
                    <div class="relative">
                        {% if product.image|length > 0 %}
                            <div class="swiper-container w-full h-56 overflow-hidden">
                                <div class="swiper-wrapper">
                                    {% for image in product.image %}
                                        <div class="swiper-slide">
                                            <img src="{{ asset('images/products/' ~ image.imageName) }}" alt="{{ product.name }}" class="w-full h-full object-cover">
                                        </div>
                                    {% endfor %}
                                </div>
                                <!-- Pagination -->
                                <div class="swiper-pagination"></div>
                            </div>
                        {% else %}
                            <div class="w-full h-56 bg-gray-200 flex items-center justify-center">
                                <span class="text-gray-600">Aucune Image</span>
                            </div>
                        {% endif %}
                    </div>
                </a>

                <!-- Détails du Produit -->
                <div class="p-6">
                    <h2 class="text-2xl font-semibold text-gray-800 mb-2 truncate">{{ product.name }}</h2>
                    <p class="text-gray-600 mb-2 truncate">{{ product.description|slice(0, 100) ~ (product.description|length > 100 ? '...' : '') }}</p>
                    <p class="text-sm text-gray-500 mb-2">Date de mise en ligne: {{ product.createdAt ? product.createdAt|date('d/m/Y') : 'N/A' }}</p>

                    {% if app.request.attributes.get('availability') == "rental" %}
                        <p class="text-sm text-gray-500 mb-2">Quantité disponible: {{ product.rentalStock }}</p>
                        <p class="text-xl font-bold text-gray-900 mb-2">Prix : {{ product.rentalPrice }} EUR</p>

                        <!-- Bouton Louer -->
                        <button type="button"
                            class="block px-4 py-2 font-bold text-sm text-gray-700 hover:bg-gray-100 {{ product.rentalStock <= 0 ? 'opacity-50 cursor-not-allowed' : '' }}"
                            {{ product.rentalStock <= 0 ? 'disabled' : '' }}
                            onclick="window.location.href='{{ path('app_rental_new', {'product': product.id}) }}'">
                            Louer
                        </button>
                    {% else %}
                        <p class="text-sm text-gray-500 mb-2">Quantité disponible: {{ product.stock }}</p>
                        <p class="text-xl font-bold text-gray-900 mb-2">Prix : {{ product.price }} EUR</p>

                        <!-- Bouton Ajouter au panier -->
                        <button aria-label="Ajouter au panier"
                            type="button"
                            data-toggle="tooltip"
                            data-custom-class="custom-tooltip"
                            data-placement="left"
                            title="Ajouter au panier"
                            class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-green-700 transition {{ product.stock <= 0 ? 'opacity-50 cursor-not-allowed' : '' }}"
                            {{ product.stock <= 0 ? 'disabled' : '' }}
                            onclick="addToCart({{ product.id }})">
                            Ajouter au panier
                        </button>
                    {% endif %}

                    <!-- Autres boutons (Favoris et Partager) -->
                    <div class="mt-4 flex space-x-2">
                        <button id="favori-btn-{{ product.id }}" data-product-id="{{ product.id }}" class="favori-btn bg-yellow-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-yellow-700 transition">
                            Ajouter aux Favoris
                        </button>
                        <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition" onclick="shareOnFacebook('{{ path('app_product_show', {'id': product.id}) | url_encode }}')">Partager sur Facebook</button>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="col-span-full p-4 text-center text-gray-500">
                Aucun produit trouvé
            </div>
        {% endfor %}
    </div>
    <h2 class="text-center">Témoignages</h2>
            {{ render(controller('App\\Controller\\ReviewController::index')) }}
    <!-- Scripts placés ici -->
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // Initialisation de Swiper.js
        document.querySelectorAll('.swiper-container').forEach(function(container) {
            new Swiper(container, {
                loop: false,
                slidesPerView: 1,
                spaceBetween: 0,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
            });
        });

        // Fonction pour vérifier si le produit est déjà dans les favoris
        function checkFavorite(productId, button) {
            fetch('{{ path('app_favori_check', {'id': 'PRODUCT_ID'}) }}'.replace('PRODUCT_ID', productId))
                .then(response => response.json())
                .then(data => {
                    if (data.isFavori) {
                        button.classList.add('bg-yellow-700');
                        button.classList.remove('bg-yellow-600');
                        button.textContent = 'Retirer des Favoris';
                    } else {
                        button.classList.add('bg-yellow-600');
                        button.classList.remove('bg-yellow-700');
                        button.textContent = 'Ajouter aux Favoris';
                    }
                })
                .catch(error => console.error('Erreur lors de la vérification des favoris:', error));
        }

        // Gestion du clic sur le bouton "Ajouter aux Favoris"
        document.querySelectorAll('.favori-btn').forEach(function(button) {
            button.addEventListener('click', function() {
                var productId = this.dataset.productId;

                fetch('{{ path('app_favori_check', {'id': 'PRODUCT_ID'}) }}'.replace('PRODUCT_ID', productId))
                    .then(response => response.json())
                    .then(data => {
                        if (data.isFavori) {
                            // Si déjà favori, retirer des favoris
                            fetch('{{ path('app_favori_remove', {'id': 'PRODUCT_ID'}) }}'.replace('PRODUCT_ID', productId), {
                                method: 'DELETE'
                            })
                            .then(() => {
                                checkFavorite(productId, button); // Mettre à jour l'état du bouton
                                alert('Produit retiré des favoris.');
                            })
                            .catch(() => alert('Erreur lors de la suppression du produit des favoris.'));
                        } else {
                            // Si pas encore favori, ajouter aux favoris
                            fetch('{{ path('app_favori_add', {'id': 'PRODUCT_ID'}) }}'.replace('PRODUCT_ID', productId), {
                                method: 'POST'
                            })
                            .then(() => {
                                checkFavorite(productId, button); // Mettre à jour l'état du bouton
                                alert('Produit ajouté aux favoris.');
                            })
                            .catch(() => alert('Erreur lors de l\'ajout du produit aux favoris.'));
                        }
                    })
                    .catch(() => console.error('Erreur lors de la vérification des favoris.'));
            });

            // Initialiser l'état des boutons lors du chargement de la page
            checkFavorite(button.dataset.productId, button);
        });

        // Fonction pour ajouter un produit au panier
        function addToCart(productId) {
            fetch('{{ path('api_cart_add', {'id': 'PRODUCT_ID'}) }}'.replace('PRODUCT_ID', productId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Produit ajouté au panier');
                } else {
                    alert('Erreur lors de l\'ajout au panier');
                }
            })
            .catch(() => alert('Erreur lors de l\'ajout au panier'));
        }

        // Fonction pour partager le produit sur Facebook
        function shareOnFacebook(productUrl) {
            window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(productUrl), 'facebook-share-dialog', 'width=800,height=600');
        }
    </script>

{% endblock %}