@extends('dashboard.Boutique.Boutique_template.layouts.grocery.app')
@section("content")

<div data-content-region="home_below_menu"></div>
@php
$thisShop=\Illuminate\Support\Facades\Session::get('boutique');
@endphp
@if($thisShop->publicites!==null && count($thisShop->publicites)>0)
<section class="heroCarousel" data-slick='{
        "dots": true,
        "slidesToShow": 1,
        "slidesToScroll": 1,
        "autoplay": false,
        "autoplaySpeed": 5000,
        "slide": ".js-hero-slide",
        "prevArrow": ".js-hero-prev-arrow",
        "nextArrow": ".js-hero-next-arrow"
    }'>

    <button aria-label="Go to slide [NUMBER] of 2" class="js-hero-prev-arrow slick-prev slick-arrow">
        hero-prev-arrow
    </button>

    @foreach($thisShop->publicites as $publicite)
    <div class="js-hero-slide">
        <a href="#" aria-label="Slide number 1">
            <div class="slide-flex heroCarousel-slide  heroCarousel-slide--first">
                <div class="heroCarousel-image-wrapper slideimg">
                    <img src="{{isset($publicite->image) ? $publicite->image : asset('images/h1.jpg')}}" alt="" title=""
                        data-sizes="auto" srcset="{{$publicite->image}}" class=" heroCarousel-image"
                        style="width: 100%!important" />
                </div>
                {{-- <div class="slidecap">--}}
                    {{-- <div class="slidedes">--}}
                        {{-- <div class="heroCarousel-content " --}} {{--
                            style="padding:10px;color: #fff;background: rgba(0,0,0,0.5)">--}}
                            {{-- <span--}} {{-- class="heroCarousel-title">
                                {{Illuminate\Support\Str::limit(strtoupper(str_replace('_','
                                ',$boutique->nom_boutique)),65)}}</span>--}}
                                {{-- <p class="heroCarousel-description">{{$publicite->description}}</p>--}}
                                {{-- <a href="{{route('contact',$boutique->nom_boutique)}}" --}} {{--
                                    class="heroCarousel-action button button--primary button--large" --}} {{--
                                    style="color: white">--}}
                                    {{-- Contactez nous</a>--}}
                                {{-- </div>--}}
                        {{-- </div>--}}
                    {{-- </div>--}}
            </div>
        </a>
    </div>

    @endforeach

    <button aria-label="Go to slide [NUMBER] of 2" class="js-hero-next-arrow slick-next slick-arrow">
        hero-next-arrow
    </button>

</section>
@else
<section class="heroCarousel" data-slick='{
        "dots": true,
        "slidesToShow": 1,
        "slidesToScroll": 1,
        "autoplay": false,
        "autoplaySpeed": 5000,
        "slide": ".js-hero-slide",
        "prevArrow": ".js-hero-prev-arrow",
        "nextArrow": ".js-hero-next-arrow"
    }'>

    <button aria-label="Go to slide [NUMBER] of 2" class="js-hero-prev-arrow slick-prev slick-arrow">
        hero-prev-arrow
    </button>

    <div class="js-hero-slide">
        <a href="#" aria-label="Slide number 1">
            <div class="slide-flex heroCarousel-slide  heroCarousel-slide--first">
                <div class="heroCarousel-image-wrapper slideimg">
                    <img src="{{asset('images/h.jpg')}}" alt="" title="" data-sizes="auto"
                        srcset="{{asset('images/h.jpg')}}" class=" heroCarousel-image" />
                </div>
                <div class="slidecap">
                    <div class="slidedes">
                        <div class="heroCarousel-content" style="padding:10px;color: #fff;background: rgba(0,0,0,0.5)">
                            <span
                                class="heroCarousel-title">{{Illuminate\Support\Str::limit(strtoupper(str_replace('_','
                                ',$boutique->nom_boutique)),65)}}</span>
                            <p class="heroCarousel-description">{{$boutique->description}}</p>
                            <a href="{{route('contact',$boutique->nom_boutique)}}"
                                class="heroCarousel-action button button--primary button--large" style="color: white">
                                Contactez nous</a>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>


    <button aria-label="Go to slide [NUMBER] of 2" class="js-hero-next-arrow slick-next slick-arrow">
        hero-next-arrow
    </button>

</section>
@endif

@if(sizeof($miseEnAvantArticles) > 0)
<div class="topsp container">
    <div class="home-heading  page-heading text-left">
        <h1>
            <span>Notre choix de la semaine pour vous </span>
        </h1>
    </div>
    <div class="pro-margin next-prevb row">
        <section class="productCarousel row" data-slick='{
         "dots": false,
        "infinite": true,
        "autoplay": true,
        "mobileFirst": true,
        "slidesToShow": 4,
        "slidesToScroll": 4,
        "slide": ".js-product-slide",
        "prevArrow": ".js-product-prev-arrow-blog",
        "nextArrow": ".js-product-next-arrow-blog",
        "responsive": [
            {
                "breakpoint": 1199,
                "settings": {
                    "slidesToScroll": 4,
                    "slidesToShow": 4
                }
            },
            {
                "breakpoint": 991,
                "settings": {
                    "slidesToScroll": 3,
                    "slidesToShow": 3
                }
            },
            {
                "breakpoint": 767,
                "settings": {
                    "slidesToScroll": 1,
                    "slidesToShow": 1
                }
            },
            {
                "breakpoint": 599,
                "settings": {
                    "slidesToScroll": 1,
                    "slidesToShow": 1
                }
            },
            {
                "breakpoint": 0,
                "settings": {
                    "slidesToScroll": 1,
                    "slidesToShow": 1
                }
            }
        ]
    }'>
            @php $p=0; @endphp
            @foreach($miseEnAvantArticles as $article)
            @php $p++; @endphp
            @php
            $boutique_=$thisShop['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($thisShop->meta->currency_admin!==$thisShop->meta->currency_client)
            {
            $price['value']=$helpers->convertCurrency($thisShop->meta->currency_admin,$thisShop->meta->currency_client,$price['value']);
            $prix=$helpers->convertCurrency($thisShop->meta->currency_admin,$thisShop->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)
            <div class="productCarousel-slide js-product-slide col-12">
                <!-- <div class="col-12"> -->
                <div class="blog-thumbnail">
                    <div class="blogb" title="{{$name}}">
                        <div class="">
                            <div class="blog-hover">
                                <a href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}"
                                    class="wb-blog-img">
                                    @if(isset($image) && $image->filename!=null)
                                    <img class="lazy" data-src="{{$image->filename}}" alt="{{$name}}" title="{{$name}}">
                                    @endif

                                </a>
                                <div class="webi_post_hover">
                                    <div class="blog-ic">
                                        <a class="icon readmore_link" title="all blog"
                                            href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}"><i
                                                class="fa fa-link"></i></a>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="blogd">
                            <div class="blog-con text-left">
                                <div class="wb-blog-title">
                                    <a
                                        href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}">
                                        {{$name}}</a>
                                </div>

                                <div class="wb-blog-desc">
                                    {{\Illuminate\Support\Str::limit($article->description,100)}}
                                </div>
                                <a href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}"
                                    class="btn btn-dark btn-sm"
                                    style="background: {{$metas->background_color!=null ?  $metas->background_color : '#88b121' }}">Détails</a>
                            </div>
                        </div>
                        @if($promo['value']==true && $promopourcent['value']>0)
                        <div class="promo-tags">-{{$promopourcent['value']}}%</div>
                        @endif
                    </div>
                </div>
                <!-- </div> -->
            </div>
            @endif
            @endforeach
        </section>
    </div>
</div>
@endif

<div data-content-region="home_below_carousel"></div>
<div class="main full winter">

    @if(count($promos)>0)
    <div class="new-pro backgroundNewProduct">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-12 rtlleft">
                    <div class="home-heading  page-heading text-left">
                        <h1><span>Produits en promotion</span></h1>
                    </div>
                    <ul class="pro-margin next-prevb row" data-product-type="new">
                        <section class="productCarousel" data-list-name="New Products" data-slick='{
                        "dots": false,
                        "infinite": true,
                        "mobileFirst": true,
                        "slidesToShow": 5,
                        "autoplay":true,
                    "autoplayOptions": {
                        "timeout":3000,
                        "randomize": true
                    },
                        "slidesToScroll": 5,
                        "prevArrow": ".js-product-prev-arrow",
                        "nextArrow": ".js-product-next-arrow",
                        "responsive": [
                            {
                                "breakpoint": 1409,
                                "settings": {
                                    "slidesToScroll": 5,
                                    "slidesToShow": 5
                                }
                            },
                            {
                                "breakpoint": 1199,
                                "settings": {
                                    "slidesToScroll": 1,
                                    "slidesToShow": 4
                                }
                            },
                            {
                                "breakpoint": 991,
                                "settings": {
                                    "slidesToScroll": 1,
                                    "slidesToShow": 3
                                }
                            },
                            {
                                "breakpoint": 767,
                                "settings": {
                                    "slidesToScroll": 1,
                                    "slidesToShow": 2
                                }
                            },
                            {
                                "breakpoint": 599,
                                "settings": {
                                    "slidesToScroll": 1,
                                    "slidesToShow": 1
                                }
                            },
                            {
                                "breakpoint": 0,
                                "settings": {
                                    "slidesToScroll": 1,
                                    "slidesToShow": 1
                                }
                            }
                        ]
                    }'>
                            @php $i=0; @endphp
                            @foreach($promos as $article)
                            @php
                            $boutique=\Illuminate\Support\Facades\Session::get('boutique');
                            $boutique_=$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
                            @if($promo['value']==true && $promopourcent['value'])
                            @php $image= $helpers->get_simple_image($article->slug,$boutique_);
                            @endphp

                            @if($stock!=0)
                            <div class="productCarousel-slide js-product-slide col-12">
                                <article class="new-card card ">
                                    <div class="row">
                                        <figure class="card-figure text-center col-12">
                                            <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 src="{{$image->filename}}" alt="{{$name}}" title="{{$name}}"
                                                        data-sizes="auto" srcset="{{$image->filename}}"
                                                        data-srcset="{{$image->filename}}"
                                                        class="lazyload card-image" />
                                                    @endif

                                                </div>
                                            </a>
                                        </figure>
                                        <div class="card-body text-left col-12">
                                            <!--
                                                            <p class="card-text" data-test-info-type="brandName">Common Good</p>
                                                         -->
                                            <h3 class="card-title">
                                                <a
                                                    href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}">{{$name}}</a>
                                            </h3>

                                            <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">
                                                        {{$prix}} {{$thisShop->meta->currency_client}}</span>

                                                    @if($promo['value']==true && $promopourcent['value']>0)
                                                    <span
                                                        style="font-size: 7pt; text-decoration: line-through">{{$price['value']}}
                                                        {{$thisShop->meta->currency_client}}</span>
                                                    @endif
                                                </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 text-left">
                                                <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 cart_i_value{{$article->slug}}"
                                                        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-event-type="product-click"
                                                        data-catalogue_article_slug="{{$article->slug}}"
                                                        data-boutique_slug="{{$boutique_}}"
                                                        data-url="{{route('wishlist.article')}}"
                                                        data-article_name="{{$name}}" data-article="{{$article->slug}}"
                                                        style="@if($helpers->check_fav($boutique_,$article->slug)) background-color: red!important; @endif"
                                                        class="cartb button button--small card-figcaption-button product_fav fav_i_value{{$article->slug}}">
                                                        <svg width="20px" height="20px">
                                                            <use xlink:href="#bwish"></use>
                                                        </svg>
                                                    </a>
                                                </div>
                                            </figcaption>
                                        </div>
                                    </div>
                                </article>
                            </div>

                            @endif
                            @endif
                            @endforeach


                        </section>
                        <div class="all-btn">
                            <button aria-label="Go to slide [NUMBER] of 13"
                                class="js-product-prev-arrow slick-prev slick-arrow">
                                <svg>
                                    <use xlink:href="#arrow-left"></use>
                                </svg>
                            </button>
                            <button aria-label="Go to slide [NUMBER] of 13"
                                class="js-product-next-arrow slick-next slick-arrow">
                                <svg>
                                    <use xlink:href="#arrow-right"></use>
                                </svg>
                            </button>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    @endif
    @if(count($articles) >0)
    <div class="container">
        <div class="home-heading  page-heading text-left">
            <h1><span>
                    Nouveaux produits
                </span></h1>
        </div>

        <div class="pro-margin next-prevb row">
            <section class="productCarousel row" data-slick='{
         "dots": false,
        "infinite": true,
        "autoplay": true,
        "mobileFirst": true,
        "slidesToShow": 4,
        "slidesToScroll": 4,
        "slide": ".js-product-slide",
        "prevArrow": ".js-product-prev-arrow-blog",
        "nextArrow": ".js-product-next-arrow-blog",
        "responsive": [
            {
                "breakpoint": 1199,
                "settings": {
                    "slidesToScroll": 4,
                    "slidesToShow": 4
                }
            },
            {
                "breakpoint": 991,
                "settings": {
                    "slidesToScroll": 3,
                    "slidesToShow": 3
                }
            },
            {
                "breakpoint": 767,
                "settings": {
                    "slidesToScroll": 1,
                    "slidesToShow": 1
                }
            },
            {
                "breakpoint": 599,
                "settings": {
                    "slidesToScroll": 1,
                    "slidesToShow": 1
                }
            },
            {
                "breakpoint": 0,
                "settings": {
                    "slidesToScroll": 1,
                    "slidesToShow": 1
                }
            }
        ]
    }'>
                @php $p=0; @endphp
                @foreach($articles as $article)
                @php $p++; @endphp
                @php
                $boutique_=$thisShop['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($thisShop->meta->currency_admin!==$thisShop->meta->currency_client)
                {
                $price['value']=$helpers->convertCurrency($thisShop->meta->currency_admin,$thisShop->meta->currency_client,$price['value']);
                $prix=$helpers->convertCurrency($thisShop->meta->currency_admin,$thisShop->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($p<=20 && $stock!=0) <div class="productCarousel-slide js-product-slide col-12">
                    <!-- <div class="col-12"> -->
                    <div class="blog-thumbnail">
                        <div class="blogb" title="{{$name}}">
                            <div class="">
                                <div class="blog-hover">
                                    <a href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}"
                                        class="wb-blog-img">
                                        @if(isset($image) && $image->filename!=null)
                                        <img class="lazy" data-src="{{$image->filename}}" alt="{{$name}}"
                                            title="{{$name}}">
                                        @endif

                                    </a>
                                    <div class="webi_post_hover">
                                        <div class="blog-ic">
                                            <a class="icon readmore_link" title="all blog"
                                                href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}"><i
                                                    class="fa fa-link"></i></a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="blogd">
                                <div class="blog-con text-left">
                                    <div class="wb-blog-title">
                                        <a
                                            href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}">
                                            {{$name}}</a>
                                    </div>

                                    <div class="wb-blog-desc">
                                        {{\Illuminate\Support\Str::limit($article->description,100)}}
                                    </div>
                                    <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">
                                                {{$prix}} {{$thisShop->meta->currency_client}}</span>

                                            @if($promo['value']==true && $promopourcent['value']>0)
                                            <span
                                                style="font-size: 7pt; text-decoration: line-through">{{$price['value']}}
                                                {{$thisShop->meta->currency_client}}</span>
                                            @endif
                                        </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 text-left">
                                        <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 cart_i_value{{$article->slug}}"
                                                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-event-type="product-click"
                                                data-catalogue_article_slug="{{$article->slug}}"
                                                data-boutique_slug="{{$boutique_}}"
                                                data-url="{{route('wishlist.article')}}" data-article_name="{{$name}}"
                                                data-article="{{$article->slug}}"
                                                style="@if($helpers->check_fav($boutique_,$article->slug)) background-color: red!important; @endif"
                                                class="cartb button button--small card-figcaption-button product_fav fav_i_value{{$article->slug}}">
                                                <svg width="20px" height="20px">
                                                    <use xlink:href="#bwish"></use>
                                                </svg>
                                            </a>
                                        </div>
                                    </figcaption>

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

                    </div>
                    @if($promo['value']==true && $promopourcent['value']>0)
                    <div class="promo-tags">-{{$promopourcent['value']}}%</div>
                    @endif
        </div>
        @endif
        @endforeach
        </section>
    </div>
</div>
@endif

@if(isset($metas->mot_d_ordres))
@php
$icon=['images/char_1.png','images/char_2.png','images/char_3.png','images/char_4.png'];
@endphp
<div class="container">
    <div class="row deliveryinfo text-xs-center p-0" style="border: none;margin-top: 30px">
        @for($i=0;$i<count($metas->mot_d_ordres);$i++)
            <div class="col-md-3 col-xs-12 sbr pl-0">
                <ul class="list-unstyled pt-4 pb-4 pl-2" style="background: #ededed">
                    <li class="text-xs-left">
                        <div class="row">
                            <div class="col-auto ">
                                <img src="{{$icon[$i]}}" alt="">
                            </div>
                            <div class="col-8">
                                <p>{{$metas->mot_d_ordres[$i]}}</p>
                            </div>

                        </div>

                    </li>
                </ul>
            </div>
            @endfor
    </div>
</div>
@endif

<div class="container">
    <div class="home-heading  page-heading text-left" style="margin-top: 30px">
        <h1><span>
                Produits recommandés
            </span>
        </h1>
    </div>

    <div class="col-md-12 col-xs-12" style="width: 100%;padding-top: 0px;">

        <div class="col-lg-12 mt-4">
            <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>

        <div class="row" id="home-data-list-product">

        </div>
        <div class="col-12">
            <div class="text-center home-data-list-product-loader" style="display: none;margin-bottom: 5vh">
                <i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>
                <br>
                <span>chargement ...</span>
            </div>
        </div>
    </div>

    <div class="">
        <section class="row" id="div_articles_lists">
            @foreach($articles_lists as $article)
            @php
            $boutique_=$thisShop['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($thisShop->meta->currency_admin!==$thisShop->meta->currency_client)
            {
            $price['value']=$helpers->convertCurrency($thisShop->meta->currency_admin,$thisShop->meta->currency_client,$price['value']);
            $prix=$helpers->convertCurrency($thisShop->meta->currency_admin,$thisShop->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)
            <div id="product_slug_{{$article->slug}}" class="produit_list col-md-3 mb-4" title="{{$name}}"
                data-name="{{$name}}"
                data-price="@if($promo['value']==true && $promopourcent['value']>0){{$price['value']}} @else {{$prix}} @endif"
                data-promotion="@if($promo['value']==true && $promopourcent['value']>0) oui @else non  @endif"
                data-category="{{$article->categorie->slug}}">
                <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}} {{$thisShop->meta->currency_client}}</span>@if($promo['value']==true
                                    && $promopourcent['value']>0)
                                    <span style="text-decoration: line-through">{{$price['value']}}
                                        {{$thisShop->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 cart_i_value{{$article->slug}}"
                                    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-event-type="product-click"
                                    data-catalogue_article_slug="{{$article->slug}}" data-boutique_slug="{{$boutique_}}"
                                    data-url="{{route('wishlist.article')}}" data-article_name="{{$name}}"
                                    data-article="{{$article->slug}}"
                                    style="@if($helpers->check_fav($boutique_,$article->slug)) background-color: red!important; @endif"
                                    class="cartb button button--small card-figcaption-button product_fav fav_i_value{{$article->slug}}">
                                    <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>
                        @if($promo['value']==true && $promopourcent['value']>0)
                        <div class="promo-tags">-{{$promopourcent['value']}}%</div>
                        @endif
                    </div>
                </article>
            </div>
            @endif
            @endforeach
        </section>

        <div class="col-12 text-center p-4" id="loading_grocery" style="display: none">
            <img src="{{asset(" grocery/images/loading.gif")}}" width="350" alt="">
            <h4>Chargement de plus de produit ..</h4>
        </div>

    </div>
</div>

<div data-content-region="home_below_featured_products"></div>

</div>
<div id="modal" class="modal" data-reveal data-prevent-quick-search-close>
    <button class="modal-close" type="button" title="Close">
        <span class="aria-description--hidden">Close</span>
        <span aria-hidden="true">&#215;</span>
    </button>
    <div class="modal-content"></div>
    <div class="loadingOverlay"></div>
</div>
<div id="alert-modal" class="modal modal--alert modal--small" data-reveal data-prevent-quick-search-close>
    <div class="swal2-icon swal2-error swal2-icon-show"><span class="swal2-x-mark"><span
                class="swal2-x-mark-line-left"></span><span class="swal2-x-mark-line-right"></span></span></div>

    <div class="modal-content"></div>

    <div class="button-container">
        <button type="button" class="confirm button" data-reveal-close>OK</button>
    </div>
</div>
@endsection

@section("script")
<script>
    $(document).on('click', '.product_fav', function (e) {
            e.preventDefault();
            let $btn = $(this);
            $btn.attr('disabled', true);
            let article = $(this).data('article');
            let url = $btn.data('url');
            let name = $btn.data('article_name');
            let $boutique_slug = $btn.data('boutique_slug');
            let $article_slug = $btn.data('catalogue_article_slug');
            $btn.html('<i class="fa fa-spinner" style="color: white"></i>');
            $.ajax({
                url: url,
                method: "POST",
                data: {
                    _token: '{{csrf_token()}}',
                    boutique_slug: $boutique_slug,
                    catalogue_article_slug: $article_slug
                },
                success: function (data) {
                    $btn.attr('disabled', false);
                    data = JSON.parse(data);
                    if (data == 1) {
                        let $favorite_val = parseInt($('#fav').html());
                        $favorite_val += 1;
                        $('#fav').html('0' + $favorite_val);
                        $btn.html('<svg width="20px" height="20px">\n' +
                            '                                                        <use xlink:href="#bwish"></use>\n' +
                            '                                                    </svg>');
                        $.notify('le produit ' + name + ' a été ajouté à la liste des favoris', 'success');
                        $('.fav_i_value' + article).css('background-color', 'red');
                    } else {
                        let $favorite_val = parseInt($('#fav').html());
                        $favorite_val -= 1;
                        $('#fav').html('0' + $favorite_val);
                        $btn.html("<svg width=\"20px\" height=\"20px\">\n" +
                            "                                                        <use xlink:href=\"#bwish\"></use>\n" +
                            "                                                    </svg>");

                        $('.fav_i_value' + article).css('background-color', '#88b121');
                        $.notify('le produit ' + name + ' a été retiré de la liste des favoris', 'warning');
                    }
                }, error: function (data) {
                    $btn.attr('disabled', false);
                }
            })
        });
        let next_page_url = 2;
        let lastPage = false;
        let showNotif = true;
        
        let interval=setInterval(() => {
            if (!lastPage) {
                    $("#loading_grocery").fadeIn();
                    $.ajax({
                        url: '/{{$thisShop['nom_boutique']}}/list/articles?page=' + next_page_url,
                        method: "get",
                        data: {_token: '{{csrf_token()}}'},
                        success: function (data) {
                            if (data.success) {
                                $("#div_articles_lists").append(data.html);
                            }
                            if (data.paginate.last_page >= next_page_url) {
                                if (data.paginate.last_page == next_page_url) {
                                    lastPage = true;
                                    clearInterval(interval)
                                }
                                next_page_url++;
                            } else {
                                lastPage = true;
                                clearInterval(interval)
                            }
                            $("#loading_grocery").fadeOut();
                        }, error: function (data) {
                            $("#loading_grocery").fadeOut();
                        }
                    })
                } else {
                    $("#loading_grocery").fadeOut();
                    if (showNotif) {
                       // $.notify('Tous les produits sont affichés', 'success');
                        showNotif = false;
                    }
                }
        }, 1000);

</script>
@endsection