@extends('front.include.app')

@section('content')
    <!-- jQuery -->
    <style>
        .review-stars {
            list-style: none;
            padding: 0;
            display: flex;
            gap: 5px;
        }
        .review-stars li {
            cursor: pointer;
        }
        .review-stars i {
            font-size: 24px;
            color: #ccc;
            transition: color 0.2s;
        }
        .review-stars i.fas {
            color: gold;
        }
    </style>
    <style>
        /* Container to hold the zoom effect */
        .zoom-container {
            position: relative;
            overflow: hidden;
            width: 100%;
            /* Adjust as needed */
            /*max-width: 500px; !* Limit max-width for better results *!*/
            cursor: zoom-in;
        }

        /* Image inside the zoom-container */
        .zoom-container img {
            width: 100%;
            transition: transform 0.3s ease;
            /* Smooth zoom transition */
        }

        /* Zoom effect on hover */
        .zoom-container:hover img {
            transform: scale(1.5);
            /* Scale the image on hover */
        }

        button.plus {
            background-color: #F7F6FB;
            color: black;
            border: none !important;
            cursor: pointer;
            padding: 8px 14px;
            font-size: 18px;
            border-radius: 4px;
            transition: background 0.3s;
        }

        button.plus:focus {
            outline: none;
            border: none !important;
            box-shadow: none;
        }


        button.plus:disabled {
            color: #888 !important;
            cursor: not-allowed !important;
            opacity: 0.7;
        }
    </style>

    <div class="innerBan">
        <img src="{{ asset('front/images/innerbnr1.png') }}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2> {{ isset($product) && $product->slug ? $product->product_name : 'Product Details' }} </h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="Proreview">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="productNav">

                        <div class="swiper mySwiper2">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="zoom-container">
                                        <img class="main-product-image" src="{{ $product->productImage('product_image') }}"
                                            alt="Main Product Image" />
                                    </div>
                                </div>

                                @foreach ($product->variations as $variationImg)
                                    @if ($variationImg->productVariationImage()->first())
                                        <div class="swiper-slide">
                                            <div class="zoom-container">
                                                <img src="{{ $variationImg->productVariationImage()->first()->getUrl() }}"
                                                    alt="variation_image" />
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                                @foreach ($product->productGalleryImages() as $file)
                                    <div class="swiper-slide">
                                        <div class="zoom-container">
                                            <img class="main-product-image" src="{{ $file->getUrl() }}"
                                                alt="variation_image" />
                                        </div>
                                    </div>
                                @endforeach

                            </div>
                        </div>

                        <div thumbsSlider="" class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="{{ $product->productImage('product_image') }}" alt="Main Product Image" />
                                </div>

                                @foreach ($product->variations as $variationImg)
                                    @if ($variationImg->productVariationImage()->first())
                                        <div class="swiper-slide">
                                            <img src="{{ $variationImg->productVariationImage()->first()->getUrl() }}"
                                                alt="variation_image" />
                                        </div>
                                    @endif
                                @endforeach
                                @foreach ($product->productGalleryImages() as $file)
                                    <div class="swiper-slide">
                                        <img src="{{ $file->getUrl() }}" alt="Product Image" />
                                    </div>
                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5 productSIDE">
                    <div class="prodtl-txt">
                        <h2>{{ $product->product_name ?? '' }}</h2>
                        <div class="rating-box">
                            <div class="rating-container">
                                @php
                                    $avg = $averageRating ?? 0;
                                @endphp
                                @for ($i = 5; $i >= 1; $i--)
                                    <label for="star-{{ $i }}" style="color: {{ $avg >= $i ? '#f89c1e' : '#ccc' }};">★</label>
                                @endfor
                            </div>
                            <span>({{ $totalReviewsCount ?? 0 }})</span>
                        </div>

                        <ul class="stckst">
                            <li><span>Price:</span>CAD<span id="product_price"> ${{ $product->price ?? '' }}</span></li>
                        </ul>
                        <div class="pdesc">
                            {!! $product->description ?? '' !!}
                        </div>

                       <ul class="stckst flex-column justify-content-start align-items-start">

    <li>
        <span>Status:</span>
        @if($product->variations->isEmpty())
            {{ $product->stock > 0 ? 'In Stock' : 'Sold Out' }}
        @else
            @php
                // $selectedVariationId should be set from controller or JS (hidden input)
                $selectedVariationId = old('product_variation_id') ?? null;
                $selectedVariation = $selectedVariationId
                    ? $product->variations->where('id', $selectedVariationId)->first()
                    : null;
            @endphp
            @if($selectedVariation)
                {{ $selectedVariation->quantity > 0 ? 'In Stock' : 'Sold Out' }}
            @else
                {{ $product->variations->every(fn($variation) => $variation->quantity <= 0) ? 'Sold Out' : 'In Stock' }}
            @endif
        @endif
    </li>
</ul>

                        @php
                            $firstTimeDiscount = $product->first_time_discount ?? 0;
                            $repeatDiscount = $product->repeat_order_discount ?? 0;
                        @endphp

                        @if (Auth::check())
                            @php
                                $userHasPurchased = \App\Models\OrderItem::whereHas('order', function ($q) {
                                    $q->where('user_id', Auth::id());
                                })
                                    ->where('product_id', $product->id)
                                    ->exists();
                            @endphp

                            @if (!$userHasPurchased && $firstTimeDiscount > 0)
                                <p class="discount-label">
                                    {{ $firstTimeDiscount }} %
                                    Take a picture with your Upsence product and email at info@upsence.com and get exclusive
                                    10% dicount on your next order</p>
                            @elseif($userHasPurchased && $repeatDiscount > 0)
                                <p class="discount-label">🔁 {{ $repeatDiscount }}% Returning Customer Discount!</p>
                            @endif
                        @else
                            @if ($firstTimeDiscount > 0)
                                <p class="discount-label">
                                    Take a picture with your Upsence product and email at info@upsence.com and get exclusive
                                    10% dicount on your next order
                                </p>
                            @endif
                        @endif
                        <form action="{{ route('admin.add.cart', $product->id) }}" method="GET" class="add-to-cart-form">

                            <div class="product-variations mt-3">

                                <div>
                                    @if ($hasSize && $sizes->isNotEmpty())
                                        <label>Select Size</label>
                                        <select id="size-select"class="form-control" name="size_id">
                                            <option value="">-- Select Size --</option>
                                            @foreach ($sizes as $size)
                                                <option value="{{ $size['size_id'] }}">{{ $size['size_name'] }}</option>
                                            @endforeach
                                        </select>

                                        <div id="color-dropdown" style="display: none;">
                                            <label class="mt-2">Select Color</label>
                                            <select id="color-select"class="form-control" name="colour_id1"></select>
                                        </div>
                                    @elseif($colors->isNotEmpty())
                                        <label>Select Color</label>
                                        <select id="direct-color-select" class="form-control" name="colour_id1">
                                            <option value="">-- Select Color --</option>
                                            @foreach ($colors as $color)
                                                <option value="{{ $color['color_id'] }}">{{ $color['color_name'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                    @endif

                                </div>


                                <input type="button" class="btn btn-dark mb-3  mt-3 clear_btn" value="Clear">

                                @if ($product->stock >= 1 || $product->variations->sum('quantity') > 0)
                                    <div class="quantitySec">
                                        <h4>Quantity</h4>
                                        <ul>
                                            <li>
                                                <div class="number">
                                                    <span id="minus" class="minus">-</span>
                                                    <input type="text" id="user_type_quantity" name="quantity"
                                                        value="1" readonly>
                                                    <button id="plus" class="plus " type="button">+</button>

                                                </div>
                                            </li>
                                        </ul>
                                        @php
                                        @endphp
                                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                                        <input type="hidden" id="product_quantity" value="{{ $product->stock }}">
                                        <input type="hidden" id="variation_quantity" value="0">
                                        <input type="hidden" name="product_variation_id" class="product_variation_id">
                                        <div class="cardbutton">
                                            <button type="submit" class="themeBtn">Add To Cart</button>
                                            @if ($product->category_id == $selected_category?->id)
                                                <button class="trigger">SIZE GUIDE</button>
                                            @endif
                                        </div>

                                    </div>
                                    <div id="error-message" style="color: red; display: none;">Sorry, you cannot add
                                        more than the available stock.
                                    </div>
                                    <div id="error-message1" style="color: red; display: none;">Sorry, you cannot
                                        quantity
                                        less than 1.
                                    </div>
                                @endif


                            </div>


                        </form>

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

        </div>
    </section>
    <section class="product-info">
        <div class="container">
            <div class="row justify-content-center">
                <div class="w-100">
                    <div class="product-info__tabs">
                        <ul class="nav nav-pills mb-4" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pills-description-tab" data-toggle="pill"
                                   href="#pills-description" role="tab" aria-controls="pills-description"
                                   aria-selected="true">Description</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-review-tab" data-toggle="pill" href="#pills-review"
                                   role="tab" aria-controls="pills-review" aria-selected="false">Review</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-description" role="tabpanel"
                                 aria-labelledby="pills-description-tab">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="product__descontent">
                                            <h4>Description</h4>
                                            <p>{!! $product->description ?? 'No description available.' !!}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-review" role="tabpanel" aria-labelledby="pills-review-tab">
                                <div class="row">
                                    <div class="col-12">
                                        <section class="review-second mt-4">
                                            <div class="container">
                                                @auth
                                                    <div class="review-form-container mb-5">
                                                        <h4>Write a Review</h4>
                                                        <form class="productreviewform" id="review-form" method="POST" action="{{ route('reviews.store', $product->id) }}">
                                                            @csrf
                                                            <div class="detail__review">
                                                                <ul class="review-stars d-flex flex-row p-0 mb-2" id="star-rating">
                                                                    @for ($i = 1; $i <= 5; $i++)
                                                                        <li data-value="{{ $i }}">
                                                                            <a href="javascript:void(0)"><i class="far fa-star"></i></a>
                                                                        </li>
                                                                    @endfor
                                                                </ul>
                                                                <input type="hidden" name="rating" id="rating" value="0">
                                                            </div>
                                                            @php
                                                                $review = App\Models\Review::query()
                                                                    ->where('product_id', $product->id)
                                                                    ->where('user_id', Auth::id())
                                                                    ->first();
                                                            @endphp

{{--                                                            @if (!$review)--}}
                                                                <textarea rows="6" placeholder="Your review..." name="review" class="form-control" required></textarea>
{{--                                                            @endif--}}

                                                            @if ($review)
                                                                <input type="hidden" name="review_id" value="{{ $review->id }}">
                                                            @endif
                                                            <button type="submit" class="themeBtn border-0 mt-3">Submit Review</button>
                                                        </form>
                                                    </div>
                                                @endauth

                                                    <div class="reviews-list">
                                                        <h4>Customer Reviews</h4>
                                                    @php
                                                        $hasRealReviews = isset($productTestimonials) && $productTestimonials->count() > 0;
                                                        $hasFakeReviews = isset($fakeReviews) && $fakeReviews->count() > 0;
                                                        $hasAnyReviews = $hasRealReviews || $hasFakeReviews;
                                                    @endphp

                                                    @if($hasAnyReviews)
                                                            @if($hasRealReviews)
                                                                @foreach($productTestimonials as $testimonial)
                                                                    <div class="user-reviews mb-4 p-3 border rounded">
                                                                        <div class="sub-user-cntnt">
                                                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                                                <h5 class="mb-0 font-weight-bold">{{ $testimonial->user->first_name ?? 'Anonymous' }}</h5>
                                                                                <small class="text-muted" title="{{ $testimonial->created_at->format('M j, Y \a\t g:i a') }}">
                                                                                    {{ formatReviewTime($testimonial->created_at) }}
                                                                                </small>
                                                                            </div>
                                                                            <p class="mb-2">{{ $testimonial->review }}</p>
                                                                            <div class="review-stars">
                                                                                @for ($i = 1; $i <= $testimonial->rating; $i++)
                                                                                    <i class="fas fa-star text-warning"></i>
                                                                                @endfor
                                                                                @for ($i = $testimonial->rating + 1; $i <= 5; $i++)
                                                                                    <i class="far fa-star text-warning"></i>
                                                                                @endfor
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            @endif

                                                            @if($hasFakeReviews)
                                                                @foreach($fakeReviews as $fakeReview)
                                                                    <div class="user-reviews mb-4 p-3 border rounded">
                                                                        <div class="sub-user-cntnt">
                                                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                                                <h5 class="mb-0 font-weight-bold">{{ $fakeReview->username }}</h5>
                                                                                <small class="text-muted" title="{{ $fakeReview->created_at->format('M j, Y \a\t g:i a') }}">
                                                                                    {{ formatReviewTime($fakeReview->created_at) }}
                                                                                </small>
                                                                            </div>
                                                                            <p class="mb-2">{{ $fakeReview->review }}</p>
                                                                            <div class="review-stars">
                                                                                @for ($i = 1; $i <= $fakeReview->stars; $i++)
                                                                                    <i class="fas fa-star text-warning"></i>
                                                                                @endfor
                                                                                @for ($i = $fakeReview->stars + 1; $i <= 5; $i++)
                                                                                    <i class="far fa-star text-warning"></i>
                                                                                @endfor
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            @endif
                                                        @else
                                                            <div class="alert alert-info">No reviews available yet. Be the first to review!</div>
                                                        @endif
                                                    </div>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <div class="custom-modal">
        <div class="custom-modal-content">
            <span class="close-button">×</span>
            <div class="col-md-12 text-center mt-5">
                <h6>UPSENCE - Size Guide </h6>
                <h3>HOW TO MEASURE MY FINGER?</h3>
            </div>
            <div class="col-md-12 text-center my-5">
                <img src="{{ $product->productImage('product_size_hand_image') ?: asset('front/images/No-Image.png') }}">
            </div>
            <div class="col-md-12 text-center">
                <img src="{{ $product->productImage('product_size_table_image') ?: asset('front/images/No-Image.png') }}">
            </div>
        </div>
    </div>
@endsection


@push('custom-scripts')
    <script>
        $(document).ready(function() {
            let $form = $('.add-to-cart-form');

            $form.on('submit', function(e) {
                let error = false;


                if ($('#size-select').is(':visible') && $('#size-select').val() === '') {
                    error = true;
                    $('#size-select').focus();
                }


                if ($('#color-select').is(':visible') && $('#color-select').val() === '') {
                    error = true;
                    $('#color-select').focus();
                }


                if ($('#direct-color-select').is(':visible') && $('#direct-color-select').val() === '') {
                    error = true;
                    $('#direct-color-select').focus();
                }

                if (error) {
                    toastr.error('Please select all required options before adding to cart.');
                    e.preventDefault();
                    return false;
                }
            });
            var swiper = new Swiper(".mySwiper", {
                loop: true,
                spaceBetween: 10,
                slidesPerView: 4,
                freeMode: true,
                watchSlidesProgress: true,
            });
            var swiper2 = new Swiper(".mySwiper2", {
                loop: true,
                spaceBetween: 10,
                thumbs: {
                    swiper: swiper,
                },
                navigation: {
                    nextEl: ".product-next",
                    prevEl: ".product-prev",
                },
            });
            swiper.on('slideChange', function() {
                const activeSlide = swiper.slides[swiper.activeIndex];
                const imageUrl = $(activeSlide).find('img').attr('src');
                updateProductImage(imageUrl);
            });

            const $minusButton = $('#minus');
            const $plusButton = $('#plus');
            const $quantityInput = $('#user_type_quantity');
            const $errorMessage = $('#error-message');
            const $colorSelect = $('#color-select');
            const $sizeSelect = $('#size-select');
            let stock = parseInt($('#product_quantity').val());

            const defaultImage = $('.main-product-image').data('default');
            const productId = '{{ $product->id }}';

            function updateStock() {
                stock = parseInt($('#product_quantity').val());

                // From color option
                if ($colorSelect.length && $colorSelect.val() !== '') {
                    stock = parseInt($colorSelect.find('option:selected').data('qty')) || stock;
                }
                return stock;
            }

            function updateQuantity() {
                let currentQuantity = parseInt($quantityInput.val());
                stock = updateStock();

                if (currentQuantity >= stock) {
                    $plusButton.prop('disabled', true);
                    $errorMessage.show();
                } else {
                    $plusButton.prop('disabled', false);
                    $errorMessage.hide();
                }
            }

            $plusButton.on('click', function() {
                let $input = $('#user_type_quantity');
                let currentQuantity = parseInt($input.val());
                let variationStock = parseInt($('#variation_quantity').val()) || 0;
                let defaultStock = parseInt($('#product_quantity').val()) || 0;
                let productVariationId = $('.product_variation_id').val();

                let stock = productVariationId ? variationStock : defaultStock;

                currentQuantity++;
                $input.val(currentQuantity);

                if (currentQuantity >= stock) {
                    $('.plus').prop('disabled', true);
                    // $('.themeBtn').prop('disabled', true);
                    $('#error-message').show();
                } else {
                    $('.new-plus').prop('disabled', false);
                    $('.themeBtn').prop('disabled', false);
                    $('#error-message').hide();
                }
            });

            $minusButton.on('click', function() {
                let currentQuantity = parseInt($quantityInput.val());
                if (currentQuantity > 1) {
                    $quantityInput.val(currentQuantity - 1);
                    $('.themeBtn').prop('disabled', false);
                    updateQuantity();
                    $errorMessage.hide();
                }
            });

            // Reset on color or size change
            $colorSelect.on('change', function() {
                $('#user_type_quantity').val(1);
                $errorMessage.hide();
            });

            $sizeSelect.on('change', function() {
                $('#user_type_quantity').val(1);
            });

            // When size is selected, load colors dynamically
            $sizeSelect.on('change', function() {
                let sizeId = $(this).val();
                $('#error-message').hide();
                $plusButton.prop('disabled', false);
                if (sizeId !== '') {
                    let url =
                        "{{ route('product.colors', ['productId' => '__PRODUCT_ID__', 'sizeId' => '__SIZE_ID__']) }}"
                        .replace('__PRODUCT_ID__', productId)
                        .replace('__SIZE_ID__', sizeId);

                    $.ajax({
                        url: url,
                        method: 'GET',
                        success: function(response) {
                            if (response.colors.length > 0) {
                                $colorSelect.empty().append(
                                    '<option value="">-- Select Color --</option>');
                                response.colors.forEach(color => {
                                    $colorSelect.append(
                                        `<option value="${color.color_id}">${color.color_name}</option>`
                                    );
                                });
                                $('#color-dropdown').show();
                            } else {
                                $('#color-dropdown').hide();
                            }
                        }
                    });
                } else {
                    $('#color-dropdown').hide();
                }
            });

            $(document).on('change', '#color-select', function() {
                let colorId = $(this).val();
                $plusButton.prop('disabled', false);


                if (colorId !== '') {
                    let url =
                        "{{ route('product.variation', ['productId' => '__PRODUCT_ID__', 'colorId' => '__COLOR_ID__']) }}"
                        .replace('__PRODUCT_ID__', productId)
                        .replace('__COLOR_ID__', colorId);

                    $.ajax({
                        url: url,
                        method: 'GET',
                        success: function(response) {
                            if (response && response.price !== undefined) {
                                if (parseInt(response.quantity) === 0) {
                                    toastr.error('This Variation Stock Not Available');
                                    $('#product_price').text("$ " + response.price);
                                    $('#user_type_quantity').val(0);
                                    $('#product_quantity').val(0);
                                    $('#variation_quantity').val(0);
                                    $('.product_variation_id').val('');
                                    resetToDefaultImage();
                                    return;
                                }

                                $('#product_price').text("$ " + response.price);
                                $('#user_type_quantity').val(1); // reset to 1
                                $('#variation_quantity').val(response
                                    .quantity); // ✅ set variation quantity here
                                $('.product_variation_id').val(response.variation_id);

                                if (response.variation_image) {
                                    updateProductImage(response.variation_image);
                                } else {
                                    resetToDefaultImage();
                                }

                            } else {
                                console.warn("Invalid response:", response);
                            }
                        }
                    });
                }
            });

            $(document).on('change', '#direct-color-select', function() {
                const colorId = $(this).val();
                $plusButton.prop('disabled', false);
                $errorMessage.hide();
                const productId = $('input[name="product_id"]').val();

                if (colorId !== '' && productId !== '') {
                    const url =
                        "{{ route('product.variation', ['productId' => '__PRODUCT_ID__', 'colorId' => '__COLOR_ID__']) }}"
                        .replace('__PRODUCT_ID__', productId)
                        .replace('__COLOR_ID__', colorId);

                    $.ajax({
                        url: url,
                        method: 'GET',
                        success: function(response) {
                            if (response && response.price !== undefined) {
                                if (parseInt(response.quantity) === 0) {
                                    toastr.error('This Variation Stock Not Available');
                                    $('#product_price').text("$ " + response.price);
                                    $('#product_quantity').val(0);
                                    $('#variation_quantity').val(0);
                                    $('.product_variation_id').val('');
                                    resetToDefaultImage();
                                    return;
                                }

                                $('#product_price').text("$ " + response.price);
                                $quantityInput.val(1);
                                $('#variation_quantity').val(response.quantity);
                                $('.product_variation_id').val(response.variation_id);
                                if (response.variation_image) {
                                    updateProductImage(response.variation_image);
                                } else {
                                    resetToDefaultImage();
                                }
                            } else {
                                console.warn("Invalid response:", response);
                            }
                        }
                    });
                }
            });

            function updateProductImage(imageUrl) {
                $('.main-product-image').attr('src', imageUrl);
            }

            function resetToDefaultImage() {
                $('.main-product-image').attr('src', defaultImage);
            }

            $('.swiper-slide img').on('click', function() {
                let newImage = $(this).attr('src');
                updateProductImage(newImage);
            });

            $('.clear_btn').on('click', function() {
                var defaultImage = `{!! $product->productImage('product_image') ?: asset('upload/No-Image.png') !!}`;
                $('#product-image').attr('src', defaultImage);
                updateProductImage(defaultImage);

                var defaultPrice = `

               $ {{ $product->price ?: '' }}
                `;

                $('#product_price').html(defaultPrice);

                $('#color-select').val('');
                $('#size-select').val('');
                $('#direct-color-select').val('');

                $('.product_variation_id').val('');
                $errorMessage.hide();

                $('#user_type_quantity').val(1);
                $('#product_quantity').val({{ $product->stock }});
                $plusButton.prop('disabled', false);


            });

            var modal = document.querySelector(".custom-modal");
            var trigger = document.querySelector(".trigger");
            var closeButton = document.querySelector(".close-button");

            function toggleModal() {
                modal.classList.toggle("show-modal");

                const html = document.documentElement;

                if (modal.classList.contains("show-modal")) {
                    html.classList.remove("lenis", "lenis-smooth", "lenis-scrolling");
                    modal.classList.add("lenis", "lenis-smooth");
                } else {
                    modal.classList.remove("lenis", "lenis-smooth");
                    html.classList.add("lenis", "lenis-smooth");
                }
            }

            function windowOnClick(event) {
                if (event.target === modal) {
                    toggleModal();
                }
            }

            trigger.addEventListener("click", function(event) {
                event.preventDefault(); // Prevent default action (form submit, etc.)
                toggleModal(); // Open the modal
            });

            closeButton.addEventListener("click", toggleModal);
            window.addEventListener("click", windowOnClick);

        });
    </script>
<script>
    $(document).ready(function() {
        $('#star-rating li').on('click', function() {
            const value = $(this).data('value');
            $('#rating').val(value);

            $('#star-rating li').each(function(index) {
                if (index < value) {
                    $(this).find('i').removeClass('far').addClass('fas');
                    $(this).find('i').css('color', 'gold');
                } else {
                    $(this).find('i').removeClass('fas').addClass('far');
                    $(this).find('i').css('color', '#ccc');
                }
            });
        });

        $('#star-rating li').hover(
            function() {
                const value = $(this).data('value');
                $('#star-rating li').each(function(index) {
                    if (index < value) {
                        $(this).find('i').css('color', 'gold');
                    }
                });
            },
            function() {
                const selectedValue = $('#rating').val();
                $('#star-rating li').each(function(index) {
                    if (index >= selectedValue) {
                        $(this).find('i').css('color', '#ccc');
                    }
                });
            }
        );

        $('#review-form').on('submit', function(e) {
            e.preventDefault();

            if ($('#rating').val() == 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Please select a star rating!',
                    confirmButtonColor: '#3085d6',
                });
                return false;
            }

            $.ajax({
                url: $(this).attr('action'),
                method: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Review submitted successfully!',
                            confirmButtonColor: '#3085d6',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload();
                            }
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message || 'Error submitting review',
                            confirmButtonColor: '#3085d6',
                        });
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: xhr.responseJSON.message || 'Error submitting review',
                        confirmButtonColor: '#3085d6',
                    });
                }
            });
        });
    });
</script>
@endpush