@extends('layouts.site.site')

@section('content')

<main class="main z-1">
    <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": true,
                        "dots": true,
                        "loop": true,
                        "autoplay": true,
                        "autoplayTimeout": 3600,
                        "autoplayHoverPause": true,
                        "responsive": {
                                "768": {
                                    "nav": false
                                }
                            }
                        }'>

                        @foreach($datas[\App\Classes\Constant::MAIN_SLIDER] as $slide)
                        <div class="intro-slide">
                            <a href="{{route('detail-offer-site', $slide->id)}}">
                                <figure class="slide-image">
                                    <picture>
                                        <source media="(max-width: 480px)" srcset="{{asset(\App\Classes\Constant::SLIDE_PATH).'/'.$slide->getImageForPubMobile()->url}}">
                                        <img src="{{asset(\App\Classes\Constant::OFFRE_PATH).'/'.$slide->getImageForPub()->url}}" alt="Image Desc">
                                    </picture>
                                </figure><!-- End .slide-image -->
                            </a>
                        </div><!-- End .intro-slide -->
                        @endforeach

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

            @foreach($datas[\App\Classes\Constant::SPECIALHOME_TOP] as $key => $product)
                @if($key == 0)
                <div class="col-xl-3 col-xxl-2 d-none d-xxl-block">
                    <div class="banner banner-overlay  banner-content-stretch ">
                        <a href="{{route('detail-offer-site', $product->id)}}">
                            <img src="{{asset(\App\Classes\Constant::OFFRE_PATH).'/'.$product->getImageForPub()->url}}" alt="Banner img desc">
                        </a>
                        <div class="banner-content text-right">
                            <div class="price text-center">
                                <sup class="text-white">.</sup>
                                <span class="text-white">
                                    <strong>.</strong>
                                </span>
                            </div>
                            <a href="{{route('detail-offer-site', $product->id)}}" class="banner-link">Découvrir<i class="icon-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                @endif
            @endforeach
        </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 class="col-lg-12 col-xxl-4-5col">
                        <div class="intro-slider owl-carousel owl-simple owl-nav-inside" data-toggle="owl"
                            data-owl-options='{
                                "autoplay": true,
                                "autoplayTimeout": 3600,
                                "autoplayHoverPause": true,
                                "nav": false,
                                "dots": false,
                                "margin": 20,
                                "loop": true,
                                "responsive": {
                                    "0": {
                                        "items":2
                                    }
                                }
                            }'>
                            @foreach($datas[\App\Classes\Constant::SECONDARY_SLIDER] as $slide)
                            <div class="banner banner-overlay">
                                <a href="{{route('detail-offer-site', $slide->id)}}">
                                    <img src="{{asset(\App\Classes\Constant::OFFRE_PATH).'/'.$slide->getImageForPub()->url}}" alt="Banner img desc">
                                </a>

                                <div class="banner-content">
                                    <h4 class="banner-subtitle text-white d-none d-sm-block"><a href="#">.</a></h4><!-- End .banner-subtitle -->
                                    <h3 class="banner-title text-white"><a href="#">.</a></h3><!-- End .banner-title -->
                                    <a href="{{route('detail-offer-site', $slide->id)}}" class="banner-link">savoir plus <i class="icon-long-arrow-right"></i></a>
                                </div><!-- End .banner-content -->
                            </div><!-- End .banner -->
                            @endforeach

                        </div><!-- End .owl-carousel -->
                    </div><!-- End .col-lg-3 col-xxl-4-5col -->

                    @foreach($datas[\App\Classes\Constant::SPECIALHOME_BOTTOM] as $key => $product)
                        @if($key == 0)
                        <div class="col-12 col-xxl-5col d-none d-xxl-block">
                            <div class="banner banner-overlay">
                                <a href="{{route('detail-offer-site', $product->id)}}">
                                    <img src="{{asset(\App\Classes\Constant::OFFRE_PATH).'/'.$product->getImageForPub()->url}}" alt="Banner img desc">
                                </a>
                                <div class="banner-content">
                                    <h4 class="banner-subtitle text-white"><a href="#">.</a></h4>
                                    <h3 class="banner-title text-white"><a href="#">.</a></h3>
                                    <a href="{{route('detail-offer-site', $product->id)}}" class="banner-link">savoir plus <i class="icon-long-arrow-right"></i></a>
                                </div><!-- End .banner-content -->
                            </div><!-- End .banner banner-overlay -->
                        </div><!-- End .col-lg-3 col-xxl-2 -->
                        @endif
                    @endforeach

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

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

                <div class="owl-carousel owl-simple brands-carousel" data-toggle="owl"
                    data-owl-options='{
                        "autoplay": true,
                        "autoplayTimeout": 3600,
                        "autoplayHoverPause": true,
                        "fluidSpeed": 1,
                        "nav": false,
                        "dots": false,
                        "margin": 20,
                        "loop": true,
                        "responsive": {
                            "0": {
                                "items":2
                            },
                            "420": {
                                "items":3
                            },
                            "600": {
                                "items":4
                            },
                            "900": {
                                "items":5
                            },
                            "1600": {
                                "items":6,
                                "nav": true
                            }
                        }
                    }'>
                    @foreach($datas[\App\Classes\Constant::STORE] as $key => $store)
                    <a href="{{route('detail-enseigne-site', $store->id)}}" class="brand">
                        <img src="{{asset(\App\Classes\Constant::ENSEIGNE_PATH).'/'.$store->getImageMiniature()->url}}" alt="Brand Name">
                    </a>
                    @endforeach
                </div><!-- End .owl-carousel -->

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

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

                        <div class="heading-right">
                            <ul class="nav nav-pills justify-content-center" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="trending-all-link" data-toggle="tab" href="#trending-all-tab" role="tab" aria-controls="trending-all-tab" aria-selected="true">Tous</a>
                                </li>
                                @foreach($datas[\App\Classes\Constant::INTHENEWS] as $key => $category)
                                <li class="nav-item">
                                    <a class="nav-link" id="trending-elec-link" data-toggle="tab" href="#trending-{{$category['category']->libelle}}-tab" role="tab" aria-controls="trending-{{$category['category']->libelle}}-tab" aria-selected="false">
                                        {{$category['category']->libelle}}</a>
                                </li>
                                @endforeach
                            </ul>
                        </div><!-- End .heading-right -->
                    </div><!-- End .heading -->

                    <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":5,
                                            "nav": true
                                        }
                                    }
                                }'>

                                @foreach($datas[\App\Classes\Constant::INTHENEWS] as $key => $category)
                                    @foreach($category['offres'] as $ko => $product)
                                        <div class="product text-center">
                                            <figure class="product-media">
                                                <span class="product-label label-sale">
                                                    {{round((($product->ancienPrix - $product->nouveauPrix) / $product->ancienPrix) * 100)}}%
                                                </span>
                                                @if(count($product->images) > 0)
                                                    <a href="{{route('detail-offer-site', $product->id)}}">
                                                        <img src="{{asset(\App\Classes\Constant::OFFRE_PATH).'/'.$product->defaultGroupImages->imageNormal->url}}" alt="Product image" class="product-image">
                                                    </a>
                                                @endif

                                                <div class="product-action-vertical">
                                                    <a href="{{$datas[\App\Classes\Constant::USER] != null ? route('offer-favorite', $product->id.'&') : '#signin-modal'}}"
                                                       data-toggle="{{$datas[\App\Classes\Constant::USER] != null ? '' : 'modal'}}"
                                                       class="btn-product-icon btn-wishlist" title="Ajouter aux favories"
                                                       style="
                                                            background-color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $product->preferenceUserId ? '#db6d00' : ''}};
                                                            color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $product->preferenceUserId ? '#ffffff' : ''}};"
                                                    ><span>Ajouter aux favories</span></a>
                                                    <a href="popup/index.html" class="btn-product-icon btn-quickview" title="Détails"><span>Détails</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="{{route('detail-offer-site', $product->id)}}" class="btn btn-outline-primary-2 btn-lg btn-block"><span>voir l'offre</span> <i class="icon-plus"></i></a>
                                                </div><!-- End .product-action -->
                                            </figure><!-- End .product-media -->

                                            <div class="product-body">
                                                <div class="product-cat">
                                                    <a href="{{route('detail-offer-site', $product->id)}}">{{$category['category']->libelle}}</a>
                                                </div><!-- End .product-cat -->
                                                <h3 class="product-title"><a href="detail">{{$product->libelle}}</a></h3><!-- End .product-title -->
                                                <div class="product-price">
                                                    <span class="new-price">{{Number::format($product->nouveauPrix, locale: 'fr', precision: 0)}} fcfa</span>
                                                    <span class="old-price">était {{Number::format($product->ancienPrix, locale: 'fr', precision: 0)}}</span>
                                                </div><!-- End .product-price -->
                                                <div class="ratings-container">
                                                    <div class="ratings">
                                                        <div class="ratings-val" style="width: {{($product->meanNotes() / 5) * 100}}%;"></div><!-- End .ratings-val -->
                                                    </div><!-- End .ratings -->
                                                    <span class="ratings-text">( {{$product->commentUsers->count()}} Commentaires )</span>
                                                </div><!-- End .rating-container -->
                                            </div><!-- End .product-body -->
                                        </div><!-- End .product -->
                                    @endforeach
                                @endforeach
                            </div><!-- End .owl-carousel -->
                        </div><!-- .End .tab-pane -->

                        @foreach($datas[\App\Classes\Constant::INTHENEWS] as $key => $category)
                        <div class="tab-pane p-0 fade" id="trending-{{$category['category']->libelle}}-tab" role="tabpanel" aria-labelledby="trending-elec-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":5,
                                            "nav": true
                                        }
                                    }
                                }'>
                                @foreach($category['offres'] as $ko => $product)
                                <div class="product text-center">
                                    <figure class="product-media">
                                        <span class="product-label label-sale">{{round((($product->ancienPrix - $product->nouveauPrix) / $product->ancienPrix) * 100)}}%</span>
                                        @if(count($product->images) > 0)
                                            <a href="{{route('detail-offer-site', $product->id)}}">
                                                <img src="{{asset(\App\Classes\Constant::OFFRE_PATH).'/'.$product->defaultGroupImages->imageNormal->url}}" alt="Product image" class="product-image">
                                            </a>
                                        @endif

                                        <div class="product-action-vertical">
                                            <a href="{{$datas[\App\Classes\Constant::USER] != null ? route('offer-favorite', $product->id.'&') : '#signin-modal'}}"
                                               data-toggle="{{$datas[\App\Classes\Constant::USER] != null ? '' : 'modal'}}"
                                               class="btn-product-icon btn-wishlist" title="Ajouter aux favories"
                                               style="background-color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $product->preferenceUserId ? '#db6d00' : ''}};
                                                      color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $product->preferenceUserId ? '#ffffff' : ''}};"
                                            ><span>Ajouter aux favories</span></a>
                                            <a href="popup/index.html" class="btn-product-icon btn-quickview" title="Détails"><span>Détails</span></a>
                                        </div><!-- End .product-action-vertical -->

                                        <div class="product-action">
                                            <a href="{{route('detail-offer-site', $product->id)}}" class="btn btn-outline-primary-2 btn-lg btn-block"><span>voir l'offre</span> <i class="icon-plus"></i></a>
                                        </div><!-- End .product-action -->
                                    </figure><!-- End .product-media -->

                                    <div class="product-body">
                                        <div class="product-cat">
                                            <a href="#">{{$category['category']->libelle}}</a>
                                        </div><!-- End .product-cat -->
                                        <h3 class="product-title"><a href="{{route('detail-offer-site', $product->id)}}">{{$product->libelle}}</a></h3><!-- End .product-title -->
                                        <div class="product-price">
                                            <span class="new-price">{{Number::format($product->nouveauPrix, locale: 'fr', precision: 0)}} fcfa</span>
                                            <span class="old-price">était {{Number::format($product->ancienPrix, locale: 'fr', precision: 0)}}</span>
                                        </div><!-- End .product-price -->
                                        <div class="ratings-container">
                                            <div class="ratings">
                                                <div class="ratings-val" style="width: {{($product->meanNotes() / 5) * 100}}%;"></div><!-- End .ratings-val -->
                                            </div><!-- End .ratings -->
                                            <span class="ratings-text">( {{$product->commentUsers->count()}} Commentaires )</span>
                                        </div><!-- End .rating-container -->
                                    </div><!-- End .product-body -->
                                </div><!-- End .product -->
                                @endforeach
                            </div><!-- End .owl-carousel -->
                        </div><!-- .End .tab-pane -->
                        @endforeach
                    </div><!-- End .tab-content -->
                </div><!-- End .bg-lighter -->

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

                <div style="margin-bottom: 30px; padding-bottom: 30px;">
                    <div class="heading-left d-flex flex-row justify-content-between mb-2" style="margin: 0 60px;">
                        <h2 class="title">Cartes de fidélité</h2><!-- End .title -->
                        <h3><a href="#" style="font-size: 20px;">Voir plus</a></h3>
                    </div><!-- End .heading-left -->
                    <div class="tab-content tab-content-carousel" style="padding: 0 60px;">
                        <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":5,
                                            "nav": true
                                        }
                                    }
                                }'
                                 style="border-bottom: 1px solid #dddddd;">
                                @foreach($datas[\App\Classes\Constant::CARTE_FIDELITES] as $key => $card)
                                    <div class="product text-center" style="width: 300px;">
                                        <figure class="product-media" style="background-color: transparent;">
                                            @if(count($card->images) > 0)
                                            <a href="{{route('carte.fidelite.detail', $card->id)}}">
                                                <img src="{{asset(\App\Classes\Constant::CARTE_FIDELITE_PATH).'/'.$card->images[0]->url}}" alt="Brand Name">
                                            </a>
                                            @endif
                                            <div class="product-action-vertical">
                                                <a href="#" class="btn-product-icon btn-wishlist" title="S'abonner à la carte"><span>S'abonner à la carte</span></a>
                                            </div>
                                        </figure>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div></div>
                </div>

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

                @foreach($datas[\App\Classes\Constant::CATEGORY_LIST] as $key => $category)
                    @if($key == 0 || $key == 1)
                    <div class="row cat-banner-row Electroniques">
                        <div class="col-xl-3 col-xxl-4">
                            <div class="cat-banner row no-gutters">
                                <div class="cat-banner-list col-sm-6 d-xl-none d-xxl-flex" style="background-image: url({{asset('images/categories/banner-bg-1.jpg')}});">
                                    <div class="banner-list-content">
                                        <h2><a href="#">{{$category['category']->libelle}}</a></h2>
                                        <ul>
                                            @foreach($category['categories'] as $kc => $categorie)
                                                @if($kc < 8)
                                                <li><a href="#" class="d-inline-block text-truncate pe-2">{{$categorie->libelle}}</a></li>
                                                @endif
                                            @endforeach
                                            <li><a href="#">Toutes les catégories</a></li>
                                        </ul>
                                    </div><!-- End .banner-list-content -->
                                </div><!-- End .col-sm-6 -->

                                <div class="col-sm-12 col-xl-12 col-xxl-6">
                                    <div class="banner banner-overlay">
                                        @if(count($category['category']->images) > 0)
                                        <a href="#">
                                            <img src="{{asset(\App\Classes\Constant::CATEGORIE_PATH).'/'.$category['category']->getImageNormal()->url}}" alt="Banner img desc">
                                        </a>
                                        @endif

                                        <div class="banner-content">
                                            <h4 class="banner-subtitle text-white"><a href="#">Meilleures offres</a></h4><!-- End .banner-subtitle -->
                                            <h3 class="banner-title text-white"><a href="#">{{$category['category']->description}} <br><span>
                                                        Jusqu'à {{0.2 * 100}}% de réduction
                                                    </span></a></h3><!-- End .banner-title -->
                                            <a href="#" class="banner-link">Savoir plus <i class="icon-long-arrow-right"></i></a>
                                        </div><!-- End .banner-content -->
                                    </div><!-- End .banner -->
                                </div><!-- End .col-sm-6 -->
                            </div><!-- End .cat-banner -->
                        </div><!-- End .col-xl-3 -->

                        <div class="col-xl-9 col-xxl-8">
                            <div class="owl-carousel owl-full carousel-equal-height carousel-with-shadow" data-toggle="owl"
                                data-owl-options='{
                                    "nav": true,
                                    "dots": false,
                                    "margin": 20,
                                    "loop": false,
                                    "responsive": {
                                        "0": {
                                            "items":2
                                        },
                                        "480": {
                                            "items":2
                                        },
                                        "768": {
                                            "items":3
                                        },
                                        "992": {
                                            "items":4
                                        },
                                        "1200": {
                                            "items":3
                                        },
                                        "1600": {
                                            "items":4
                                        }
                                    }
                                }'>
                                @foreach($category['offres'] as $product)
                                <div class="product text-center">
                                    <figure class="product-media">
                                        <span class="product-label label-top">{{round((($product->ancienPrix - $product->nouveauPrix) / $product->ancienPrix) * 100)}}%</span>
                                        @if(count($product->images) > 0)
                                        <a href="{{route('detail-offer-site', $product->id)}}">
                                            <img src="{{asset(\App\Classes\Constant::OFFRE_PATH).'/'.$product->defaultGroupImages->imageNormal->url}}" alt="Product image" class="product-image">
                                        </a>
                                        @endif

                                        <div class="product-action-vertical">
                                            <a href="{{$datas[\App\Classes\Constant::USER] != null ? route('offer-favorite', $product->id.'&') : '#signin-modal'}}"
                                               data-toggle="{{$datas[\App\Classes\Constant::USER] != null ? '' : 'modal'}}"
                                               class="btn-product-icon btn-wishlist" title="Ajouter aux favories"
                                               style="background-color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $product->preferenceUserId ? '#db6d00' : ''}};
                                                      color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $product->preferenceUserId ? '#ffffff' : ''}};"
                                            ><span>Ajouter aux favories</span></a>
                                            <a href="popup/index.html" class="btn-product-icon btn-quickview" title="Détails"><span>Détails</span></a>
                                        </div><!-- End .product-action-vertical -->

                                        <div class="product-action">
                                            <a href="{{route('detail-offer-site', $product->id)}}" class="btn btn-outline-primary-2 btn-lg btn-block"><span>voir l'offre</span> <i class="icon-plus"></i></a>
                                        </div><!-- End .product-action -->
                                    </figure><!-- End .product-media -->

                                    <div class="product-body">
                                        <div class="product-cat">
                                            <a href="#">{{$category['category']->libelle}}</a>
                                        </div><!-- End .product-cat -->
                                        <h3 class="product-title"><a href="{{route('detail-offer-site', $product->id)}}">{{$product->libelle}}</a></h3><!-- End .product-title -->
                                        <div class="product-price">
                                        {{Number::format($product->nouveauPrix, locale: 'fr', precision: 0)}} fcfa
                                        </div><!-- End .product-price -->
                                        <div class="ratings-container">
                                            <div class="ratings">
                                                <div class="ratings-val" style="width: {{($product->meanNotes() / 5) * 100}}%;"></div><!-- End .ratings-val -->
                                            </div><!-- End .ratings -->
                                            <span class="ratings-text">( {{$product->commentUsers->count()}} Commentaires )</span>
                                        </div><!-- End .rating-container -->
                                    </div><!-- End .product-body -->
                                </div><!-- End .product -->
                                @endforeach
                            </div><!-- End .owl-carousel -->
                        </div><!-- End .col-xl-9 -->
                    </div><!-- End .row cat-banner-row -->
                    @endif
                @endforeach

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

                <div class="row">
                    @foreach($datas[\App\Classes\Constant::EXCLUSIF] as $key => $product)
                        @if($key <= 1)
                        <div class="col-md-6">
                            <div class="banner banner-overlay">
                                <a href="{{route('detail-offer-site', $product->id)}}">
                                    <img src="{{asset(\App\Classes\Constant::OFFRE_PATH).'/'.$product->getImageForPub()->url}}" alt="Banner img desc">
                                </a>

                                <div class="banner-content">
                                    @if($product->description != '')
                                    <h4 class="banner-subtitle text-white d-none d-sm-block"><a href="#">Les offres de la saison</a></h4><!-- End .banner-subtitle -->
                                    @endif
                                    <h3 class="banner-title text-white"><a href="{{route('detail-offer-site', $product->id)}}">{{$product->libelle}} <br><span>{{$product->description}}</span></a></h3><!-- End .banner-title -->
                                    <a href="{{route('detail-offer-site', $product->id)}}" class="banner-link">Savoir plus<i class="icon-long-arrow-right"></i></a>
                                </div><!-- End .banner-content -->
                            </div><!-- End .banner -->
                        </div><!-- End .col-md-6 -->
                        @endif
                    @endforeach
                </div><!-- End .row -->

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

                @foreach($datas[\App\Classes\Constant::CATEGORY_LIST] as $key => $category)
                    @if($key >= 2)
                        <div class="row cat-banner-row Electroniques">
                            <div class="col-xl-3 col-xxl-4">
                                <div class="cat-banner row no-gutters">
                                    <div class="cat-banner-list col-sm-6 d-xl-none d-xxl-flex" style="background-image: url({{asset('images/categories/banner-bg-1.jpg')}});">
                                        <div class="banner-list-content">
                                            <h2><a href="#">{{$category['category']->libelle}}</a></h2>
                                            <ul>
                                                @foreach($category['categories'] as $key => $categorie)
                                                    @if($key < 8)
                                                    <li><a href="#" class="d-inline-block text-truncate pe-2">{{$categorie['libelle']}}</a></li>
                                                    @endif
                                                @endforeach
                                                <li><a href="#">Toutes les catégories</a></li>
                                            </ul>
                                        </div><!-- End .banner-list-content -->
                                    </div><!-- End .col-sm-6 -->

                                    <div class="col-sm-12 col-xl-12 col-xxl-6">
                                        <div class="banner banner-overlay">
                                            @if(count($category['category']->images) > 0)
                                            <a href="#">
                                                <img src="{{asset(\App\Classes\Constant::CATEGORIE_PATH).'/'.$category['category']->getImageNormal()->url}}" alt="Banner img desc">
                                            </a>
                                            @endif

                                            <div class="banner-content">
                                                <h4 class="banner-subtitle text-white"><a href="#">Meilleures offres</a></h4><!-- End .banner-subtitle -->
                                                <h3 class="banner-title text-white"><a href="#">{{$category['category']->description}} <br><span>
                                                        Jusqu'à {{0.2 * 100}}% de réduction
                                                    </span></a></h3><!-- End .banner-title -->
                                                <a href="#" class="banner-link">Savoir plus <i class="icon-long-arrow-right"></i></a>
                                            </div><!-- End .banner-content -->
                                        </div><!-- End .banner -->
                                    </div><!-- End .col-sm-6 -->
                                </div><!-- End .cat-banner -->
                            </div><!-- End .col-xl-3 -->

                            <div class="col-xl-9 col-xxl-8">
                                <div class="owl-carousel owl-full carousel-equal-height carousel-with-shadow" data-toggle="owl"
                                     data-owl-options='{
                                    "nav": true,
                                    "dots": false,
                                    "margin": 20,
                                    "loop": false,
                                    "responsive": {
                                        "0": {
                                            "items":2
                                        },
                                        "480": {
                                            "items":2
                                        },
                                        "768": {
                                            "items":3
                                        },
                                        "992": {
                                            "items":4
                                        },
                                        "1200": {
                                            "items":3
                                        },
                                        "1600": {
                                            "items":4
                                        }
                                    }
                                }'>
                                    @foreach($category['offres'] as $product)
                                        <div class="product text-center">
                                            <figure class="product-media">
                                                <span class="product-label label-top">{{round((($product->ancienPrix - $product->nouveauPrix) / $product->ancienPrix) * 100)}}%</span>
                                                @if(count($product->images) > 0)
                                                <a href="{{route('detail-offer-site', $product->id)}}">
                                                    <img src="{{asset(\App\Classes\Constant::OFFRE_PATH).'/'.$product->defaultGroupImages->imageNormal->url}}" alt="Product image" class="product-image">
                                                </a>
                                                @endif

                                                <div class="product-action-vertical">
                                                    <a href="{{$datas[\App\Classes\Constant::USER] != null ? route('offer-favorite', $product->id.'&') : '#signin-modal'}}"
                                                       data-toggle="{{$datas[\App\Classes\Constant::USER] != null ? '' : 'modal'}}"
                                                       class="btn-product-icon btn-wishlist" title="Ajouter aux favories"
                                                       style="background-color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $product->preferenceUserId ? '#db6d00' : ''}};
                                                            color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $product->preferenceUserId ? '#ffffff' : ''}};"
                                                    ><span>Ajouter aux favories</span></a>
                                                    <a href="popup/index.html" class="btn-product-icon btn-quickview" title="Détails"><span>Détails</span></a>
                                                </div><!-- End .product-action-vertical -->

                                                <div class="product-action">
                                                    <a href="{{route('detail-offer-site', $product->id)}}" class="btn btn-outline-primary-2 btn-lg btn-block"><span>voir l'offre</span> <i class="icon-plus"></i></a>
                                                </div><!-- End .product-action -->
                                            </figure><!-- End .product-media -->

                                            <div class="product-body">
                                                <div class="product-cat">
                                                    <a href="#">Electroniques</a>
                                                </div><!-- End .product-cat -->
                                                <h3 class="product-title"><a href="{{route('detail-offer-site', $product->id)}}">{{$product->libelle}}</a></h3><!-- End .product-title -->
                                                <div class="product-price">
                                                    {{Number::format($product->nouveauPrix, locale: 'fr', precision: 0)}} fcfa
                                                </div><!-- End .product-price -->
                                                <div class="ratings-container">
                                                    <div class="ratings">
                                                        <div class="ratings-val" style="width: {{($product->meanNotes() / 5) * 100}}%;"></div><!-- End .ratings-val -->
                                                    </div><!-- End .ratings -->
                                                    <span class="ratings-text">( {{$product->commentUsers->count()}} Commentaires )</span>
                                                </div><!-- End .rating-container -->
                                            </div><!-- End .product-body -->
                                        </div><!-- End .product -->
                                    @endforeach
                                </div><!-- End .owl-carousel -->
                            </div><!-- End .col-xl-9 -->
                        </div><!-- End .row cat-banner-row -->
                    @endif
                @endforeach

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


                <div class="cta cta-horizontal cta-horizontal-box bg-image mb-5" style="background-image: url({{asset('images/backgrounds/cta/bg-1.jpg')}}); background-position: center right;">
                    <div class="row align-items-center">
                        <div class="col-lg-8 col-xl-7 offset-xl-1">
                            <h3 class="cta-title">Catalogues</h3><!-- End .cta-title -->
                            <p class="cta-desc">Profiter de notre large gamme d'offres, en consultant nos catalogues.</p><!-- End .cta-desc -->
                        </div><!-- End .col-xl-3 -->

                        <div class="col-lg-4 col-xl-3">
                            <a href="{{route('cat-site')}}" class="banner-link">Tout voir<i class="icon-long-arrow-right"></i></a>
                        </div><!-- End .col-xl-7 -->
                    </div><!-- End .row -->
                </div><!-- End .cta -->

                <div  class="col-xl-12 col-xxl-12">
                    <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": true,
                            "autoplay": true,
                            "autoplayTimeout": 3600,
                            "autoplayHoverPause": true,
                            "responsive": {
                                "0": {
                                    "items":1
                                },
                                "480": {
                                    "items":2
                                },
                                "768": {
                                    "items":3
                                },
                                "992": {
                                    "items":4
                                },
                                "1200": {
                                    "items":4,
                                    "nav": true,
                                    "dots": false
                                }
                            }
                        }'>
                        @foreach($datas[\App\Classes\Constant::CATALOGUE] as $key => $catalogue)
                        <div class="product product-7 text-center">
                            <figure class="product-media">
                                @if(count($catalogue->images) > 0)
                                <a href="{{route('detail-cat-site', $catalogue->id)}}">
                                    <img src="{{asset(\App\Classes\Constant::CATALOGUE_PATH).'/'.$catalogue->images[0]->url}}" alt="Product image" class="product-image">
                                </a>
                                @endif

                                <div class="product-action-vertical">
                                    <a href="{{$datas[\App\Classes\Constant::USER] != null ? route('catalogue.favorite.add', $catalogue->id.'&') : '#signin-modal'}}"
                                       data-toggle="{{$datas[\App\Classes\Constant::USER] != null ? '' : 'modal'}}"
                                       class="btn-product-icon btn-wishlist" title="Ajouter aux favories"
                                       style="background-color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $catalogue->preferenceUserId ? '#db6d00' : ''}};
                                              color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $catalogue->preferenceUserId ? '#ffffff' : ''}};"
                                    ><span>Ajouter aux favories</span></a>
                                </div>

                                <div class="product-action">
                                    <a href="{{route('detail-cat-site', $catalogue->id)}}" class="btn btn-outline-primary-2 btn-lg btn-block"><span>détails</span> <i class="icon-plus"></i></a>
                                </div>
                            </figure>

                            <div class="product-body">
                                <h3 class="product-title"><a href="{{route('detail-cat-site', $catalogue->id)}}">{{$catalogue->titre}}</a></h3>
                                <div class="product-price">
                                    <span class="out-price">Valide jusqu'au {{$catalogue->datePublication}}</span>
                                </div>

                                <div class="product-label-text">Rupture de stock</div>
                            </div>
                        </div><!-- End .product -->
                        @endforeach
                    </div><!-- End .owl-carousel -->
                </div><!-- End .container -->

            </div><!-- End .col-lg-9 col-xxl-10 -->

            @include('layouts.site.aside')

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

<!-- Sign in / Register Modal -->
@if($datas[\App\Classes\Constant::NAVIGATION_INFOS]['refreshCount'] <= 1)
    @include('layouts.site.popup_modal')
@endif
<!-- Sign in / Register Modal -->

@endsection

<script>

</script>