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

@section('style')
    <style>
        .badge-installment-brand{
            position: absolute;
            top: -15px;
            right: -15px;
        }
        .d-offers{

        }
        .m-offers{
            display:none;
        }
        @media (max-width: 320px) {
            .m-offers{
                display:flex;
            }
            .d-offers{
                display:none;
            }
        }

        @media (min-width: 321px) and (max-width: 767px) {
            .m-offers{
                display:flex;
            }
            .d-offers{
                display:none;
            }
        }

    </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">تلوزیون برنده جایزه</h1>
                    <a href="{{ $slider->button_link }}" class="hero-cta">{{ $slider->button_text }}</a>
                </div>
                <picture>
                    <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>
            </div>
            @endforeach
        </div>
    </div>

    <div class="hero-controls">
        <button class="hero-swiper-button-prev" aria-label="اسلاید قبلی">
            <i class="bx bx-chevron-right"></i>
        </button>
        <div class="hero-swiper-pagination"></div>
        <button class="hero-swiper-button-next" aria-label="اسلاید بعدی">
            <i class="bx bx-chevron-left"></i>
        </button>
        <button class="hero-swiper-playpause pause" aria-label="پخش/توقف">
            <i class="bx bx-pause"></i>
        </button>
    </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->image) }}"
            ></category-link>
            @endforeach
        </div>
        <div class="d-md-none">
            <div class="swiper categories-swiper">
                <div class="swiper-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->image) }}"
                        ></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">
                    @include('home.sections.product_box')
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</section>
@endif

<!-- Latest Offers -->
<section class="py-5">
    <div class="container">
        <h2 class="fs-4 fw-semibold mb-4">آخرین پیشنهادها</h2>
        <div class="row g-4">
            <div class="col-lg-5">
                <div
                    class="card text-white rounded-3 overflow-hidden h-100"
                    style="min-height: 400px"
                >
                    <img
                        src="{{ imageExist(env('BANNER_IMAGES_UPLOAD_PATH'),$banners[0]->image) }}"
                        alt="{{$banners[0]->title}}"
                        class="card-img h-100 object-fit-cover"
                    />
                    <div
                        class="card-img-overlay d-flex flex-column justify-content-center p-5"
                        style="background-color: rgba(0, 0, 0, 0.4)"
                    >
                        <h3 class="card-title display-6 fw-bold">
                            {{$banners[0]->title}}
                        </h3>
                        <p class="card-text my-3">آنها را اینجا پیدا کنید</p>
                        <div class="mt-2">
                            <a href="{{$banners[0]->button_link}}" class="btn btn-outline-light px-4 py-2"
                            > {{$banners[0]->button_text}}</a
                            >
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-7 position-relative">
                <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 -->
<section
    class="my-5 position-relative text-white d-flex align-items-center"
    style="
          background-image: url('{{ imageExist(env('BANNER_IMAGES_UPLOAD_PATH'),$banners[0]->image) }}');
          background-size: cover;
          background-position: center;
          min-height: 450px;
        "
>
    <div
        class="position-absolute top-0 start-0 w-100 h-100 bg-black opacity-50"
    ></div>
    <div class="container position-relative">
        <div class="row">
            <div class="col-md-6 p-5 text-center text-md-end">
                <p>نوآوری</p>
                <h2 class="display-4 fw-bold my-4"> {{$banners[1]->title}}</h2>
                <p class="mb-4">
            {{$banners[1]->text}}
                </p>
                <a href="{{$banners[1]->button_link}}" class="btn btn-outline-light px-4 py-2"
                >  {{$banners[1]->button_text}}</a
                >
            </div>
        </div>
    </div>
</section>

<!-- For you -->
<section class="py-5">
    <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 for-you-swiper-button-prev border"
                    aria-label="اسلاید قبلی"
                >
                    <i class="bx bx-chevron-right fs-4"></i>
                </button>
                <button
                    class="light-swiper-button-next for-you-swiper-button-next border"
                    aria-label="اسلاید بعدی"
                >
                    <i class="bx bx-chevron-left fs-4"></i>
                </button>
            </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">
            <h2 class="fs-4 fw-semibold">وبلاگ</h2>
            <div class="d-flex align-items-center gap-2 best-sellers">
                <button
                    class="light-swiper-button-prev support-swiper-button-prev border"
                    aria-label="اسلاید قبلی"
                >
                    <i class="bx bx-chevron-right fs-4"></i>
                </button>
                <button
                    class="light-swiper-button-next support-swiper-button-next border"
                    aria-label="اسلاید بعدی"
                >
                    <i class="bx bx-chevron-left fs-4"></i>
                </button>
            </div>
        </div>
        <div class="swiper support-swiper light-swiper">
            <div class="swiper-wrapper pb-5">
                @foreach($first_two_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"></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">
            <h2 class="fs-4 fw-semibold">
                محصولاتی که ممکن است دوست داشته باشید
            </h2>
            <div class="d-flex align-items-center gap-2 best-sellers">
                <button
                    class="light-swiper-button-prev products-liked-swiper-button-prev border"
                    aria-label="اسلاید قبلی"
                >
                    <i class="bx bx-chevron-right fs-4"></i>
                </button>
                <button
                    class="light-swiper-button-next products-liked-swiper-button-next border"
                    aria-label="اسلاید بعدی"
                >
                    <i class="bx bx-chevron-left fs-4"></i>
                </button>
            </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>
@endsection