@extends('layouts.app')
@section('content')


    <section class="mx-auto sm:px-6 lg:mt-8 md:mt-8 ">
        <!-- First Row -->
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-12 gap-6 sm:mt-4" >
            <div class="sm:col-span-1 md:col-span-9">
                @include('partials.slider')
            </div>
            <div class="sm:col-span-1 md:col-span-3 p-3">
                @include('partials.stores-widget')
            </div>
        </div>

        <!-- Categories Section -->
        @include('partials.categories')

        <!-- Second Row -->
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-12 gap-6">
            <div class="sm:col-span-1 md:col-span-9">
                @include('partials.latest-coupon')
                @include('partials.feauterd-category')
                @include('partials.latest-offer')
            </div>
            <div class="sm:col-span-1 md:col-span-3">
                @include('partials.sidebar')
            </div>
        </div>
    </section>
@endsection
@section('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            new Swiper(".offers-slider", {
                slidesPerView: "auto",
                spaceBetween: 16,
                breakpoints: {
                    // Mobile: 2.5 items
                    0: {
                        slidesPerView: 2,
                    },
                    // Medium screens: 4 items
                    768: {
                        slidesPerView: 4.5,
                    },
                    // Large screens: 5 items
                    1024: {
                        slidesPerView: 4.5,
                    },
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            });
            new Swiper(".coupons-swiper", {
                slidesPerView: "auto",
                spaceBetween: 16,
                breakpoints: {
                    // Mobile: 2.5 items
                    0: {
                        slidesPerView: 2,
                    },
                    // Medium screens: 4 items
                    768: {
                        slidesPerView: 4,
                    },
                    // Large screens: 5 items
                    1024: {
                        slidesPerView: 4.5,
                    },
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            });

            new Swiper(".categories-swiper", {
                slidesPerView: "auto",
                spaceBetween: 16,
                freeMode: true,
                breakpoints: {
                    320: { slidesPerView: 4.5 },
                    768: { slidesPerView: 8.5 },
                    1024: { slidesPerView: 10 },
                },
            });
            new Swiper(".default-carousel", {
                autoplay: {
                    delay: 3000,
                },
                loop: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        });
    </script>
@endsection