@extends('layouts.new-layout')
@section('title', "$item->name in Prince George | Book Your Dream Dress Appointment")
@section('content')
    <!-- <section class="bg-bb1 pb-5">
   <div class="container">
   <div class="text-center padding-top-section"><h1 class="text-white">Product</h1></div></div>
   </section> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        .active-thumbnail {
            border: 2px solid #007bff;
            padding: 2px;
            border-radius: 4px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }

        #nextBtn,
        #prevBtn {
            top: -75px;
            position: relative;
            display: inline-block;
            margin-top: 10px;
        }

        ::marker {
            color: #020202;
        }

        .box-color.selected {
            border: 2px solid #000;
        }

        .alert {
            min-width: 250px;
            max-width: 350px;
            z-index: 1050;
        }

        #thumbContainer {
            display: flex;
            gap: 10px;
            transition: transform 0.3s ease-in-out;
            white-space: nowrap;
        }

        .d-inline-block {
            width: 70%;
            overflow: hidden; /* Ye zaroori hai taki scroll hide ho */
        }

        .thumbnail-image {
            display: block;
            margin: 0 auto;
        }

        .btn-blue3,
        .btn-blue4 {
            width: 100%;
        }
        /* Classic Buttons */
        .btn-classic {
            background-color: #444;
            color: white;
            border: none;
            padding: 8px 15px;
            font-size: 16px;
            border-radius: 4px;
            transition: background 0.3s ease-in-out;
        }

        .btn-classic:hover {
            background-color: #222;
        }

        /* Large Image Section */
        .large-image {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            /* background: #f5f5f5; */
            padding: 15px;
            border-radius: 8px;
            /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); */
        }

        .large-image img {
            border-radius: 6px;
            border: 2px solid #ddd;
        }

        /* Thumbnail Gallery */
        .thumb-item img {
            border: 2px solid #ccc;
            border-radius: 4px;
            height: 90px;
            transition: transform 0.3s ease, border 0.3s ease;
        }

        .thumb-item img:hover {
            border: 2px solid #444;
            /* transform: scale(1.1); */
        }

        /* Navigation Buttons */
        #prevImageBtn,
        #nextImageBtn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        #prevImageBtn {
            left: 10px;
        }

        #nextImageBtn {
            right: 10px;
        }

        /* Banner */
        .main-banner {
            background: url(/new-assets/img/gallery/banner-5.jpg);
            padding-top: 100px;
            background-position: center;
        }

        /* Modal Styling */
        .modal-content {
            border-radius: 8px;
            padding: 20px;
        }

        .modal-title {
            color: #000;
        }


    </style>
    @include('partials.parallaxSlider', ['title' => 'Dresses'])
    <!-- ============================================-->
    <section class="padding-top">
        <div class="toast-container position-fixed bottom-0 end-0 p-3">
            <div id="toastMessage" class="toast align-items-center text-white bg-danger border-0" role="alert"
                 aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        {{ session('error') }}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                            aria-label="Close"></button>
                </div>
            </div>
        </div>
        @if(session('success'))
            <div class="toast-container position-fixed bottom-0 end-0 p-3">
                <div id="toastMessage" class="toast align-items-center text-white bg-success border-0 show" role="alert"
                     aria-live="assertive" aria-atomic="true">
                    <div class="d-flex">
                        <div class="toast-body">
                            {{ session('success') }}
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                                aria-label="Close"></button>
                    </div>
                </div>
            </div>
        @endif
        <div class="container">
            <div class="row">
                <div class="col-md-5 my-2">
                    <div class="photo-gallery">
                        @php
                            $jsonString = $item->image;
                            $sanitizedString = str_replace('\/', '/', $jsonString);
                            $images = json_decode($sanitizedString, true);
                        @endphp
                        <div>
                            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 g-3 gallery-grid">
                                <!-- Large Image -->
                                @if($images)
                                    <div class="col-lg-12 text-center">
                                        <div class="large-image mb-3 position-relative">
                                            <button id="prevImageBtn" class="btn-classic" onclick="showPrevImage()">
                                                &lt;
                                            </button>
                                            <img id="mainImage" src="{{ asset('storage/' . $images[0]) }}"
                                                 class="img-fluid"
                                                 width="60%" alt="Main image">
                                            <button id="nextImageBtn" class="btn-classic" onclick="showNextImage()">
                                                &gt;
                                            </button>
                                        </div>
                                    </div>
                                    <!-- Thumbnail Gallery -->
                                    <div class="col-lg-12 text-center">
                                        @if(count($images) > 3)
                                            <button id="prevBtn" style="border: 0px;background:#fff;" onclick="showPrev()"> &lt;</button>
                                        @endif
                                        <div class="d-inline-block" style="width: 70%; overflow-x: hidden; ">
                                            <!-- <div class="d-inline-block" style="width:70%; overflow: hidden;"> -->
                                            <div id="thumbContainer" class="d-flex"
                                                 style="transition: transform 0.3s ease; ">
                                                @foreach($images as $image)
                                                    <div class="col" style="margin-right: 10px;">
                                                        <a href="javascript:void(0)" class="thumb-item"
                                                           onclick="changeImage('{{ asset('storage/' . $image) }}')">
                                                            <img src="{{ asset('storage/' . $image) }}"
                                                                 class="img-fluid thumbnail-image {{ $image === $images[0] ? 'active-thumbnail' : '' }}"
                                                                 alt="Thumbnail"
                                                                 style="max-width:70px; margin-bottom: 15px;">
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        @if(count($images) > 3)
                                            <button id="nextBtn"  style="border: 0px;background:#fff;" onclick="showNext()"> &gt;</button>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <script>
                        // Store all image URLs in an array
                        var images = @json(array_map(fn($image) => asset('storage/'.$image), $images));
                        var currentIndex = 0;

                        // Function to change the large image and update active thumbnail
                        function changeImage(url) {
                            document.getElementById('mainImage').src = url;
                            // Update the currentIndex to match the selected thumbnail
                            currentIndex = images.indexOf(url);
                            // Update the active thumbnail
                            updateActiveThumbnail();
                        }

                        // Function to show the previous large image
                        function showPrevImage() {
                            if (currentIndex > 0) {
                                currentIndex--;
                                document.getElementById('mainImage').src = images[currentIndex];

                                // Update the active thumbnail
                                updateActiveThumbnail();
                            }
                        }

                        // Function to show the next large image
                        function showNextImage() {
                            if (currentIndex < images.length - 1) {
                                currentIndex++;
                                document.getElementById('mainImage').src = images[currentIndex];

                                // Update the active thumbnail
                                updateActiveThumbnail();
                            }
                        }

                        // Function to update the active thumbnail's border
                        function updateActiveThumbnail() {
                            // Remove the active class from all thumbnails
                            const thumbnails = document.querySelectorAll('.thumbnail-image');
                            thumbnails.forEach((thumb) => {
                                thumb.classList.remove('active-thumbnail');
                            });

                            // Add the active class to the current thumbnail
                            const activeThumbnail = thumbnails[currentIndex];
                            activeThumbnail.classList.add('active-thumbnail');
                        }

                        let currentTranslateX = 0;

                        const step = 200; // Ek bar me kitne pixels move karna hai
                        const thumbContainer = document.getElementById("thumbContainer");

                        function showNext() {
                            const containerWidth = thumbContainer.scrollWidth;
                            const visibleWidth = thumbContainer.parentElement.clientWidth;

                            if (Math.abs(currentTranslateX) + visibleWidth < containerWidth) {
                                currentTranslateX -= step;
                                thumbContainer.style.transform = `translateX(${currentTranslateX}px)`;
                            }
                        }

                        function showPrev() {
                            if (currentTranslateX < 0) {
                                currentTranslateX += step;
                                thumbContainer.style.transform = `translateX(${currentTranslateX}px)`;
                            }
                        }

                        // Thumbnail navigation logic remains the same
                        // function showPrev() {
                        //     var thumbContainer = document.getElementById('thumbContainer');
                        //     thumbContainer.style.transform = 'translateX(0)';
                        // }

                        // function showNext() {
                        //     var thumbContainer = document.getElementById('thumbContainer');
                        //     thumbContainer.style.transform = 'translateX(-200px)';
                        // }
                    </script>

                    <div class="modal fade lightbox-modal" id="lightbox-modal" tabindex="-1">
                        <div class="modal-dialog modal-dialog-centered modal-fullscreen">
                            <div class="modal-content">
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                <div class="modal-body">
                                    <div class="lightbox-content">
                                        <!-- JS content here -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <img class="img-fluid" src="/new-assets/img/gallery/upload.webp"> -->
                <div class="col-md-7 my-2">
                    <h1 class="pt-3 headin-in">{{ $item->name }}</h1>
                    <h5>
                        <sapn class="top-time">{{ $item->category->duration }} mins</sapn> | <sapn class="top-time">${{ $item->category->price }}</sapn>
                    </h5>
                    <hr>
                    <p>
                        {!! html_entity_decode($item->description) !!}
                    </p>

                    <a class="btn-blue2 text-center text-uppercase px-3 button-48"
                       href="{{ route('book', $item) }}">
                        <span>Book Appointment <i class="fa fa-clock" aria-hidden="true"></i></span>
                    </a>
                </div>
            </div>

            <!-- Modal Structure -->
            <div class="modal fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="notifyModalLabel">Notification Form</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="notifyForm" action="/notify" method="POST">
                                @csrf
                                <input type="hidden" id="item_id" name="item_id">
                                <input type="hidden" id="variant_id" name="variant_id">
                                <div class="mb-3">
                                    <label for="name" class="form-label">Name</label>
                                    <input type="text" class="form-control" id="name" name="name" required>
                                </div>
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="email" name="email" required>
                                </div>
                                <div class="mb-3">
                                    <label for="phone" class="form-label">Phone No</label>
                                    <input type="tel" class="form-control" id="phone" name="phone" required>
                                </div>
                                <button type="submit" class="btn-blue2 w-100">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            @if($relatedItems->isNotEmpty())
                <div class="row mt-5">
                    <h6 class="py-0 text-blue text-uppercase">
                        See Our
                        <div class="line mb-0"></div>
                    </h6>
                    <h1 class="py-2 mb-5 text-capitalize">Related <span class="text-blue h1">Product</span></h1>
                    <!-- Scrollable container for related items -->
                    <div class="related-items-scroll ">
                        @foreach($relatedItems as $relatedItem)
                            <div class="col-md-3 p-1">
                                <div class="border-0 immb">
                                    <div class="position-relative imm active">
                                        <img class="img-fluid img1"
                                             src="{{ asset('storage/' . $relatedItem->image) ?? '/new-assets/img/gallery/upload.webp' }}">
                                        <div class="image-over pt-0 pb-3">
                                            <div class="main-text-img">
                                                <div class="line1"></div>
                                                @if($relatedItem->selling_type == 'buy')
                                                    <p class="mb-0">From
                                                        ${{ number_format($relatedItem->price, 0) }}</p>
                                                @elseif($relatedItem->selling_type == 'rent')
                                                    <p class="mb-0">From
                                                        ${{ number_format($relatedItem->rental_weekend, 0) }}</p>
                                                @endif
                                                <h3 class="mb-0">{{ $relatedItem->name }}</h3>
                                            </div>
                                        </div>
                                    </div>
                                    @if($relatedItem->selling_type == 'buy')
                                        <div class="col-12 mb-2">
                                            <a class="btn-blue3 text-center button-481"
                                               href="{{ route('product-detail',['id' => $relatedItem->id, 'type' => 'buy'])}}">
                                                <span>BOOK APPOINTMENT <i class="fa fa-shopping-cart"
                                                                          aria-hidden="true"></i></span>
                                            </a>
                                        </div>
                                    @elseif($relatedItem->selling_type == 'rent')
                                        <div class="col-12 mb-2">
                                            <a class="btn-blue4 text-center button-481"
                                               href="{{ route('product-detail',['id' => $relatedItem->id, 'type' => 'rent'])}}">
                                                <span>RENT <i class="fa fa-tag" aria-hidden="true"></i></span>
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif


            @if($suggestedAccessories->isNotEmpty())
                <div class="row mt-5">
                    <h6 class="py-0 text-blue text-uppercase">
                        See Our
                        <div class="line mb-0"></div>
                    </h6>
                    <h1 class="py-2 mb-5 text-capitalize">Suggested<span class="text-blue h1">Accessories </span></h1>

                    <!-- Scrollable container for related items -->
                    <div class="related-items-scroll ">
                        @foreach($suggestedAccessories as $relatedItem)
                            <div class="col-md-3 p-1">
                                <div class="border-0 immb">
                                    <div class="position-relative imm active">
                                        <img class="img-fluid img1"
                                             src="{{ asset('storage/' . $relatedItem->image) ?? '/new-assets/img/gallery/upload.webp' }}">
                                        <div class="image-over pt-0 pb-3">
                                            <div class="main-text-img">
                                                <div class="line1"></div>
                                                @if($relatedItem->selling_type == 'buy')
                                                    <p class="mb-0">From
                                                        ${{ number_format($relatedItem->price, 0) }}</p>
                                                @elseif($relatedItem->selling_type == 'rent')
                                                    <p class="mb-0">From
                                                        ${{ number_format($relatedItem->rental_weekend, 0) }}</p>
                                                @endif
                                                <h3 class="mb-0">{{ $relatedItem->name }}</h3>
                                            </div>
                                        </div>
                                    </div>
                                    @if($relatedItem->selling_type == 'buy')
                                        <div class="col-12 mb-2">
                                            <a class="btn-blue3 text-center button-481"
                                               href="{{ route('product-detail',['id' => $relatedItem->id, 'type' => 'buy'])}}">
                                                <span>BOOK APPOINTMENT <i class="fa fa-shopping-cart"
                                                                          aria-hidden="true"></i></span>
                                            </a>
                                        </div>
                                    @elseif($relatedItem->selling_type == 'rent')
                                        <div class="col-12 mb-2">
                                            <a class="btn-blue4 text-center button-481"
                                               href="{{ route('product-detail',['id' => $relatedItem->id, 'type' => 'rent'])}}">
                                                <span>RENT <i class="fa fa-tag" aria-hidden="true"></i></span>
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
            <!-- <div class="row mt-5">
         <h4>Buy it with</h4>
         <div class="col-md-4 p-3 buy-add-on position-relative">
               <div class="border-0 ">
           <div class="position-relative imm left-1">
           <img class="img-fluid img1" src="/new-assets/img/gallery/upload.webp">
         
           <div class=" image-over pt-0 pb-3">
           <div class="tt-main main-text-img my-4">
               <div class="sst">
               <div class="line1"></div>
           <p class="mb-0">From $400.00</p>
           <h3 class="mb-0">Resort 300</h3> 
           <div class="col-12 mt-2">
         <div class="box-color1 black"></div><div class="box-color1 brown"></div><div class="box-color1 black"></div>
         </div></div>
         <div class="sst1">
         <div><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i></div>
         <a class="cart-btn" href=""><i class="fa fa-plus" aria-hidden="true"></i></a>
         </div>
         </div> 
         </div>
         </div>
           </div>
         </div>
         <div class="col-md-4 p-3">
               <div class="border-0 ">
           <div class="position-relative imm left-1">
           <img class="img-fluid img1" src="/new-assets/img/gallery/upload.webp">
           
           <div class=" image-over pt-0 pb-3">
           <div class="tt-main main-text-img my-4">
               <div class="sst">
               <div class="line1"></div>
           <p class="mb-0">From $400.00</p>
           <h3 class="mb-0">Resort 300</h3> 
           <div class="col-12 mt-2">
         <div class="box-color1 black"></div><div class="box-color1 brown"></div><div class="box-color1 black"></div>
         </div></div>
         <div class="sst1">
         <div><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i></div>
         <a class="cart-btn" href=""><i class="fa fa-plus" aria-hidden="true"></i></a>
         </div>
         </div> 
         </div>
         </div>
           </div>
         </div>
         <div class="col-md-4 p-3">
               <div class="text-center mt-5">
                 <h5 class="mb-3">Total price:$4,598.00</h5>
                 <div class="col-12 mb-4 pe-0"><a class="btn-blue2 text-center w-100 button-48" href=""> 
         <span>BUY NOW <i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
         </a>
         </div>
         </div>
         </div>
         </div> -->
        </div>
    </section>
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
    <!-- jQuery CDN -->
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        // Function to change the main image when a thumbnail is clicked
        // function changeImage(imageUrl) {
        //     // Update the src of the main image
        //     document.getElementById('mainImage').src = imageUrl;

        //     // Remove 'active-thumbnail' class from all thumbnails
        //     document.querySelectorAll('.thumbnail-image').forEach(thumb => {
        //         thumb.classList.remove('active-thumbnail');
        //     });

        //     // Add 'active-thumbnail' class to the clicked thumbnail
        //     document.querySelector(`img[src="${imageUrl}"]`).classList.add('active-thumbnail');
        // }
        document.addEventListener('DOMContentLoaded', function () {
            // Controller-passed variable (make sure this is dynamically rendered in the view)
            let rentForValue = @json($rentFor ?? '');
            //alert(rentFor);
            let rentFor = getPartBeforeDelimiter(rentForValue, '|');
            // Get the dropdown element
            let rentForDropdown = document.getElementById('rentFor');
            if (rentFor) {
                // Loop through each option in the dropdown
                Array.from(rentForDropdown.options).forEach(option => {
                    if (!option.value.startsWith(rentFor) && option.value !== "") {
                        //alert('ki');
                        // Disable options that don't match the rentFor value
                        option.disabled = true;
                    }
                });
            }
        });
        // const rentedDates =
        // Initialize Flatpickr
        // flatpickr("#startDateRent", {
        //     // disable: rentedDates.map(date => {
        //     //     return date; // Format for Flatpickr to disable
        //     // }),
        //     minDate: "today",
        //     dateFormat: "Y-m-d" // Ensure the date format matches your backend
        // });
        // On Quantity Change
        function getPartBeforeDelimiter(value, delimiter) {
            if (value && delimiter) {
                const parts = value.split(delimiter);
                return (parts[0] || '').trim(); // Return the part before the delimiter, trimmed of any spaces
            }
            return ''; // Return an empty string if value or delimiter is not provided
        }

        $('#rentFor, #quantitySelect').on('change', function () {
            const quantity = $('#quantitySelect').val();
            const rentForValue = $('#rentFor').val();
            const itemId = "{{ $item->id }}"; // Pass the item ID
            let extractedPart = getPartBeforeDelimiter(rentForValue, '|');
            //alert(extractedPart == 'rental_weekend');
            let days = 0; // Initialize days variable
            if (extractedPart == 'rental_weekend') {
                days = 3; // Set days for rental_weekend
            } else if (extractedPart == 'rental_7_days') {
                days = 6; // Set days for rental_7_days
            } else if (extractedPart == 'rental_14_days') {
                days = 13; // Set days for rental_14_days
            } else if (extractedPart == 'rental_21_days') {
                days = 20; // Set days for rental_21_days
            } else if (extractedPart == 'rental_1_month') {
                days = 29; // Set days for rental_1_month
            }

            if (quantity && days) {
                //alert(quantity,days);
                // Make an AJAX call to fetch unavailable dates
                $.ajax({
                    url: `/fetch-booking-dates/${itemId}`,
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        quantity: quantity,
                        rentFor: days
                    },
                    success: function (response) {
                        const unavailableDates = response.bookedDates;
                        // const availableStartDate = response.availableStartDate;

                        // Enable startDateRent field
                        $('#startDateRent').prop('disabled', false);
                        // alert(unavailableDates);
                        // Initialize Flatpickr with unavailable dates
                        flatpickr("#startDateRent", {
                            disable: unavailableDates,
                            minDate: "today", // Disable past dates
                            dateFormat: "Y-m-d",
                            defaultDate: null,
                            allowInput: true,
                            placeholder: "Select Start Date",


                        });
                        document.getElementById("startDateRent").value = "";
                    },
                    error: function (xhr) {
                        console.error("Error fetching booking dates:", xhr.responseText);
                    }
                });
            }
        });
    </script>

<script>
var maxPurchaseQty = {
    {
        $item - > max_purchase_qty ?? 0
    }
};

var maxVariantPurchesQty = 0;
let isVariant = {
    {
        $item - > is_variant ?? 0
    }
};
var sellingType = "{{ $item->selling_type }}";

// Function to render buttons based on max_purchase_qty
function renderButtons() {
    var isBuyNow = false;
    var isRentNow = false;
    // alert('renderbutton');
    // Select containers for each type of button
    const buyNowContainer = document.getElementById('buyNowContainer');
    const rentNowContainer = document.getElementById('rentNowContainer');
    const notifyContainer = document.getElementById('notifyContainer');

    // Condition to check if "Buy Now" and "Rent Now" buttons should be displayed
    if (sellingType === 'buy') {
        console.log('sellingType' + sellingType);
        // maxPurchaseQty = buyNowContainer.getAttribute('data-max-purchase-qty');
        if (isVariant === 1) {
            isBuyNow = maxPurchaseQty > 0 && (isVariant === 1 && maxVariantPurchesQty > 0);
        } else if (isVariant === 0) {
            isBuyNow = (maxPurchaseQty > 0);
        }

    } else if (sellingType === 'rent') {

        console.log('sellingType' + sellingType);
        //maxPurchaseQty = rentNowContainer.getAttribute('data-max-purchase-qty');
        if (isVariant === 1) {
            isRentNow = maxPurchaseQty > 0 && (isVariant === 1 && maxVariantPurchesQty > 0);
        } else if (isVariant === 0) {
            isRentNow = (maxPurchaseQty > 0);
        }
    }
    if (sellingType === 'buy' && isBuyNow) {
        console.log('showbutton_buy');

        // Hide all containers first
        if (rentNowContainer) {
            rentNowContainer.style.display = 'none';
        }
        if (notifyContainer) {
            notifyContainer.style.display = 'none';
        }

        // Show "Buy Now" button for buy type
        buyNowContainer.style.display = 'block'; // Show buyNowContainer
        buyNowContainer.innerHTML = '';
        buyNowContainer.innerHTML = `
            <div class="col-6 mb-4 pe-0">
                <button type="submit" class="btn-blue2 text-center w-100 button-48 add-to-cart-btn" id="buyNowBtn">
                    <span>BUY NOW <i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
                </button>
            </div>
        `;

            } else if (sellingType === 'rent' && isRentNow) {
                console.log('showbutton_rent');

                // Hide all containers first
                if (buyNowContainer) {
                    buyNowContainer.style.display = 'none';
                }
                if (notifyContainer) {
                    notifyContainer.style.display = 'none';
                }

                // Show "Rent Now" button for rent type
                rentNowContainer.style.display = 'block'; // Show rentNowContainer
                rentNowContainer.innerHTML = '';
                rentNowContainer.innerHTML = `
            <div class="col-6 mb-4 pe-0">
                <button type="submit" class="btn-blue2 text-center w-100 button-48 add-to-cart-btn" id="rentNowBtn">
                    <span>RENT NOW <i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
                </button>
            </div>
        `;

            } else {
                console.log('showbutton_notify');

                // Hide all containers first
                if (buyNowContainer) {
                    buyNowContainer.style.display = 'none';
                }
                if (rentNowContainer) {
                    rentNowContainer.style.display = 'none';
                }

                // Show "Notify Me" button if neither "Buy Now" nor "Rent Now" is available
                notifyContainer.style.display = 'block'; // Show notifyContainer
                notifyContainer.innerHTML = '';
                notifyContainer.innerHTML = `
            <div class="col-6 mb-4 pe-0">
                <button class="btn-blue2 text-center w-100 button-48 notify" id="notify"
                        data-item-id="{{ $item->id }}" data-variant-id="">
                    <span>Notify Me</span>
                </button>
            </div>
        `;
            }
            // Optional: Set up Notify Me button click event if needed
            const notifyButton = document.getElementById('notify');
            if (notifyButton) {
                notifyButton.addEventListener('click', function (event) {
                    event.preventDefault();
                    // Initialize and show the modal (if needed)
                    const notifyModal = new bootstrap.Modal(document.getElementById('notifyModal'));
                    document.getElementById('item_id').value = this.getAttribute('data-item-id');
                    document.getElementById('variant_id').value = this.getAttribute('data-variant-id');
                    notifyModal.show();
                });
            }
        }


        $(document).ready(function () {
            //alert("Page loaded and jQuery is ready.");
            var sellingTypes = "{{ $item->selling_type }}";
            if (sellingType == 'buy') {
                if (maxPurchaseQty > 0) {
                    // console.log('maxPurchaseQty' + maxPurchaseQty);
                    $('#stockInfo')
                        .text(`In stock (${maxPurchaseQty} units), ready to be shipped`)
                        .show(); // Show stock info
                    $('#stockout').hide(); // Hide 'Out Of Stock' message
                } else {
                    $('#stockout')
                        .text('Out Of Stock')
                        .show(); // Show 'Out Of Stock' message
                    $('#stockInfo').hide(); // Hide stock info
                }
            }

            let alertShown = false; // Flag to control alert display

            if (isVariant == 1) {
                // Use setTimeout to ensure that the element is present before triggering the click
                setTimeout(function () {

                    // Check if there is any .box-color element available

                    if ($('.box-color').length > 0) {
                        $('.box-color').first().trigger('click');
                    } else {
                        console.warn('No .box-color elements found.');
                    }
                }, 100); // Delay to allow DOM updates
            }
            // Remove any existing click handlers to prevent multiple attachments
            $(document).off('click', '.box-color').on('click', '.box-color', function (event) {

                event.preventDefault(); // Prevent default action
                event.stopPropagation(); // Stop event bubbling
                alertShown = false; // Reset the alert flag for each click

                if (!alertShown) { // Check if alert is already shown
                    alertShown = true; // Set the flag
                    //    alert('Color box clicked!'); // Show alert
                    console.log("Box color clicked");


                    const variantId = $(this).data('variant-id');
                    const salePrice = $(this).data('sale-price');
                    const images = $(this).data('images');
                    const maxQty = $(this).data('max-purchase-qty');
                    maxVariantPurchesQty = $(this).data('max-purchase-qty');

                    const color = $(this).data('color');


                    const quantitySelect = $('#quantitySelect');
                    quantitySelect.empty();
                    for (let i = 1; i <= maxQty; i++) {
                        quantitySelect.append(`<option value="${i}">${i}</option>`);
                    }

                    if (images) {
                        changeImage(images);
                    }

                    // Rental rate options based on selected variant
                    const rentFor = $('#rentFor');
                    rentFor.empty().append(`
                <option value="rental_rate_weekend | ${$(this).data('rental-rate-weekend')}">Weekend</option>
                <option value="rental_rate_7days | ${$(this).data('rental-rate-7days')}">7 Days</option>
                <option value="rental_rate_14days | ${$(this).data('rental-rate-14days')}">14 Days</option>
                <option value="rental_rate_21days | ${$(this).data('rental-rate-21days')}">21 Days</option>
                <option value="rental_rate_month | ${$(this).data('rental-rate-month')}">1 Month</option>
            `);

                    $('.box-color').removeClass('selected');
                    $(this).addClass('selected');

                    $('#selectedColor').text(color);
                    $('#variant_id').val(variantId);
                    $('.notify').attr('data-variant-id', variantId);

                    if (sellingType === 'buy') {
                        $('#price').text(salePrice ? `$ ${salePrice}` : `$ {{ $item->sale_price }}`);
                        if (maxPurchaseQty > 0 && maxQty > 0) {
                            $('#stockInfo')
                                .text(`In stock (${maxQty} units), ready to be shipped`)
                                .show(); // Show stock info
                            $('#stockout').hide(); // Hide 'Out Of Stock' message
                        } else {
                            $('#stockout')
                                .text('Out Of Stock')
                                .show(); // Show 'Out Of Stock' message
                            $('#stockInfo').hide(); // Hide stock info
                        }
                        renderButtons();
                    }
                    document.getElementById('rentFor').selectedIndex = 0;
                    updatePrice();

                }
            });

            $('#quantitySelect').on('change', function () {
                $('#quantity').val($(this).val());
            });

        });
        // Run the function to render buttons based on the condition
        setTimeout(function () {

            // Check if there is any .box-color element available
            renderButtons();
        }, 500);


        function updatePrice() {
            const selectedPrice = document.getElementById('rentFor').value;
            const [fieldName, price] = selectedPrice.split(' | ');
            const roundedPrice = Math.floor(parseFloat(price.trim()));

            document.getElementById('price').innerText = '$' + roundedPrice;
        }

        // Set initial rental rate and price update
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('rentFor').selectedIndex = 0;

            updatePrice();

        });

        // Handle "BUY NOW" and "RENT NOW" button clicks
        document.addEventListener('DOMContentLoaded', function () {
            const buyNowBtn = document.getElementById('buyNowBtn');
            const rentNowBtn = document.getElementById('rentNowBtn');
            const itemType = document.getElementById('item_type');
            const startDateRent = document.getElementById('startDateRent');
            const endDateRent = document.getElementById('endDateRent');
            const today = new Date().toISOString().split('T')[0];

            if (startDateRent) startDateRent.setAttribute('min', today);

            buyNowBtn?.addEventListener('click', function () {
                itemType.value = 'buy';
                startDateRent?.removeAttribute('required');
                endDateRent?.removeAttribute('required');
            });

            rentNowBtn?.addEventListener('click', function () {
                itemType.value = 'rent';
                startDateRent?.setAttribute('required', 'required');
                endDateRent?.setAttribute('required', 'required');
            });

            handleDateValidation(startDateRent, endDateRent);
        });

        function handleDateValidation(startDateInput, endDateInput) {
            if (startDateInput && endDateInput) {
                startDateInput.addEventListener('change', function () {
                    endDateInput.min = startDateInput.value;
                    if (endDateInput.value < startDateInput.value) {
                        endDateInput.value = "";
                        alert('End date must be after the start date.');
                    }
                });

                endDateInput.addEventListener('change', function () {
                    if (endDateInput.value < startDateInput.value) {
                        alert('End date must be after the start date.');
                        endDateInput.value = "";
                    }
                });
            }
        }

        // Toast notification for error message
        document.addEventListener('DOMContentLoaded', function () {
            @if(session('error'))
            const toastEl = document.getElementById('toastMessage');
            const toast = new bootstrap.Toast(toastEl);
            toast.show();
            @endif
        });

        // Image gallery handling
        const thumbContainer = document.getElementById('thumbContainer');
        const thumbnails = document.querySelectorAll('#thumbContainer .col');
        let currentIndex = 0;
        const maxVisibleThumbs = 3;

        function changeImage(imageSrc) {
            // Set the main image source
            document.getElementById('mainImage').src = imageSrc;

            // Remove active-thumbnail class from all thumbnails
            thumbnails.forEach(thumb => thumb.querySelector('img').classList.remove('active-thumbnail'));

            // Find the clicked thumbnail and add the active-thumbnail class
            const activeThumbnail = Array.from(thumbnails).find(thumb =>
                thumb.querySelector('img').src === imageSrc
            );
            activeThumbnail?.querySelector('img').classList.add('active-thumbnail');
        }

        function showPrev() {
            if (currentIndex > 0) {
                currentIndex--;
                updateThumbnails();
            }
        }

        function showNext() {
            if (currentIndex + maxVisibleThumbs < thumbnails.length) {
                currentIndex++;
                updateThumbnails();
            }
        }

        function updateThumbnails() {
            const thumbnailWidth = thumbnails[0].offsetWidth + 10;
            thumbContainer.style.transform = `translateX(-${currentIndex * thumbnailWidth}px)`;
        }

        updateThumbnails();
    </script>

    <script>
        var btn = $("#button");

        $(window).scroll(function () {
            if ($(window).scrollTop() > 300) {
                btn.addClass("show");
            } else {
                btn.removeClass("show");
            }
        });

        btn.on("click", function (e) {
            e.preventDefault();
            $("html, body").animate({
                scrollTop: 0
            }, "300");
        });
    </script>
    <script>
        AOS.init();
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
    </script>
    <script>
        const html = document.querySelector('html');
        // html.setAttribute('data-bs-theme', 'dark');

        const galleryGrid = document.querySelector(".gallery-grid");
        const links = galleryGrid.querySelectorAll("a");
        const imgs = galleryGrid.querySelectorAll("img");
        const lightboxModal = document.getElementById("lightbox-modal");
        const bsModal = new bootstrap.Modal(lightboxModal);
        const modalBody = lightboxModal.querySelector(".lightbox-content");

        function createCaption(caption) {
            return `<div class="carousel-caption d-none d-md-block">
         <h4 class="m-0">${caption}</h4>
       </div>`;
        }

        function createIndicators(img) {
            let markup = "",
                i, len;

            const countSlides = links.length;
            const parentCol = img.closest('.col');
            const curIndex = [...parentCol.parentElement.children].indexOf(parentCol);

            for (i = 0, len = countSlides; i < len; i++) {
                markup += `
         <button type="button" data-bs-target="#lightboxCarousel"
           data-bs-slide-to="${i}"
           ${i === curIndex ? 'class="active" aria-current="true"' : ''}
           aria-label="Slide ${i + 1}">
         </button>`;
            }

            return markup;
        }

        function createSlides(img) {
            let markup = "";
            const currentImgSrc = img.closest('.gallery-item').getAttribute("href");

            for (const img of imgs) {
                const imgSrc = img.closest('.gallery-item').getAttribute("href");
                const imgAlt = img.getAttribute("alt");

                markup += `
         <div class="carousel-item${currentImgSrc === imgSrc ? " active" : ""}">
           <img class="d-block img-fluid w-100" src=${imgSrc} alt="${imgAlt}">
           ${imgAlt ? createCaption(imgAlt) : ""}
         </div>`;
            }

            return markup;
        }

        function createCarousel(img) {
            const markup = `
       <!-- Lightbox Carousel -->
       <div id="lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="true">
         <!-- Indicators/dots -->
         <div class="carousel-indicators">
           ${createIndicators(img)}
         </div>
         <!-- Wrapper for Slides -->
         <div class="carousel-inner justify-content-center mx-auto">
           ${createSlides(img)}
         </div>
         <!-- Controls/icons -->
         <button class="carousel-control-prev" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="prev">
           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
           <span class="visually-hidden">Previous</span>
         </button>
         <button class="carousel-control-next" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
           <span class="visually-hidden">Next</span>
         </button>
       </div>
       `;

            modalBody.innerHTML = markup;
        }

        for (const link of links) {
            link.addEventListener("click", function (e) {
                e.preventDefault();
                const currentImg = link.querySelector("img");
                const lightboxCarousel = document.getElementById("lightboxCarousel");

                if (lightboxCarousel) {
                    const parentCol = link.closest('.col');
                    const index = [...parentCol.parentElement.children].indexOf(parentCol);

                    const bsCarousel = new bootstrap.Carousel(lightboxCarousel);
                    bsCarousel.to(index);
                } else {
                    createCarousel(currentImg);
                }

                bsModal.show();
            });
        }

        // document.addEventListener("DOMContentLoaded", function() {
        //     const notifyButton = document.getElementById('notify');

        //     if (notifyButton) {
        //         notifyButton.addEventListener('click', function(event) {
        //             event.preventDefault(); // Stop any default form action

        //             // Initialize Bootstrap modal
        //             const notifyModalElement = document.getElementById('notifyModal');
        //             alert(notifyModalElement);
        //             const notifyModal = new bootstrap.Modal(notifyModalElement);

        //             // Fetch data attributes
        //             const itemId = this.getAttribute('data-item-id');
        //             const variantId = this.getAttribute('data-variant-id');

        //             // Set modal hidden fields
        //             document.getElementById('item_id').value = itemId;
        //             document.getElementById('variant_id').value = variantId;

        //             // Show the modal
        //             notifyModal.show();
        //         });
        //     }
        // });
    </script>
@endsection