@extends('website.layouts.app')
    @section('content')
        <!-- Hero Section -->
        <section id="hero-section" class="top-header">
            <div class="container-fluid fixedwidth">
                <div class="row d-flex justify-content-center align-items-center">
                    <div class="col-lg-11">
                        <div id="carouselExampleIndicators" class="carousel slide">
                            @if (count($sliders) > 1)
                                <div class="carousel-indicators custom-indicators">
                                    @foreach ($sliders as $key => $item)
                                        <button type="button" data-bs-target="#carouselExampleIndicators"
                                            data-bs-slide-to="{{ $key }}" class="{{ $key == 0 ? 'active' : '' }}"
                                            aria-current="{{ $key == 0 ? 'true' : 'false' }}"
                                            aria-label="Slide {{ $key + 1 }}">
                                            {{ sprintf('%02d', $key + 1) }}
                                        </button>
                                    @endforeach
                                </div>
                            @endif

                            <div class="row d-flex justify-content-center align-items-center">
                                <div class="col-lg-9 col-md-10">
                                    <div class="carousel-inner pb-5 pt-md-5 pt-4">
                                        @foreach ($sliders as $key => $item)
                                            <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                                <div
                                                    class="row d-flex justify-content-center align-items-center flex-column-reverse flex-md-row">
                                                    <div class="col-lg-6 col-md-6">
                                                        <div class="hero-title pt-5 pt-lg-0">
                                                            <h1 class="mb-lg-5 mb-3">
                                                                @if (session('app_language', 'en') == 'en')
                                                                    {{ $item->title_en }}
                                                                @else
                                                                    {{ $item->title_ar }}
                                                                @endif
                                                            </h1>
                                                            @if (session('app_language', 'en') == 'en')
                                                                <a href="{{ $item->link_en }}" class="hero-btn">Shop Now</a>
                                                            @else
                                                                <a href="{{ $item->link_ar }}" class="hero-btn">تسوق
                                                                    الآن</a>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6 col-md-6 text-center">
                                                        <img src="{{ asset('uploads/slider/' . $item->thumbnail) }}"
                                                            alt="{{ session('app_language', 'en') == 'en' ? $item->title_en ?? '' : $item->title_ar ?? '' }}"
                                                            class="img-fluid hero-image">
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            @if (count($sliders) > 1)
                                <button class="carousel-control-prev" type="button"
                                    data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button"
                                    data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @if (count($latestProducts) > 0)
            <section id="mothers">
                <div class="container-fluid py-lg-2  py-xxl-5 mb-lg-2 fixedwidth">
                    <div class="top-title text-center py-3 py-lg-0">
                        <h3 class="mb-0 pt-lg-5 pt-3">
                            @if (session('app_language', 'en') == 'en')
                                {{ $page->section_one_heading_en ?? '' }}
                            @else
                                {{ $page->section_one_heading_ar ?? '' }}
                            @endif
                        </h3>
                        <p class="title-text">
                            @if (session('app_language', 'en') == 'en')
                                {{ $page->section_one_description_en ?? '' }}
                            @else
                                {{ $page->section_one_description_ar ?? '' }}
                            @endif
                        </p>
                    </div>
                    <div class="row justify-content-center align-items-center d-flex">
                        <div class="col-lg-11">
                            @foreach ($latestProducts as $product)
                                <!-- Modal -->
                                <div class="modal fade" id="product_detailsh_{{ $product->id }}" tabindex="-1"
                                    aria-labelledby="product_detailshLabel_{{ $product->id }}" aria-hidden="true">

                                    <div class="modal-dialog modal-xl custom_modalw">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 class="modal-title fs-5"
                                                    id="product_detailshLabel_{{ $product->id }}">
                                                    @if (session('app_language', 'en') == 'en')
                                                        {{ $product->title_en ?? '' }}
                                                    @else
                                                        {{ $product->title_ar ?? '' }}
                                                    @endif
                                                </h1>

                                                <button type="button" class="btn-close hmodalbtn" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <section id="product-detail">
                                                    <div class="container-fluid my-xxl-5 my-lg-3 my-2 fixedwidth">
                                                        <div class="row d-flex justify-content-center align-items-center">
                                                            <div class="col-xl-10 col-lg-11 col-md-12 col-12">
                                                                <div
                                                                    class="row d-flex justify-content-center align-items-start g-lg-5 g-md-4 g-0">
                                                                    <div class="col-lg-6 col-md-6 col-12">
                                                                        <div class="display-img">

                                                                            <!-- Large Preview Image -->
                                                                            <img id="mainImage2_{{ $product->id }}"
                                                                                src="{{ asset('uploads/products/' . $product->images->first()->filename) }}"
                                                                                class="main-img img-fluid mb-3 w-100"
                                                                                alt="Main Image" />

                                                                            <div
                                                                                class="owl-carousel owl-theme thumb-carousel2_{{ $product->id }}">

                                                                                @foreach ($product->images as $index => $image)
                                                                                    <div class="item">
                                                                                        <img src="{{ asset('uploads/products/' . $image->filename) }}"
                                                                                            class="thumb-img {{ $index == 0 ? 'active' : '' }}"
                                                                                            alt="{{ $product->title }} image {{ $index + 1 }}" />
                                                                                    </div>
                                                                                @endforeach

                                                                            </div>
                                                                        </div>
                                                                        <div class="p-detail">
                                                                            <h5 class="mt-3">
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    Product Details
                                                                                @else
                                                                                    تفاصيل المنتج
                                                                                @endif
                                                                            </h5>
                                                                            <p>
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    {!! $product->description_en !!}
                                                                                @else
                                                                                    {!! $product->description_ar !!}
                                                                                @endif
                                                                            </p>
                                                                            <hr />
                                                                        </div>

                                                                    </div>
                                                                    <div class="col-lg-6 col-md-6 col-12">
                                                                        <div
                                                                            class="top-title text-center d-flex justify-content-between align-items-center">
                                                                            <h3 class="text-start">
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    {{ $product->title_en ?? '' }}
                                                                                @else
                                                                                    {{ $product->title_ar ?? '' }}
                                                                                @endif
                                                                            </h3>
                                                                            <a href="javascript:void(0)"
                                                                                class="add-to-wishlist-btn"
                                                                                data-id="{{ $product->id }}"><i
                                                                                    class="bi bi-suit-heart"></i></a>
                                                                        </div>
                                                                        <div class="price-heart">
                                                                            <h4 class="actual-price">
                                                                                {{ display_price($product->price) }}</h4>
                                                                        </div>
                                                                        <div
                                                                            class="row d-flex justify-content-between align-items-center">
                                                                            <div class="col-lg-6 mb-3">
                                                                                @php
                                                                                    $today = \Carbon\Carbon::today()->format(
                                                                                        'Y-m-d',
                                                                                    );
                                                                                @endphp

                                                                                <label class="form-label">
                                                                                    @if (session('app_language', 'en') == 'en')
                                                                                        Choose a delivery date
                                                                                    @else
                                                                                        اختر تاريخ التسليم
                                                                                    @endif
                                                                                </label>
                                                                                <input type="date" class="form-control"
                                                                                    min="{{ $today }}"
                                                                                    id="delivery_date_{{ $product->id }}"
                                                                                    placeholder="{{ session('app_language', 'en') == 'en' ? 'Choose a delivery date' : 'اختر تاريخ التسليم' }}"
                                                                                    onfocus="this.showPicker ? this.showPicker() : null" />
                                                                            </div>
                                                                            <div class="col-lg-6 mb-3">
                                                                                <label class="form-label">
                                                                                    @if (session('app_language', 'en') == 'en')
                                                                                        Choose a delivery time
                                                                                    @else
                                                                                        اختر وقت التسليم
                                                                                    @endif
                                                                                </label>
                                                                                <input type="time" class="form-control"
                                                                                    id="delivery_time_{{ $product->id }}"
                                                                                    name="delivery_time"
                                                                                    placeholder="{{ session('app_language', 'en') == 'en' ? 'Choose a delivery time' : 'اختر وقت التسليم' }}"
                                                                                    onfocus="this.showPicker ? this.showPicker() : null">
                                                                            </div>
                                                                        </div>
                                                                        <div class="mb-3">
                                                                            <label class="form-label">
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    Add a personal message
                                                                                @else
                                                                                    إضافة رسالة شخصية
                                                                                @endif
                                                                            </label>
                                                                            <textarea class="form-control" rows="5" id="personal_message_{{ $product->id }}"
                                                                                placeholder="{{ session('app_language', 'en') == 'en' ? 'Add a personal message' : 'إضافة رسالة شخصية' }}"></textarea>
                                                                        </div>
                                                                        <div class="">
                                                                            <label class="form-label">
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    Note
                                                                                @else
                                                                                    ملحوظة
                                                                                @endif
                                                                            </label>
                                                                            <textarea class="form-control" rows="5" id="note_{{ $product->id }}"
                                                                                placeholder="{{ session('app_language', 'en') == 'en' ? 'Note - Special with love for you' : 'ملحوظة - مع الحب لك' }}"></textarea>


                                                                            <h4 class="mt-2">
                                                                                <a href="javascript:void(0)"
                                                                                    style="cursor: pointer;"
                                                                                    data-bs-toggle="modal"
                                                                                    data-bs-target="#exampleModalcard">
                                                                                    @if (session('app_language', 'en') == 'en')
                                                                                        Choose the Card
                                                                                    @else
                                                                                        اختر البطاقة
                                                                                    @endif
                                                                                </a>
                                                                            </h4>

                                                                        </div>
                                                                        <div class="upload-section mt-2 mb-3">
                                                                            <label class="form-label fw-bold">
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    Here you can add music link
                                                                                @else
                                                                                    هنا يمكنك إضافة رابط الموسيقى
                                                                                @endif
                                                                            </label>
                                                                            <p class="text-muted mb-1">
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    You can add music - your favorite song -
                                                                                    picture
                                                                                @else
                                                                                    يمكنك إضافة موسيقى - أغنيتك المفضلة -
                                                                                    صورة
                                                                                @endif
                                                                            </p>
                                                                            {{-- <div class="text-center border rounded-3 py-4"
                                                                                id="dropArea"> --}}
                                                                            {{-- <i class="bi bi-camera text-muted"></i>
                                                                                <p class="mb-0 text-muted">
                                                                                    @if (session('app_language', 'en') == 'en')
                                                                                        Drag and drop file here
                                                                                    @else
                                                                                        اسحب وأفلِت الملف هنا
                                                                                    @endif
                                                                                </p> --}}
                                                                            {{-- <input type="file" id="fileInput"
                                                                                    hidden /> --}}
                                                                            <input type="file"
                                                                                id="file_{{ $product->id }}"
                                                                                class="form-control">
                                                                            {{-- </div> --}}
                                                                        </div>
                                                                        <div
                                                                            class="mb-3 count row d-flex justify-content-between align-items-center">
                                                                            <div class="col-lg-4">
                                                                                <input type="number"
                                                                                    class="form-control rounded-3"
                                                                                    min="1" value="1"
                                                                                    id="quantity_{{ $product->id }}" />
                                                                            </div>
                                                                            <div class="col-lg-4 pe-lg-0 my-2 my-lg-0">
                                                                                {{-- <div class="cart_button">
                                                                                    <a href="javascript:void(0)"
                                                                                        class="add-to-cart-btn"
                                                                                        data-bs-toggle="modal"
                                                                                        data-bs-target="#exampleModal"
                                                                                        data-id="{{ $product->id }}">
                                                                                        @if (session('app_language', 'en') == 'en')
                                                                                            Add to cart
                                                                                        @else
                                                                                            أضف إلى السلة
                                                                                        @endif
                                                                                    </a>
                                                                                </div> --}}
                                                                                <div class="cart_button">
                                                                                    <a href="javascript:void(0)"
                                                                                        class="add-to-cart-btn"
                                                                                        data-id="{{ $product->id }}">
                                                                                        @if (session('app_language', 'en') == 'en')
                                                                                            Add to cart
                                                                                        @else
                                                                                            أضف إلى السلة
                                                                                        @endif
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-4">
                                                                                <div class="buy_button">
                                                                                    <a href="javascript:void(0)"
                                                                                        class="buy-now-btn"
                                                                                        data-id="{{ $product->id }}">
                                                                                        @if (session('app_language', 'en') == 'en')
                                                                                            Buy Now
                                                                                        @else
                                                                                            اشتري الآن
                                                                                        @endif
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </section>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div class="owl-carousel owl-theme slider" id="carousel2" style="direction: ltr !important;">
                                @foreach ($latestProducts as $product)
                                    <div class="item">
                                        <div class="card custom-card border-0">
                                            <div class="custom-img">
                                                @if (!empty($product->after_discount))
                                                    <div class="ribbon">
                                                        <span>
                                                            @if (session('app_language', 'en') == 'en')
                                                                BEST OFFER
                                                            @else
                                                                أفضل عرض
                                                            @endif
                                                        </span>
                                                    </div>
                                                @endif
                                                <img src="{{ $product->images->first() ? asset('uploads/products/' . $product->images->first()->filename) : asset('website/dummy/dummy.jpg') }}"
                                                    class="img-fluid">
                                            </div>
                                            <div class="overlay">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div class="heart-icon">
                                                        <a href="javascript:void(0)" class="add-to-wishlist-btn"
                                                            data-id="{{ $product->id }}"><i
                                                                class="bi bi-suit-heart"></i>
                                                    </div>
                                                    <div class="eye-icon">
                                                        {{-- <a href="#"><i class="bi bi-eye"></i></a> --}}
                                                        <a data-bs-toggle="modal"
                                                            data-bs-target="#product_detailsh_{{ $product->id }}">
                                                            <i class="bi bi-eye"></i></a>
                                                    </div>
                                                </div>
                                                <div class="select_button">
                                                    <a href="{{ route('website.listing.details', $product->slug) }}">
                                                        @if (session('app_language', 'en') == 'en')
                                                            Select Options
                                                        @else
                                                            حدد الخيارات
                                                        @endif
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="card-body text-center mt-3">
                                                <h5 class="card-title">
                                                    @if (session('app_language', 'en') == 'en')
                                                        {{ $product->title_en ?? '' }}
                                                    @else
                                                        {{ $product->title_ar ?? '' }}
                                                    @endif
                                                </h5>
                                                <span class="card-price">{{ display_price($product->price) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
        @if (count($occasions) > 0)
            <section id="all-category">
                <div class="container-fluid fixedwidth">
                    <div class="row d-flex justify-content-center align-items-center">
                        <div class="col-xxl-12 col-lg-12 pb-lg-5 pb-4">
                            <div class="top-title text-center py-3 py-lg-0">
                                <h3 class="mb-0 pt-lg-0 pt-3">
                                    @if (session('app_language', 'en') == 'en')
                                        {{ $page->section_two_heading_en ?? '' }}
                                    @else
                                        {{ $page->section_two_heading_ar ?? '' }}
                                    @endif
                                </h3>
                                <p class="title-text">
                                    @if (session('app_language', 'en') == 'en')
                                        {{ $page->section_two_description_en ?? '' }}
                                    @else
                                        {{ $page->section_two_description_ar ?? '' }}
                                    @endif
                                </p>
                            </div>
                            <div
                                class="row gy-3  d-flex justify-content-center align-items-center text-center py-lg-4 py-3">
                                @foreach ($occasions as $occasion)
                                    <div class="col-lg-auto col-md-auto">
                                        <a href="{{ $occasion->link_en ?? '#' }}">
                                            <div class="d-flex flex-column justify-content-between align-items-center">
                                                <div class="circle d-flex justify-content-center align-items-center">
                                                    <img src="{{ asset('uploads/occasion/' . ($occasion->thumbnail ?? 'website/dummy/dummy.jpg')) }}"
                                                        alt="{{ session('app_language', 'en') == 'en' ? $occasion->title_en ?? '' : $occasion->title_ar ?? '' }}">
                                                </div>
                                                <h5 class="pt-3">
                                                    @if (session('app_language', 'en') == 'en')
                                                        {{ $occasion->title_en ?? '' }}
                                                    @else
                                                        {{ $occasion->title_ar ?? '' }}
                                                    @endif
                                                </h5>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
        @if (count($mostSellingProducts) > 0)
            <section id="h-s" class="top-header">
                <img src="{{ asset('website/images/back1.svg') }}" class="backimg1" alt="" />
                <div class="container-fluid  py-lg-2  py-xxl-5 fixedwidth ">
                    <div class="top-title text-center py-3 py-lg-0">
                        <h3 class="mb-0 pt-lg-4 pt-3">
                            @if (session('app_language', 'en') == 'en')
                                {{ $page->section_three_heading_en ?? '' }}
                            @else
                                {{ $page->section_three_heading_ar ?? '' }}
                            @endif
                        </h3>
                        <p class="title-text">
                            @if (session('app_language', 'en') == 'en')
                                {{ $page->section_three_description_en ?? '' }}
                            @else
                                {{ $page->section_three_description_ar ?? '' }}
                            @endif
                        </p>
                    </div>
                    <!-- Mobile Slider -->
                    <div class="row justify-content-center align-items-center d-flex">
                        <div class="col-lg-11 ">
                            <div class="owl-carousel owl-theme slider" id="carousel1" style="direction: ltr !important;">
                                @foreach ($mostSellingProducts as $product)
                                    <div class="item">
                                        <div class="card custom-card border-0">
                                            <div class="custom-img">
                                                @if (!empty($product->after_discount))
                                                    <div class="ribbon">
                                                        <span>
                                                            @if (session('app_language', 'en') == 'en')
                                                                BEST OFFER
                                                            @else
                                                                أفضل عرض
                                                            @endif
                                                        </span>
                                                    </div>
                                                @endif
                                                <img src="{{ $product->images->first() ? asset('uploads/products/' . $product->images->first()->filename) : asset('website/dummy/dummy.jpg') }}"
                                                    class="img-fluid">
                                            </div>
                                            <div class="overlay">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div class="heart-icon">
                                                        <a href="javascript:void(0)" class="add-to-wishlist-btn"
                                                            data-id="{{ $product->id }}"><i
                                                                class="bi bi-suit-heart"></i>
                                                    </div>
                                                    <div class="eye-icon">
                                                        <a data-bs-toggle="modal"
                                                            data-bs-target="#product_detailsh_{{ $product->id }}">
                                                            <i class="bi bi-eye"></i></a>
                                                    </div>
                                                    <!-- Modal -->

                                                </div>
                                                <div class="select_button">
                                                    <a href="{{ route('website.listing.details', $product->slug) }}">
                                                        @if (session('app_language', 'en') == 'en')
                                                            Select Options
                                                        @else
                                                            حدد الخيارات
                                                        @endif
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="card-body text-center">
                                                <h5 class="card-title">
                                                    @if (session('app_language', 'en') == 'en')
                                                        {{ $product->title_en ?? '' }}
                                                    @else
                                                        {{ $product->title_ar ?? '' }}
                                                    @endif
                                                </h5>
                                                <span class="card-price">{{ display_price($product->price) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            @foreach ($mostSellingProducts as $product)
                                <!-- Modal -->
                                <div class="modal fade" id="product_detailsh_{{ $product->id }}" tabindex="-1"
                                    aria-labelledby="product_detailshLabel_{{ $product->id }}" aria-hidden="true">

                                    <div class="modal-dialog modal-xl custom_modalw">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 class="modal-title fs-5"
                                                    id="product_detailshLabel_{{ $product->id }}">
                                                    @if (session('app_language', 'en') == 'en')
                                                        {{ $product->title_en ?? '' }}
                                                    @else
                                                        {{ $product->title_ar ?? '' }}
                                                    @endif
                                                </h1>

                                                <button type="button" class="btn-close hmodalbtn"
                                                    data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <section id="product-detail">
                                                    <div class="container-fluid my-xxl-5 my-lg-3 my-2 fixedwidth">
                                                        <div class="row d-flex justify-content-center align-items-center">
                                                            <div class="col-xl-10 col-lg-11 col-md-12 col-12">
                                                                <div
                                                                    class="row d-flex justify-content-center align-items-start g-lg-5 g-md-4 g-0">
                                                                    <div class="col-lg-6 col-md-6 col-12">
                                                                        <div class="display-img">

                                                                            <!-- Large Preview Image -->
                                                                            <img id="mainImage2_{{ $product->id }}"
                                                                                src="{{ asset('uploads/products/' . $product->images->first()->filename) }}"
                                                                                class="main-img img-fluid mb-3 w-100"
                                                                                alt="Main Image" />

                                                                            <div
                                                                                class="owl-carousel owl-theme thumb-carousel2_{{ $product->id }}">

                                                                                @foreach ($product->images as $index => $image)
                                                                                    <div class="item">
                                                                                        <img src="{{ asset('uploads/products/' . $image->filename) }}"
                                                                                            class="thumb-img {{ $index == 0 ? 'active' : '' }}"
                                                                                            alt="{{ $product->title }} image {{ $index + 1 }}" />
                                                                                    </div>
                                                                                @endforeach

                                                                            </div>
                                                                        </div>
                                                                        <div class="p-detail">
                                                                            <h5 class="mt-3">
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    Product Details
                                                                                @else
                                                                                    تفاصيل المنتج
                                                                                @endif
                                                                            </h5>
                                                                            <p>
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    {!! $product->description_en !!}
                                                                                @else
                                                                                    {!! $product->description_ar !!}
                                                                                @endif
                                                                            </p>
                                                                            <hr />
                                                                        </div>

                                                                    </div>
                                                                    <div class="col-lg-6 col-md-6 col-12">
                                                                        <div
                                                                            class="top-title text-center d-flex justify-content-between align-items-center">
                                                                            <h3 class="text-start">
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    {{ $product->title_en ?? '' }}
                                                                                @else
                                                                                    {{ $product->title_ar ?? '' }}
                                                                                @endif
                                                                            </h3>
                                                                            <a href="javascript:void(0)"
                                                                                class="add-to-wishlist-btn"
                                                                                data-id="{{ $product->id }}"><i
                                                                                    class="bi bi-suit-heart"></i></a>
                                                                        </div>
                                                                        <div class="price-heart">
                                                                            <h4 class="actual-price">
                                                                                {{ display_price($product->price) }}</h4>
                                                                        </div>
                                                                        <div
                                                                            class="row d-flex justify-content-between align-items-center">
                                                                            <div class="col-lg-6 mb-3">
                                                                                @php
                                                                                    $today = \Carbon\Carbon::today()->format(
                                                                                        'Y-m-d',
                                                                                    );
                                                                                @endphp

                                                                                <label class="form-label">
                                                                                    @if (session('app_language', 'en') == 'en')
                                                                                        Choose a delivery date
                                                                                    @else
                                                                                        اختر تاريخ التسليم
                                                                                    @endif
                                                                                </label>
                                                                                <input type="date" class="form-control"
                                                                                    min="{{ $today }}"
                                                                                    id="delivery_date_{{ $product->id }}"
                                                                                    placeholder="{{ session('app_language', 'en') == 'en' ? 'Choose a delivery date' : 'اختر تاريخ التسليم' }}"
                                                                                    onfocus="this.showPicker ? this.showPicker() : null" />
                                                                            </div>
                                                                            <div class="col-lg-6 mb-3">
                                                                                <label class="form-label">
                                                                                    @if (session('app_language', 'en') == 'en')
                                                                                        Choose a delivery time
                                                                                    @else
                                                                                        اختر وقت التسليم
                                                                                    @endif
                                                                                </label>
                                                                                <input type="time" class="form-control"
                                                                                    id="delivery_time_{{ $product->id }}"
                                                                                    name="delivery_time"
                                                                                    placeholder="{{ session('app_language', 'en') == 'en' ? 'Choose a delivery time' : 'اختر وقت التسليم' }}"
                                                                                    onfocus="this.showPicker ? this.showPicker() : null">
                                                                            </div>
                                                                        </div>
                                                                        <div class="mb-3">
                                                                            <label class="form-label">
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    Add a personal message
                                                                                @else
                                                                                    إضافة رسالة شخصية
                                                                                @endif
                                                                            </label>
                                                                            <textarea class="form-control" rows="5" id="personal_message_{{ $product->id }}"
                                                                                placeholder="{{ session('app_language', 'en') == 'en' ? 'Add a personal message' : 'إضافة رسالة شخصية' }}"></textarea>
                                                                        </div>
                                                                        <div class="">
                                                                            <label class="form-label">
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    Note
                                                                                @else
                                                                                    ملحوظة
                                                                                @endif
                                                                            </label>
                                                                            <textarea class="form-control" rows="5" id="note_{{ $product->id }}"
                                                                                placeholder="{{ session('app_language', 'en') == 'en' ? 'Note - Special with love for you' : 'ملحوظة - مع الحب لك' }}"></textarea>


                                                                            <h4 class="mt-2">
                                                                                <a href="javascript:void(0)"
                                                                                    style="cursor: pointer;"
                                                                                    data-bs-toggle="modal"
                                                                                    data-bs-target="#exampleModalcard">
                                                                                    @if (session('app_language', 'en') == 'en')
                                                                                        Choose the Card
                                                                                    @else
                                                                                        اختر البطاقة
                                                                                    @endif
                                                                                </a>
                                                                            </h4>

                                                                        </div>
                                                                        <div class="upload-section mt-2 mb-3">
                                                                            <label class="form-label fw-bold">
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    Here you can add music link
                                                                                @else
                                                                                    هنا يمكنك إضافة رابط الموسيقى
                                                                                @endif
                                                                            </label>
                                                                            <p class="text-muted mb-1">
                                                                                @if (session('app_language', 'en') == 'en')
                                                                                    You can add music - your favorite song -
                                                                                    picture
                                                                                @else
                                                                                    يمكنك إضافة موسيقى - أغنيتك المفضلة -
                                                                                    صورة
                                                                                @endif
                                                                            </p>
                                                                            <div class="text-center border rounded-3 py-4"
                                                                                id="dropArea">
                                                                                <i class="bi bi-camera text-muted"></i>
                                                                                <p class="mb-0 text-muted">
                                                                                    @if (session('app_language', 'en') == 'en')
                                                                                        Drag and drop file here
                                                                                    @else
                                                                                        اسحب وأفلِت الملف هنا
                                                                                    @endif
                                                                                </p>
                                                                                <input type="file"
                                                                                    id="file_{{ $product->id }}"
                                                                                    hidden />
                                                                            </div>
                                                                        </div>
                                                                        <div
                                                                            class="mb-3 count row d-flex justify-content-between align-items-center">
                                                                            <div class="col-lg-4">
                                                                                <input type="number"
                                                                                    class="form-control rounded-3"
                                                                                    min="1" value="1"
                                                                                    id="quantity_{{ $product->id }}" />
                                                                            </div>
                                                                            <div class="col-lg-4 pe-lg-0 my-2 my-lg-0">
                                                                                <div class="cart_button">
                                                                                    <a href="javascript:void(0)"
                                                                                        class="add-to-cart-btn"
                                                                                        data-id="{{ $product->id }}">
                                                                                        @if (session('app_language', 'en') == 'en')
                                                                                            Add to cart
                                                                                        @else
                                                                                            أضف إلى السلة
                                                                                        @endif
                                                                                    </a>
                                                                                    {{-- <a href="javascript:void(0)"
                                                                                        class="add-to-cart-btn"
                                                                                        data-bs-toggle="modal"
                                                                                        data-bs-target="#exampleModal"
                                                                                        data-id="{{ $product->id }}">
                                                                                        @if (session('app_language', 'en') == 'en')
                                                                                            Add to cart
                                                                                        @else
                                                                                            أضف إلى السلة
                                                                                        @endif
                                                                                    </a> --}}
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-4">
                                                                                <div class="buy_button">
                                                                                    <a href="javascript:void(0)"
                                                                                        class="buy-now-btn"
                                                                                        data-id="{{ $product->id }}">
                                                                                        @if (session('app_language', 'en') == 'en')
                                                                                            Buy Now
                                                                                        @else
                                                                                            اشتري الآن
                                                                                        @endif
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </section>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="" style="position: relative">
                    <img src="{{ asset('website/images/back2.2.svg') }}" class="backimg2" alt="" />
                </div>
            </section>
        @endif
        <div class="modal fade gift-modal" id="exampleModalcard" tabindex="-1" aria-labelledby="exampleModalcardLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <img src="{{ asset('website/images/Layer_1 (10).svg') }}" alt="" />
                        <h1 class="modal-title {{ session('app_language', 'en') == 'ar' ? 'me-3' : 'ms-3' }}"
                            id="exampleModalcardLabel">
                            @if (session('app_language', 'en') == 'en')
                                Add Gift Card
                            @else
                                أضف
                                بطاقة الهدايا
                            @endif
                        </h1>
                        <button type="button" class="btn-close hmodalbtn" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    @if ($firstCategory && $firstCategory->products->count())
                        <div class="modal-body">
                            <div class="accordion" id="#accordionExample">
                                @foreach ($firstCategory->products as $index => $product)
                                    <div class="accordion-item">
                                        <h2 class="accordion-header border-bottom">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapse{{ $index }}"
                                                aria-expanded="false" aria-controls="collapse{{ $index }}">
                                                {{ $index + 1 }}. {{ $product->title_en ?? 'Product' }}
                                            </button>
                                        </h2>
                                        <div id="collapse{{ $index }}" class="accordion-collapse collapse"
                                            data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                                <div class="row d-flex justify-content-between pb-2 my-2">
                                                    <div class="col-lg-12">
                                                        <div class="row justify-content-start align-items-center">
                                                            <div class="col-lg-4 col-md-2 col-2">
                                                                <img src="{{ asset('uploads/products/' . ($product->images->first()->filename ?? 'default.jpg')) }}"
                                                                    alt="{{ $product->title_en }}"
                                                                    class="img-fluid {{ session('app_language', 'en') == 'ar' ? 'ms-3' : 'me-3' }} w-100" />
                                                            </div>
                                                            <div class="col-lg-3 col-md-5 col-5">
                                                                <div class="mb-1 pt-lg-3 pt-md-2">
                                                                    <p>{{ $product->description_en }}</p>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-3 col-md-3 col-3">
                                                                <div class="btn-price my-4 text-center">
                                                                    <a href="">{{ $product->price ?? 'Free' }}</a>
                                                                </div>
                                                            </div>
                                                            <div
                                                                class="col-lg-2 col-md-2 col-2 d-flex flex-column justify-content-center align-items-end">
                                                                <input class="form-check-input cart-checkboxcard"
                                                                    type="checkbox" id="product-{{ $product->id }}"
                                                                    data-id="{{ $product->id }}" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="modal-footer border-0">
                                <div class="text-end mt-4">
                                    <div class="mb-3 count">
                                        <div class="cart_button">
                                            <a href="#" class="btn btn-primary add-selected-to-cartcard">Select</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    @endif

                </div>
                {{-- @else
                    <p>No products found in the first category.</p>
                @endif --}}


            </div>
        </div>
        <section id="enhance" class="enhance">
            <div class="container-fluid fixedwidth">
                <div class="row d-flex justify-content-center align-items-center">
                    <div class="col-lg-11">
                        <div class="row d-flex justify-content-center align-items-center">
                            <div class="col-xxl-5 col-lg-6 col-md-7 col-12">
                                <div class="top-title text-center">
                                    <h3 class="mb-0 pt-lg-5 pt-3">
                                        @if (session('app_language', 'en') == 'en')
                                            {{ $page->section_four_heading_en ?? '' }}
                                        @else
                                            {{ $page->section_four_heading_ar ?? '' }}
                                        @endif
                                    </h3>
                                </div>
                            </div>
                        </div>
                        @if (!empty($page->section_four_image))
                            <div class="row d-flex justify-content-center align-items-center">
                                <div class="col-lg-8 text-center">
                                    <img src="{{ asset('uploads/home_page/' . $page->section_four_image) }}"
                                        alt="" srcset="" class="img-fluid">
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
        @if (count($productCategories) > 0)
            <section id="product-category">
                <div class="container-fluid fixedwidth">
                    <div class="row d-flex justify-content-center align-items-center">
                        <div class="col-lg-12 pb-lg-5 pb-md-4 pb-3">
                            <div class="top-title text-center py-3 py-lg-0">
                                <h3 class="mb-0 pt-lg-5 pt-3">
                                    @if (session('app_language', 'en') == 'en')
                                        {{ $page->section_five_heading_en ?? '' }}
                                    @else
                                        {{ $page->section_five_heading_ar ?? '' }}
                                    @endif
                                </h3>
                                <p class="title-text">
                                    @if (session('app_language', 'en') == 'en')
                                        {{ $page->section_five_description_en ?? '' }}
                                    @else
                                        {{ $page->section_five_description_ar ?? '' }}
                                    @endif
                                </p>
                            </div>
                            <div class="row g-3 d-flex justify-content-center py-3 ">
                                <div class="col-lg-auto col-md-2 col-sm-6">
                                    <div class="row d-flex flex-column gap-3">
                                        @if (!empty($productCategories) && isset($productCategories[0]))
                                            @php $firstCategory = $productCategories[0]; @endphp
                                            <div class="col-lg-12">
                                                <a href="{{ route('website.category.listing', $firstCategory->slug) }}">
                                                    <div class="category-card">
                                                        <img src="{{ asset('uploads/products/category/' . $firstCategory->thumbnail) }}"
                                                            class="img-fluid w-100 ca-img"
                                                            alt="{{ session('app_language', 'en') == 'en' ? $firstCategory->title_en ?? '' : $firstCategory->title_ar ?? '' }}">
                                                        <div class="category-text text-center">
                                                            @if (session('app_language', 'en') == 'en')
                                                                {{ $firstCategory->title_en ?? '' }}
                                                            @else
                                                                {{ $firstCategory->title_ar ?? '' }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                        @if (!empty($productCategories) && isset($productCategories[1]))
                                            @php $secondCategory = $productCategories[1]; @endphp
                                            <div class="col-lg-12">
                                                <a href="{{ route('website.category.listing', $secondCategory->slug) }}">
                                                    <div class="category-card">
                                                        <img src="{{ asset('uploads/products/category/' . $secondCategory->thumbnail) }}"
                                                            class="img-fluid w-100 ca-img"
                                                            alt="{{ session('app_language', 'en') == 'en' ? $secondCategory->title_en ?? '' : $secondCategory->title_ar ?? '' }}">
                                                        <div class="category-text text-center">
                                                            @if (session('app_language', 'en') == 'en')
                                                                {{ $secondCategory->title_en ?? '' }}
                                                            @else
                                                                {{ $secondCategory->title_ar ?? '' }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-lg-auto col-md-2 col-sm-6">
                                    <div class="row d-flex flex-column gap-3">
                                        @if (!empty($productCategories) && isset($productCategories[2]))
                                            @php $thirdCategory = $productCategories[2]; @endphp
                                            <div class="col-lg-12">
                                                <a href="{{ route('website.category.listing', $thirdCategory->slug) }}">
                                                    <div class="category-card">
                                                        <img src="{{ asset('uploads/products/category/' . $thirdCategory->thumbnail) }}"
                                                            class="img-fluid w-100 cc-img"
                                                            alt="{{ session('app_language', 'en') == 'en' ? $thirdCategory->title_en ?? '' : $thirdCategory->title_ar ?? '' }}">
                                                        <div class="category-text text-center">
                                                            @if (session('app_language', 'en') == 'en')
                                                                {{ $thirdCategory->title_en ?? '' }}
                                                            @else
                                                                {{ $thirdCategory->title_ar ?? '' }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                        @if (!empty($productCategories) && isset($productCategories[3]))
                                            @php $fourCategory = $productCategories[3]; @endphp
                                            <div class="col-lg-12">
                                                <a href="{{ route('website.category.listing', $fourCategory->slug) }}">
                                                    <div class="category-card">
                                                        <img src="{{ asset('uploads/products/category/' . $fourCategory->thumbnail) }}"
                                                            class="img-fluid w-100 cb-img"
                                                            alt="{{ session('app_language', 'en') == 'en' ? $fourCategory->title_en ?? '' : $fourCategory->title_ar ?? '' }}">
                                                        <div class="category-text text-center">
                                                            @if (session('app_language', 'en') == 'en')
                                                                {{ $fourCategory->title_en ?? '' }}
                                                            @else
                                                                {{ $fourCategory->title_ar ?? '' }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-lg-auto col-md-2 col-sm-6">
                                    <div class="row d-flex flex-column gap-3">
                                        @if (!empty($productCategories) && isset($productCategories[4]))
                                            @php $fiveCategory = $productCategories[4]; @endphp
                                            <div class="col-lg-12">
                                                <a href="{{ route('website.category.listing', $fiveCategory->slug) }}">
                                                    <div class="category-card">
                                                        <img src="{{ asset('uploads/products/category/' . $fiveCategory->thumbnail) }}"
                                                            class="img-fluid w-100 ca-img"
                                                            alt="{{ session('app_language', 'en') == 'en' ? $fiveCategory->title_en ?? '' : $fiveCategory->title_ar ?? '' }}">
                                                        <div class="category-text text-center">
                                                            @if (session('app_language', 'en') == 'en')
                                                                {{ $fiveCategory->title_en ?? '' }}
                                                            @else
                                                                {{ $fiveCategory->title_ar ?? '' }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                        @if (!empty($productCategories) && isset($productCategories[5]))
                                            @php $sixCategory = $productCategories[5]; @endphp
                                            <div class="col-lg-12">
                                                <a href="{{ route('website.category.listing', $sixCategory->slug) }}">
                                                    <div class="category-card">
                                                        <img src="{{ asset('uploads/products/category/' . $sixCategory->thumbnail) }}"
                                                            class="img-fluid w-100 ca-img"
                                                            alt="{{ session('app_language', 'en') == 'en' ? $sixCategory->title_en ?? '' : $sixCategory->title_ar ?? '' }}">
                                                        <div class="category-text text-center">
                                                            @if (session('app_language', 'en') == 'en')
                                                                {{ $sixCategory->title_en ?? '' }}
                                                            @else
                                                                {{ $sixCategory->title_ar ?? '' }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-lg-auto col-md-2 col-sm-6">
                                    <div class="row d-flex flex-column gap-3">
                                        @if (!empty($productCategories) && isset($productCategories[6]))
                                            @php $sevenCategory = $productCategories[6]; @endphp
                                            <div class="col-lg-12">
                                                <a href="{{ route('website.category.listing', $sevenCategory->slug) }}">
                                                    <div class="category-card">
                                                        <img src="{{ asset('uploads/products/category/' . $sevenCategory->thumbnail) }}"
                                                            class="img-fluid w-100 cb-img"
                                                            alt="{{ session('app_language', 'en') == 'en' ? $sevenCategory->title_en ?? '' : $sevenCategory->title_ar ?? '' }}">
                                                        <div class="category-text text-center">
                                                            @if (session('app_language', 'en') == 'en')
                                                                {{ $sevenCategory->title_en ?? '' }}
                                                            @else
                                                                {{ $sevenCategory->title_ar ?? '' }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                        @if (!empty($productCategories) && isset($productCategories[7]))
                                            @php $eightCategory = $productCategories[7]; @endphp
                                            <div class="col-lg-12">
                                                <a href="{{ route('website.category.listing', $eightCategory->slug) }}">
                                                    <div class="category-card">
                                                        <img src="{{ asset('uploads/products/category/' . $eightCategory->thumbnail) }}"
                                                            class="img-fluid w-100 cc-img"
                                                            alt="{{ session('app_language', 'en') == 'en' ? $eightCategory->title_en ?? '' : $eightCategory->title_ar ?? '' }}">
                                                        <div class="category-text text-center">
                                                            @if (session('app_language', 'en') == 'en')
                                                                {{ $eightCategory->title_en ?? '' }}
                                                            @else
                                                                {{ $eightCategory->title_ar ?? '' }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-lg-auto col-md-2 col-sm-6">
                                    <div class="row d-flex flex-column gap-3">
                                        @if (!empty($productCategories) && isset($productCategories[8]))
                                            @php $nineCategory = $productCategories[8]; @endphp
                                            <div class="col-lg-12">
                                                <a href="{{ route('website.category.listing', $nineCategory->slug) }}">
                                                    <div class="category-card">
                                                        <img src="{{ asset('uploads/products/category/' . $nineCategory->thumbnail) }}"
                                                            class="img-fluid w-100 ca-img"
                                                            alt="{{ session('app_language', 'en') == 'en' ? $nineCategory->title_en ?? '' : $nineCategory->title_ar ?? '' }}">
                                                        <div class="category-text text-center">
                                                            @if (session('app_language', 'en') == 'en')
                                                                {{ $nineCategory->title_en ?? '' }}
                                                            @else
                                                                {{ $nineCategory->title_ar ?? '' }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                        @if (!empty($productCategories) && isset($productCategories[9]))
                                            @php $tenCategory = $productCategories[9]; @endphp
                                            <div class="col-lg-12">
                                                <a href="{{ route('website.category.listing', $tenCategory->slug) }}">
                                                    <div class="category-card">
                                                        <img src="{{ asset('uploads/products/category/' . $tenCategory->thumbnail) }}"
                                                            class="img-fluid w-100 ca-img"
                                                            alt="{{ session('app_language', 'en') == 'en' ? $tenCategory->title_en ?? '' : $tenCategory->title_ar ?? '' }}">
                                                        <div class="category-text text-center">
                                                            @if (session('app_language', 'en') == 'en')
                                                                {{ $tenCategory->title_en ?? '' }}
                                                            @else
                                                                {{ $tenCategory->title_ar ?? '' }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
        @if (count($reviews) > 0)
            <section id="reviews-section" class="reviews-section py-lg-4 py-2">
                <div class="container-fluid position-relative fixedwidth">
                    <div class="top-title text-center mb-md-5 my-4 mb-lg-0">
                        <h3 class="text-white">
                            @if (session('app_language', 'en') == 'en')
                                {{ $page->section_six_heading_en ?? '' }}
                            @else
                                {{ $page->section_six_heading_ar ?? '' }}
                            @endif
                        </h3>
                    </div>
                    <div class="swiper mySwiper equal-height-swiper">
                        <div class="swiper-wrapper mb-5">
                            @foreach ($reviews as $review)
                                <div class="swiper-slide">
                                    <div class="review-card">
                                        <div class="d-flex justify-content-start align-items-center">
                                            <img src="{{ asset('website/images/user.png') }}" alt="User"
                                                class="img-fluid {{ session('app_language', 'en') == 'ar' ? 'ms-3' : 'me-3' }}">
                                            <div>
                                                <div class="review-name m-0">
                                                    {{ $review->user->first_name ?? 'Guest' }}
                                                    {{ $review->user->last_name ?? '' }}
                                                </div>
                                                <div class="review-time">{{ $review->created_at->diffForHumans() }}</div>
                                            </div>
                                        </div>
                                        <div class="stars">
                                            @for ($i = 1; $i <= 5; $i++)
                                                <i
                                                    class="bi {{ $i <= $review->rating ? 'bi-star-fill' : 'bi-star' }}"></i>
                                            @endfor
                                        </div>
                                        <div class="mb-auto">
                                            <p class="m-0">{{ $review->description }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

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

    @endsection
    @section('scriptJs')
        <script type="text/javascript">
            // function addToCart(id) {
            //     // Get input values using the dynamic product ID
            //     var deliveryDate = $('#delivery_date_' + id).val();
            //     var deliveryTime = $('#delivery_time_' + id).val();
            //     var quantity = $('#quantity_' + id).val();
            //     var message = $('#message_'+id).val();

            //     $.ajax({
            //         url: '{{ route('website.add.to.cart') }}',
            //         type: 'post',
            //         data: {
            //             id: id,
            //             delivery_date: deliveryDate,
            //             delivery_time: deliveryTime,
            //             quantity: quantity,
            //             personal_message: message,
            //             _token: '{{ csrf_token() }}'
            //         },
            //         dataType: 'json',
            //         success: function(response) {
            //             if (response.status === true) {
            //                 toastr.success(response.message, "Success");
            //             } else {
            //                 toastr.error(response.message, "Required");
            //             }
            //         },
            //         error: function(jqXHR, exception) {
            //             toastr.error("Please Try Again...", "Error");
            //         }
            //     });
            // }
            $(document).ready(function() {
                $(document).on('click', '.add-to-cart-btn', function() {
                    var id = $(this).data('id');

                    // Get input values dynamically
                    var deliveryDate = $('#delivery_date_' + id).val();
                    var deliveryTime = $('#delivery_time_' + id).val();
                    var quantity = $('#quantity_' + id).val();
                    var message = $('#message_' + id).val();
                    if (!deliveryDate || !deliveryTime) {
                        toastr.error("Delivery date and time are required.", "Required");
                        return;
                    }
                    $.ajax({
                        url: '{{ route('website.add.to.cart') }}',
                        type: 'post',
                        data: {
                            id: id,
                            delivery_date: deliveryDate,
                            delivery_time: deliveryTime,
                            quantity: quantity,
                            personal_message: message,
                            _token: '{{ csrf_token() }}'
                        },
                        dataType: 'json',
                        success: function(response) {
                            if (response.status === true) {
                                toastr.success(response.message, "Success");
                                setTimeout(() => {
                                    location.reload();
                                }, 1000);
                            } else {
                                toastr.error(response.message, "Required");
                            }
                        },
                        error: function() {
                            toastr.error("Please Try Again...", "Error");
                        }
                    });
                });

                $(document).on('click', '.buy-now-btn', function() {
                    var id = $(this).data('id');

                    // Get input values
                    var deliveryDate = $('#delivery_date_' + id).val();
                    var deliveryTime = $('#delivery_time_' + id).val();
                    var personalMessage = $('#personal_message_' + id).val();
                    var note = $('#note_' + id).val();
                    var quantity = $('#quantity_' + id).val();
                    var fileInput = $('#file_' + id)[0]; // Get the file input element

                    // Create FormData object
                    var formData = new FormData();
                    formData.append('id', id);
                    formData.append('delivery_date', deliveryDate);
                    formData.append('delivery_time', deliveryTime);
                    formData.append('personal_message', personalMessage);
                    formData.append('note', note);
                    formData.append('quantity', quantity);

                    // Check if file input exists and has a file selected
                    if (fileInput && fileInput.files.length > 0) {
                        formData.append('file', fileInput.files[0]);
                    }

                    // AJAX request
                    $.ajax({
                        url: '/add-to-cart', // Your endpoint URL
                        type: 'POST',
                        data: formData,
                        processData: false, // Important for file upload
                        contentType: false, // Important for file upload
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                'content') // For Laravel CSRF protection
                        },
                        success: function(response) {
                            if (response.status === true) {
                                // toastr.success(response.message, "Success");
                                setTimeout(() => {
                                    // window.location.reload();
                                    window.location.href = '/account/checkout';
                                }, 1000);
                            } else {
                                let errorMessages = [];

                                if (response.errors) {
                                    for (let key in response.errors) {
                                        if (response.errors.hasOwnProperty(key)) {
                                            response.errors[key].forEach(function(message) {
                                                errorMessages.push(message);
                                            });
                                        }
                                    }
                                }

                                if (errorMessages.length > 0) {
                                    toastr.error(errorMessages.join('<br>'), 'Required');
                                } else {
                                    // toastr.error(response.message, 'Message');
                                    setTimeout(() => {
                                        // window.location.reload();
                                        window.location.href = '/account/checkout';
                                    }, 1000);
                                }
                            }
                        },
                        error: function() {
                            toastr.error("Please Try Again...", "Error");
                        }
                    });
                });
            });
            $(document).on('click', '.add-selected-to-cartcard', function(e) {
                // console.log('Add to Cart Card clicked!');
                // alert("Hi");

                e.preventDefault();
                let selectedIds = [];
                let price = [];

                $('.cart-checkboxcard:checked').each(function() {
                    selectedIds.push($(this).data('id'));
                    price.push($(this).data('price'));
                });

                if (selectedIds.length === 0) {
                    toastr.warning("Please select at least one product.", "Warning");
                    return;
                }

                $.ajax({
                    // url: '{{ route('website.add.to.cart') }}',
                    url: '{{ route('website.add.to.cart.choose.card') }}',
                    type: 'POST',
                    data: {
                        product_ids: selectedIds,
                        product_price: price,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status === true) {
                            toastr.success(response.message, "Success");
                            setTimeout(() => {
                                location.reload();
                            }, 1000);
                        } else {
                            toastr.error(response.message, "Error");
                        }
                    },
                    error: function() {
                        toastr.error("Something went wrong. Please try again.", "Error");
                    }
                });
            });
            $(document).on('click', '.add-selected-to-cartcard', function(e) {
                console.log('Add to Cart Card clicked!');

                e.preventDefault();
                let selectedIds = [];

                $('.cart-checkboxcard:checked').each(function() {
                    selectedIds.push($(this).data('id'));
                });

                if (selectedIds.length === 0) {
                    toastr.warning("Please select at least one product.", "Warning");
                    return;
                }

                $.ajax({
                    url: '{{ route('website.add.to.cart') }}',
                    type: 'POST',
                    data: {
                        product_ids: selectedIds,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status === true) {
                            toastr.success(response.message, "Success");
                            setTimeout(() => {
                                location.reload();
                            }, 1000);
                        } else {
                            toastr.error(response.message, "Error");
                        }
                    },
                    error: function() {
                        toastr.error("Something went wrong. Please try again.", "Error");
                    }
                });
            });
        </script>
        <script>
            $(document).ready(function() {
                @foreach ($mostSellingProducts as $product)
                    $(".thumb-carousel2_{{ $product->id }}").owlCarousel({
                        items: 5,
                        margin: 10,
                        nav: true,
                        dots: false,
                        navText: [
                            "<i class='fa fa-chevron-left'></i>",
                            "<i class='fa fa-chevron-right'></i>",
                        ],
                        responsive: {
                            0: {
                                items: 2,
                                nav: false
                            },
                            600: {
                                items: 3
                            },
                            1000: {
                                items: 4
                            }
                        }
                    });

                    // Attach click event for each specific modal's thumbnails
                    $(document).on('click', '.thumb-carousel2_{{ $product->id }} .thumb-img', function() {
                        let src = $(this).attr('src');
                        $('#mainImage2_{{ $product->id }}').attr('src', src);

                        $('.thumb-carousel2_{{ $product->id }} .thumb-img').removeClass('active');
                        $(this).addClass('active');
                    });
                @endforeach
            });
        </script>
    @endsection