{% extends "@Flexy/FrontBundle/Themes/" ~ settings.get.assetFolderName|capitalize ~ "/templates/layout.html.twig"  %}

{% block body %}


<style>

.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 %}
                   <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 add-product-to-cart" data-product-type="product" data-product-type="product" data-image="uploads/{{asset(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/'~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">
											<span class="tt-value">
                                            
                                            {% if product.reduction %}
                                                <small style="color:#ddd;"><s>{{ product.price }} EUR</s></small><br>
                                                {{ price }} EUR
                                            {% else %}
                                                {{ price }} EUR
                                            {% endif %}
                                            </span>
										</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>
                {% endfor %}
                </div>
            </div>

         </div>



	</div>

{% 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");


});

	</script>


{% endblock %}