@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-xl-10 col-lg-11 col-md-12 col-12">
                    <nav aria-label="breadcrumb" style="position: relative; z-index: 999;">
                        <ol class="breadcrumb mt-lg-3 pt-4 pt-lg-3">
                            <li class="breadcrumb-item"><a href="{{ route('website.home') }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Home
                                    @else
                                        بيت
                                    @endif
                                </a></li>
                            <li class="breadcrumb-item"><a href="{{ route('website.listing') }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Special Flowers
                                    @else
                                        زهور خاصة
                                    @endif
                                </a></li>
                            <li class="breadcrumb-item active">
                                <a href="#">
                                    @if (session('app_language', 'en') == 'en')
                                        {{ $product->title_en ?? '' }}
                                    @else
                                        {{ $product->title_ar ?? '' }}
                                    @endif
                                </a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>

    <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">
                                <img id="mainImage"
                                    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-carousel">
                                    @foreach ($product->images as $index => $image)
                                        <div class="item">
                                            <img src="{{ asset('uploads/products/' . $image->filename) }}"
                                                class="thumb-img {{ $index == 0 ? 'active' : '' }}"
                                                onclick="changeImage(this)"
                                                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 class="p-detail">
                                <h5 class="mt-3">
                                    @if (session('app_language', 'en') == 'en')
                                        clients reviews
                                    @else
                                        آراء العملاء
                                    @endif
                                </h5>
                                {{-- <div class="stars-review text-start mb-3">
                                    <span>{{ number_format($averageRating, 2) }}</span>
                                    @for ($i = 1; $i <= 5; $i++)
                                        @if ($i <= floor($averageRating))
                                            <i class="bi bi-star-fill"></i>
                                        @elseif ($i - $averageRating < 1)
                                            <i class="bi bi-star-half"></i>
                                        @else
                                            <i class="bi bi-star"></i>
                                        @endif
                                    @endfor
                                </div> --}}



                                {{-- <div class="stars-review text-start mb-3">
                                    @php
                                        // Ensure $averageRating exists and is numeric, default to 0 if not
                                        $averageRating =
                                            isset($averageRating) && is_numeric($averageRating)
                                                ? (float) $averageRating
                                                : 0;
                                        // Round to nearest 0.5 for more accurate star display
                                        $roundedRating = round($averageRating * 2) / 2;
                                        // Calculate full and half stars
                                        $fullStars = floor($roundedRating);
                                        $hasHalfStar = $roundedRating - $fullStars > 0;
                                    @endphp

                                    <span class="rating-number">{{ number_format($averageRating, 1) }}</span>

                                    @for ($i = 1; $i <= 5; $i++)
                                        @if ($i <= $fullStars)
                                            <i class="bi bi-star-fill" style="color: #00b4b3;"></i>
                                        @elseif ($hasHalfStar && $i == $fullStars + 1)
                                            <i class="bi bi-star-half" style="color: #00b4b3;"></i>
                                        @else
                                            <i class="bi bi-star" style="color: #00b4b3;"></i>
                                        @endif
                                    @endfor
                                </div> --}}

                                {{-- @foreach ($reviews->take(3) as $review)
                                    <div class="review-card">
                                        <div class="d-flex justify-content-start align-items-center mt-3">
                                            <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>
                                        <p>{{ $review->description }}</p>
                                    </div>
                                @endforeach --}}
                                @php
                                    // Ensure the average rating exists
                                    $averageRating = isset($reviews->reviews_avg_rating)
                                        ? (float) $reviews->reviews_avg_rating
                                        : 0;

                                    // Round to nearest 0.5
                                    $roundedRating = round($averageRating * 2) / 2;
                                    $fullStars = floor($roundedRating);
                                    $hasHalfStar = $roundedRating - $fullStars > 0;

                                    // Limit to 3 reviews
                                    $latestReviews = $reviews->reviews->take(3);
                                @endphp

                                {{-- Average Rating Stars --}}
                                <div class="stars-review text-start mb-3">
                                    <span class="rating-number">{{ number_format($averageRating, 1) }}</span>
                                    @for ($i = 1; $i <= 5; $i++)
                                        @if ($i <= $fullStars)
                                            <i class="bi bi-star-fill" style="color: #00b4b3;"></i>
                                        @elseif ($hasHalfStar && $i == $fullStars + 1)
                                            <i class="bi bi-star-half" style="color: #00b4b3;"></i>
                                        @else
                                            <i class="bi bi-star" style="color: #00b4b3;"></i>
                                        @endif
                                    @endfor
                                </div>

                                {{-- Approved Reviews --}}
                                @foreach ($latestReviews as $review)
                                    <div class="review-card">
                                        <div class="d-flex justify-content-start align-items-center mt-3">
                                            <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' }}"
                                                    style="color: #00b4b3;"></i>
                                            @endfor
                                        </div>
                                        <p>{{ $review->description }}</p>
                                    </div>
                                @endforeach

                            </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" />
                                    <p class="text-danger"></p>
                                </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">
                                    <p class="text-danger"></p>
                                </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>
                                <p class="text-danger"></p>
                            </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 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 a photo or music link.
                                    @else
                                         هنا يمكنك إضافة رابط صورة أو موسيقى.
                                    @endif
                                </label>
                                <p class="text-muted mb-1">
                                    @if (session('app_language', 'en') == 'en')
                                        You can add your favorite image or song.
                                    @else
                                        يمكنك إضافة صورتك أو أغنيتك المفضلة.
                                    @endif
                                </p>
                                <input type="file" id="file_{{ $product->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"
                                        id="quantity_{{ $product->id }}" min="1" value="1" />
                                </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>
                                <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>
                            <hr class="my-4" />
                            <h5 class="mt-1 mb-3">
                                <a class="customer_loy" href="">
                                    @if (session('app_language', 'en') == 'en')
                                        Customer Loyalty Plans
                                    @else
                                        خطط ولاء العملاء
                                    @endif
                                </a>
                            </h5>
                            <ul class="mb-3 mb-lg-0">
                                <li>
                                    @if (session('app_language', 'en') == 'en')
                                        You will earn 10 points.
                                    @else
                                        سوف تحصل على 10 نقاط.
                                    @endif
                                </li>
                                {{-- <li>
                                    @if (session('app_language', 'en') == 'en')
                                        To redeem your points? You need to <a href="{{ route('website.login') }}">Sign
                                            Up</a>
                                    @else
                                        لاستبدال نقاطك؟ عليك <a href="{{ route('website.login') }}">اشتراك</a>
                                    @endif
                                </li> --}}
                                <li>
                                    @guest
                                        @if (session('app_language', 'en') == 'en')
                                            To redeem your points? You need to <a href="{{ route('website.login') }}">Sign
                                                Up</a>
                                        @else
                                            لاستبدال نقاطك؟ عليك <a href="{{ route('website.login') }}">اشتراك</a>
                                        @endif
                                    @endguest
                                </li>
                            </ul>
                            <hr class="my-lg-4 my-3" />

                            <div class="social-icons d-flex justify-content-start align-items-center">

                                <h5 class="mt-2 {{ session('app_language', 'en') == 'ar' ? 'ps-3' : 'pe-3' }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Share
                                    @else
                                        يشارك
                                    @endif
                                </h5>
                                @php
                                    $productUrl = url('/product/' . $product->slug);
                                    $productTitle =
                                        session('app_language', 'en') == 'en' ? $product->title_en : $product->title_ar;
                                @endphp


                                <div class="social-share">
                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($productUrl) }}"
                                        target="_blank" class="me-2">
                                        <i class="fab fa-facebook"></i>
                                    </a>

                                    <a href="https://twitter.com/intent/tweet?url={{ urlencode($productUrl) }}&text={{ urlencode($productTitle) }}"
                                        target="_blank" class="me-2">
                                        <i class="fab fa-twitter"></i>
                                    </a>

                                    <a href="https://pinterest.com/pin/create/button/?url={{ urlencode($productUrl) }}&description={{ urlencode($productTitle) }}"
                                        target="_blank">
                                        <i class="fab fa-pinterest"></i>
                                    </a>
                                </div>

                            </div>


                            <div class="small-banners">
                                @if (!empty($preference->banner_1))
                                    <img src="{{ asset('uploads/preferences/' . $preference->banner_1) }}" alt="Banner 1"
                                        class="mt-3 b1-img w-100 img-fluid">
                                @endif

                                @if (!empty($preference->banner_2))
                                    <img src="{{ asset('uploads/preferences/' . $preference->banner_2) }}" alt="Banner 2"
                                        class="mt-3 b2-img w-100 img-fluid">
                                @endif
                            </div>


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

    <section id="mothers">
        <div class="container-fluid py-lg-2 py-xxl-5 mb-lg-2 mb-md-4 mb-3 fixedwidth">
            <div class="row justify-content-center align-item-center d-flex">
                <div class="col-lg-11 border-top">
                    <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')
                                Recommended products
                            @else
                                المنتجات الموصى بها
                            @endif
                        </h3>
                        <p class="title-text">
                            @if (session('app_language', 'en') == 'en')
                                The most beautiful bouquets & gifts for occasions!
                            @else
                                أجمل الباقات والهدايا للمناسبات!
                            @endif
                        </p>
                    </div>
                    <div class="owl-carousel owl-theme slider" id="carousel2" style="direction: ltr !important;">
                        @foreach ($relatedProducts as $related)
                            <div class="item" id="h-s">
                                <div class="card custom-card border-0">
                                    <div class="custom-img">
                                        @if (!empty($related->after_discount))
                                            <div class="ribbon">
                                                <span>
                                                    @if (session('app_language', 'en') == 'en')
                                                        BEST OFFER
                                                    @else
                                                        أفضل عرض
                                                    @endif
                                                </span>
                                            </div>
                                        @endif
                                        <img src="{{ asset('uploads/products/' . $related->images->first()->filename) }}"
                                            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></a>
                                            </div>
                                            <div class="eye-icon">
                                                <a data-bs-toggle="modal"
                                                    data-bs-target="#product_detailsh_{{ $related->id }}">
                                                    <i class="bi bi-eye"></i></a>
                                            </div>
                                        </div>
                                        <div class="select_button">
                                            <a href="{{ route('website.listing.details', $related->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')
                                                {{ $related->title_en ?? '' }}
                                            @else
                                                {{ $related->title_ar ?? '' }}
                                            @endif
                                        </h5>
                                        <span class="card-price text-muted">{{ display_price($related->price) }}</span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    @if (count($similarProducts) > 0)
        <div class="modal fade gift-modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <h1 class="modal-title {{ session('app_language', 'en') == 'ar' ? 'me-3' : 'ms-3' }}"
                            id="exampleModalLabel">
                            @if (session('app_language', 'en') == 'en')
                                Related Products
                            @else
                                المنتجات ذات الصلة
                            @endif
                        </h1>
                        <button type="button" class="btn-close hmodalbtn" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="accordion" id="accordionExample">
                            @if (count($similarProducts) > 0)
                                @foreach ($similarProducts as $categoryTitle => $productss)
                                    <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{{ \Illuminate\Support\Str::slug($categoryTitle) }}"
                                                aria-expanded="false"
                                                aria-controls="collapse{{ \Illuminate\Support\Str::slug($categoryTitle) }}">
                                                {{ $categoryTitle }}
                                            </button>
                                        </h2>
                                        <div id="collapse{{ \Illuminate\Support\Str::slug($categoryTitle) }}"
                                            class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                                @foreach ($productss as $product)
                                                    <div class="row d-flex justify-content-between pb-2 my-2">
                                                        <div class="col-12">
                                                            <div class="row align-items-start">
                                                                <div class="col-lg-2 col-md-2 col-2">
                                                                    @if (!empty($product['images']))
                                                                        <img src="{{ asset('uploads/products/' . ($product['images'][0]['filename'] ?? 'default.jpg')) }}"
                                                                            alt="{{ $product['title_en'] }}"
                                                                            class="img-fluid {{ session('app_language', 'en') == 'ar' ? 'ms-3' : 'me-3' }} w-100" />
                                                                    @endif
                                                                </div>

                                                                <div class="col-lg-5 col-md-5 col-5">
                                                                    <div class="mb-1 pt-lg-3 pt-md-2">
                                                                        <h5 class="title mb-1">
                                                                            @if (session('app_language', 'en') == 'en')
                                                                                {{ $product['title_en'] ?? '' }}
                                                                            @else
                                                                                {{ $product['title_ar'] ?? '' }}
                                                                            @endif
                                                                        </h5>
                                                                    </div>
                                                                </div>

                                                                <div class="col-lg-3 col-md-3 col-3">
                                                                    <div class="btn-price my-4 text-center">
                                                                        <span>{{ display_price($product['price']) ?? 'Free' }}</span>
                                                                    </div>
                                                                </div>

                                                                <div
                                                                    class="col-lg-2 col-md-2 col-2 d-flex flex-column justify-content-center align-items-end">
                                                                    <div class="view-more fs-sm">
                                                                        <a
                                                                            href="{{ route('website.listing.details', $product['slug']) }}">
                                                                            View More
                                                                        </a>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <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>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <div class="modal-footer border-0">
                            @if (count($similarProducts) > 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>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @foreach ($relatedProducts 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="mainImage3_{{ $product->id }}"
                                                        src="{{ isset($product->images->first()->filename) ? 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-carousel3_{{ $product->id }}">
                                                        @foreach ($product->images as $index => $image)
                                                            <div class="item">
                                                                <img src="{{ asset('uploads/products/' . $image->filename) }}"
                                                                    class="thumb-img {{ $index == 0 ? 'active' : '' }}"
                                                                    onclick="changeImage(this)"
                                                                    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 /> --}}
                                                    {{-- </div> --}}
                                                </div>
                                                <input type="file" id="file_{{ $product->id }}"
                                                    class="form-control mb-3" />
                                                <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> --}}
                                                            <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="#">
                                                                @if (session('app_language', 'en') == 'en')
                                                                    Buy Now
                                                                @else
                                                                    اشتري الآن
                                                                @endif
                                                            </a> --}}
                                                            <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
    <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 {{ session('app_language', 'en') == 'ar' ? 'ms-2' : '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 {{ session('app_language', 'en') == 'ar' ? 'ms-2' : '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 {{ session('app_language', 'en') == 'ar' ? 'ms-2' : '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>
    <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">
                                                                <span>{{ display_price($product->price) ?? 'Free' }}</span>
                                                            </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 }}"
                                                                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>

@endsection

@section('scriptJs')
    <script type="text/javascript">
        $(document).on('click', '.add-to-cart-btn', function() {
            var id = $(this).data('id');

            // Get input values
            var deliveryDate = $('#delivery_date_' + id).val();
            if (deliveryDate == '') {
                // Show error message
                $('#delivery_date_' + id).next('p.text-danger')
                    .text(
                        "{{ session('app_language', 'en') == 'en' ? 'Please select a delivery date' : 'الرجاء اختيار تاريخ التسليم' }}"
                    )
                    .show();

                // Optional: Add invalid class to input
                $('#delivery_date_' + id).addClass('is-invalid');
                return false;
                // Focus on the date field
            } else {
                // Hide error message if date is selected
                $('#delivery_date_' + id).next('p.text-danger').hide();

                // Remove invalid class
                $('#delivery_date_' + id).removeClass('is-invalid');
            }
            var deliveryTime = $('#delivery_time_' + id).val();
            if (!deliveryTime) {
                // Show error message
                $('#delivery_time_' + id).next('p.text-danger')
                    .text(
                        "{{ session('app_language', 'en') == 'en' ? 'Please select a delivery time' : 'الرجاء اختيار وقت التسليم' }}"
                    )
                    .show();
                // Add invalid class to input
                $('#delivery_time_' + id).addClass('is-invalid');
                // Focus on the time field
                $('#delivery_time_' + id).focus();
                // Prevent form submission or further action
                return false;
            } else {
                // Hide error message if time is selected
                $('#delivery_time_' + id).next('p.text-danger').hide();
                // Remove invalid class
                $('#delivery_time_' + id).removeClass('is-invalid');
            }
            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 a file is selected and append it
            if (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();
                        }, 1000);
                    } else {
                        let errors = response['errors'];
                        $("button[type=submit]").prop('disabled', false);
                        $(".error").removeClass('invalid-feedback').html('');
                        $("input, select").removeClass('is-invalid');
                        $.each(errors, function(key, value) {
                            $(`#${key}`).addClass('is-invalid')
                                .siblings('p')
                                .addClass('invalid-feedback')
                                .html(value);
                        });
                        if (response.errors.amount) {
                            $('#selected_amount_error').text(response.errors.amount[0]).show();
                        } else {
                            $('#selected_amount_error').hide();
                        }
                        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) {
            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");
                        let cartCountEl = document.getElementById('cart-count');
                        if (cartCountEl) {
                            let currentCount = parseInt(cartCountEl.innerText);
                            cartCountEl.innerText = currentCount + 1;
                        }
                        // 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 ($relatedProducts as $product)
                $(".thumb-carousel7_{{ $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-carousel7_{{ $product->id }} .thumb-img', function() {
                    let src = $(this).attr('src');
                    $('#mainImage2_{{ $product->id }}').attr('src', src);

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