@extends('home.layouts.index')
@section('title')
    {{ $setting['name'] }}
@endsection
@section('description')
    {{ $setting->meta_des }}
@endsection
@section('keywords')
    {{ $setting->meta_key }}
@endsection

@section('style')

@endsection

@section('script')

    <script>
        function change_quantity(type) {
            let quantity = $('#quantity').val();
            if (type == 1) {
                quantity = parseInt(quantity) + 1;
            } else {
                quantity = parseInt(quantity) - 1;
            }
            if (quantity == 0) {
                quantity = 1;
                $('#quantity').val(quantity);
            } else {
                $('#quantity').val(quantity);
            }


        }

        function ActiveCatNav(tag, cat_id) {
            $('.category-icon').removeClass('active');
            $(tag).addClass('active');
            $('.products_category').addClass('d-none');
            $('.cat_' + cat_id).removeClass('d-none');
        }
    </script>
@endsection

@section('content')
    <section class="hero-slider">
        <div class="swiper hero-swiper">
            <div class="swiper-wrapper">
                @foreach($sliders as $slider)
                    <div class="swiper-slide">
                        <div class="hero-content">
                            <div class="hero-subtitle">{{$slider->title}}</div>
                            <h1 class="hero-title"> {{$slider->text}} </h1>
                            @if($slider->button_link)
                                <a href="{{ $slider->button_link }}" class="hero-cta">{{ $slider->button_text }}</a>
                            @endif
                        </div>
                        <picture class="desktop">
                            <source
                                media="(min-width: 768px)"
                                srcset="{{ imageExist( env('SLIDER_IMAGES_UPLOAD_PATH'),$slider->image ) }}"
                            />
                            <img
                                src="{{ imageExist( env('SLIDER_IMAGES_UPLOAD_PATH'),$slider->image ) }}"
                                alt="{{$slider->title}}"
                                class="hero-image"
                            />

                        </picture>
                        <picture class="mobile">
                              <source
                                media="(min-width: 768px)"
                                srcset="{{ imageExist( env('SLIDER_IMAGES_UPLOAD_PATH'),$slider->image_2 ) }}"
                            />
                            <img
                                src="{{ imageExist( env('SLIDER_IMAGES_UPLOAD_PATH'),$slider->image_2 ) }}"
                                alt="{{$slider->title}}"
                                class="hero-image"
                            />
                        </picture>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="hero-controls">
            <button class="arrow-container arrow-right hero-swiper-button-prev border hero-left hover-border-black swiper-button-disabled" aria-label="Previous slide" role="button" tabindex="-1" aria-controls="swiper-wrapper-10101cca9e8908b5d0" aria-disabled="true">
                       <div class="line"></div>
                       <div class="line"></div>

            </button>
            <div class="hero-swiper-pagination"></div>
            <button class="arrow-container arrow-right hero-swiper-button-next hero-right border hover-border-black swiper-button-disabled" aria-label="Previous slide" role="button" tabindex="-1" aria-controls="swiper-wrapper-10101cca9e8908b5d0" aria-disabled="true">
                       <div class="line"></div>
                       <div class="line"></div>

            </button>
         <div class="desktop">
            <button class="hero-swiper-playpause pause" aria-label="پخش/توقف">
                <i class="bx bx-pause"></i>
            </button>
            </div>
        </div>
    </section>

    @if(count($active_categories))
        <section class="py-5">
            <div class="container">
                <h2 class="fs-4 fw-semibold text-center mb-4">
                    خرید بر اساس دسته‌بندی
                </h2>

                <div class="d-none d-md-flex justify-content-center flex-wrap gap-3">

                    @foreach($active_categories as $category)
                        <category-link
                            href="{{ route('home.product_categories',['category'=>$category->alias]) }}"
                            label="{{$category->name}}"
                            icon="{{ imageExist(env('CATEGORY_IMAGES_UPLOAD_PATH'),$category->icon) }}"
                        ></category-link>
                    @endforeach
                </div>
                <div class="d-md-none">
                    {{-- <div class="swiper categories-swiper"> --}}
                        <div class="d-flex flex-wrap mobile-categories-wrapper">
                            @foreach($active_categories as $category)
                                {{-- <div class="swiper-slide"> --}}
                                    <category-link
                                        href="{{ route('home.product_categories',['category'=>$category->alias]) }}"
                                        label="{{$category->name}}"
                                        icon="{{ imageExist(env('CATEGORY_IMAGES_UPLOAD_PATH'),$category->icon) }}"
                                    ></category-link>
                                {{-- </div> --}}
                            @endforeach

                        </div>
                    {{-- </div> --}}
                </div>
            </div>
        </section>
    @endif

    @if(count($product_has_sale_showIndex))
        <section class="py-5 bg-light">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="fs-4 fw-semibold">پرفروش‌ترین‌ها</h2>
                    <div class="d-flex align-items-center gap-2 best-sellers">
                        <button
                            class="light-swiper-button-prev bestsellers-swiper-button-prev border"
                            aria-label="اسلاید قبلی"
                        >
                            <i class="bx bx-chevron-right fs-4"></i>
                        </button>
                        <button
                            class="light-swiper-button-next bestsellers-swiper-button-next border"
                            aria-label="اسلاید بعدی"
                        >
                            <i class="bx bx-chevron-left fs-4"></i>
                        </button>
                    </div>
                </div>
                <div class="swiper bestsellers-swiper light-swiper">
                    <div class="swiper-wrapper pb-5">
                        <div class="swiper-slide h-auto">
                            @foreach($product_has_sale_showIndex as $product)
                                @include('home.sections.product_box',compact('product'))
                            @endforeach

                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>
    @endif

    <!-- Latest Offers -->
    <section class="latest-offer-container py-5">
        <div class=" position-relative">
            <h2 class="fs-4 fw-semibold mb-4 position-relative container">آخرین پیشنهادها

                <div class="slider-controls latest-controls" dir="rtl">
                     <!-- Left Arrow -->
                     <div
                       class="arrow-container arrow-left latest-offers-swiper-button-next border hover-border-black"
                       aria-label="Previous"
                       role="button"
                     >
                       <div class="line"></div>
                       <div class="line"></div>
                       {{-- <span class="arrow-text arrow-next-text">قبلی</span> --}}
                     </div>

                     <!-- Right Arrow -->
                     <div class="arrow-container arrow-right latest-offers-swiper-button-prev border hover-border-black" aria-label="Next" role="button">
                       <div class="line"></div>
                       <div class="line"></div>
                       {{-- <span class="arrow-text arrow-prev-text flip">بعدی</span> --}}
                     </div>
                </div>
            </h2>
            <div class="row g-4 position-relative">
                <div class="col-lg-4 ">
                    @if((!isset($banners[0]->button_text) || empty($banners[0]->button_text)) && isset($banners[0]->button_link) && !empty($banners[0]->button_link))
                        <a href="{{ $banners[0]->button_link }}" class="text-decoration-none">
                            @endif

                                <img
                                    src="{{ isset($banners[0]) ? imageExist(env('BANNER_MOBILE_IMAGES_UPLOAD_PATH'), $banners[0]->mobile_image) : '' }}"
                                    alt="{{ $banners[0]->title ?? ''}}" style="width:100% ; height: auto;" class="mobile" />

                         <div class="desktop">
                             <div
                                class="latest-image-wrapper card text-white  overflow-hidden h-100 latest-offer {{ (!isset($banners[0]->button_text) || empty($banners[0]->button_text)) && isset($banners[0]->button_link) && !empty($banners[0]->button_link) ? 'cursor-pointer' : '' }}"
                                >
                                <img
                                    src="{{ isset($banners[0]) ? imageExist(env('BANNER_IMAGES_UPLOAD_PATH'), $banners[0]->image) : '' }}"
                                    alt="{{ $banners[0]->title ?? ''}}" class="card-img h-100 object-fit-cover"/>
                                <div class="d-none">
                                    <div
                                    class="card-img-overlay d-flex flex-column justify-content-center p-5 "
                                    @if(!empty($banners[0]->title ?? null) || !empty($banners[0]->text ?? null) || !empty($banners[0]->button_text ?? null))
                                        style="background-color: rgba(0, 0, 0, 0.4)"
                                    @endif
                                >
                                    <h3 class="card-title fw-bold fs-mobile">
                                        {{ $banners[0]->title ?? ''}}
                                    </h3>
                                    <p class="card-text my-3 fs-mobile">{{ $banners[0]->text ?? ''}}</p>

                                    @if(isset($banners[0]->button_text) && !empty($banners[0]->button_text))
                                        <div class="mt-2">
                                            @if(isset($banners[0]->button_link) && !empty($banners[0]->button_link))
                                                <a href="{{ $banners[0]->button_link }}"
                                                   class="btn btn-outline-light px-4 py-2 fs-mobile">
                                                    {{ $banners[0]->button_text }}
                                                </a>
                                            @else
                                                <button class="btn btn-outline-light px-4 py-2 fs-mobile">
                                                    {{ $banners[0]->button_text }}
                                                </button>
                                            @endif
                                        </div>
                                    @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                            @if((!isset($banners[0]->button_text) || empty($banners[0]->button_text)) && isset($banners[0]->button_link) && !empty($banners[0]->button_link))
                        </a>
                    @endif
                </div>
                <div class="col-lg-8 mobile-margin-100">
                    <div class="swiper latest-offers-swiper light-swiper h-100">
                        <div class="swiper-wrapper pb-5">
                            @foreach($products_special_sale as $product)
                                <div class="swiper-slide h-auto">
                                    @include('home.sections.product_box')
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                    {{-- <button
                        class="light-swiper-button-next latest-offers-swiper-button-next"
                        aria-label="اسلاید بعدی"
                    >
                        <i class="bx bx-chevron-left fs-4 text-black"></i>
                    </button>
                    <button
                        class="light-swiper-button-prev latest-offers-swiper-button-prev"
                        aria-label="اسلاید قبلی"
                    >
                        <i class="bx bx-chevron-right fs-4 text-black"></i>
                    </button> --}}
                </div>
            </div>
        </div>
    </section>

    <!-- Innovation Section -->
    @if((!isset($banners[1]->button_text) || empty($banners[1]->button_text)) && isset($banners[1]->button_link) && !empty($banners[1]->button_link))
        <a href="{{ $banners[1]->button_link }}" class="text-decoration-none">
            @endif
            <div class="banner">
                <div class="desktop">
                       <section
                class="banner-section my-5 position-relative text-white d-flex align-items-center  {{ (!isset($banners[1]->button_text) || empty($banners[1]->button_text)) && isset($banners[1]->button_link) && !empty($banners[1]->button_link) ? 'cursor-pointer' : '' }}"
                style="
                    background-image: url('{{ isset($banners[1]) ? imageExist(env('BANNER_IMAGES_UPLOAD_PATH'), $banners[1]->image) : '' }}');
                    background-size: cover;
                    background-position: center;
                    "
            >
                @if(!empty($banners[1]->title) || !empty($banners[1]->text) || !empty($banners[1]->button_text))
                    <div class="position-absolute top-0 start-0 w-100 h-100 bg-black opacity-50"></div>
                @endif

                <div class="container position-relative">
                    <div class="row">
                        <div class="col-md-6 p-5 text-center text-md-end">
                            <h2 class="display-4 fw-bold my-4">{{ $banners[1]->title ?? '' }}</h2>
                            <p class="mb-4">
                                {{ $banners[1]->text ??''}}
                            </p>

                            @if(isset($banners[1]->button_text) && !empty($banners[1]->button_text))
                                @if(isset($banners[1]->button_link) && !empty($banners[1]->button_link))
                                    <a href="{{ $banners[1]->button_link }}" class="btn btn-outline-light px-4 py-2">
                                        {{ $banners[1]->button_text }}
                                    </a>
                                @else
                                    <button class="btn btn-outline-light px-4 py-2">
                                        {{ $banners[1]->button_text }}
                                    </button>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </section>
                </div>

                <div class="mobile">
                    <div class=" banner-section my-5 position-relative text-white d-flex align-items-center  {{ (!isset($banners[1]->button_text) || empty($banners[1]->button_text)) && isset($banners[1]->button_link) && !empty($banners[1]->button_link) ? 'cursor-pointer' : '' }}">
                <img class="w-100 h-auto " src="{{ isset($banners[1]) ? imageExist(env('BANNER_MOBILE_IMAGES_UPLOAD_PATH'), $banners[1]->mobile_image) : '' }}"/>
                    @if(!empty($banners[1]->title) || !empty($banners[1]->text) || !empty($banners[1]->button_text))
                    {{-- <div class="position-absolute top-0 start-0 w-100 h-100 bg-black opacity-50"></div> --}}
                    @endif

                    <div class="container position-relative d-none">
                    <div class="row">
                        <div class="col-md-6 text-center text-md-end">
                            <h2 class="display-6
                             fw-bold my-4">{{ $banners[1]->title ?? '' }}</h2>
                            <p class="mb-4">
                                {{ $banners[1]->text ??''}}
                            </p>

                            @if(isset($banners[1]->button_text) && !empty($banners[1]->button_text))
                                @if(isset($banners[1]->button_link) && !empty($banners[1]->button_link))
                                    <a href="{{ $banners[1]->button_link }}" class="btn btn-outline-light px-4 py-2 my-2">
                                        {{ $banners[1]->button_text }}
                                    </a>
                                @else
                                    <button class="btn btn-outline-light px-4 py-2">
                                        {{ $banners[1]->button_text }}
                                    </button>
                                @endif
                            @endif
                        </div>
                    </div>
                    </div>
                </img>
                    </div>
    `           </div>
        </div>


            @if((!isset($banners[1]->button_text) || empty($banners[1]->button_text)) && isset($banners[1]->button_link) && !empty($banners[1]->button_link))
        </a>
    @endif

    <!-- For you -->
    <section class="py-5">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div class="d-flex justify-content-between position-relative w-100">
                    <h2 class="fs-4 fw-semibold">
                        برای شما
                    </h2>
                     <div class="slider-controls" dir="rtl">
                     <!-- Left Arrow -->
                     <div
                       class="arrow-container arrow-left for-you-swiper-button-next border hover-border-black "
                       aria-label="Previous"
                       role="button"
                     >
                       <div class="line"></div>
                       <div class="line"></div>
                       {{-- <span class="arrow-text arrow-next-text">قبلی</span> --}}
                     </div>

                     <!-- Right Arrow -->
                     <div class="arrow-container arrow-right left-50 for-you-swiper-button-prev border hover-border-black " aria-label="Next" role="button">
                       <div class="line"></div>
                       <div class="line"></div>
                       {{-- <span class="arrow-text arrow-prev-text flip">بعدی</span> --}}
                     </div>
                </div>
            </div>
            </div>

            <div class="swiper for-you-swiper light-swiper">
                <div class="swiper-wrapper pb-5">
                    @foreach($active_categories as $category)
                        <div class="swiper-slide h-auto">
                            <for-you-card
                                href="{{ route('home.product_categories',['category'=>$category->alias]) }}"
                                img-src="{{ imageExist(env('CATEGORY_IMAGES_UPLOAD_PATH'),$category->image) }}"
                                img-alt="{{$category->name}}"
                                title=" {{$category->name}}"
                            ></for-you-card>
                        </div>
                    @endforeach
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>

    <!-- Support -->
    <section class="py-5 bg-light">
   <div class="container">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div class="d-flex justify-content-between position-relative w-100">
                    <h2 class="fs-4 fw-semibold">
                         محصولات پیشنهادی

                    </h2>
                     <div class="slider-controls" dir="rtl">
                     <!-- Left Arrow -->
                     <div
                       class="arrow-container arrow-left products-liked-swiper-button-next border hover-border-black "
                       aria-label="Previous"
                       role="button"
                     >
                       <div class="line"></div>
                       <div class="line"></div>
                       {{-- <span class="arrow-text arrow-next-text">قبلی</span> --}}
                     </div>

                     <!-- Right Arrow -->
                     <div class="arrow-container arrow-right left-50 products-liked-swiper-button-prev border hover-border-black " aria-label="Next" role="button">
                       <div class="line"></div>
                       <div class="line"></div>
                       {{-- <span class="arrow-text arrow-prev-text flip">بعدی</span> --}}
                     </div>
                </div>
            </div>
            </div>
            <div class="swiper products-liked-swiper light-swiper">
                <div class="swiper-wrapper pb-5">
                    @foreach($products_new as $product)
                        <div class="swiper-slide h-auto">
                            @include('home.sections.product_box')
                        </div>
                    @endforeach

                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>



    <!-- Products you might like -->
    <section class="py-5">

          <div class="container">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div class="d-flex justify-content-between position-relative w-100">
                    <h2 class="fs-4 fw-semibold">
                         وبلاگ
                    </h2>
                     <div class="slider-controls" dir="rtl">
                     <!-- Left Arrow -->
                     <div
                       class="arrow-container arrow-left support-swiper-button-next border hover-border-black "
                       aria-label="Previous"
                       role="button"
                     >
                       <div class="line"></div>
                       <div class="line"></div>
                       {{-- <span class="arrow-text arrow-next-text">قبلی</span> --}}
                     </div>

                     <!-- Right Arrow -->
                     <div class="arrow-container arrow-right left-50 support-swiper-button-prev border hover-border-black " aria-label="Next" role="button">
                       <div class="line"></div>
                       <div class="line"></div>
                       {{-- <span class="arrow-text arrow-prev-text flip">بعدی</span> --}}
                     </div>
                </div>
            </div>
            </div>
            <div class="swiper support-swiper light-swiper">
                <div class="swiper-wrapper pb-5">
                    @foreach($articles as $article)
                        <div class="swiper-slide h-auto">
                            <for-you-card
                                href="{{ route('home.article',['alias'=>$article->alias]) }}"
                                img-src="{{ imageExist(env('ARTICLES_IMAGES_THUMBNAIL_UPLOAD_PATH'),$article->image)}}"
                                img-alt=" {{ $article->title }}"
                                title=" {{ $article->title }}"
                            ></for-you-card>
                        </div>
                    @endforeach
                </div>
                {{-- <div class="swiper-pagination desktop"></div> --}}
            </div>
        </div>
    </section>
@endsection