@section('content')

    <main class="main">
        <div class="mb-lg-2"></div><!-- End .mb-lg-2 -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-9 col-xxl-8 offset-lg-3 offset-xxl-2">
                    <div class="intro-slider-container slider-container-ratio mb-2">
                        <div class="intro-slider owl-carousel owl-simple owl-nav-inside" data-toggle="owl" data-owl-options='{
                                    "nav": false,
                                    "dots": true
                                }'>
                            <div class="intro-slide">
                                <figure class="slide-image">
                                    <picture>
                                        <source media="(max-width: 480px)" srcset="{{asset('assets/website/assets/images/slider/slide-1.png')}}">
                                        <img  loading="lazy" src="{{asset('assets/website/assets/images/slider/slide-1.png')}}" alt="Image Desc">
                                    </picture>
                                </figure><!-- End .slide-image -->


                            </div><!-- End .intro-slide -->

                            <div class="intro-slide">
                                <figure class="slide-image">
                                    <picture>
                                        <source media="(max-width: 480px)" srcset="{{asset('assets/website/assets/images/slider/slide-2.jpg')}}">
                                        <img  loading="lazy" src="{{asset('assets/website/assets/images/slider/slide-2.jpg')}}" alt="Image Desc">
                                    </picture>
                                </figure><!-- End .slide-image -->
                            </div><!-- End .intro-slide -->


                        </div><!-- End .intro-slider owl-carousel owl-simple -->

                        <span class="slider-loader"></span><!-- End .slider-loader -->
                    </div><!-- End .intro-slider-container -->
                </div><!-- End .col-xl-9 col-xxl-10 -->

                <div class="col-xl-3 col-xxl-2 d-none d-xxl-block">
                    <div class="banner banner-overlay  banner-content-stretch ">
                        <a href="#">
                            <img  loading="lazy" src="assets/images/demos/demo-14/banners/banner-1.png" alt="Banner img desc">
                        </a>
                        <div class="banner-content text-right">
                            <div class="price text-center">
                                <sup class="text-white">from</sup>
                                <span class="text-white">
                                        <strong>$199</strong><sup class="text-white">,99</sup>
                                    </span>
                            </div>
                            <a href="#" class="banner-link">Discover Now <i class="icon-long-arrow-right"></i></a>
                        </div><!-- End .banner-content -->
                    </div><!-- End .banner banner-overlay -->
                </div><!-- End .col-xl-3 col-xxl-2 -->
            </div><!-- End .row -->
        </div><!-- End .container-fluid -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-9 col-xxl-10">
                    <div class="row">



                    </div><!-- End .row -->

                    <div class="mb-3"></div><!-- End .mb-3 -->

                    <div class="owl-carousel owl-simple brands-carousel" data-toggle="owl"
                         data-owl-options='{
                                "nav": false,
                                "dots": false,
                                "margin": 20,
                                "loop": false,
                                "responsive": {
                                    "0": {
                                        "items":2
                                    },
                                    "420": {
                                        "items":3
                                    },
                                    "600": {
                                        "items":4
                                    },
                                    "900": {
                                        "items":5
                                    },
                                    "1600": {
                                        "items":6,
                                        "nav": true
                                    }
                                }
                            }'>
                        <a href="#" class="brand">
                            <img  loading="lazy" src="{{asset('assets/website/assets/images/brands/1.png')}}" alt="Impact">
                        </a>

                        <a href="#" class="brand">
                            <img  loading="lazy" src="{{asset('assets/website/assets/images/brands/2.png')}}" alt="Brand Name">
                        </a>

                        <a href="#" class="brand">
                            <img  loading="lazy" src="{{asset('assets/website/assets/images/brands/3.png')}}" alt="Brand Name">
                        </a>

                        <a href="#" class="brand">
                            <img  loading="lazy" src="{{asset('assets/website/assets/images/brands/4.png')}}" alt="Brand Name">
                        </a>

                        <a href="#" class="brand">
                            <img  loading="lazy" src="{{asset('assets/website/assets/images/brands/5.png')}}" alt="Brand Name">
                        </a>

                        <a href="#" class="brand">
                            <img  loading="lazy" src="{{asset('assets/website/assets/images/brands/6.png')}}" alt="Brand Name">
                        </a>

                        <a href="#" class="brand">
                            <img  loading="lazy" src="{{asset('assets/website/assets/images/brands/7.png')}}" alt="Brand Name">
                        </a>
                    </div><!-- End .owl-carousel -->

                    <div class="mb-5"></div><!-- End .mb-5 -->

                    <div class="bg-lighter trending-products">
                        <div class="heading heading-flex mb-3">
                            <div class="heading-left">
                                <h2 class="title">TRENDING</h2><!-- End .title -->

                            </div><!-- End .heading-left -->


                        </div><!-- End .heading -->
                        <hr>
                        <div class="tab-content tab-content-carousel">
                            <div class="tab-pane p-0 fade show active" id="trending-all-tab" role="tabpanel" aria-labelledby="trending-all-link">
                                <div class="owl-carousel owl-simple carousel-equal-height carousel-with-shadow" data-toggle="owl"
                                     data-owl-options='{
                                            "nav": false,
                                            "dots": true,
                                            "margin": 20,
                                            "loop": false,
                                            "responsive": {
                                                "0": {
                                                    "items":1
                                                },
                                                "480": {
                                                    "items":2
                                                },
                                                "768": {
                                                    "items":3
                                                },
                                                "992": {
                                                    "items":4
                                                },
                                                "1200": {
                                                    "items":3,
                                                    "nav": true
                                                },
                                                "1600": {
                                                    "items":4,
                                                    "nav": true
                                                }
                                            }
                                        }'>
                                    @foreach($products as $product)
                                    <div class="product text-center">
                                        <figure class="product-media">
{{--                                            <span class="product-label label-sale">{{ $product->default_image_url }}</span>--}}
                                            <a href="product.html">
                                                <img  loading="lazy" src="{{ $product->default_image_url }}" alt="{{$product->name}}" class="product-image" id="product_image_{{$product->id}}">
                                            </a>

{{--                                            <div class="product-action-vertical">--}}
{{--                                                <a href="#" class="btn-product-icon btn-wishlist" title="Add to wishlist"><span>add to wishlist</span></a>--}}
{{--                                                <a href="popup/quickView.html" class="btn-product-icon btn-quickview" title="Quick view"><span>Quick view</span></a>--}}
{{--                                                <a href="#" class="btn-product-icon btn-compare" title="Compare"><span>Compare</span></a>--}}
{{--                                            </div><!-- End .product-action-vertical -->--}}

                                            <div class="product-action">
                                                <a href="#" class="btn-product btn-cart" title="Add to cart"  data-producid="product_image_{{$product->id}}"><span>Acheter</span></a>
                                            </div><!-- End .product-action -->
                                        </figure><!-- End .product-media -->

                                        <div class="product-body">
                                            <div class="product-cat">
                                                <a href="#">{{$product->brand_name}} - {{$product->category_name}}</a>
                                            </div><!-- End .product-cat -->
                                            <h3 class="product-title"><a href="product.html">{{$product->name}}</a></h3><!-- End .product-title -->
                                            <div class="product-price">
                                                <span class="new-price">{{$product->detail}} TND</span>
{{--                                                <span class="old-price">Was $290.00</span>--}}
                                            </div><!-- End .product-price -->
                                            <div class="ratings-container">
                                                <div class="ratings">
                                                    <div class="ratings-val" style="width: 100%;"></div><!-- End .ratings-val -->
                                                </div><!-- End .ratings -->
                                                <span class="ratings-text"></span>
                                            </div><!-- End .rating-container -->
                                        </div><!-- End .product-body -->
                                    </div><!-- End .product -->
                                    @endforeach



                                </div><!-- End .owl-carousel -->
                            </div><!-- .End .tab-pane -->

                        </div><!-- End .tab-content -->
                    </div><!-- End .bg-lighter -->



                    <div class="mb-3"></div><!-- End .mb-3 -->

                    <div class="icon-boxes-container">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-6 col-lg-3">
                                    <div class="icon-box icon-box-side">
                                            <span class="icon-box-icon text-dark">
                                                <i class="icon-rocket"></i>
                                            </span>
                                        <div class="icon-box-content">
                                            <h3 class="icon-box-title">Livraison</h3><!-- End .icon-box-title -->
                                            <p>Toute la Tunisie</p>
                                        </div><!-- End .icon-box-content -->
                                    </div><!-- End .icon-box -->
                                </div><!-- End .col-sm-6 col-lg-3 -->

                                <div class="col-sm-6 col-lg-3">
                                    <div class="icon-box icon-box-side">
                                            <span class="icon-box-icon text-dark">
                                                <i class="icon-rotate-left"></i>
                                            </span>

                                        <div class="icon-box-content">
                                            <h3 class="icon-box-title">Free Returns</h3><!-- End .icon-box-title -->
                                            <p>Within 30 days</p>
                                        </div><!-- End .icon-box-content -->
                                    </div><!-- End .icon-box -->
                                </div><!-- End .col-sm-6 col-lg-3 -->

                                <div class="col-sm-6 col-lg-3">
                                    <div class="icon-box icon-box-side">
                                            <span class="icon-box-icon text-dark">
                                                <i class="icon-info-circle"></i>
                                            </span>

                                        <div class="icon-box-content">
                                            <h3 class="icon-box-title">Remise</h3><!-- End .icon-box-title -->
                                            <p>S'inscrire pour </p>
                                        </div><!-- End .icon-box-content -->
                                    </div><!-- End .icon-box -->
                                </div><!-- End .col-sm-6 col-lg-3 -->

                                <div class="col-sm-6 col-lg-3">
                                    <div class="icon-box icon-box-side">
                                            <span class="icon-box-icon text-dark">
                                                <i class="icon-life-ring"></i>
                                            </span>

                                        <div class="icon-box-content">
                                            <h3 class="icon-box-title">Disponibilité</h3><!-- End .icon-box-title -->
                                            <p>7/7 Toute la semaine</p>
                                        </div><!-- End .icon-box-content -->
                                    </div><!-- End .icon-box -->
                                </div><!-- End .col-sm-6 col-lg-3 -->
                            </div><!-- End .row -->
                        </div><!-- End .container-fluid -->
                    </div><!-- End .icon-boxes-container -->

                    <div class="mb-5"></div><!-- End .mb-5 -->
                </div><!-- End .col-lg-9 col-xxl-10 -->

                <aside class="col-xl-3 col-xxl-2 order-xl-first">
                    <div class="sidebar sidebar-home">
                        <div class="row">
                            <div class="col-sm-6 col-xl-12">
                                <div class="widget widget-banner">
                                    <div class="banner banner-overlay">
                                        <a href="#">
                                            <img src="{{asset('assets/website/assets/images/demos/demo-14/banners/banner-11.jpg')}}" alt="Banner img desc">
                                        </a>

                                        <div class="banner-content banner-content-top banner-content-right text-right">
                                            <a href="#" class="banner-link">Shop Now <i class="icon-long-arrow-right"></i></a>
                                        </div><!-- End .banner-content -->
                                    </div><!-- End .banner banner-overlay -->
                                </div><!-- End .widget widget-banner -->
                            </div><!-- End .col-sm-6 col-xl-12 -->





                            <div class="col-sm-6 col-xl-12">
                                <div class="widget widget-banner">
                                    <div class="banner banner-overlay">
                                        <a href="#">
                                            <img src="{{asset('assets/website/assets/images/demos/demo-14/banners/banner-12.jpg')}}" alt="Banner img desc">
                                        </a>

                                        <div class="banner-content banner-content-top">
                                            <a href="#" class="banner-link">Shop Now <i class="icon-long-arrow-right"></i></a>
                                        </div><!-- End .banner-content -->
                                    </div><!-- End .banner banner-overlay -->
                                </div><!-- End .widget widget-banner -->
                            </div><!-- End .col-sm-6 col-lg-12 -->


                        </div><!-- End .row -->
                    </div><!-- End .sidebar sidebar-home -->
                </aside><!-- End .col-lg-3 col-xxl-2 -->
            </div><!-- End .row -->
        </div><!-- End .container-fluid -->
    </main><!-- End .main -->




@stop
@include('website.layouts.header')
@include('website.layouts.topbar')
@include('website.layouts.footer')

@yield('header')
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
<!-- Plugins css -->
{{--<link href="{{URL::asset('assets/libs/flatpickr/flatpickr.min.css')}}" rel="stylesheet" type="text/css"/>--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
@yield('topbar')
@yield('sidebar')
@yield('content')
@yield('footer')
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--<script src="{{URL::asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/jquery-knob/jquery.knob.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/jquery-sparkline/jquery.sparkline.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.time.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.tooltip.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.selection.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.crosshair.js')}}"></script>--}}


{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}

@include('admin.end')