{% extends 'front/base.html.twig' %}
{% block title %}{{ Globals.getCompany().name }} :: PROMOTIONS {% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <style>
        .product-cart-wrap .product-img-action-wrap {
            max-height: none;
        }
    </style>
    <script>
        var ID_CATEGORY = '{{ idCategory }}';
        var SEARCH = '{{ search }}';
        // Filtres des tailles et couleurs
        var taillesFilter = {{ Globals.getTailles(categories,false,false,search)|json_encode|raw }};
        var couleursFilter = {{ Globals.getCouleurs(categories,false,false,search)|json_encode|raw }};
    </script>
{% endblock %}

{% block body %}
    {# {% verbatim %} #}
    <main class="main" id="app" v-cloak>

        <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.idProduit,entry.name,entry.id)">
                                        <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="base_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.idProduit,entry.name,entry.id)">
                                            <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.idProduit,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">
                        <!-- 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>
                        <!-- Product sidebar Widget -->
                        {# <div class="sidebar-widget product-sidebar  mb-30 p-30 bg-grey border-radius-10">
                            <div class="widget-header position-relative mb-20 pb-10">
                                <h5 class="widget-title mb-10">New products</h5>
                                <div class="bt-1 border-color-1"></div>
                            </div>
                            <div class="single-post clearfix">
                                <div class="image">
                                    <img src="{{ asset('/front/assets/imgs/shop/thumbnail-3.jpg') }}" alt="#">
                                </div>
                                <div class="content pt-10">
                                    <h5><a href="shop-product-detail.html">Chen Cardigan</a></h5>
                                    <p class="price mb-0 mt-5">$99.50</p>
                                    <div class="product-rate">
                                        <div class="product-rating" style="width:90%"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="single-post clearfix">
                                <div class="image">
                                    <img src="{{ asset('/front/assets/imgs/shop/thumbnail-4.jpg') }}" alt="#">
                                </div>
                                <div class="content pt-10">
                                    <h6><a href="shop-product-detail.html">Chen Sweater</a></h6>
                                    <p class="price mb-0 mt-5">$89.50</p>
                                    <div class="product-rate">
                                        <div class="product-rating" style="width:80%"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="single-post clearfix">
                                <div class="image">
                                    <img src="{{ asset('/front/assets/imgs/shop/thumbnail-5.jpg') }}" alt="#">
                                </div>
                                <div class="content pt-10">
                                    <h6><a href="shop-product-detail.html">Colorful Jacket</a></h6>
                                    <p class="price mb-0 mt-5">$25</p>
                                    <div class="product-rate">
                                        <div class="product-rating" style="width:60%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="banner-img wow fadeIn mb-45 animated d-lg-block d-none">
                            <img src="{{ asset('/front/assets/imgs/banner/banner-11.jpg') }}" alt="{{ Globals.getCompany().name }}">
                            <div class="banner-text">
                                <span>Women Zone</span>
                                <h4>Save 17% on <br>Office Dress</h4>
                                <a href="shop-grid-right.html">Shop Now <i class="fi-rs-arrow-right"></i></a>
                            </div>
                        </div> #}
                    </div>
                </div>
            </div>
        </section>
    </main>
    {# {% endverbatim %} #}
{% endblock %}

{% block footer %}
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $("#search").val(SEARCH);
        $("#search-mobile").val(SEARCH);
        $("#categories").val(ID_CATEGORY).trigger('change');
        // 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/productSearchDec.js') }}"></script>

{% endblock %}