{% extends 'front/base.html.twig' %}
{% set company = Globals.getCompany() %}
{% set categorySiteUrl = (company.website ?: (app.request.schemeAndHttpHost ~ app.request.baseUrl))|trim('/') ~ '/' %}
{% block title %}{{ company.name }} | {{ categorie.getName() }} {% endblock %}
{% block meta %}
    <meta name="keywords" content="Chaussures,Chaussures Femme,Jebba,Robe,Bottine">
    <meta name="description" content="Marque tunisienne spécialisée dans la vente de vêtements et chaussures en ligne">
    <meta name="author" content={{ companyName }}>
    <!-- Facebook OG -->
    <meta property="og:image" content="{{ asset('front/assets/imgs/theme/logo3.png') }}">
    <meta property="og:url" content="{{ categorySiteUrl }}">
    <meta property="og:type" content="article">
    <meta property="og:title" content="{{ Globals.getCompany().name }} | Marque tunisienne spécialisée dans la vente de vêtements et chaussures en ligne">
    <meta property="og:description" content="Marque tunisienne spécialisée dans la vente de vêtements et chaussures en ligne">
    <!-- Twitter OG -->
    <meta name="twitter:title" content="{{ Globals.getCompany().name }} | Marque tunisienne spécialisée dans la vente de vêtements et chaussures en ligne">
    <meta name="twitter:description" content="Marque tunisienne spécialisée dans la vente de vêtements et chaussures en ligne">
    <meta name="twitter:image" content="{{ asset('front/assets/imgs/theme/logo3.png') }}">
    <meta name="twitter:card" content="summary_large_image">
{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <style>
        .product-cart-wrap .product-img-action-wrap {
            max-height: none;
        }
    </style>
    <script>
        var category_id = JSON.parse("{{ category_id|e('js') }}")
        // Filtres des tailles et couleurs
        var taillesFilter = {{ Globals.getTailles(categories)|json_encode|raw }};
        var couleursFilter = {{ Globals.getCouleurs(categories)|json_encode|raw }};
    </script>
{% endblock %}

{% block body %}
    {# {% verbatim %} #}
    <main class="main" id="app" v-cloak>
        <div class="page-header breadcrumb-wrap">
           <div class="container">
                <nav class="breadcrumb-clean" aria-label="breadcrumb">
                    <a href="{{ path('home') }}" rel="nofollow">Accueil</a>

                    {% if categorie.parent is defined and categorie.parent.parent is defined and categorie.parent.parent is not null %}
                        <span class="separator">&gt;</span>
                        <a href="{{ path('category_new', { id: categorie.parent.parent.id, name: categorie.parent.parent.name|slug }) }}" rel="nofollow">
                            {{ categorie.parent.parent.name }}
                        </a>
                    {% endif %}

                    {% if categorie.parent is defined and categorie.parent is not null %}
                        <span class="separator">&gt;</span>
                        <a href="{{ path('category_new', { id: categorie.parent.id, name: categorie.parent.name|slug }) }}" rel="nofollow">
                            {{ categorie.parent.name }}
                        </a>
                    {% endif %}

                    <span class="separator">&gt;</span>
                    <span class="current">{{ categorie.getName() }}</span>
                </nav>
            </div>

        </div>
        <section class="mt-50 mb-50">
            <div class="container">
                <div class="row flex-row-reverse">
                    <div class="col-lg-9">
                        <div class="shop-product-fillter">
                            <div class="totall-product">
                                <p> Nous avons trouvé <strong class="text-brand">${ totalItems }</strong> article<span v-if="totalItems>1">s</span> !</p>
                            </div>
                            <div class="sort-by-product-area">
                                <div class="sort-by-cover me-10">
                                    <div class="sort-by-product-wrap">
                                        <div class="sort-by">
                                            <span><i class="fi-rs-apps"></i>Montrer:</span>
                                        </div>
                                        <div class="sort-by-dropdown-wrap">
                                            <span v-show="pageSize!=9999"> ${ pageSize } <i
                                                        class="fi-rs-angle-small-down"></i></span>
                                            <span v-show="pageSize==9999"> Tous <i
                                                        class="fi-rs-angle-small-down"></i></span>
                                        </div>
                                    </div>
                                    <div class="sort-by-dropdown">
                                        <ul>
                                            <li class="activeFilter"><a :class="{ active: pageSize==9 }" href="#&"
                                                                        @click="pageSize=9;getData(page,true)">9</a>
                                            </li>
                                            <li class="activeFilter"><a :class="{ active: pageSize==18 }" href="#&"
                                                                        @click="pageSize=18;getData(page,true)">18</a>
                                            </li>
                                            <li class="activeFilter"><a :class="{ active: pageSize==36 }" href="#&"
                                                                        @click="pageSize=36;getData(page,true)">36</a>
                                            </li>
                                            <li class="activeFilter"><a :class="{ active: pageSize==9999 }" href="#&"
                                                                        @click="pageSize=9999;getData(page,true)">Tous</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="sort-by-cover">
                                    <div class="sort-by-product-wrap">
                                        <div class="sort-by">
                                            <span><i class="fi-rs-apps-sort"></i>Trier par:</span>
                                        </div>
                                        <div class="sort-by-dropdown-wrap">
                                            <span v-show="orderBy==1"> Nom: A à Z <i class="fi-rs-angle-small-down"></i></span>
                                            <span v-show="orderBy==2"> Nom: Z à A <i class="fi-rs-angle-small-down"></i></span>
                                            <span v-show="orderBy==3"> Prix: croissant <i
                                                        class="fi-rs-angle-small-down"></i></span>
                                            <span v-show="orderBy==4"> Prix: décroissant <i
                                                        class="fi-rs-angle-small-down"></i></span>
                                            <span v-show="orderBy==5"> Date ajout: croissant<i
                                                        class="fi-rs-angle-small-down"></i></span>
                                            <span v-show="orderBy==6"> Date ajout: décroissant<i
                                                        class="fi-rs-angle-small-down"></i></span>
                                        </div>
                                    </div>
                                    <div class="sort-by-dropdown">
                                        <ul>
                                            <li class="activeFilter">
                                                <a :class="{ active: orderBy==1 }" href="#&"
                                                   @click="orderBy=1;getData(page,true)">Nom: A à Z</a>
                                            </li>
                                            <li class="activeFilter"><a :class="{ active: orderBy==2 }" href="#&"
                                                                        @click="orderBy=2;getData(page,true)">Nom: Z à
                                                    A</a></li>
                                            <li class="activeFilter"><a :class="{ active: orderBy==3 }" href="#&"
                                                                        @click="orderBy=3;getData(page,true)">Prix:
                                                    croissant</a></li>
                                            <li class="activeFilter"><a :class="{ active: orderBy==4 }" href="#&"
                                                                        @click="orderBy=4;getData(page,true)">Prix:
                                                    décroissant</a></li>
                                            <li class="activeFilter">
                                                <a :class="{ active: orderBy==5 }" href="#&"
                                                   @click="orderBy=5;getData(page,true)">Date ajout: croissant</a>
                                            </li>
                                            <li class="activeFilter">
                                                <a :class="{ active: orderBy==6 }" href="#&"
                                                   @click="orderBy=6;getData(page,true)">Date ajout: décroissant</a>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Produits -->
                        <div class="row product-grid-3">
                            <div class="col-lg-4 col-md-4 col-12 col-sm-6 row-product" v-for="entry in products">
                                <div class="product-cart-wrap mb-30 col-product">
                                    <div class="product-img-action-wrap" @click="openProduct(entry.id,entry.name)">
                                        <div class="product-img product-img-zoom">
                                            <a href="#&">
                                                <!--<img class="default-img" src="../front/assets/imgs/shop/product-2-1.jpg" alt="{{ Globals.getCompany().name }}">-->
                                                <img class="default-img product-img"
                                                     :src="'{{ APP_URL }}/images/300-400/'+entry.image"
                                                     :alt="entry.name">
                                                <!--<img class="hover-img" src="../front/assets/imgs/shop/product-2-2.jpg" alt="{{ Globals.getCompany().name }}">-->
                                            </a>
                                        </div>
                                        <!--<div class="product-action-1">
                                            <a aria-label="Quick view" class="action-btn hover-up" data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                <i class="fi-rs-search"></i>
                                            </a>
                                            <a aria-label="Add To Wishlist" class="action-btn hover-up" href="shop-wishlist.html"><i class="fi-rs-heart"></i></a>
                                            <a aria-label="Compare" class="action-btn hover-up" href="shop-compare.html"><i class="fi-rs-shuffle"></i></a>
                                        </div>-->
                                        <div class="product-badges product-badges-position product-badges-mrg"
                                             v-if="(entry.promo && entry.promo.isValid) || !entry.stock || entry.isNew">
                                            <span v-if="!entry.stock" class="hot me-1"
                                                  style="margin-right: 2px;font-size: 10px;">Rupture de stock</span>
                                            <span v-if="entry.isNew" class="new me-1"
                                                  style="margin-right: 2px;font-size: 10px;">Nouveau</span>
                                            <span class="best"
                                                  v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='amount'"
                                                  style="font-size: 10px;">-${ entry.promo.discountValue.toFixed(3) } <sup
                                                        class="currency-style">TND</sup></span>
                                            <span class="best"
                                                  v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='percent'"
                                                  style="font-size: 10px;">-${ entry.promo.discountValue } %</span>
                                        </div>
                                    </div>
                                    <div class="product-content-wrap">

                                        <h2 @click="openProduct(entry.id,entry.name)">
                                            <div class="menu-item">${ entry.name }</div>
                                        </h2>
                                        <!--<div class="rating-result" title="90%">
                                            <span>
                                                <span>90%</span>
                                            </span>
                                        </div>-->
                                        <div class="product-price">
                                            <span v-if="!entry.promo || (entry.promo && !entry.promo.isValid)">${ entry.priceTTC.toFixed(3) } <sup
                                                        class="currency-style">TND</sup></span>
                                            <span v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='amount'">${ (entry.priceTTC-entry.promo.discountValue).toFixed(3) } <sup
                                                        class="currency-style">TND</sup></span>
                                            <span v-if="entry.promo && entry.promo.isValid && entry.promo.discountType=='percent'">${ (entry.priceTTC-(entry.priceTTC*entry.promo.discountValue/100)).toFixed(3) } <sup
                                                        class="currency-style">TND</sup></span>
                                            <span class="old-price"
                                                  v-if="entry.promo && entry.promo.isValid">${ entry.priceTTC.toFixed(3) } <sup
                                                        class="currency-style">TND</sup></span>
                                        </div>
                                        <div class="product-action-1 show" @click="getProduit(entry.id)">
                                            <button aria-label="Acheter maintenant" class="action-btn hover-up"><i
                                                        class="fi-rs-shopping-bag-add"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                        <!--pagination-->
                        <div class="pagination-area mt-15 mb-sm-5 mb-lg-0" v-show="pages.length>1">
                            <nav aria-label="Page navigation example">
                                <ul class="pagination justify-content-start">
                                    <!--li class="page-item active"><a class="page-link" href="#">01</a></li>-->
                                    <li class="page-item" v-show="page>1" @click="getData(page-1)"><a class="page-link"
                                                                                                      href="#&"><i
                                                    class="fi-rs-angle-double-small-left"></i></a></li>
                                    <li v-for="entry in pages" class="page-item" @click="getData(entry)"
                                        :class="{ active: entry==page }"><a class="page-link" href="#&">${ entry }</a>
                                    </li>
                                    <li class="page-item" v-show="page<pages[pages.length-1]" @click="getData(page+1)">
                                        <a class="page-link" href="#&"><i
                                                    class="fi-rs-angle-double-small-right"></i></a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <div class="col-lg-3 primary-sidebar sticky-sidebar">
                        {# <div class="widget-category mb-30">
                            <h5 class="section-title style-1 mb-30 wow fadeIn animated">Category</h5>
                            <ul class="categories">
                                <li><a href="shop-grid-right.html">Shoes & Bags</a></li>
                                <li><a href="shop-grid-right.html">Blouses & Shirts</a></li>
                                <li><a href="shop-grid-right.html">Dresses</a></li>
                                <li><a href="shop-grid-right.html">Swimwear</a></li>
                                <li><a href="shop-grid-right.html">Beauty</a></li>
                                <li><a href="shop-grid-right.html">Jewelry & Watch</a></li>
                                <li><a href="shop-grid-right.html">Accessories</a></li>
                            </ul>
                        </div> #}
                        <!-- Fillter By Price -->
                        <div class="sidebar-widget price_range range mb-30">
                            <div class="widget-header position-relative mb-20 pb-10">
                                <h5 class="widget-title mb-10">Filter par prix</h5>
                                <div class="bt-1 border-color-1"></div>
                            </div>
                            <div class="price-filter">
                                <div class="price-filter-inner">
                                    <div id="slider-range"></div>
                                    <div class="price_slider_amount">
                                        <div class="label-input">
                                            <span>Intervalle:</span><input type="text" id="amount" name="price"
                                                                           placeholder="Add Your Price"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-sm btn-default mt-10" :disabled="disabled"
                                    @click="getData(page,true)"><i
                                        class="fi-rs-filter me-5"></i> Filtrer
                            </button>
                            <div class="list-group" v-if="totalItems">
                                <div class="list-group-item mb-10 mt-10">
                                    <label class="fw-900">Tailles</label>
                                    <div class="custome-checkbox">
                                        <div class="row">
                                            <div v-for="entry in taillesFilter" class="col-4"
                                                 style="white-space: nowrap">
                                                <input class="form-check-input" type="checkbox" name="checkbox"
                                                       :id="'exampleCheckbox'+entry.name" v-model="entry.selected"
                                                       @change="getData(page,true)">
                                                <label class="form-check-label"
                                                       :for="'exampleCheckbox'+entry.name"><span>${ entry.name }</span></label>
                                                <br>
                                            </div>
                                        </div>

                                    </div>
                                    <label class="fw-900 mt-15">Couleurs</label>
                                    <div class="attr-detail attr-color mb-15">
                                        <ul class="list-filter color-filter multi">
                                            <li :class="entry.selected ? 'active' : ''" v-for="entry in couleursFilter"
                                                @click="entry.selected = !entry.selected,getData(page,true)">
                                                <a href="#" :title="entry.name">
                                                    <span :style="{ 'background-color': entry.code ? entry.code :'#fff','border': '1px solid #ddd' }"></span>

                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    {# {% endverbatim %} #}
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        // Reinialiser les filtres de recherche
        window.onbeforeunload = function () {
            //unchecked your check box here.
            $("input[type='checkbox']").prop('checked', false);
            //app.getData(app.page);
        };
    </script>
    <script src="{{ asset('front/assets/scripts/category/index.js') }}"></script>
{% endblock %}