@extends('dashboard.Boutique.Boutique_template.layouts.defaultLayout')
@section('content')
    <style>
        /* The container */
        .container-checkbox {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 12px;
            cursor: pointer;
            font-size: 22px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Hide the browser's default checkbox */
        .container-checkbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        /* Create a custom checkbox */
        .container-checkbox .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #eee;
        }

        /* On mouse-over, add a grey background color */
        .container-checkbox:hover input ~ .checkmark {
            background-color: #ccc;
        }

        /* When the checkbox is checked, add a blue background */
        .container-checkbox input:checked ~ .checkmark {
            background-color: #2196F3;
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .container-checkbox .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the checkmark when checked */
        .container-checkbox input:checked ~ .checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .container-checkbox .checkmark:after {
            left: 9px;
            top: 5px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }


        /* The container */
        .container-radio {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 12px;
            cursor: pointer;
            font-size: 22px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Hide the browser's default radio button */
        .container-radio input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        /* Create a custom radio button */
        .container-radio .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #eee;
            border-radius: 50%;
        }

        /* On mouse-over, add a grey background color */
        .container-radio:hover input ~ .checkmark {
            background-color: #ccc;
        }

        /* When the radio button is checked, add a blue background */
        .container-radio input:checked ~ .checkmark {
            background-color: #2196F3;
        }

        /* Create the indicator (the dot/circle - hidden when not checked) */
        .container-radio .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the indicator (dot/circle) when checked */
        .container-radio input:checked ~ .checkmark:after {
            display: block;
        }

        /* Style the indicator (dot/circle) */
        .container-radio .checkmark:after {
            top: 9px;
            left: 9px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: white;
        }

        .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);
        }

        .slick-slide {
            margin: 15px;
        }

        .deals_slider_nav_container {
            display: none;
        }

    </style>
    @php
        $thisShop=\Illuminate\Support\Facades\Session::get('boutique');
    @endphp
    @if(isset($lastArticle) && count($lastArticle)>0 )
        <!-- Banner -->
        @if($thisShop->publicites!==null && count($thisShop->publicites)>0)
            <div class="banner">
                @foreach($thisShop->publicites as $publicite)
                    <div class="banner_background text-center"
                         style="display:table; background: url({{$publicite->image}}) center no-repeat;background-size: auto;padding: 0;">
                        <div
                            style="display: table-cell;vertical-align: middle;width: 100%;@if($publicite->description!=null || $publicite->description!="")background: rgba(0,0,0,0.5) @endif;padding: 9%;color: #fff;height: 100%">
                            {{$publicite->description}}
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
        <!-- Characteristics -->
        @if(isset($metas->mot_d_ordres))
            <div class="characteristics">
                <div class="container">
                    <div class="row">
                    @php
                        $icon=['images/char_1.png','images/char_2.png','images/char_3.png','images/char_4.png'];
                    @endphp
                    @for($i=0;$i<count($metas->mot_d_ordres);$i++)
                        <!-- Char. Item -->
                            <div class="col-lg-3 col-md-6 char_col">
                                <div class="char_item d-flex flex-row align-items-center justify-content-start">
                                    <div class="char_icon"><img src="{{$icon[$i]}}" alt=""></div>
                                    <div class="char_content">
                                        <div class="char_title">{{$metas->mot_d_ordres[$i]}}</div>
                                    </div>
                                </div>
                            </div>
                        @endfor
                        @endif

                    </div>
                </div>
            </div>
            <!-- Nouveau produits -->
            <div class="deals_featured">
                <div class="container">
                    <div class="row">
                        <div class="col d-flex flex-lg-row flex-column align-items-center justify-content-start">
                            <!-- Deals -->

                            <div class="deals">
                                <div class="deals_title">Produits récents
                                </div>
                                <div class="deals_slider_container">
                                    <!-- Deals Slider -->
                                    <div class="owl-carousel owl-theme deals_slider">
                                        <!-- Deals Item -->
                                        @foreach($lastArticle as $article)
                                            @php
                                                $data = $processedArticles[$article->slug] ?? null;
                                            @endphp

                                            @if($data && $data['stock'] != 0)
                                                <div class="owl-item deals_item">
                                                    <div class="product_fav"
                                                         style="z-index: 50;visibility: visible;opacity: 1;display: block;top: 130px;right: 40px"
                                                         data-catalogue_article_slug="{{$article->slug}}"
                                                         data-boutique_slug="{{$thisShop['slug']}}"
                                                         data-url="{{route('wishlist.article')}}"
                                                         data-article_name="{{$data['name']}}"><i
                                                            style="@if($data['is_favorite']) color: red; @endif"
                                                            class="fas fa-heart"></i></div>
                                                    <div class="cart-btn-every-where"
                                                         style="z-index: 50; visibility: visible;opacity: 1;display: block;top: 130px;right: 0px"
                                                         data-article="{{$article->slug}}"><i
                                                            style="@if($data['in_cart']) color: red; @endif"
                                                            class="fas fa-shopping-bag cart_i_value{{$article->slug}}"></i>
                                                    </div>

                                                    <div class="deals_image">
                                                        @if(isset($data['image']) && $data['image']->filename != null)
                                                            <img class="lazy" data-src="{{$data['image']->filename}}"
                                                                 alt="{{$data['name']}}">
                                                        @endif
                                                    </div>
                                                    <div class="deals_content">
                                                        <div
                                                            class="deals_info_line d-flex flex-row justify-content-start">
                                                            <div class="deals_item_category">
                                                                <a href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}"> {{$data['name']}} </a>
                                                            </div>
                                                            <div class="deals_item_price_a ml-auto"></div>
                                                        </div>
                                                        <div
                                                            class="deals_info_line d-flex flex-row justify-content-start">
                                                            <div class="deals_item_price"
                                                                 style="font-size: 10pt;">{{$data['final_price']}} {{$thisShop->meta->currency_client}}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>

                                </div>

                                <div class="deals_slider_nav_container">
                                    <div class="deals_slider_prev deals_slider_nav"><i
                                            class="fas fa-chevron-left ml-auto"></i></div>
                                    <div class="deals_slider_next deals_slider_nav"><i
                                            class="fas fa-chevron-right ml-auto"></i></div>
                                </div>
                            </div>


                            <!-- Featured -->
                            <div class="featured">
                                <div class="tabbed_container">
                                    <div class="tabs">
                                        <ul class="clearfix">
                                            <li class="active">Nouveau Produits</li>
                                            {{-- <li>On Sale</li>
                                             <li>Best Rated</li>--}}
                                        </ul>
                                        <div class="tabs_line"><span></span></div>
                                    </div>
                                    <!-- Product Panel -->
                                    <div class="product_panel panel active">
                                        <div class="featured_slider slider">
                                        @php  $i=0; @endphp
                                        @foreach($articles as $article)
                                            @php
                                                $i++;
                                                $data = $processedArticlesGeneral[$article->slug] ?? null;
                                            @endphp
                                            @if($i<=20 && $data && $data['stock'] != 0)
                                                <!-- Slider Item -->
                                                    <div class="featured_slider_item">
                                                        <a href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}">
                                                            <div
                                                                class="product_item discount d-flex flex-column align-items-center justify-content-center text-center">
                                                                <div class="clearfix"></div>
                                                                <div
                                                                    class="product_image d-flex flex-column align-items-center justify-content-center">
                                                                    @if(isset($data['image']) && $data['image']->filename != null)
                                                                        <img class="lazy"
                                                                             data-src="{{$data['image']->filename}}"
                                                                             alt="{{$data['name']}}"
                                                                             style="width: 100%;padding: 10px">
                                                                    @endif
                                                                </div>
                                                                <div class="clearfix"></div>
                                                                <div class="product_content"
                                                                     style="padding: 10px;padding-top: 10px">
                                                                    <div class="product_price discount">
                                                                        <span style="font-size: 7pt;color: #e65c2b">{{$data['final_price']}} {{$thisShop->meta->currency_client}}</span>
                                                                        @if($data['on_sale'] && $data['show_price'] > 0)
                                                                            <span style="font-size: 7pt; text-decoration: line-through">{{$data['price']}} {{$thisShop->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)}}">{{$data['name']}}</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="product_fav"
                                                                     data-catalogue_article_slug="{{$article->slug}}"
                                                                     data-boutique_slug="{{$thisShop['slug']}}"
                                                                     data-url="{{route('wishlist.article')}}"
                                                                     data-article_name="{{$data['name']}}"><i
                                                                        style="@if($data['is_favorite']) color: red; @endif"
                                                                        class="fas fa-heart"></i></div>
                                                                <div class="cart-btn-every-where"
                                                                     data-article="{{$article->slug}}"><i
                                                                        style="@if($data['in_cart']) color: red; @endif"
                                                                        class="fas fa-shopping-bag cart_i_value{{$article->slug}}"></i>
                                                                </div>

                                                                <ul class="product_marks">
                                                                    @if($data['on_sale'] && $data['show_price'] > 0)
                                                                        <li class="product_mark product_discount">
                                                                            -{{$data['show_price']}}%
                                                                        </li>
                                                                    @endif
                                                                </ul>
                                                            </div>
                                                        </a>
                                                    </div>
                                                @endif
                                            @endforeach

                                        </div>
                                        <div class="featured_slider_dots_cover"></div>
                                    </div>
                                </div>
                            </div>

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

            <!-- Best Sellers -->

            {{--<!-- Promo -->--}}

            @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 2025</h2>
                                    <div class="trends_text text-justify" style="text-justify: inter-character"><p>
                                            Profiter de nos offres promotionnelle pour vous procurez des produits à 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
                                            $data = $processedPromos[$article->slug] ?? null;
                                        @endphp

                                        <!-- Recently Viewed Item -->
                                            @if($data && $data['on_sale'] && $data['show_price'] > 0)
                                                <div class="owl-item">
                                                    <div
                                                        class="product_i viewed_item discount d-flex flex-column align-items-center justify-content-center text-center">
                                                        <div class="viewed_image">
                                                            @if(isset($data['image']) && $data['image']->filename != null)
                                                                <img class="lazy" data-src="{{$data['image']->filename}}"
                                                                     alt="{{$data['name']}}">
                                                            @endif
                                                        </div>
                                                        <div class="viewed_content text-center">
                                                            <div class="viewed_price"
                                                                 style="font-size: 7pt;color: #e65c2b">{{$data['final_price']}} {{$thisShop->meta->currency_client}}
                                                                <span
                                                                    style="font-size: 7pt;">{{$data['price']}} {{$thisShop->meta->currency_client}}</span>
                                                            </div>
                                                            <div class="viewed_name"><a title="{{$data['name']}}"
                                                                                        href="{{url(\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'].'/product/'.$article->slug)}}">{{\Illuminate\Support\Str::limit($data['name'],10)}}</a>
                                                            </div>
                                                        </div>
                                                        <div class="product_fav"
                                                             data-catalogue_article_slug="{{$article->slug}}"
                                                             data-boutique_slug="{{$thisShop['slug']}}"
                                                             data-url="{{route('wishlist.article')}}"
                                                             data-article_name="{{$data['name']}}"><i
                                                                style="@if($data['is_favorite']) 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($data['in_cart']) color: red; @endif"
                                                                class="fas fa-shopping-bag cart_i_value{{$article->slug}}"></i>
                                                        </div>

                                                        <ul class="item_marks">
                                                            @if($data['on_sale'] && $data['show_price'] > 0)
                                                                <li class="product_mark product_discount">
                                                                    -{{$data['show_price']}}%
                                                                </li>
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="row" style="padding: 2%">
            @if(count($articles_lists)>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;">
                            <h3 style="font-size: 14pt;border: 1px solid #ddd;padding: 15px;" class="text-uppercase">
                                PRODUITS RECOMMANDés</h3>
                        </div>           <!-- Product Panel -->

                        <div class="row" style="border: 1px solid #ddd;padding: 2%">
                            <div class="col-sm-12">
                                <h5>Trier par:</h5>
                            </div>
                            <div class="col-sm-4">
                                <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 du produit" aria-label="Recipient's username"
                                           aria-describedby="basic-addon2" id="name">

                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label for="name">prix</label>
                                <div class="input-group mb-3">
                                    <input type="number" class="form-control" style="border-radius: 0px;color: #000;"
                                           placeholder="min" aria-label="Recipient's username"
                                           aria-describedby="basic-addon2" id="min_price">
                                    <input type="number" class="form-control" style="border-radius: 0px;color: #000;"
                                           placeholder="max" aria-label="Recipient's username"
                                           aria-describedby="basic-addon2" id="max_price">

                                </div>
                            </div>
                            <div class="col-sm-4" style="margin-bottom: 20px;">
                                <label for="category">Catégorie</label>
                                <select class="custom-select form-control choosen" id="category"
                                        style="color: #000;border-radius: 0px;width: 100%;margin-left: 0px">
                                    <option selected value="">Sélectionnez une catégorie</option>
                                    @foreach($categories as $category)
                                        <option value="{{$category->slug}}">{{$category->intitule}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="container-checkbox">En Promotion
                                        <input type="checkbox" id="promotion">
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="input-group-append text-right">
                                    <button class="btn btn-outline-secondary" id="btn_research_product" type="button"
                                            style="border-radius: 0px;background: {{$metas->background_color!=null ?  $metas->background_color : 'indigo' }}">
                                        <i class="fa fa-search"></i> Rechercher
                                    </button>
                                    <button class="btn btn-outline-secondary" id="btn-reset_product" type="button"
                                            style="border-radius: 0px;background: {{$metas->background_color!=null ?  $metas->background_color : 'indigo' }}">
                                        <i class="fa fa-sync"></i> Recharger
                                    </button>
                                </div>
                            </div>
                        </div>

                        <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">

                        @foreach($articles_lists as $article)
                            @php
                                $data = $processedArticlesList[$article->slug] ?? null;
                            @endphp
                            @if($data && $data['stock'] != 0)
                                <!-- Slider Item -->
                                    <div class="col-sm-2 col-6 produit_list" data-name="{{$data['name']}}"
                                         data-price="{{$data['on_sale'] && $data['show_price'] > 0 ? $data['price'] : $data['final_price']}}"
                                         data-promotion="{{$data['on_sale'] && $data['show_price'] > 0 ? 'oui' : 'non'}}"
                                         data-category="{{$data['category_slug']}}" 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">
                                                    @if(isset($data['image']) && $data['image']->filename != null)
                                                        <img class="lazy" data-src="{{$data['image']->filename}}"
                                                             alt="{{$data['name']}}" width="120px">
                                                    @endif
                                                </div>
                                                <div class="clearfix"></div>
                                                <div class="product_content" style="padding: 10px;padding-top: 10px">
                                                    <div class="product_price discount">
                                                        <span style="color: #e65c2b">{{$data['final_price']}} {{$thisShop->meta->currency_client}}</span>
                                                        @if($data['on_sale'] && $data['show_price'] > 0)
                                                            <span style="text-decoration: line-through">{{$data['price']}} {{$thisShop->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)}}">{{$data['name']}}</a>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="product_fav"
                                                     data-catalogue_article_slug="{{$article->slug}}"
                                                     data-boutique_slug="{{$thisShop['slug']}}"
                                                     data-url="{{route('wishlist.article')}}"
                                                     data-article_name="{{$data['name']}}"><i
                                                        style="@if($data['is_favorite']) color: red; @endif"
                                                        class="fas fa-heart"></i></div>
                                                <div class="cart-btn-every-where" data-article="{{$article->slug}}"><i
                                                        style="@if($data['in_cart']) color: red; @endif"
                                                        class="fas fa-shopping-bag cart_i_value{{$article->slug}}"></i>
                                                </div>
                                                <ul class="product_marks">
                                                    @if($data['on_sale'] && $data['show_price'] > 0)
                                                        <li class="product_mark product_discount">
                                                            -{{$data['show_price']}}%
                                                        </li>
                                                    @endif

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

            </div>

        @else

            <div class="text-center" style="padding: 10%;color: #b40100;">Site web non configurer.<br><span
                    style="font-size: 7pt;color: #000;">Ce site ne contient aucun produit pour le moment.</span>
                <br>
                <br>
                @if(\Illuminate\Support\Facades\Session::has('user'))
                    @if(\Illuminate\Support\Facades\Session::get('user')['slug']==$thisShop['user_slug'])
                        <a href="{{route('gerer_boutique',$thisShop['slug'])}}" class="btn btn-primary btn-sm"
                           style="padding: 5px;border-radius: 0px">Accéder à la boutique</a>
                    @endif
                @endif
            </div>

        @endif

@endsection