@extends('dashboard.Boutique.Boutique_template.layouts.grocery.app')
@section("css")
    @include("dashboard.Boutique.Boutique_template.layouts.grocery.css_other_page")
@endsection
@section('content')


    @include("dashboard.Boutique.Boutique_template.layouts.grocery.banner",["page_title"=> "Produits que vous aimez"])

    <div id="contact-us-page" class="page-content page-content--centered container">
        <div class="row">


            @if(count($articles)>0)
                <div class="col-md-12 col-xs-12" style="width: 100%;">

                    <div class="row" style="margin-top: 15px;margin-bottom: 15px;">
                        <div class="col-sm-4" style="padding: 5px">
                            <label for="categorie">Catégorie</label>
                            <div class="input-group">
                                <div class="" style="width: 90%">
                                    <select class="custom-select form-control choosen" id="categorie"
                                            style="color: #000;border-radius: 0px;margin-left: 0px;">
                                        <option selected>Choisir une catégorie ...</option>
                                        @foreach($categories as $category)
                                            <option value="{{$category->slug}}">{{$category->intitule}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" style="border-radius: 0px;"
                                            id="btn-categorie" type="button"><i class="fa fa-search"></i></button>
                                </div>
                            </div>

                        </div>

                        <div class="col-sm-4" style="padding: 5px">
                            <label for="name">Nom</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" style="border-radius: 0px;color: #000;"
                                       placeholder="Saisir le nom de la boutique" aria-label="Recipient's username"
                                       aria-describedby="basic-addon2" id="name">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" id="btn-name" type="button"
                                            style="border-radius: 0px;"><i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-4" style="padding: 5px">
                            <label for="price">Prix maximale (0 à ...)</label>
                            <div class="input-group mb-3">
                                <input type="number" class="form-control" style="border-radius: 0px;color: #000;"
                                       placeholder="12000" aria-label="Recipient's username"
                                       aria-describedby="basic-addon2" id="price">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" id="btn-price" type="button"
                                            style="border-radius: 0px;"><i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </div>


                    </div>           <!-- Product Panel -->

                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <div class="text-center loader" style="display: none;margin-bottom: 10vh">
                                <img src="{{asset('images/loader.gif')}}" alt="" style="margin-top: 10vh;">
                                <br>
                                <span>Veuillez patienter</span>
                            </div>

                            <div class="text-center nothing" style="display: none;margin-bottom: 10vh">
                                <span style="color: #9d0000;">Votre recherche n'a pas aboutie. Veuillez réesayer avec d'autre valeur du filtre</span>
                            </div>
                        </div>
                    @foreach($articles as $article)
                        @php

                            $boutique=\Illuminate\Support\Facades\Session::get('boutique');
                            $boutique_=\Illuminate\Support\Facades\Session::get('boutique')['slug'];
                            $helpers=new \App\Http\Controllers\HelperController();
                            $prix=$helpers->get_article_price_by_boutique($article->slug,$boutique_);
                            $name=$helpers->get_meta_article('name',$article->slug,$boutique_);
                            $price=$helpers->get_meta_article('price',$article->slug,$boutique_);
                            if($price['statut']==false){
                            $price['value']=$article->price;
                            }

                     if($boutique->meta->currency_admin!==$boutique->meta->currency_client)
                                             {
                                             $price['value']=$helpers->convertCurrency($boutique->meta->currency_admin,$boutique->meta->currency_client,$price['value']);
                                             $prix=$helpers->convertCurrency($boutique->meta->currency_admin,$boutique->meta->currency_client,$prix);
                                             }
                              $promo=$helpers->get_meta_article('on_sale',$article->slug,$boutique_);
                              if($promo['statut']==false){
                                $promo['value']=$article->on_sale;
                              }
                                                     $promopourcent=$helpers->get_meta_article('show_price',$article->slug,$boutique_);

                           if($promopourcent['statut']==false){
                                $promopourcent['value']=$article->show_price ;
                              }
                            if($name['statut']==false){
                            $name=$article->name;}else{
                            $name=$name['value'];
                            }
                             $stock=$helpers->get_meta_article('stock',$article->slug,$boutique_);
                                                    if($stock['statut']==false){
                                                    $stock=$article->quantity;}else{
                                                    $stock=$stock['value'];
                                                    }

                                                                     $image= $helpers->get_simple_image($article->slug,$boutique_);

                        @endphp

                        @if($stock!=0)
                            <!-- Slider Item -->
                                <div class="col-sm-3 col-6 list_favoris produit_list" id="favoris{{$article->slug}}"
                                     data-categorie="{{$article->categorie_slug}}" data-price="{{$prix}}"
                                     data-name="{{$name}}" style="padding: 5px">
                                    <div class="clearfix"></div>
                                    <article class="card ">
                                        <figure class="card-figure text-left">
                                            <a href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}">
                                                <div class="card-img-container">
                                                    @if(isset($image) && $image->filename!=null)
                                                        <img
                                                            data-src="{{$image->filename}}"
                                                            alt="{{$name}}"
                                                            data-sizes="auto"
                                                            srcset="{{$image->filename}}"
                                                            data-srcset="{{$image->filename}}"
                                                            class="lazyload card-image lazy"

                                                        />
                                                    @endif

                                                </div>
                                                @if(isset($image) && $image->filename!=null)
                                                    <img
                                                        src="{{$image->filename}}"
                                                        alt="{{$name}}" title="{{$name}}"
                                                        class="second-img">
                                                @endif

                                            </a>
                                        </figure>
                                        <div class="card-body text-center">


                                            <h3 class="card-title">
                                                <a style="font-size: 15pt;"
                                                   href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}">{{$name}}</a>
                                            </h3>
                                            <p class="card-text"
                                               data-test-info-type="brandName">{{$article->categorie->intitule}}</p>

                                            <div class="card-text" data-test-info-type="price">

                                                <div
                                                    class="price-section d-inline-block price-section--withoutTax rrp-price--withoutTax"
                                                    style="display: none;">

            <span data-product-rrp-price-without-tax class="price price--rrp">

            </span>
                                                </div>

                                                <div class="price-section d-inline-block price-section--withoutTax">
            <span class="price-label">

            </span>
                                                    <span class="price-now-label" style="display: none;">

            </span>
                                                    <span data-product-price-without-tax
                                                          class="price price--withoutTax">

                                                    <span>{{$prix}} {{$boutique->meta->currency_client}}</span>@if($promo['value']==true && $promopourcent['value']>0)
                                                            <span
                                                                style="text-decoration: line-through">{{$price['value']}} {{$boutique->meta->currency_client}}</span> @endif

                                                </span>
                                                </div>
                                                <div
                                                    class="price-section d-inline-block price-section--withoutTax non-sale-price--withoutTax"
                                                    style="display: none;">

            <span data-product-non-sale-price-without-tax class="price price--non-sale">

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

                                            <figcaption class="card-figcaption">
                                                <div class="card-figcaption-body">
                                                    <a href="javascript:void(0)" title="Add to Cart"
                                                       data-event-type="product-click"
                                                       class="cartb button button--small card-figcaption-button cart-btn-every-where "
                                                       data-article="{{$article->slug}}"
                                                       style="@if($helpers->check_panier($article->slug)) background-color: red!important; @endif">
                                                        <svg width="20px" height="20px">
                                                            <use xlink:href="#pcart"></use>
                                                        </svg>
                                                    </a>
                                                    <a href="javascript:void(0)" title="Add to favoris"
                                                       data-slug="{{$article->slug}}"
                                                       data-catalogue_article_slug="{{$article->slug}}"
                                                       data-boutique_slug="{{$boutique_}}"
                                                       data-url="{{route('wishlist.article')}}"
                                                       data-article_name="{{$name}}"
                                                       style="@if($helpers->check_fav($boutique_,$article->slug)) background-color: red!important; @endif"
                                                       class="cartb button button--small card-figcaption-button product_fav ">
                                                        <svg width="20px" height="20px">
                                                            <use xlink:href="#bwish"></use>
                                                        </svg>
                                                    </a>

                                                    <div class="top-btn">
                                                        <a
                                                            href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}"
                                                            class="button button--small card-figcaption-button "
                                                        >
                                                            <svg width="19px" height="19px">
                                                                <use xlink:href="#quick"></use>
                                                            </svg>
                                                        </a>
                                                    </div>
                                                </div>
                                            </figcaption>
                                        </div>
                                    </article>
                                    <div class="clearfix"></div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            @else
                <div class="alert alert-warning col-12 text-center">
                    <img src="{{asset("grocery/images/famer.png")}}" alt="famer" width="170">
                    <br>
                    Liste des favoris vide !
                </div>
            @endif
        </div>
    </div>
@endsection

@section('script')

    <script>
        $(document).ready(function () {

            $(document).on('click', '.product_fav', function (e) {

                let $slug = $(this).data('slug');
                let $favorite_val = parseInt($('#fav').html());
                $favorite_val -= 1;
                $('#fav').html('0' + $favorite_val);
                setTimeout(function () {
                    $('#favoris' + $slug).remove();
                }, 1000)
            })

            $(document).on('click', '#btn-name', function (e) {
                let $value = $('#name').val();
                recherche('name', 'name', $value);

            })
            $(document).on('click', '#btn-categorie', function (e) {
                let $value = $('#categorie').val();
                recherche('categorie', 'categorie', $value);
            })
            $(document).on('click', '#btn-price', function (e) {
                let $value = $('#price').val();
                recherche('price', 'price', $value);
            })

            function recherche(id, search, value) {
                $('.loader').fadeIn(700);
                let disponible = 0;
                $('.list_favoris').fadeOut(10).each(function (e) {
                    let $btn = $(this);
                    let $search = $(this).data(search);
                    if (search == 'price') {
                        if (parseInt($search) <= parseInt(value)) {
                            disponible++;
                            $('.loader').fadeOut(500, function () {
                                setTimeout(function () {
                                    $btn.fadeIn('slow');
                                }, 700)
                            });
                        } else {
                            $btn.fadeOut(100);
                        }
                    } else {
                        if ($search.toLowerCase().includes(value.toLowerCase())) {
                            disponible++;
                            $('.loader').fadeOut(500, function () {
                                setTimeout(function () {
                                    $btn.fadeIn('slow');
                                }, 700)
                            });
                        } else {
                            $btn.fadeOut(100);
                        }
                    }
                })
                if (parseInt(disponible) <= 0) {

                    $('.loader').fadeOut(300, function () {
                        setTimeout(function () {
                            $('.nothing').fadeIn();
                        }, 1000)
                    });

                } else {
                    $('.nothing').fadeOut(100);
                }

            }


        })

    </script>
@endsection