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

{% block title %}{{ formule.title }} - Mon P'tit matin{% endblock %}

{% block content %}
    <div class="page-produit mt-5">
        <div class="row image-option justify-content-between">
            <div class="col-md-6">
                <img src="/uploads/{{ formule.illustration }}" alt="{{ formule.title }}" class="image_produit mb-3  ">
                
                <h2 class='text-center'>{{ formule.title }}</h2>
                <br>
            </div>
            
            <div class="col-md-5">
                <strong>Il vous reste <span id="nb_restant"></span> produits aux choix</strong>
                    <div class="accordion" id="accordion">
                        {% for category in categories %}
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ category.id }}" aria-expanded="false" aria-controls="collapse{{ category.id }}">
                                        <h5>{{ category.name }}</h5>
                                    </button>
                                </h2>
                                <div id="collapse{{ category.id }}" class="accordion-collapse collapse" data-bs-parent="#accordion">
                                   <div class="accordion-body">
                                        {% for product in products %}
                                            {% if product.category == category %}
                                                <label class="check mb-2">
                                                    <input type="checkbox" class="product-checkbox" value="{{ product.id }}" data-category="{{ category.id }}">
                                                    <span>{{ product.name }}</span>
                                                    {# <a href="#" class="add-product" data-product-id="{{ product.id }}">+</a>
                                                    <a href="#" class="remove-product" data-product-id="{{ product.id }}">-</a> #}
                                                </label>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>     
                    <div id='cartbtn'  class="cartbtnactive">   
                        <div class='disabled-info alert alert-warning mt-2'>Veuiller ajouter {{ formule.getNbProduct() }} produits au panier </div> 
                              
                        <a href="#" id="addToCartBtn" class="bg-basic btn w-100  disabled" >Ajouter au panier</a>   
                    </div>
            </div>
        </div>
        <div class="formule-description mt-5 bg-white br-1">
            {{ formule.description|raw }}

        </div>
    </div>


<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    var nb_restant = document.getElementById('nb_restant')
    
    $(document).ready(function () {
    var nb_restant = document.getElementById('nb_restant');
    var nb_product = {{ formule.getNbProduct() }};
    nb_restant.innerText = nb_product
    var selectedProducts = 0;

    var cartbtns = document.getElementById('cartbtn');
    var cartbtn = document.getElementById('addToCartBtn');
    

    $('.product-checkbox').on('change', function () {
        if ($(this).prop('checked')) {
            // Si la case est cochée, vérifier le nombre total de produits sélectionnés
            if (selectedProducts >= nb_product) {
                $(this).prop('checked', false);
                

            } else {
                selectedProducts++;
                nb_restant.innerText = nb_product - selectedProducts;
            }
        } else {
            // Si la case est décochée, décrémenter le nombre total de produits sélectionnés
            selectedProducts--;
            nb_restant.innerText = nb_product - selectedProducts;
        }

        // Si le nombre de produits sélectionnés est égal au nombre total de produits, retirer la classe "disabled" du bouton
        if (selectedProducts === nb_product) {
            cartbtn.classList.remove('disabled');
            cartbtns.classList.remove('cartbtnactive');
        } else {
            cartbtn.classList.add('disabled');
            cartbtns.classList.add('cartbtnactive');

        }
    });
});
    
</script>
<script>

$(document).ready(function() {
    // Initialisation de la liste des produits sélectionnés
    var selectedProductIds = [];

    // Gestion de la sélection/désélection des produits
    $('.product-checkbox').change(function() {
        var productId = $(this).val();
        if ($(this).is(':checked')) {
            // Ajouter l'ID du produit à la liste
            selectedProductIds.push(productId);
        } else {
            // Retirer l'ID du produit de la liste
            selectedProductIds = selectedProductIds.filter(id => id !== productId);
        }
        // Si dans le tableau des produits séléctionné il y a notre product id , on s'en sert dans le + et le - 
        if (selectedProductIds.includes(productId)) {
                    console.log("affiche :", productId);
        // RAYAN DU FUTUR C'EST HIDE ET SHOW qui ne marche pas
            $(this).next('.add-product').hide();
            $(this).next('.remove-product').show();
        } else {
                    console.log("n'affiche pas :", productId);

            $(this).next('.add-product').show();
            $(this).next('.remove-product').hide();
        }
        
        console.log("IDs des produits sélectionnés :", selectedProductIds);
    });

    // Gestion de l'ajout de produit
    $('.add-product').click(function(e) {
        e.preventDefault();
        var productId = $(this).data('product-id');
        // Ajouter l'ID du produit à la liste
        selectedProductIds.push(productId);
        console.log("IDs des produits sélectionnés :", selectedProductIds);
    });

    // Gestion de la suppression de produit
$('.remove-product').click(function(e) {
    e.preventDefault();
    var productId = $(this).data('product-id');
    // Trouver l'index de l'productId dans selectedProductIds
    var index = selectedProductIds.indexOf(productId);
    if (index !== -1) {
        // Retirer l'élément de selectedProductIds à cet index
        selectedProductIds.splice(index, 1);
    }
    console.log("IDs des produits sélectionnés :", selectedProductIds);
});

    // Gestion de la soumission du formulaire
    $('#addToCartBtn').click(function(e) {
        e.preventDefault();

        // Récupérer l'ID de la formule
        var formuleId = "{{ formule.id }}";

        // Construire l'URL avec les IDs des produits sélectionnés
        var url = "{{ path('app_add_to_cart', {'id': 'formuleIdPlaceholder', 'productIdsArray': 'productIdsArrayPlaceholder'}) }}";
        url = url.replace('formuleIdPlaceholder', formuleId);
        url = url.replace('productIdsArrayPlaceholder', selectedProductIds.join(','));
        //console.log(url)
        // Rediriger ou effectuer une autre action avec l'URL construit
        window.location.href = url;
    });
});
</script>
{% endblock %}