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

    <section id="breadcrumb">
        <div class="container-fluid fixedwidth">
            <div class="row d-flex justify-content-lg-center justify-content-md-start align-item-center">
                <div class="col-md-10">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mt-lg-3 pt-4 pt-lg-0">
                            <li class="breadcrumb-item">
                                <a href="{{ route('website.home') }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Home
                                    @else
                                        بيت
                                    @endif
                                </a>
                            </li>
                            <li class="breadcrumb-item active">
                                <a href="{{ route('website.listing') }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Special Flowers
                                    @else
                                        زهور خاصة
                                    @endif
                                </a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>

    <section id="search-criteria">
        <div class="container-fluid pb-5 fixedwidth">
            <div class="row d-flex justify-content-md-center">
                <div class="col-lg-10">
                    <div class="top-title pb-lg-4 pb-md-4 pb-3">
                        <h3 class="{{ session('app_language', 'en') == 'ar' ? 'text-end' : 'text-start' }}">
                            @if (session('app_language', 'en') == 'en')
                                Special Flowers
                            @else
                                زهور خاصة
                            @endif
                        </h3>
                    </div>

                    <div class="row d-flex justify-content-md-start g-lg-5">
                        <div class="col-lg-3 col-md-4">
                            <hr />
                            <div class="accordion" id="accordionExample">
                                <div class="accordion-item">
                                    <a href="#" class="accordion-header clear-all">
                                        @if (session('app_language', 'en') == 'en')
                                            Clear all
                                        @else
                                            مسح الكل
                                        @endif
                                    </a>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseFive" aria-expanded="false"
                                            aria-controls="collapseFive">
                                            @if (session('app_language', 'en') == 'en')
                                                Price range
                                            @else
                                                النطاق السعري
                                            @endif
                                        </button>
                                    </h2>
                                    <div id="collapseFive" class="accordion-collapse collapse"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <div class="rating">
                                                <div class="fliter-box">
                                                    <div class="px-2">
                                                        <div class="f-spa_btn pt-lg-4 pt-4 mb-4">
                                                            <div id="slider3-range"
                                                                class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
                                                                <div class="ui-slider-range ui-corner-all ui-widget-header"
                                                                    style="left: 10%; width: 57.5%"></div>
                                                                <span tabindex="0"
                                                                    class="ui-slider-handle ui-corner-all ui-state-default"
                                                                    style="left: 10%"></span><span tabindex="0"
                                                                    class="ui-slider-handle ui-corner-all ui-state-default"
                                                                    style="left: 67.5%"></span>
                                                            </div>
                                                            <br /><br />
                                                            <div class="row d-flex justify-content-between">
                                                                <div class="col-lg-6 col-md-6 col-6">
                                                                    <input type="text" id="min_price" class="price"
                                                                        style="width: 100%; text-align: center"
                                                                        readonly="" />
                                                                </div>
                                                                <div class="col-lg-6 col-md-6 col-6">
                                                                    <input type="text" id="max_price" class="price"
                                                                        style="width: 100%; text-align: center"
                                                                        readonly="" />
                                                                </div>
                                                            </div>
                                                            <div id="slider2"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                            @if (session('app_language', 'en') == 'en')
                                                Category
                                            @else
                                                فئة
                                            @endif
                                        </button>
                                    </h2>
                                    <div id="collapseOne" class="accordion-collapse collapse"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            @if (count($categories) > 0)
                                                @foreach ($categories as $index => $item)
                                                    <div class="form-check category-label">
                                                        @php
                                                            $checkboxId = 'category_' . $index;
                                                            $title =
                                                                session('app_language', 'en') == 'en'
                                                                    ? $item->title_en ?? ''
                                                                    : $item->title_ar ?? '';
                                                        @endphp

                                                        <input class="form-check-input category-label" type="checkbox"
                                                            name="categories[]" value="{{ $item->id }}"
                                                            id="{{ $checkboxId }}"
                                                            {{ in_array($item->id, $categoriesArray ?? []) ? 'checked' : '' }} />

                                                        <label class="form-check-label" for="{{ $checkboxId }}">
                                                            {{ $title }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                            @if (session('app_language', 'en') == 'en')
                                                Color
                                            @else
                                                لون
                                            @endif
                                        </button>
                                    </h2>
                                    <div id="collapseTwo" class="accordion-collapse collapse"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            @if (count($colors) > 0)
                                                @foreach ($colors as $index => $color)
                                                    <div class="form-check color-label">
                                                        <input
                                                            {{ in_array($color->id, $colorsArray ?? []) ? 'checked' : '' }}
                                                            class="form-check-input color-label" type="checkbox"
                                                            name="colors[]" value="{{ $color->id }}"
                                                            id="color{{ $index }}">
                                                        <label class="form-check-label color-label"
                                                            for="color{{ $index }}">
                                                            {{-- {{ $color }} --}}
                                                            @if (session('app_language', 'en') == 'en')
                                                                {{ $color->title_en ?? '' }}
                                                            @else
                                                                {{ $color->title_ar ?? '' }}
                                                            @endif
                                                        </label>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseThree"
                                            aria-expanded="false" aria-controls="collapseThree">
                                            @if (session('app_language', 'en') == 'en')
                                                Brand
                                            @else
                                                ماركة
                                            @endif
                                        </button>
                                    </h2>
                                    <div id="collapseThree" class="accordion-collapse collapse"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            @if (!empty($brands) && count($brands) > 0)
                                                @foreach ($brands as $index => $brand)
                                                    @php
                                                        $checkboxId = 'brand_' . $index;
                                                        $label =
                                                            session('app_language', 'en') == 'en'
                                                                ? $brand->title_en
                                                                : $brand->title_ar;
                                                    @endphp
                                                    <div class="form-check brand-label">
                                                        <input {{ in_array($brand->id, $brandsArray) ? 'checked' : '' }}
                                                            class="form-check-input brand-label" type="checkbox"
                                                            name="brands[]" value="{{ $brand->id }}"
                                                            id="{{ $checkboxId }}" />


                                                        <label class="form-check-label brand-label"
                                                            for="{{ $checkboxId }}">
                                                            {{ $label }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseFour"
                                            aria-expanded="false" aria-controls="collapseFour">
                                            @if (session('app_language', 'en') == 'en')
                                                Customer Rating
                                            @else
                                                تقييم العملاء
                                            @endif
                                        </button>
                                    </h2>
                                    <div id="collapseFour" class="accordion-collapse collapse"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="type1" />
                                                <label class="form-check-label" for="type1">
                                                    @if (session('app_language', 'en') == 'en')
                                                        Customer Rating 1
                                                    @else
                                                        تقييم العملاء 1
                                                    @endif
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="type2" />
                                                <label class="form-check-label" for="type2">
                                                    @if (session('app_language', 'en') == 'en')
                                                        Customer Rating 2
                                                    @else
                                                        تقييم العملاء 2
                                                    @endif
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <style></style>
                        <div class="col-lg-9 col-md-8">
                            <hr />
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="d-lg-flex justify-content-lg-between mb-2">
                                        <div class="show-items-control">
                                            @if ($products->total() > 0)
                                                <div class="label">
                                                    @if (session('app_language', 'en') == 'en')
                                                        Showing
                                                    @else
                                                        عرض
                                                    @endif
                                                    {{ $products->firstItem() }}–{{ $products->lastItem() }}
                                                    @if (session('app_language', 'en') == 'en')
                                                        of
                                                    @else
                                                        ل
                                                    @endif
                                                    {{ $products->total() }}
                                                    @if (session('app_language', 'en') == 'en')
                                                        results
                                                    @else
                                                        نتائج
                                                    @endif
                                                </div>
                                            @else
                                                <div class="label">
                                                    @if (session('app_language', 'en') == 'en')
                                                        Showing 0
                                                    @else
                                                        عرض 0
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                        <select class="form-select" id="sort_by">
                                            <option value="" selected>
                                                @if (session('app_language', 'en') == 'en')
                                                    Default
                                                @else
                                                    تقصير
                                                @endif
                                            </option>
                                            <option value="price"
                                                {{ request()->get('sort_by') == 'price' ? 'selected' : '' }}>
                                                @if (session('app_language', 'en') == 'en')
                                                    Price
                                                @else
                                                    سعر
                                                @endif
                                            </option>
                                            <option value="popularity"
                                                {{ request()->get('sort_by') == 'popularity' ? 'selected' : '' }}>
                                                @if (session('app_language', 'en') == 'en')
                                                    Popularity
                                                @else
                                                    شعبية
                                                @endif
                                            </option>
                                            <option value="rating"
                                                {{ request()->get('sort_by') == 'rating' ? 'selected' : '' }}>
                                                @if (session('app_language', 'en') == 'en')
                                                    Rating
                                                @else
                                                    تصنيف
                                                @endif
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row d-flex justify-content-start g-3">
                                @if (count($products) > 0)
                                    @foreach ($products as $item)
                                        <div class="col-lg-4 col-md-4 col-12">
                                            <div class="card custom-item border-0">
                                                <div class="custom-img-item">
                                                    @if (!empty($item->after_discount))
                                                        <div class="ribbon">
                                                            <span>
                                                                @if (session('app_language', 'en') == 'en')
                                                                    BEST OFFER
                                                                @else
                                                                    أفضل عرض
                                                                @endif
                                                            </span>
                                                        </div>
                                                    @endif
                                                    @if ($item->images->isNotEmpty())
                                                        <a href="#" target="_blank">
                                                            <img src="{{ $item->images->first() ? asset('uploads/products/' . $item->images->first()->filename) : asset('website/dummy/dummy.jpg') }}"
                                                                alt="Product Image" class="img-fluid" width="80"
                                                                height="60">
                                                        </a>
                                                    @endif
                                                </div>
                                                <div class="overlay flowerlist">
                                                    <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="{{ $item->id }}"><i
                                                                    class="bi bi-suit-heart"></i></a>
                                                        </div>
                                                        <div class="eye-icon">
                                                            <a data-bs-toggle="modal"
                                                                data-bs-target="#product_detailsh_{{ $item->id }}">
                                                                <i class="bi bi-eye"></i></a>
                                                        </div>
                                                    </div>

                                                    <div class="select_button">
                                                        <a href="{{ route('website.listing.details', $item->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" style="line-height: 20px;">
                                                        @if (session('app_language', 'en') == 'en')
                                                            {{ $item->title_en ?? '' }}
                                                        @else
                                                            {{ $item->title_ar ?? '' }}
                                                        @endif
                                                    </h5>
                                                    {{-- <div class="stars text-center">
                                                        <i class="bi bi-star-fill"></i>
                                                        <i class="bi bi-star-fill"></i>
                                                        <i class="bi bi-star-fill"></i>
                                                        <i class="bi bi-star-fill"></i>
                                                        <i class="bi bi-star-fill"></i>
                                                    </div> --}}
                                                    <div class="stars text-center">
                                                        @php
                                                            $avgRating = $item->reviews->avg('rating') ?? 0;
                                                            $fullStars = floor($avgRating);
                                                            $hasHalfStar = $avgRating - $fullStars >= 0.5;
                                                            $emptyStars = 5 - $fullStars - ($hasHalfStar ? 1 : 0);
                                                        @endphp

                                                        @for ($i = 0; $i < $fullStars; $i++)
                                                            <i class="bi bi-star-fill" style="color: #00b4b3;"></i>
                                                        @endfor

                                                        @if ($hasHalfStar)
                                                            <i class="bi bi-star-half" style="color: #00b4b3;"></i>
                                                        @endif

                                                        @for ($i = 0; $i < $emptyStars; $i++)
                                                            <i class="bi bi-star" style="color: #00b4b3;"></i>
                                                        @endfor

                                                        {{-- <small class="text-muted ms-2">
                                                            ({{ $item->reviews->count() ?? 0 }})
                                                        </small> --}}
                                                    </div>
                                                    <span class="card-price text-muted">
                                                        {{ display_price($item->price) }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                    @foreach ($products as $item)
                                        <!-- Modal -->
                                        <div class="modal fade" id="product_detailsh_{{ $item->id }}" tabindex="-1"
                                            aria-labelledby="product_detailshLabel_{{ $item->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_{{ $item->id }}">
                                                            @if (session('app_language', 'en') == 'en')
                                                                {{ $item->title_en ?? '' }}
                                                            @else
                                                                {{ $item->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="mainImage3_{{ $item->id }}"
                                                                                        src="{{ isset($item->images->first()->filename) ? asset('uploads/products/' . $item->images->first()->filename) : '' }}"
                                                                                        class="main-img img-fluid mb-3 w-100"
                                                                                        alt="Main Image" />
                                                                                    <div
                                                                                        class="owl-carousel owl-theme thumb-carousel3_{{ $item->id }}">
                                                                                        @foreach ($item->images as $index => $image)
                                                                                            <div class="item">
                                                                                                <img src="{{ asset('uploads/products/' . $image->filename) }}"
                                                                                                    class="thumb-img {{ $index == 0 ? 'active' : '' }}"
                                                                                                    onclick="changeImage(this)"
                                                                                                    alt="{{ $item->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')
                                                                                            {!! $item->description_en !!}
                                                                                        @else
                                                                                            {!! $item->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')
                                                                                            {{ $item->title_en ?? '' }}
                                                                                        @else
                                                                                            {{ $item->title_ar ?? '' }}
                                                                                        @endif
                                                                                    </h3>
                                                                                    <a href="javascript:void(0)"
                                                                                        class="add-to-wishlist-btn"
                                                                                        data-id="{{ $item->id }}"><i
                                                                                            class="bi bi-suit-heart"></i></a>
                                                                                </div>
                                                                                <div class="price-heart">
                                                                                    <h4 class="actual-price">
                                                                                        {{ display_price($item->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_{{ $item->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_{{ $item->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_{{ $item->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_{{ $item->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>
                                                                                    <input type="file"
                                                                                        id="file_{{ $item->id }}"
                                                                                        class="form-control">
                                                                                </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_{{ $item->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="{{ $item->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="{{ $item->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
                                    @if ($products->hasPages())
                                        <div class="col-lg-12 d-flex justify-content-center mt-4 mb-4">
                                            <nav aria-label="Page navigation">
                                                <ul class="pagination">

                                                    {{-- Previous Page --}}
                                                    @if ($products->onFirstPage())
                                                        <li class="page-item disabled">
                                                            <span class="page-link"><i
                                                                    class="fa-solid fa-arrow-left"></i></span>
                                                        </li>
                                                    @else
                                                        <li class="page-item">
                                                            <a class="page-link"
                                                                href="{{ $products->previousPageUrl() }}">
                                                                <i class="fa-solid fa-arrow-left"></i>
                                                            </a>
                                                        </li>
                                                    @endif

                                                    {{-- Page Numbers --}}
                                                    @foreach ($products->getUrlRange(1, $products->lastPage()) as $page => $url)
                                                        <li
                                                            class="page-item {{ $page == $products->currentPage() ? 'active' : '' }}">
                                                            <a class="page-link"
                                                                href="{{ $url }}">{{ $page }}</a>
                                                        </li>
                                                    @endforeach

                                                    {{-- Next Page --}}
                                                    @if ($products->hasMorePages())
                                                        <li class="page-item">
                                                            <a class="page-link" href="{{ $products->nextPageUrl() }}">
                                                                <i class="fa-solid fa-arrow-right"></i>
                                                            </a>
                                                        </li>
                                                    @else
                                                        <li class="page-item disabled">
                                                            <span class="page-link"><i
                                                                    class="fa-solid fa-arrow-right"></i></span>
                                                        </li>
                                                    @endif
                                                </ul>
                                            </nav>
                                        </div>
                                    @endif
                                @else
                                    <h3 class="text-center">
                                        @if (session('app_language', 'en') == 'en')
                                            No Record Found
                                        @else
                                            لم يتم العثور على سجل
                                        @endif
                                    </h3>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <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 (isset($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 }}" /> --}}
                                                            <input class="form-check-input cart-checkboxcard"
                                                                type="checkbox" id="product-{{ $product->id }}"
                                                                data-id="{{ $product->id }}"
                                                                data-price="{{ $product->price ?? 'Free' }}" />
                                                        </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="footer-delivery">
        <div class="container-fluid fd-bg py-4 ">
            <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-lg-4 col-md-4 col-12">
                            <div
                                class="c-detail d-flex justify-content-lg-center justify-content-start align-items-center">
                                <img src="{{ asset('website/images/l1.svg') }}" alt=""
                                    class="img-fluid deliveryimg me-2" />
                                <h5 class="mt-3">
                                    @if (session('app_language', 'en') == 'en')
                                        Express Delivery
                                    @else
                                        التسليم السريع
                                    @endif
                                </h5>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-12">
                            <div
                                class="c-detail d-flex justify-content-lg-center justify-content-start align-items-center">
                                <img src="{{ asset('website/images/l3.svg') }}" alt=""
                                    class="img-fluid deliveryimg me-2" />
                                <h5 class="mt-3">
                                    @if (session('app_language', 'en') == 'en')
                                        No Address Hassle
                                    @else
                                        لا يوجد متاعب في العنوان
                                    @endif
                                </h5>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-12">
                            <div
                                class="c-detail d-flex justify-content-lg-center justify-content-start align-items-center">
                                <img src="{{ asset('website/images/l2.svg') }}" alt=""
                                    class="img-fluid deliveryimg me-2" />
                                <h5 class="mt-3">
                                    @if (session('app_language', 'en') == 'en')
                                        Premium Flowers & Gifts
                                    @else
                                        زهور وهدايا مميزة
                                    @endif
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@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', '.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");
        //         }
        //     });
        // });
        $(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");
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            // Clear all filters
            $(".clear-all").click(function(e) {
                e.preventDefault();
                window.location.href = '{{ url()->current() }}';
            });

            // Initialize price range slider
            $("#slider3-range").slider({
                range: true,
                min: 0,
                max: 1000,
                values: [
                    {{ request()->get('min_price', 0) }},
                    {{ request()->get('max_price', 50000) }}
                ],
                slide: function(event, ui) {
                    $("#min_price").val("$" + ui.values[0]);
                    $("#max_price").val("$" + ui.values[1]);
                },
                change: function(event, ui) {
                    apply_filters(); // call filter when slider changes
                }
            });

            $("#min_price").val("$" + $("#slider3-range").slider("values", 0));
            $("#max_price").val("$" + $("#slider3-range").slider("values", 1));

            // Checkbox filter triggers
            $(".brand-label, .category-label, .color-label").change(function() {
                apply_filters();
            });

            // Sorting dropdown filter trigger
            $("#sort_by").change(function() {
                apply_filters();
            });

            function apply_filters() {
                var brands = [];
                var categories = [];
                var colors = [];

                $(".brand-label:checked").each(function() {
                    brands.push($(this).val());
                });
                $(".category-label:checked").each(function() {
                    categories.push($(this).val());
                });
                $(".color-label:checked").each(function() {
                    colors.push($(this).val());
                });

                var minPrice = $("#slider3-range").slider("values", 0);
                var maxPrice = $("#slider3-range").slider("values", 1);
                var sortBy = $("#sort_by").val();

                var url = '{{ url()->current() }}?';
                var params = [];

                if (brands.length > 0) {
                    params.push('brand=' + brands.join(','));
                }
                if (categories.length > 0) {
                    params.push('category=' + categories.join(','));
                }
                if (colors.length > 0) {
                    params.push('color=' + colors.join(','));
                }

                params.push('min_price=' + minPrice);
                params.push('max_price=' + maxPrice);

                if (sortBy !== "") {
                    params.push('sort_by=' + sortBy);
                }

                window.location.href = url + params.join('&');
            }
        });
    </script>

    <script>
        $(document).ready(function() {
            @foreach ($products as $item)
                $(".thumb-carousel3_{{ $item->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-carousel3_{{ $item->id }} .thumb-img', function() {
                    let src = $(this).attr('src');
                    $('#mainImage3_{{ $item->id }}').attr('src', src);

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