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

{% block title %}{% endblock %}

{% block body %}

    <div class="container-xl bg-white">

		<div class="container-fluid py-4">

			<div class="row">

				<div class="col-xl-2">

					<p class="mt-2">Catégories</p>

						<h5><a class="text-underline-hover text-black" href="{{ path('show_brands') }}">Nos marques</a></h5>

                        <div class="row">
                        <nav class="navbar navbar-expand-lg">
                            <div class="container-fluid" style="flex-direction: column">
                                <button class="navbar-toggler mb-4" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSubCategories" aria-controls="offcanvasNavbar">
                                    <span class="">Marques</span>
                                </button>
                                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasSubCategories" aria-labelledby="offcanvasSubCategories">
                                    <div class="offcanvas-header">
                                        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Les marques</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                    </div>
                                    <div class="offcanvas-body">
                                    
                                        {# Parties sous catégories #}
                                        <ul class="ps-0" style="list-style-type: none">

                                            {# For pour afficher les sous catégories en question #}
                                            {% for brands in brandsArticles %}
                                                <li>
                                                    {% if brand.title == brands.title %}
                                                        <a class="text-underline-hover fw-bold text-black" href="{{ path('show_specific_brands', {id: brands.id }) }}">{{ brands.title }}</a>
                                                    {% else %}
                                                        <a class="text-underline-hover text-black" href="{{ path('show_specific_brands', {id: brands.id }) }}">{{ brands.title }}</a>
                                                    {% endif %}
                                                </li>

                                                {# {% set brands = {} %}
                                                {% for variations in brand.vetements.values %}

                                                    {% if variations.categorie.title not in brands %}

                                                        {% set brands = brands | merge({ (variations.categorie.id): variations.categorie.title}) %}

                                                    {% endif %}

                                                {% endfor %}

                                                {% for variations in brand.vetementMerchandisings.values %}

                                                    {% if variations.categorieMerchandising.title not in brands %}

                                                        {% set brands = brands | merge({ (variations.categorieMerchandising.id): variations.categorieMerchandising.title}) %}

                                                    {% endif %}

                                                {% endfor %}#}

                                            {% endfor %} 
                                        
                                        </ul>

                                    </div>
                                </div>
                            </div>
                        </nav>

                        {# Partie filtres #}
                        <nav class="navbar navbar-expand-lg">
                            <div class="container-fluid" style="flex-direction: column">
                                <button class="navbar-toggler mb-4" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasFilter" aria-controls="offcanvasNavbar">
                                    <span class="">Filtres</span>
                                </button>
                                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasFilter" aria-labelledby="offcanvasNavbarLabel">
                                    <div class="offcanvas-header">
                                        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Filtres</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                    </div>
                                    <div class="offcanvas-body">
                                        
                                        <div class="pt-3 border-top row">

                                            {{ form(filterForm) }}

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </nav>
            
                    </div>

                            

				</div>

				<div class="col-xl-10">

                    <div class="row mb-3">

                    <h3 class="col-8" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item text-underline-hover">
                                <a class="text-decoration-none text-muted" href="{{ path('default_home') }}">Accueil</a>
                            </li>
                            <li class="breadcrumb-item active">{{ brand.title }}</li>
                        </ol>
                    </h3>


					{# Select pour trier #}
					<div class="col-3 ms-auto mb-4">

						<select class="form-select no-border-radius" onchange="window.location=this.value;">
							<option disabled selected hidden>Trier par</option>
                            {{ knp_pagination_sortable(allArticles, 'Nouveaux arrivage', 'title', {}, {'direction': 'desc'}) }}
							{{ knp_pagination_sortable(allArticles, 'Du moins cher au plus cher', 'price', {}, {'direction': 'asc'}) }}
							{{ knp_pagination_sortable(allArticles, 'Du plus cher au moins cher', 'price', {}, {'direction': 'desc'}) }}
							

						</select>

					</div>

					<div class="row">		

                    {% for article in allArticles %}

                        <div class="card g-0 mx-auto my-2 border-0 border-bottom rounded-0" style="width: 15rem;">

                            <a href="{{ path('view_products', {'id': article.id}) }}" class="text-decoration-none text-black">

                                <img src="{{ asset('images/image_placeholder.png') }}" style="height: 200px; object-fit: contain;" id="article{{article.title}}{{article.id}}" class="card-img-top" alt="{{ article.title }}" loading="lazy">
                                <div class="card-body">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item fw-bold">{{ (article.price)/100 }}
                                            €</li>
                                    </ul>
                                    <h5 class="card-title text-muted">{{ article.title }}</h5>

                                    
                                        {% set colors = {} %}
                                        {% for variations in article.productsQuantities.values %}

                                            {% if variations.color.code not in colors and variations.solde == null %}

                                                {% set colors = colors | merge({ (variations.color.id): variations.color.code}) %}

                                            {% endif %}


                                        {% endfor %}

                                        {% for color in colors %}
                                            <div class="border" style="height: 24px; width: 24px; background-color: white; border-radius: 50%; display: inline-block;">
                                                <div class="mx-auto" style="height: 16px; width: 16px; background-color: {{ color}}; border-radius: 50%; margin-top: 3px;"></div>
                                            </div>

                                        {% endfor %}

                                    
                                   
                                </div>

                            </a>

                        </div>

                        <script>

                        document.addEventListener("DOMContentLoaded", () => {
                        document.getElementById("article" + "{{ article.title }}{{ article.id }}").src = "{{ asset('images/' ~ article.images.values.0.image) }}";
                        });

                        function functionImageEnter() {
                        var image = document.getElementById("article" + "{{ article.title }}{{ article.id }}");
                        image.src = "{{ asset('images/' ~ article.images.values.1.image) }}";
                        }

                        function functionImageLeave() {
                        var image = document.getElementById("article" + "{{ article.title }}{{ article.id }}");
                        image.src = "{{ asset('images/' ~ article.images.values.0.image) }}";
                        }

                        document.getElementById("article" + "{{ article.title }}{{ article.id }}").addEventListener("mouseenter", functionImageEnter);
                        document.getElementById("article" + "{{ article.title }}{{ article.id }}").addEventListener("mouseleave", functionImageLeave);
                        </script>

                    {% endfor %}

					</div>

					<div class="container mt-3">

						<div class="row">

							<div class="col-6 mx-auto">
                                
								{{ knp_pagination_render(allArticles) }}
									
							</div>

						</div>

					</div>


				</div>

			</div>
			</div>


		</div>
	</div>



{% endblock %}