{% extends "@Flexy/FrontBundle/Themes/IlaveU/templates/layout.html.twig"  %}

{% block body %}


<style>

.modal{
    box-shadow:0 0 8px #33333390;
}
.parent-filter-category .btn{
        background: #45dae9;
        color: white;
        font-weight:bold;
        border-radius: 5px;
}

.filter-category .btn{
        background: black;
        color: white;
        border-radius:5px;
        font-weight:600;
        font-size: 10px;
        letter-spacing:1px;
}

.filter-category .btn:hover{
        background: black;
        color: white;
        border-radius:5px;
        padding:4px;
}

.filter-category .btn.btn-active,.parent-filter-category .btn.btn-active{
            background: #ffbc4a;
    color: black;
}


</style>

	<div
		class="body-wrapper">
         <div class="container mt-5" >

         <h2 class="text-center mt-3 mb-3" >Tarifs</h2>



                                

         <div class="input-group mb-3">
                
                <input type="text" class="form-control" id="search-product" placeholder="Rechercher " aria-label="Recipient's username" aria-describedby="basic-addon2">
                
            </div>
            <div class="row mb-3">
                {% for categorie in categories %}
                {% if categorie.parentCategory == null %}
                    <div class="col parent-filter-category d-none mb-2 " data-categ="categ-{{categorie.id}}"  ><a href="#" class="btn btn-primary  btn-lg d-block text-center p-3"  >{{categorie.name|upper}}</a></div>
                {% endif %}
                {% endfor %}
            </div>
            
            <div class="row mb-4">
                {% for categorie in categories %}
                {% if categorie.parentCategory != null %}
                    <div class="col filter-category mb-2  d-none categ-{{categorie.parentCategory.id}}" data-categ="categ-{{categorie.id}}" >
                    <a href="#" class="btn btn-primary d-block text-center"   >{{categorie.name}}</a></div>
                {% endif %}
                {% endfor %}
            </div>



                        <div class="row" >
                {% for product in products %}

                   {% if product.productType == "simple" or product.productType == "pack" %}
                   <div class="col-4 col-md-3 col-lg-3 col-xl-3 mb-3 single-product {% for categorie in product.categoriesProduct %}categ-{{categorie.id}} {% endfor %}" >


                        {% set rootVendor = "" %}    
                        {% if is_granted('ROLE_VENDOR') %}
                        
                        
                        {% set rootVendor = "/" %}
                        {% endif %}
                        

                        {% set price = product.price  %}

                        {% if product.reduction %}
                            {% set price = product.price - product.reduction %}
                        {% endif %}

                        {# add-product-to-cart OLD CSS CLASS #}
                        <div class="tt-item" data-product-type="product" data-product-type="product" data-image="{{settings.get.rootUrl}}/{{asset('uploads/ilaveu/shop/products/'~product.image)}}" data-name="{{product.name}}" data-price="{{price}}"  data-id="{{product.id}}" {% if product.attributValues|length > 0 %} data-attribute="true" {% endif %} >
                        <div class="promo03 js-handler">
									<div class="promo03__move">
										<div class="promo03__icon ">
                                            <img height="180px" src="{{asset('uploads/ilaveu/shop/products/'~product.image)}}" />
                                        </div>
										<div class="promo03__title">{{product.name}}</div>
										<div class="promo03__subtitle d-none" style="    font-size: 11px;line-height: 15px;padding: 0 12px;">

                                                 
                                                {% if product.description|length < 100 %}
                                                {{product.description}}
                                                   
                                                {% else %}
                                                     {{product.description|slice(0,100)}}...
                                                {% endif %}
                                            
                                        
                                        </div>
										<div class="promo03__price">

                                        {% if product.isLabelPriceFrom == true %}
                                            <small>Á partir de</small>
                                            {% endif %}
											<span class="tt-value">
                                            
                                            {% if product.reduction %}
                                                <small style="color:#ddd;"><s>{{ product.price }} MAD</s></small><br>
                                                {{ price }} MAD
                                            {% else %}
                                                {{ price }} MAD
                                            {% endif %}
                                            </span>
                                            {% if product.productType == "simple" %}
                                            <div style="position:absolute;bottom:5px;margin:auto;width:100%;" class="row mt-3 p-3">
                                               

                                                <div class="col-3" style="padding-left:0;" >
                                                    <button data-id="p-{{product.id}}" type="button" class="btn  btn-primary decrease-quantite-to-cart" style="background-color:black;"><i class="fas fa-minus"></i></button>
                                                </div>
                                                <div class="col-6 " style="padding-left:0;" >
                                                <div id="qty-p-{{product.id}}" class="p-1 text-center" style="font-size:14px;width:100px;" >
                                                    0
                                                </div>
                                                </div>

                                                 <div class="col-3" style="padding-left:0;">
                                                    <button class="btn btn-primary add-product-to-cart"  style="background-color:black;" data-product-type="product" data-product-type="product" data-image="{{settings.get.rootUrl}}/{{asset('uploads/ilaveu/shop/products/'~product.image)}}" data-name="{{product.name}}" data-price="{{price}}"  data-id="{{product.id}}" {% if product.attributValues|length > 0 %} data-attribute="true" {% endif %} ><i class="fas fa-plus"></i></button>
                                                </div>
                                                
                                            </div>
                                            {% endif %}
										</div>
										<div class="promo03__show-btn">
											<a href="#" class="tt-btn" tabindex="0">
												<span class="mask">Commandez</span>
												<div class="button">Commandez</div>
											</a>
										</div>
									</div>
								</div>
                                </div>

                        
                    </div>

                    {% elseif product.attributValues|length > 0 and product.productType == "variable" %}

<div class="col-4 col-md-3 col-lg-3 col-xl-3 mb-3 single-product {% for categorie in product.categoriesProduct %}categ-{{categorie.id}} {% endfor %}" >


                        {% set rootVendor = "" %}    
                        {% if is_granted('ROLE_VENDOR') %}
                        
                        
                        {% set rootVendor = "/" %}
                        {% endif %}
                        

                        {% set price = product.price  %}

                        {% if product.reduction %}
                            {% set price = product.price - product.reduction %}
                        {% endif %}


                        <div class="tt-item " data-product-type="product" data-product-type="product" data-image="{{settings.get.rootUrl}}/{{asset('uploads/ilaveu/shop/products/'~product.image)}}" data-name="{{product.name}}" data-price="{{price}}"  data-id="{{product.id}}" {% if product.attributValues|length > 0 %} data-attribute="true" {% endif %} >
                        <div class="promo03 js-handler">
									<div class="promo03__move">
										<div class="promo03__icon ">
                                            <img height="180px" src="{{asset('uploads/ilaveu/shop/products/'~product.image)}}" />
                                        </div>
                                       
                                        
                                   

										<div class="promo03__title">{{product.name}}</div>
										<div class="promo03__subtitle" style="    font-size: 11px;line-height: 15px;padding: 0 12px;">

                                                 
                                                {% if product.description|length < 100 %}
                                                {{product.description}}
                                                   
                                                {% else %}
                                                     {{product.description|slice(0,100)}}...
                                                {% endif %}
                                            
                                        
                                        </div>
                                        
										<div class="promo03__price">
                                           {% if product.isLabelPriceFrom == true %}
                                            <small>Á partir de</small>
                                            {% endif %}

											<span class="tt-value">
                                            
                                            {% if product.reduction %}
                                                <small style="color:#ddd;"><s>{{ product.price }} MAD</s></small><br>
                                                {{ price }} MAD
                                            {% else %}
                                                {{ price }} MAD
                                            {% endif %}
                                            </span>
                                             <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-product-attributes-{{product.id}}">
                                            <i class="fa-solid fa-list-check"></i> Sélectionner des options
                                        </button>
										</div>
										<div class="promo03__show-btn">
											<a href="#" class="tt-btn" tabindex="0">
												<span class="mask">Commandez</span>
												<div class="button">Commandez</div>
											</a>
										</div>
									</div>
								</div>
                                </div>

                        
                    </div>
                     

                    {% endif %}
                {% endfor %}
                </div>
            </div>

         </div>



	</div>


    {% for product in products %}
{% if product.attributValues|length > 0 and product.productType == "variable" %}

{% set price = product.price  %}

                        {% if product.reduction %}
                            {% set price = product.price - product.reduction %}
                        {% endif %}

        <!-- Modal -->
                                        <div class="modal fade" id="modal-product-attributes-{{product.id}}" tabindex="1" aria-labelledby="modal-product-label-{{product.id}}" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content" style="min-width:400px;">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="modal-product-label-{{product.id}}">{{product.name}}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                                <div class="text-center" >
                                                    <img style="height:140px" src="{{asset('uploads/ilaveu/shop/products/'~product.image)}}" />
                                                </div>
                                                <div class="mb-3">
                                                <label for="exampleFormControlInput1" class="form-label">Sélectionner une option</label>
                                                <select name="attribute-option-price" class="form-control" data-product-id="{{product.id}}">
                                                    {% for singleAttribut in product.attributValues %}
                                                            <option value="{{singleAttribut.price}}" >{{singleAttribut.attribut}}</option>
                                                    {% endfor %}
                                                                    </select>
                                                </div>
                                                <div class="mb-3">
                                                <label for="exampleFormControlTextarea1" class="form-label">Entrer les dimensions</label>
                                                <input value="1" min="1" max="20" class="form-control" name="dimension-attribut" type="number"  data-product-id="{{product.id}}" />
                                                </div>
                                                <div class="mb-3 d-none">
                                                <label for="exampleFormControlTextarea1" class="form-label">Sélectionner la quantité pour cette option</label>
                                                <input value="1" min="1" max="20" class="form-control" name="quantity-attribut" type="number"  data-product-id="{{product.id}}" />
                                                </div>

                                           

                                            

                                            
                                        </div>
                                        <div class="modal-footer">
                                            
                                            <button   class=" attr-add-to-cart add-product-to-cart btn btn-primary" 
                                            data-container-id="#modal-product-attributes-{{product.id}}"
                                            data-product-type="product" data-product-type="product" data-image="{{settings.get.rootUrl}}/{{asset('uploads/ilaveu/shop/products/'~product.image)}}" data-name="{{product.name}}" data-price="{{price}}"  data-id="{{product.id}}" {% if product.attributValues|length > 0 and product.productType=="variable" %} data-attribute="true" {% endif %} type="button" class=""><i class="fa-solid fa-cart-plus" data-bs-dismiss="modal"></i> Ajouter</button>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
    {% endif %}
    {% endfor %}

{% endblock %}


{% block javascripts %}
	{{parent()}}
	<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-js/1.3.0/sticky.min.js" integrity="sha512-3z3zGiu0PabNyuTAAfznBJFpOg4owG9oQQasE5BwiiH5BBwrAjbfgIe0RCdtHJ0BQV1YF2Shgokbz2NziLnkuQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script>


document.addEventListener("turbo:load",function(){


  $("#search-product").on("keyup", function() {
    $('.parent-filter-category a').removeClass("btn-active");
$('.filter-category a').removeClass("btn-active");

    var value = $(this).val().toLowerCase();
    $(".single-product").filter(function() {
      $(this).toggle($(this).find(".promo03").text().toLowerCase().indexOf(value) > -1)
    });
  });




     $('.parent-filter-category').click(function(){


        $('.parent-filter-category a').removeClass("btn-active");
        


        $(this).find("a").addClass("btn-active");


        var dataCateg = $(this).attr("data-categ");

        
            $(".filter-category").hide();
            $(".filter-category")
            .filter("."+dataCateg)
            .show();

            $(".single-product").hide();
            $(".single-product")
            .filter("."+dataCateg)
            .show();
    });

        $('.filter-category').click(function(){



         $('.filter-category a').removeClass("btn-active");
        $(this).find("a").addClass("btn-active");

        var dataCateg = $(this).attr("data-categ");

        //alert(dataCateg);
            $(".single-product").hide();
            $(".single-product")
            .filter("."+dataCateg)
            .show();
    });


    $('.parent-filter-category,.filter-category').removeClass("d-none");
$('.parent-filter-category:first-child').trigger("click");
    $('[data-categ="categ-4"]').trigger("click");


});


$(".attr-add-to-cart").click(function(){
    $(".hm-minicart-trigger").trigger("click");
});


	</script>


{% endblock %}