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

{% block title %}Metallian Eshop | {{ souscategories.title }}{% endblock %}

{% block body %}

    <div class="container bg-white">

        {# <h1 class="py-5 ms-4">Les {{ souscategories.title }}</h1> #}

        <div class="container-fluid py-4">
        
            <div class="row">
            
                <div class="col-lg-2">

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

                    <h3><a class="text-underline-hover text-black" href="{{ path('show_vetements_from_category', {"title": categories.title}) }}">{{ categories.title }}</a></h3>

                    <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="">Sous catégories</span>
                                    </button>
                                    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasSubCategories" aria-labelledby="offcanvasSubCategories">
                                        <div class="offcanvas-header">
                                            <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Sous catégories</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-3" style="list-style-type: none">

                                                {# For pour afficher la bare de navigation a gauche #}
                                                {% for subcategory in allsouscategories %}

                                                    {% if subcategory.categorie.title == categories.title %}
                                            
                                                        <li><a class="text-underline-hover text-black" href="{{ path('show_souscategorie_from_category', {"title": subcategory.title, "title1": categories.title}) }}">{{ subcategory.title }}</a></li>

                                                    {% endif %}

                                                {% 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">Offcanvas</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">

                                            <h4>Filtres</h4>

                                            {% if categories.title == 'Femme' %}

                                                {{ form_start(filterForm) }}

                                                <div class="row align-items-center">

                                                    {{ form_label(filterForm.Couleur) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-minus d-flex justify-content-end" id="flecheCouleur"></i>
                                                    </div>

                                                    {{ form_widget(filterForm.Couleur) }}
                                                
                                                </div>

                                                <div class="row align-items-center">

                                                    {{ form_label(filterForm.Size) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-minus d-flex justify-content-end" id="flecheSize"></i>
                                                    </div>

                                                    {{ form_widget(filterForm.Size) }}
                                                
                                                </div>

                                                <div class="row align-items-center">

                                                    {{ form_label(filterForm.material) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-plus d-flex justify-content-end" id="flecheMaterial"></i>
                                                    </div>

                                                    {{ form_widget(filterForm.material) }}
                                                
                                                </div>

                                                <div class="row align-items-center mb-2">

                                                    {{ form_label(filterForm.marque) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-plus d-flex justify-content-end" id="flecheMarque"></i>
                                                    </div>

                                                    {{ form_widget(filterForm.marque) }}
                                                
                                                </div>

                                                {{ form_end(filterForm) }}

                                            {% endif %}

                                            {% if categories.title == 'Enfant' %}
                                            
                                                {{ form_start(filterForm) }}

                                                <div class="row align-items-center">

                                                    {{ form_label(filterForm.Couleur) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-minus d-flex justify-content-end" id="flecheCouleur"></i>
                                                    </div>

                                                    {{ form_widget(filterForm.Couleur) }}
                                                
                                                </div>

                                                <div class="row align-items-center">

                                                    {{ form_label(filterForm.Size) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-minus d-flex justify-content-end" id="flecheSize"></i>
                                                    </div>

                                                    {{ form_widget(filterForm.Size) }}
                                                
                                                </div>

                                                <div class="row align-items-center">

                                                    {{ form_label(filterForm.material) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-plus d-flex justify-content-end" id="flecheMaterial"></i>
                                                    </div>

                                                    {{ form_widget(filterForm.material) }}
                                                
                                                </div>

                                                <div class="row align-items-center mb-2">

                                                    {{ form_label(filterForm.marque) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-plus d-flex justify-content-end" id="flecheMarque"></i>
                                                    </div>

                                                    {{ form_widget(filterForm.marque) }}
                                                
                                                </div>

                                                {{ form_end(filterForm) }}

                                            {% endif %}

                                            {% if categories.title == 'Homme' %}
                                            
                                                {{ form_start(filterForm) }}

                                                <div class="row align-items-center">

                                                    {{ form_label(filterForm.Couleur) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-minus d-flex justify-content-end" id="flecheCouleur"></i>
                                                    </div>

                                                    {{ form_widget(filterForm.Couleur) }}
                                                
                                                </div>

                                                <div class="row align-items-center">

                                                    {{ form_label(filterForm.Size) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-minus d-flex justify-content-end" id="flecheSize"></i>
                                                    </div>

                                                    {{ form_widget(filterForm.Size) }}
                                                
                                                </div>

                                                <div class="row align-items-center">

                                                    {{ form_label(filterForm.material) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-plus d-flex justify-content-end" id="flecheMaterial"></i>
                                                    </div>

                                                    {{ form_widget(filterForm.material) }}
                                                
                                                </div>

                                                <div class="row align-items-center mb-2">

                                                    {{ form_label(filterForm.marque) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-plus d-flex justify-content-end" id="flecheMarque"></i>
                                                    </div>

                                                    {{ form_widget(filterForm.marque) }}
                                                
                                                </div>

                                                {{ form_end(filterForm) }}

                                            {% endif %}

                                            {% if categories.title == 'Bijoux' %}

                                                {{ form_start(filterBijouxForm) }}
                                        
                                                <div class="row align-items-center mb-2">

                                                    {{ form_label(filterBijouxForm.Couleur) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-minus d-flex justify-content-end" id="flecheCouleur"></i>
                                                    </div>

                                                    {{ form_widget(filterBijouxForm.Couleur) }}
                                                
                                                </div>

                                                {{ form_end(filterBijouxForm) }}

                                            {% endif %}

                                            {% if categories.title == 'Chaussures' %}

                                                {{ form_start(filterChaussuresForm) }}
                                        
                                                <div class="row align-items-center">

                                                    {{ form_label(filterChaussuresForm.Couleur) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-minus d-flex justify-content-end" id="flecheCouleur"></i>
                                                    </div>

                                                    {{ form_widget(filterChaussuresForm.Couleur) }}
                                                
                                                </div>

                                                 <div class="row align-items-center">

                                                    {{ form_label(filterChaussuresForm.Size) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-minus d-flex justify-content-end" id="flecheSize"></i>
                                                    </div>

                                                    {{ form_widget(filterChaussuresForm.Size) }}
                                                
                                                </div>

                                                <div class="row align-items-center mb-2">

                                                    {{ form_label(filterChaussuresForm.material) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-plus d-flex justify-content-end" id="flecheMaterial"></i>
                                                    </div>

                                                    {{ form_widget(filterChaussuresForm.material) }}
                                                
                                                </div>

                                                {{ form_end(filterChaussuresForm) }}

                                            {% endif %}

                                            {% if categories.title == 'Accessoires' %}
                                        
                                                {{ form_start(filterAccessoiresForm) }}
                                                
                                                <div class="row align-items-center">

                                                    {{ form_label(filterAccessoiresForm.Couleur) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-minus d-flex justify-content-end" id="flecheCouleur"></i>
                                                    </div>

                                                    {{ form_widget(filterAccessoiresForm.Couleur) }}
                                                
                                                </div>

                                                <div class="row align-items-center mb-2">

                                                    {{ form_label(filterAccessoiresForm.material) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-plus d-flex justify-content-end" id="flecheMaterial"></i>
                                                    </div>

                                                    {{ form_widget(filterAccessoiresForm.material) }}
                                                
                                                </div>

                                                {{ form_end(filterAccessoiresForm) }}

                                            {% endif %}

                                            {% if categories.title == 'Médias' %}
                                        
                                                {{ form_start(filterMediaForm) }}

                                                <div class="row align-items-center mb-2">

                                                    {{ form_label(filterMediaForm.musicType) }}
                                    
                                                    <div class="col-2 ">
                                                        <i class="fa-solid fa-minus d-flex justify-content-end" id="flecheMusicType"></i>
                                                    </div>

                                                    {{ form_widget(filterMediaForm.musicType) }}
                                                
                                                </div>

                                                {{ form_end(filterMediaForm) }}

                                            {% endif %}

                                        </div>

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

                 <div class="col-lg-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 text-underline-hover"><a class="text-decoration-none text-muted" href="{{ path('show_vetements_from_category', {"title": categories.title}) }}">{{ categories.title }}</a></li>
                                <li class="breadcrumb-item active">{{ souscategories.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(products, 'Nouveaux arrivage', 'v.createdAt', {}, {'direction': 'desc'}) }}
                                    {{ knp_pagination_sortable(products, 'Du moins cher au plus cher', 'v.price', {}, {'direction': 'asc'}) }}
                                    {{ knp_pagination_sortable(products, 'Du plus cher au moins cher', 'v.price', {}, {'direction': 'desc'}) }}

                                </select>

					    </div> 
                    </div> 

                    <div class="row">

                        {% for vetement in products %}
                        
                            <div class="card g-0 mx-auto my-2 border-0 border-bottom rounded-0" style="width: 15rem;">

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

                                    <img src="{{ asset('images/image_placeholder.png') }}" id="article{{vetement.title}}{{vetement.id}}" style="height: 200px; object-fit: contain;" class="card-img-top" alt="{{ vetement.title }}">

                                    <div class="card-body">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item fw-bold">{{ (vetement.price)/100 }} €</li>
                                        </ul>
                                        <h5 class="card-title text-muted">{{ vetement.title }}</h5>
                                            {% set colors = {} %}
                                            {% for variations in vetement.productsQuantities.values %}

                                                {% if variations.color.code not in colors %}
                                                
                                                    {% 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 %}
                                        {# <p class="card-text">{{ vetement.description }}</p>
                                        <a href="#" class="card-link">Ajouter au panier</a> #}
                                    </div>                

                                </a>

                            </div>

                            <script>

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

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

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

                        {# Pagination #}

                        <div class="container mt-3">
                        
                            <div class="col-3 ms-auto me-2">
                                
                                {{ knp_pagination_render(products) }}
                                
                            </div>
                            
                        </div>

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

    </div>



{% endblock %}