@extends('dashboard.Boutique.Boutique_template.layouts.defaultLayout')

@section('content')

    <style>
        .slick-active .product_item {
            /*box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1);*/
            border: 2px solid #ddd;
            border-radius: 6px;
        }
        .product_i:hover{
            box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);
            padding: 2%;
        }
        .slick-slide{
            margin:15px;
        }
    </style>

    <div class="row" style="height: 50vh;text-align: center; background: url('{{asset('images/shop_background.jpg')}}') no-repeat center;background-size: cover;">
      <div style="background: rgba(000,000,000,0.5);width: 100%">
        <div class="col-sm-12 text-center" style="height: 100%;background: transparent">
            <h4 style="line-height: 50vh;font-size: 20pt;color: #fff;">Produits que vous aimez</h4>
      </div>
      </div>
    </div>

            <div class="row" style="padding: 2%">


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

                        <div class="row" style="margin-top: 15px;margin-bottom: 15px;">
                            <div class="col-sm-12" style="padding: 5px">
                            <h3 class="" style="font-size: 14pt;border: 1px solid #ddd;padding: 15px;margin-bottom: 10px;width: 150px">Trier par :</h3>
                            </div>
                                <div class="col-sm-4" style="padding: 5px">
                                <label for="categorie">Catégorie</label>
                                <div class="input-group">
                                    <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 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" id="favoris{{$article->slug}}" data-categorie="{{$article->categorie_slug}}" data-price="{{$prix}}" data-name="{{$name}}" style="padding: 5px">
                                        <div class="clearfix"></div>
                                        <a href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}">
                                            <div class="product_i text-center" style="border: 2px solid #ddd;border-radius: 6px;padding: 20px">
                                                <div class="product_image d-flex flex-column align-items-center justify-content-center" style="">
                                                    @if(isset($image) && $image->filename!=null)

                                                        <img class="lazy" data-src="{{$image->filename}}" alt="{{$name}}" style="height: 100%;">
                                                    @endif
                                                </div>
                                                <div class="clearfix"></div>
                                                <div class="product_content" style="padding: 10px;padding-top: 10px">
                                                    <div class="product_price discount"><!--200--><span style="color: #e65c2b">{{$prix}} {{$boutique->meta->currency_client}}</span>@if($promo['value']==true && $promopourcent['value']) <span style="text-decoration: line-through">{{$price['value']}} {{$boutique->meta->currency_client}}</span> @endif</div>
                                                    <div class="product_name"><div><a style="font-size: 10pt;" href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}">{{$name}}</a></div></div>

                                                </div>
                                                <div class="product_fav" data-slug="{{$article->slug}}" data-catalogue_article_slug="{{$article->slug}}" data-boutique_slug="{{$boutique_}}" data-url="{{route('wishlist.article')}}" data-article_name="{{$name}}"><i style="@if($helpers->check_fav($boutique_,$article->slug)) color: red; @endif" class="fas fa-heart"></i></div>
                                                <div class="cart-btn-every-where" style="top: 80px;" data-article="{{$article->slug}}"><i style="@if($helpers->check_panier($article->slug)) color: red; @endif" class="fas fa-shopping-bag cart_i_value{{$article->slug}}"></i></div>
                                                <ul class="product_marks">
                                                    @if($promo['value']==true && $promopourcent['value'])
                                                        <li class="product_mark product_discount">-{{$promopourcent['value']}}%</li>
                                                    @endif

                                                </ul>
                                            </div>
                                        </a>
                                        <div class="clearfix"></div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                @else

                    <div class="text-center" style="padding: 10%;color: #b40100;">Liste des favoris vide !</div>


                @endif

            </div>


            @if(count($promos)>0)

                <div class="trends">
                    <div class="trends_background" style="background-image:url({{asset('images/trends_background.jpg')}})"></div>
                    <div class="trends_overlay"></div>
                    <div class="container">
                        <div class="row">
                            <!-- Trends Content -->
                            <div class="col-lg-3">
                                <div class="trends_container">
                                    <h2 class="trends_title">Promo 2020</h2>
                                    <div class="trends_text text-justify"><p>Profiter de nos promotions pour vous procurer des produits dernier a prix bas</p></div>
                                    <div class="trends_slider_nav">
                                        <div class="trends_prev trends_nav"><i class="fas fa-angle-left ml-auto"></i></div>
                                        <div class="trends_next trends_nav"><i class="fas fa-angle-right ml-auto"></i></div>
                                    </div>
                                </div>
                            </div>
                            <!-- Promo Slider -->
                            <div class="col-lg-9">
                                <div class="trends_slider_container">
                                    <!-- Trends Slider -->
                                    <div class="owl-carousel owl-theme trends_slider">
                                    @foreach($promos as $article)
                                        @php
                                            $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_);
                       if($name['statut']==false){
                       $name=$article->name;}else{
                       $name=$name['value'];
                       }

                       $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 ;
                                                                                     }
                                        @endphp

                                        <!-- Recently Viewed Item -->
                                            <div class="owl-item">
                                                <div class="viewed_item discount d-flex flex-column align-items-center justify-content-center text-center">
                                                    <div class="viewed_image">
                                                        @php                                                                          $image= $helpers->get_simple_image($article->slug,$boutique_);
                                                        @endphp
                                                        @if(isset($image) && $image->filename!=null)
                                                            <img class="lazy" data-src="{{$image->filename}}" alt="{{$name}}">
                                                        @endif
                                                    </div>
                                                    <div class="viewed_content text-center">
                                                        <div class="viewed_price" style="font-size: 7pt;">{{$prix}} {{$boutique->meta->currency_client}} <span style="font-size: 7pt;">{{$price['value']}} {{$boutique->meta->currency_client}}</span></div>
                                                        <div class="viewed_name"><a title="{{$name}}" href="#">{{\Illuminate\Support\Str::limit($name,10)}}</a></div>
                                                    </div>
                                                    <div class="product_fav" data-catalogue_article_slug="{{$article->slug}}" data-boutique_slug="{{$boutique_}}" data-url="{{route('wishlist.article')}}" data-article_name="{{$name}}"><i style="@if($helpers->check_fav($boutique_,$article->slug)) color: red; @endif" class="fas fa-heart"></i></div>
                                                    <ul class="item_marks">
                                                        @if($promo['value']==true && $promopourcent['value'])
                                                            <li class="product_mark product_discount">-{{$promopourcent['value']}}%</li>
                                                        @endif
                                                    </ul>
                                                </div>
                                            </div>

                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif



@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