@extends('front.layouts.master')

@section('content')

<main>
    <div class="container">
        <div class="slideshow-boxed-right">
            <section
                class="swiper-container js-swiper-slider slideshow"
                data-settings='{
                    "autoplay": {
                        "delay": 5000
                    },
                    "pagination": {
                        "el": ".slideshow-pagination",
                        "type": "bullets",
                        "clickable": true
                    },
                    "slidesPerView": 1,
                    "effect": "fade",
                    "loop": true
                }'>
                <div class="swiper-wrapper">
                    @foreach ($sliders as $slider)
                        <div class="swiper-slide">
                            <img
                                loading="lazy"
                                src="{{ $slider->getCover() }}"
                                width="350"
                                height="403"
                                class="home-slider-image"
                            />
                        </div>
                    @endforeach
                </div>
                <!-- /.slideshow-wrapper js-swiper-slider -->

                <div class="container">
                    <div class="slideshow-pagination d-flex align-items-center position-absolute bottom-0 left-50 mb-4"></div>
                    <!-- /.products-pagination -->
                </div>
                <!-- /.container -->
            </section>
            <!-- /.slideshow -->
        </div>
    </div>

    <div class="mb-3 mb-xl-5 pb-3 pt-1 pb-xl-5"></div>

    <section class="products-carousel container">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3 pb-xl-2 mb-xl-4">
            <h2 class="section-title fw-bold">{{ __('front.rich_product_range_to_suit_your_needs') }}</h2>
            <a class="btn-link btn-link_md default-underline text-uppercase fw-medium" href="{{ route('front.products.index') }}">{{ __('front.all_products') }}</a>
        </div>
        <div id="product_hot_deals" class="position-relative">
            <div
                class="swiper-container js-swiper-slider"
                data-settings='{
                    "autoplay": {
                        "delay": 5000
                    },
                    "slidesPerView": 5,
                    "slidesPerGroup": 1,
                    "effect": "none",
                    "loop": false,
                    "navigation": {
                        "nextEl": "#product_hot_deals .products-carousel__next",
                        "prevEl": "#product_hot_deals .products-carousel__prev"
                    },
                    "breakpoints": {
                        "320": {
                            "slidesPerView": 2,
                            "slidesPerGroup": 2,
                            "spaceBetween": 14
                        },
                        "768": {
                            "slidesPerView": 3,
                            "slidesPerGroup": 3,
                            "spaceBetween": 24
                        },
                        "992": {
                            "slidesPerView": 4,
                            "slidesPerGroup": 1,
                            "spaceBetween": 30,
                            "pagination": false
                        },
                        "1200": {
                            "slidesPerView": 5,
                            "slidesPerGroup": 1,
                            "spaceBetween": 35,
                            "pagination": false
                        }
                    }
                }'>
                <div class="swiper-wrapper">
                    @foreach ($products as $product)
                        <div class="swiper-slide product-card product-card_style8">
                            <div class="pc__img-wrapper pc__img-wrapper_wide2">
                                <a href="{{ route('front.products.show', $product->getTranslatedAttribute('slug')) }}">
                                    <img loading="lazy" src="{{ $product->getCover() }}" width="252" height="229" alt="{{ $product->getTranslatedAttribute('title') }}" class="pc__img" />
                                </a>
                            </div>
                            <!-- /.pc__img-wrapper -->

                            <div class="pc__info position-relative">
                                <p class="pc__category">{{ $product->category?->getTranslatedAttribute('title') }}</p>
                                <h6 class="pc__title"><a href="{{ route('front.products.show', $product->getTranslatedAttribute('slug')) }}">{{ $product->getTranslatedAttribute('title') }}</a></h6>
                                <p class="pc__category">{{ $product->code }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
                <!-- /.swiper-wrapper -->
            </div>
            <!-- /.swiper-container js-swiper-slider -->

            <div class="products-carousel__prev navigation-sm bg-grey-eeeeee position-absolute top-50 d-flex align-items-center justify-content-center">
                <svg width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><use href="#icon_prev_md" /></svg>
            </div>
            <!-- /.products-carousel__prev -->
            <div class="products-carousel__next navigation-sm bg-grey-eeeeee position-absolute top-50 d-flex align-items-center justify-content-center">
                <svg width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><use href="#icon_next_md" /></svg>
            </div>
            <!-- /.products-carousel__next -->
        </div>
        <!-- /.position-relative -->
    </section>

    <div class="mb-3 mb-xl-5 pb-3 pt-1 pb-xl-5"></div>

    {{-- <section class="grid-banner container mb-3">
        <div class="row">
            <div class="col-lg-4">
                <div class="grid-banner__item position-relative mb-3 border-radius-4">
                    <img loading="lazy" class="w-100 h-auto" src="../images/home/demo11/banner-1.jpg" width="450" height="300" alt="" />
                    <div class="content_abs content_top content_left content_top-md content_left-md pt-2 px-2">
                        <h3 class="fw-bold mb-1">Likelife Audio & Secure Fit</h3>
                        <p class="mb-2 text-secondary">Engineered for your best workout yet</p>
                        <a href="./shop1.html" class="btn-link text-uppercase fw-medium">Shop Now</a>
                    </div>
                    <!-- /.content_abs content_top content_left content_top-md content_left-md pt-2 px-2 -->
                </div>
            </div>
            <!-- /.col-lg-4 -->
            <div class="col-lg-4">
                <div class="grid-banner__item position-relative mb-3 border-radius-4">
                    <img loading="lazy" class="w-100 h-auto" src="../images/home/demo11/banner-2.jpg" width="450" height="300" alt="" />
                    <div class="content_abs content_top content_left content_top-md content_left-md pt-2 px-2">
                        <h3 class="fw-bold mb-1">Big Zomm, No Problem</h3>
                        <p class="mb-2 text-secondary">Up close, in tight, and worry free</p>
                        <a href="./shop1.html" class="btn-link text-uppercase fw-medium">Shop Now</a>
                    </div>
                    <!-- /.content_abs content_top content_left content_top-md content_left-md pt-2 px-2 -->
                </div>
            </div>
            <!-- /.col-lg-4 -->
            <div class="col-lg-4">
                <div class="grid-banner__item position-relative mb-3 border-radius-4">
                    <img loading="lazy" class="w-100 h-auto" src="../images/home/demo11/banner-3.jpg" width="450" height="300" alt="" />
                    <div class="content_abs content_top content_left content_top-md content_left-md pt-2 px-2">
                        <h3 class="fw-bold mb-1">Handpicked Electronics</h3>
                        <p class="mb-2 text-secondary">We've done the research so you don't have to</p>
                        <a href="./shop1.html" class="btn-link text-uppercase fw-medium">Shop Now</a>
                    </div>
                    <!-- /.content_abs content_top content_left content_top-md content_left-md pt-2 px-2 -->
                </div>
            </div>
            <!-- /.col-lg-4 -->
        </div>
        <!-- /.row -->
    </section>

    <div class="mb-3 mb-xl-5 pb-3 pt-1 pb-xl-5"></div> --}}

    <section class="category-carousel container">
        <div class="d-flex align-items-center justify-content-between flex-wrap mb-3 pb-xl-2 mb-xl-4">
            <h2 class="section-title fw-bold">{{ __('front.featured_categories') }}</h2>
            <a class="btn-link btn-link_md default-underline text-uppercase fw-medium" href="{{ route('front.products.categories.index') }}">{{ __('front.all_categories') }}</a>
        </div>

        <div id="category_carousel" class="position-relative">
            <div
                class="swiper-container js-swiper-slider"
                data-settings='{
                    "autoplay": {
                        "delay": 5000
                    },
                    "slidesPerView": 8,
                    "slidesPerGroup": 1,
                    "effect": "none",
                    "loop": true,
                    "pagination": {
                        "el": "#category_carousel .slideshow-pagination",
                        "type": "bullets",
                        "clickable": true
                    },
                    "breakpoints": {
                        "320": {
                            "slidesPerView": 2,
                            "slidesPerGroup": 2,
                            "spaceBetween": 15
                        },
                        "768": {
                            "slidesPerView": 4,
                            "slidesPerGroup": 4,
                            "spaceBetween": 20
                        },
                        "992": {
                            "slidesPerView": 6,
                            "slidesPerGroup": 2,
                            "spaceBetween": 30
                        },
                        "1200": {
                            "slidesPerView": 8,
                            "slidesPerGroup": 2,
                            "spaceBetween": 40
                        }
                    }
                }'>
                <div class="swiper-wrapper">
                    @foreach ($product_categories as $product_category)
                        <div class="swiper-slide">
                            <img loading="lazy" class="w-100 h-auto mb-3" src="{{ $product_category->getCover() }}" style="aspect-ratio: 1; object-fit: contain;" alt="{{ $product_category->getTranslatedAttribute('title') }}" />
                            <div class="text-center">
                                <a href="{{ route('front.products.categories.show', $product_category->slug) }}" class="menu-link fw-medium">
                                    {{ $product_category->getTranslatedAttribute('title') }}
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
                <!-- /.swiper-wrapper -->
            </div>
            <!-- /.swiper-container js-swiper-slider -->
        </div>
        <!-- /.position-relative -->
    </section>

    <div class="mb-3 mb-xl-5 pb-3 pt-1 pb-xl-5"></div>
    <!-- /.service-promotion container -->
</main>

@endsection
@push('style')
    <style>
        .home-slider-image{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
@endpush