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

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

{% block metaTag %}

    {% if categories.title == 'Homme' %}
    
        <meta name="description" content="La garde-robe d'un homme est essentielle pour son style personnel. Des costumes aux tenues décontractées, les choix vestimentaires d'un homme reflètent sa personnalité et ses intérêts. Cette catégorie explore les types de vêtements que chaque homme devrait avoir dans son placard et comment les mélanger et les assortir pour une garde-robe polyvalente et à la mode.">

    {% endif %}

    {% if categories.title == 'Femme' %}
    
        <meta name="description" content="La garde-robe d'une femme est le reflet de son style personnel et de son sens de la mode. Des robes et jupes élégantes aux jeans et t-shirts confortables, les choix vestimentaires d'une femme peuvent faire sensation et faire tourner les têtes. Dans cette catégorie, nous offrons les différents types de vêtements que chaque femme devrait avoir dans sa garde-robe pour créer une garde-robe polyvalente et à la mode. Que vous soyez une professionnelle, une étudiante ou une mère au foyer.">

    {% endif %}

    {% if categories.title == 'Enfant' %}
    
        <meta name="description" content="Les enfants et les adolescents grandissent et se développent constamment, et leurs vêtements doivent suivre l'évolution de leur corps et de leur style. Des uniformes scolaires aux vêtements de sport en passant par les robes de soirée et les tenues décontractées, la garde-robe d'un enfant doit être fonctionnelle, confortable et élégante. Dans cette catéroei, nous vous offrons les différents types de vêtements essentiels pour les enfants et les adolescents.">

    {% endif %}

    {% if categories.title == 'Accessoires' %}
    
        <meta name="description" content="Ajoutez une touche de style et d'élégance à votre tenue avec notre ligne exclusive d'accessoires. Des écharpes et chapeaux à la mode aux sacs à main et bijoux chics, nous avons quelque chose pour tous les goûts et toutes les occasions. Nos accessoires sont fabriqués avec des matériaux de haute qualité et une attention aux détails, garantissant que vous obtenez une pièce durable et unique qui complétera votre style personnel.">

    {% endif %}

    {% if categories.title == 'CDs' %}
    
        <meta name="description" content="Développez votre collection de divertissement avec notre large gamme de CD, DVD et disques Blu-ray. Que vous soyez un mélomane, un cinéphile ou un passionné de jeux, nous avons quelque chose pour vous. Nos CD, DVD et disques Blu-ray sont soigneusement sélectionnés pour offrir une gamme variée de genres et de titres, des derniers succès aux classiques intemporels. Avec un son et une vidéo de haute qualité, nos disques offrent une expérience d'écoute et de visionnage supérieure.">

    {% endif %}

    {% if categories.title == 'Chaussures' %}
    
        <meta name="description" content="Mettez en valeur vos chaussures grâce à notre collection de chaussures élégantes et confortables. Des baskets et bottes classiques aux sandales et talons à la mode, nous avons une grande variété de chaussures pour tous les goûts et tous les besoins. Nos chaussures sont faites de matériaux et de savoir-faire de haute qualité, assurant non seulement un bel aspect, mais aussi le support et la durabilité dont vous avez besoin. En outre, avec nos prix concurrentiels et nos ventes régulières, vous pouvez obtenir une paire de chaussures parfaite sans vous ruiner.">

    {% endif %}

    {% if categories.title == 'Bijoux' %}
    
        <meta name="description" content="Faites briller vos tenues avec notre magnifique et unique sélection de bijoux. Des bagues et boucles d'oreilles délicates aux colliers et bracelets audacieux, nous offrons une large gamme de styles et de conceptions. Nos bijoux sont fabriqués avec des matériaux de haute qualité, tels que l'argent sterling, l'or et les diamants, garantissant que vous obtenez une pièce durable et précieuse qui améliorera votre apparence. De plus, avec nos prix abordables et nos remises régulières, vous pouvez vous gâter ou offrir à quelqu'un de spécial un bijou sans casser la banque.">

    {% endif %}

{% endblock %}

{% block body %}

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

        <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 les sous catégories en question #}
                                            {% for subcategory in souscategories %}

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

                                            <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">

                                                    {{ 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>

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

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

                                                    {{ form_widget(filterForm.artist) }}
                                                
                                                </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">

                                                    {{ 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>

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

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

                                                    {{ form_widget(filterForm.artist) }}
                                                
                                                </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">

                                                    {{ 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>

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

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

                                                    {{ form_widget(filterForm.artist) }}
                                                
                                                </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 == 'CDs' or categories.title == 'Vinyles' %}
                                        
                                                {{ 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-9"><a href="{{ path('default_home') }}" class="text-underline-hover text-black">Accueil</a> / {{ categories.title }}</h3> #}
                        <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">{{ categories.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 product 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': product.id}) }}" class="text-decoration-none text-black">

                                    {% if product.images is not null %}
                                        <img src="{{ asset('images/' ~ product.images.values.0.image) }}"  style="height: 200px; object-fit: contain;" id="article{{product.title}}{{product.id}}" class="card-img-top" alt="{{ product.title }}" loading="lazy">
                                    {% endif %}
                                    <div class="card-body">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item fw-bold">{{ ((product.price)/100) | number_format(2) }} €</li>
                                        </ul>
                                        {% if product.artist is not null %}
                                            <h4 class="card-title text-muted">{{ product.artist }}</h4>
                                        {% endif %}
                                        <h5 class="card-title text-muted">{{ product.title }}</h5>

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

                                            {% if variations.color is not null %}

                                                {% if variations.color.code not in colors and variations.solde == null %}
                                                
                                                    {% set colors = colors | merge({ (variations.color.id): variations.color.code}) %}
                                                
                                                {% endif %}

                                            {% 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" + "{{product.title}}{{product.id}}").src = "{{ asset('images/' ~ product.images.values.0.image) }}";
                                // });                                                                         
         
                            </script>

                            {% endfor %}

                        {# Pagination #}

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

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

<script>


</script>

{% endblock %}