@extends('partial.layout')
@section('content')

    <!-- header__topbar__start -->
    <!-- header__topbar__end -->


    <!-- header section start -->

    <!-- banner__section__start -->
    <div class="banner__3 sp_top_20 sp_bottom_50">
        <div class="container">
            <div class="row grid__responsive">
                @if(isset($sliders[0]) && $sliders[0]->attachments->isNotEmpty())
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                        <div class="row grid__responsive">
                            <div class="col-xl-12 p-2">
                                <div class="banner__3__inner">
                                    <div class="banner__3__img">
                                        <a href="{{$sliders[0]->link}}"><img
                                                src="{{ asset('storage/attachments/' . json_decode($sliders[0]->attachments->first()->sizes)->medium ?? '/theme/img/default-banner.jpg') }}"
                                                alt="{{$sliders[0]->title}}" class="slider-large"></a>
                                        <div class="banner__3__text">
                                            <h2><a href="{{$sliders[0]->link}}">{{$sliders[0]->title}}</a>
                                            </h2>
                                            <p>از محصولات این کالکشن دیدن فرمائید</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                    <div class="row grid__responsive">
                        @if(isset($sliders[1]) && $sliders[1]->attachments->isNotEmpty())
                            <div class="col-xl-12 p-2">
                                <div class="banner__3__inner">
                                    <div class="banner__3__img">
                                        <a href="{{$sliders[1]->link}}"><img
                                                src="{{ asset('storage/attachments/' . json_decode($sliders[1]->attachments->first()->sizes)->medium ?? '/theme/img/default-banner.jpg') }}"
                                                alt="{{$sliders[1]->title}}"></a>
                                        <div class="banner__3__text">
                                            <h2><a href="{{$sliders[1]->link}}">{{$sliders[1]->title}}</a>
                                            </h2>
                                            <p>از محصولات این کالکشن دیدن فرمائید</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if(isset($sliders[2]) && $sliders[2]->attachments->isNotEmpty())
                            <div class="col-xl-12 p-2">
                                <div class="banner__3__inner">
                                    <div class="banner__3__img">
                                        <a href="{{$sliders[2]->link}}"><img
                                                src="{{ asset('storage/attachments/' . json_decode($sliders[2]->attachments->first()->sizes)->medium ?? '/theme/img/default-banner.jpg') }}"
                                                alt="{{$sliders[2]->title}}"></a>
                                        <div class="banner__3__text banner__3__right">
                                            <h2><a href="{{$sliders[2]->link}}">{{$sliders[2]->title}}</a>
                                            </h2>
                                            <p>از محصولات این کالکشن دیدن فرمائید</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- banner__section__end -->
    <div class="container mb-3">
        <div class="row">
            @foreach($categories as $category)
                <div class="col-6 col-md-2 text-center">
                    <a href="{{route('category.show',$category->slug)}}">
                        <div class="category-icon-container">
                            <img class="categories-icons"
                                 src="{{ $category->attachments->first() ? asset('storage/attachments/' . $category->attachments->first()->path) : '' }}"
                                 alt="دسته بندی {{$category->title}}">
                        </div>
                        <p class="category-title-slider">{{$category->title}}</p>
                    </a>
                </div>
            @endforeach
        </div>
    </div>

    @if($amazingProducts->count() > 0)
        <div class="container-fluid amazing-products">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-3 p-0">
                        <div class="text-center">
                            <p class="amazing-title mb-5 mt-0">تخفیفات شگفت انگیز</p>
                            <img class="amazing-image" src="/theme/img/banners-temp/new-products.png"
                                 alt="تخفیف های شگفت انگیز">
                            <br>
                            <a href="{{route('amazing-products')}}" class="btn amazing-button-slider mt-5">مشاهده
                                همه</a>
                        </div>
                    </div>
                    <div class="col-12 col-md-9">
                        <div class="swiper mySwiper-amazing">
                            <div class="swiper-wrapper">
                                @foreach($amazingProducts as $productAmazing)
                                    <div class="swiper-slide">
                                        <x-front.product.slider-item :product="$productAmazing" :show-countdown="true"/>
                                    </div>
                                @endforeach
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <!-- feature__section__start -->
    <div class="feture__section sp_bottom_80 mt-5">
        <div class="container">
            <div class="row mb-3">
                <div class="col-12 col-md-6 text-center text-md-end p-1">
                    <span class="product-slider-title">جدید ترین محصولات</span>
                </div>
                <div class="col-12 col-md-6 text-center text-md-start p-1">
                    <a href="/search?sort=newest" class="product-slider-title">مشاهده همه</a>
                </div>
            </div>
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    @foreach($newProducts as $newProduct)
                        <div class="swiper-slide">
                            <x-front.product.slider-item :product="$newProduct"/>
                        </div>
                    @endforeach
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>
    <!-- feature__section__start -->
    <div class="container-fluid live-suggestion">
        <div class="container">
            <div class="row">
                <div class="col-md-2 text-end"><p class="text-white">
                        فرصت خرید استثنائی
                    </p></div>
                <div class="col-md-8 text-center"><p class="text-white">
                        پیشنهاد لحظه ای
                    </p></div>
                <div class="col-md-2 text-start"><p class="text-white">
                        مشاهده همه
                    </p></div>
            </div>
        </div>
    </div>
    <div class="container mb-3">
        <div class="row">
            @foreach($instant_offers as $instant_offer)
                <div class="col-12 col-md-6 mb-2 p-1 ">
                    <x-front.product.live-item :product="$instant_offer"/>
                </div>
            @endforeach
        </div>
    </div>

    @if(isset($banners) && count($banners) > 0)

        <div class="container">
            <div class="row">
                @foreach($banners as $banner)
                    <div class="col-12 col-md-6 pe-0 ps-1">
                        <a target="_blank" href="{{$banner->link}}">
                            @isset($banner->attachment)
                                <img
                                    src="{{ asset('storage/attachments/' . json_decode($banner->attachment->sizes)->medium ?? '/theme/img/default-banner.jpg') }}"
                                    alt="{{$banner->title}}" class="w-100">
                            @endisset
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
    <div class="container p-0">
        <div class="row mt-5 mb-5">
            <div class="col-5col">
                <div class="trust-icon-home">
                    <img src="/theme/img/trust-icon/Vector.svg" alt="پرداخت مطمئن">
                    <p>پرداخت مطمئن</p>
                </div>
            </div>
            <div class="col-5col">
                <div class="trust-icon-home">
                    <img src="/theme/img/trust-icon/Vector2.svg" alt="ضمانت بازگشت">
                    <p>۱ روز ضمانت بازگشت</p>
                </div>
            </div>
            <div class="col-5col">
                <div class="trust-icon-home">
                    <img src="/theme/img/trust-icon/Vector3.svg" alt="گارانتی مادام العمر">
                    <p>گارانتی مادام العمر</p>
                </div>
            </div>
            <div class="col-5col">
                <div class="trust-icon-home">
                    <img src="/theme/img/trust-icon/Vector4.svg" alt="ضمانت اصل بودن کالا">
                    <p>ضمانت اصل بودن کالا</p>
                </div>
            </div>
            <div class="col-5col">
                <div class="trust-icon-home">
                    <img src="/theme/img/trust-icon/Vector5.svg" alt="تضمین کیفیت">
                    <p>تضمین کیفیت</p>
                </div>
            </div>
        </div>
    </div>

    <div class="feture__section sp_bottom_80 mt-5">
        <div class="container">
            <div class="col-md-12 p-1 pb-3">
                <div class="row">
                    <div class="col-md-6 text-end p-1">
                        <span class="product-slider-title">پرفروش ترین ها</span>
                    </div>
                    <div class="col-md-6 text-start p-1">
                        <a href="/search?sort=bestseller" class="product-slider-title">مشاهده همه</a>
                    </div>
                </div>
            </div>
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    @foreach($bestSellers as $bestSeller)
                        <div class="swiper-slide">
                            <x-front.product.slider-item :product="$bestSeller"/>
                        </div>
                    @endforeach
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid about-bg">
        <div class="container">
            <div class="row">
                <div class="col-8">
                    <p class="h2">درباره ما</p>
                    <p>شرکت جواهرات شایسته مهر افتخار دارد در نوسازي و پيشرفت جامعه طلا و جواهر نقش کوچکي را بر عهده
                        بگيرد، حرکت جامعه از سنتي به مدرن در زمينه هاي فرهنگي، اقتصادي و اجتماعي اجتناب ناپذير بوده و
                        اين مرکز به تبعيت از نياز اجتماعي موجود ، نقش خود را يافته و با تمام وجود به عهده گرفته است.</p>
                    <br>
                    <p>مهمترين رويکردهای ما دراین شرکت به شرح زیر مي باشد:
                        توجه به فرهنگ ملي ايراني: به نحوي که افتخارات کهن و غناي فرهنگ ايراني و ارزشهاي ملي تحت تهاجم
                        دستاوردهاي نو قرار نگيرد، بلکه ارزشهاي جديد در خدمت فرهنگ ملي ما باشد.
                        رعايت استانداردهاي کيفيت کالا و خدمات: همکاران ما در تلاشند تا به يک الگوي مناسب در توليد کالا
                        رسيده و مشتري مداری و ارائه ی خدمات، بيش از حد انتظار را مورد توجه قرار دهند. احترام به ارزشهاي
                        فرهنگي جامعه و توجه ويژه به درخواست مشتري اولين اولويت ماست.</p>
                    <a href="{{route('front.page','درباره-ما-فروشگاه-اینترنتی-طلا-و-جواهرات-مهر')}}"
                       class="btn live-product-btn">مشاهده بیشتر</a>
                </div>
                <div class="col-4"><img src="/theme/img/about-img.png" alt="درباره ما"></div>
            </div>
        </div>
    </div>
    <div class="container mb-5 mt-5">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <span class="h3 brands-home">نام های تجاری ما</span>
            </div>
            @foreach($brands as $brand)
                <div class="col-12 col-md-4 text-center">
                    <a href="{{ route('brand.show', $brand->slug) }}">
                        <img class="mt-3"
                             src="{{ $category->attachments->first() ? asset('storage/attachments/' . $brand->attachments->first()->path) : '' }}"
                             alt="{{$brand->title}}">
                    </a>
                </div>
            @endforeach
        </div>
    </div>

    <div class="feture__section sp_bottom_80 mt-5">
        <div class="container">
            <div class="col-md-12 p-1 pb-3">
                <div class="row">
                    <div class="col-md-12 text-end p-1 text-center">
                        <span class="product-slider-title">محصولات منتخب</span>
                    </div>
                </div>
            </div>
            <div class="swiper selectedProduct">
                <div class="swiper-wrapper">
                    @foreach($bestSellers as $bestSeller)
                        <div class="swiper-slide">
                            <x-front.product.slider-item :product="$bestSeller"/>
                        </div>
                    @endforeach
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid follow-social-bg mb-5 mt-5 p-4">
        <div class="container">
            <div class="col-12"><p class="text-center h2">خرید راحت با عضویت در شبکه های اجتماعی ما</p></div>
        </div>
    </div>
    {{--    <!-- instagram__start -->--}}
    {{--    <div class="instagram sp_bottom_50">--}}
    {{--        <div class="instagram__img__wraper ltr">--}}
    {{--            <div class="container">--}}
    {{--                <div--}}
    {{--                    class="row row__custom__class instagram__slider__active__2 slider__default__arrow slider__default__arrow slider__default__arrow--2">--}}

    {{--                    <div class="col-sm-12 product-item-home">--}}
    {{--                        <div class="instagram__img">--}}
    {{--                            <a class="popup__img" href="/theme/img/instagram/gallery-1.jpg"> <img--}}
    {{--                                    src="/theme/img/instagram/gallery-1.jpg" alt="Instagram Gallery Image"></a>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}

    {{--                    <div class="col-sm-12 product-item-home">--}}
    {{--                        <div class="instagram__img">--}}
    {{--                            <a class="popup__img" href="/theme/img/instagram/gallery-2.jpg"> <img--}}
    {{--                                    src="/theme/img/instagram/gallery-2.jpg" alt="Instagram Gallery Image"></a>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}

    {{--                    <div class="col-sm-12 product-item-home">--}}
    {{--                        <div class="instagram__img">--}}
    {{--                            <a class="popup__img" href="/theme/img/instagram/gallery-3.jpg"> <img--}}
    {{--                                    src="/theme/img/instagram/gallery-3.jpg" alt="Instagram Gallery Image"></a>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}

    {{--                    <div class="col-sm-12 product-item-home">--}}
    {{--                        <div class="instagram__img">--}}
    {{--                            <a class="popup__img" href="/theme/img/instagram/gallery-4.jpg"> <img--}}
    {{--                                    src="/theme/img/instagram/gallery-4.jpg" alt="Instagram Gallery Image"></a>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}

    {{--                    <div class="col-sm-12 product-item-home">--}}
    {{--                        <div class="instagram__img">--}}
    {{--                            <a class="popup__img" href="/theme/img/instagram/gallery-6.jpg"> <img--}}
    {{--                                    src="/theme/img/instagram/gallery-6.jpg" alt="Instagram Gallery Image"></a>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}

    {{--                    <div class="col-sm-12 product-item-home">--}}
    {{--                        <div class="instagram__img">--}}
    {{--                            <a class="popup__img" href="/theme/img/instagram/gallery-7.jpg"> <img--}}
    {{--                                    src="/theme/img/instagram/gallery-7.jpg" alt="Instagram Gallery Image"></a>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}


    {{--                </div>--}}
    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </div>--}}
    {{--    <!-- instagram__end -->--}}
    <div class="container mb-5 mt-5">
        <div class="row pb-5">
            <div class="col-12 col-md-3 text-center text-md-end">خبرنامه ها</div>
            <div class="col-12 col-md-6 text-center">برای کسب اطلاعات بیشتر بخوانید</div>
            <div class="col-12 col-md-3 text-center text-md-start">
                <a href="{{ route('news.index') }}">مطالب بیشتر خبرنامه ها</a>
            </div>
        </div>
        <div class="row">
            @if($latestNews->count() > 0)
                @foreach($latestNews as $article)
                    <div class="col-5col">
                        <x-front.article.article-item :article="$article"/>
                    </div>
                @endforeach
            @else
                <p class="text-center">خبرنامه ای یافت نشد!</p>
            @endif
        </div>
    </div>
    <div class="container mb-5 mt-5">
        <div class="row pb-5">
            <div class="col-12 col-md-6 text-center text-md-end">مقالات</div>
            <div class="col-12 col-md-6 text-center text-md-start"><a href="{{ route('articles.index') }}">مطالب بیشتر
                    مقالات</a>
            </div>
        </div>
        <div class="row">
            @if($latestArticles->count() > 0)
                @foreach($latestArticles as $article)
                    <div class="col-5col">
                        <x-front.article.article-item :article="$article"/>
                    </div>
                @endforeach
            @else
                <p class="text-center">مقاله ای یافت نشد!</p>
            @endif
        </div>
    </div>

@endsection