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

{% block title %}
    Mes favoris - {{ parent() }}
{% endblock %}

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

    <div id="product-grid" class="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-8">
        {% for product in favoriProducts %}
            <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-xl font-bold text-gray-900 mb-2">{{ product.price|number_format(2, '.', ',') }} EUR</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>

                    <!-- Boutons d'Actions -->
                    <div class="mt-4 flex space-x-2">
                        <button aria-label="Ajouter au panier" type="button" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-green-700 transition" onclick="addToCart({{ product.id }})">
                           Ajouter au panier
                        </button>
                        <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>

    <!-- Script Swiper -->
    <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>
        $(document).ready(function() {
    // Fonction pour vérifier si un produit est dans les favoris
    function checkFavorite(productId, button) {
        $.ajax({
            url: '{{ path('app_favori_check', {'id': 'PRODUCT_ID'}) }}'.replace('PRODUCT_ID', productId),
            type: 'GET',
            success: function(data) {
                if (data.isFavori) {
                    button.addClass('bg-yellow-700').removeClass('bg-yellow-600').text('Retirer des Favoris');
                } else {
                    button.addClass('bg-yellow-600').removeClass('bg-yellow-700').text('Ajouter aux Favoris');
                }
            },
            error: function() {
                console.error('Erreur lors de la vérification des favoris.');
            }
        });
    }

    // Gestion du clic sur le bouton "Ajouter aux Favoris"
    $('.favori-btn').click(function() {
        var productId = $(this).data('product-id');
        var button = $(this);

        // Vérifier si le produit est déjà dans les favoris
        $.ajax({
            url: '{{ path('app_favori_check', {'id': 'PRODUCT_ID'}) }}'.replace('PRODUCT_ID', productId),
            type: 'GET',
            success: function(data) {
                if (data.isFavori) {
                    // Si déjà favori, retirer des favoris
                    $.ajax({
                        url: '{{ path('app_favori_remove', {'id': 'PRODUCT_ID'}) }}'.replace('PRODUCT_ID', productId),
                        type: 'DELETE',
                        success: function() {
                            button.addClass('bg-yellow-600').removeClass('bg-yellow-700').text('Ajouter aux Favoris');
                            alert('Produit retiré des favoris.');

                            // Si on est sur la page des favoris, retirer le produit de la liste
                            if (window.location.pathname === '{{ path('app_favori_list') }}') {
                                button.closest('.product-item').fadeOut(function() {
                                    $(this).remove();
                                });
                            }
                        },
                        error: function() {
                            alert('Erreur lors de la suppression du produit des favoris.');
                        }
                    });
                } else {
                    // Si pas encore favori, ajouter aux favoris
                    $.ajax({
                        url: '{{ path('app_favori_add', {'id': 'PRODUCT_ID'}) }}'.replace('PRODUCT_ID', productId),
                        type: 'POST',
                        success: function() {
                            button.addClass('bg-yellow-700').removeClass('bg-yellow-600').text('Retirer des Favoris');
                            alert('Produit ajouté aux favoris.');
                        },
                        error: function() {
                            alert('Erreur lors de l\'ajout du produit aux favoris.');
                        }
                    });
                }
            },
            error: function() {
                console.error('Erreur lors de la vérification des favoris.');
            }
        });
    });

    // Initialiser l'état des boutons lors du chargement de la page
    $('.favori-btn').each(function() {
        var productId = $(this).data('product-id');
        checkFavorite(productId, $(this));
    });
});
    </script>
{% endblock %}