@extends('front.layout.app')
@section('content')
    <section class="Proreview">
        <div class="container-fluid p-0">
            <div class="row">
                <div class="col-xl-4 col-lg-3 col-md-4">
                    <div class="productNav">
                        <div class="swiper productSlider-for">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <figure class="productImgContainer image-holder">
                                        <img src="{{ $product->productImage() }}" class="img-fluid w-100 image" />
                                    </figure>
                                </div>
                                @if (count($product->productGalleryImages()) > 0)
                                    @forelse($product->productGalleryImages() as $galleryImg)
                                        <div class="swiper-slide">
                                            <figure class="productImgContainer image-holder">
                                                <img src="{{ $galleryImg->getUrl() }}" class="img-fluid image" />
                                            </figure>
                                        </div>
                                    @empty
                                    @endforelse
                                @endif
                            </div>
                        </div>
                        <div thumbsSlider="" class="swiper productSlider-nav">
                            <div class="swiper-wrapper">
                                @if (count($product->productGalleryImages()) > 0)
                                    <div class="swiper-slide">
                                        <figure class="productImgContainer image-holder">
                                            <img src="{{ $product->productImage() }}" class="img-fluid w-100 image" />
                                        </figure>
                                    </div>
                                    @forelse($product->productGalleryImages() as $galleryImg)
                                        <div class="swiper-slide">
                                            <figure class="productImgContainer image-holder">
                                                <img src="{{ $galleryImg->getUrl() }}" class="img-fluid image" />
                                            </figure>
                                        </div>
                                    @empty
                                    @endforelse
                                @else
                                    <p class="m-auto">Sorry! No gallery available.</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-8 productSIDE">
                    <div class="productDetails">
                        <h2 class="d-flex justify-content-between flex-column">
                            <span class="d-flex justify-content-between align-items-center">{{ $product->brand ?? '' }}
                                <label class="btn btn-secondary active mr-3">
                                    {{ $product->strainType->name ?? '' }}
                                </label>
                            </span> {{ $product->name }}
                        </h2>
                        <ul>
                            <li><span id="product-price">$ {{ $product->price ?? '' }} </span></li>
                            {{-- <li><a href="#">Up to 40% off</a></li> --}}
                        </ul>

                        <form id="addToCartForm" action="{{ route('front.cart.add', $product->id) }}" method="POST">
                            @csrf


                            {{-- @if ($product->variation()->count() > 0)
                                <!-- Select for Size -->
                                <label class="mt-4">Size</label>
                                <select name="variation_size_id" id="sizeSelect" class="form-control mb-4"
                                    style="width:250px !important;">
                                    @php $addedSizes = []; @endphp
                                    <option value="" selected>Select size</option> <!-- No auto-selection -->

                                    @forelse($product->variation() as $variation)
                                        @if ($variation->size() && !in_array($variation->size()->id, $addedSizes))
                                            <option data-price="{{ $variation->price }}"
                                                value="{{ $variation->size()->id }}">
                                                {{ $variation->size()->name }}
                                            </option>
                                            @php $addedSizes[] = $variation->size()->id; @endphp
                                        @endif
                                    @empty
                                        <option disabled>No sizes available</option>
                                    @endforelse
                                </select>
                            @endif --}}

                            {{-- @if ($product->variation()->count() > 0) --}}
                            @if ($product->variations()->count() > 0)

                                <!-- Select for Size -->
                                <label class="mt-4">Size</label>
                                <select name="variation_size_id" id="sizeSelect" class="form-control mb-4" style="width:250px !important;">
                                    @php $addedSizes = []; @endphp
                                    <option value="" selected>Select size</option>

                                    @forelse($product->variations as $variation)

                                        @php
                                            $isCustom = is_null($variation->size_id);
                                            $sizeIdentifier = $isCustom ? $variation->custom_size : $variation->size?->id;
                                            $sizeLabel = $isCustom ? $variation->custom_size : $variation->size?->name;
                                        @endphp

                                        @if ($sizeIdentifier && !in_array($sizeIdentifier, $addedSizes))
                                            {{-- <option data-price="{{ $variation->price }}" value="{{ $sizeIdentifier }}">
                                                {{ $sizeLabel }}
                                            </option> --}}
                                            <option
                                                data-price="{{ $variation->price }}"
                                                data-quantity="{{ $variation->quantity ?? 0 }}"
                                                value="{{ $sizeIdentifier }}">
                                                {{ $sizeLabel }}
                                            </option>
                                            @php $addedSizes[] = $sizeIdentifier; @endphp
                                        @endif
                                    @empty
                                        <option disabled>No sizes available</option>
                                    @endforelse
                                </select>
                            @endif

                            {{-- @if ($product->variations()->count() > 0)
                                <!-- Select for Color -->
                                <label class="mt-4">Color</label>


                                <select name="variation_color_id" id="colorSelect" class="form-control mb-4" style="width:250px !important;">
                                    @php $addedColors = []; @endphp
                                    <option value="" selected>Select color</option>


                                    @foreach($product->variations as $variation)
                                        @php
                                            $isCustomColor = is_null($variation->variation_color_id);
                                            $colorIdentifier = $isCustomColor ? $variation->custom_color : $variation->variation_color_id;
                                            $colorLabel = $isCustomColor
                                                ? $variation->custom_color
                                                : ($variation->variationColor->name ?? 'Unknown');

                                            // Get image URL for this variation or fallback to product image
                                            $imageUrl = $variation->getFirstMediaUrl('variation_image') ?: $product->productImage();

                                            // Check to avoid duplicate color options
                                            $alreadyAdded = in_array($colorIdentifier, $addedColors);
                                        @endphp

                                        @if ($colorIdentifier && !$alreadyAdded)
                                            <option
                                                value="{{ $colorIdentifier }}"
                                                data-image="{{ $imageUrl }}"
                                                data-price="{{ $variation->price }}"
                                            >
                                                {{ $colorLabel }}
                                            </option>
                                            @php $addedColors[] = $colorIdentifier; @endphp
                                        @endif
                                    @endforeach
                                </select>

                            @endif --}}

                            <!-- Select for State -->
                            <label class="mt-4">Select Your State</label>
                            <select name="shipping_state_id" id="shippingStateSelect" class="form-control mb-4" style="width:250px !important;">
                                <option value="" selected>Select a state</option>
                                @foreach($states as $state)
                                    <option value="{{ $state->id }}">{{ $state->name }}</option>
                                @endforeach
                            </select>



                            <input type="hidden" id="product_price" name="product_price">
                                                <span id="stock-info" class="text-muted small"></span>

                            @if ($product->stock_quantity > 0)
                                <h4>Quantity</h4>
                                <ul>
                                    <li>
                                        <div class="num-block">
                                            <div class="number numAdd">
                                                <span class="minus dis">-</span>
                                                {{-- <input class="in-num" type="text"
                                                {{ $product->stock_quantity > 0 ? '' : 'disabled' }}
                                                data-productStock="{{ $product->stock_quantity }}" name="quantity"
                                                id="quantity" value="1"> --}}
                                               <input class="in-num" type="text"
                                                data-productStock="{{ $product->stock_quantity }}"
                                                data-max=""
                                                name="quantity"
                                                id="quantity"
                                                value="1"
                                                disabled>

                                                <span class="plus">+</span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            @endif

                            @if (!auth()->check())
                                <!--<button class="add-cart-btn mt-3" disabled type="submit">Add to cart-->
                                <!--</button>-->

                            @elseif($product->stock_quantity == 0)
                                <button class="themeBtn mt-3" type="submit" disabled>Out Of Stock
                                </button>
                            @endif
                                <div id="stock-info" class="text-info mt-2"></div>
                                <p id="stock-warning" class="text-danger mt-2" style="display:none;">Selected quantity exceeds available stock.</p>

                                {{-- <button class="themeBtn mt-3" id="addToCartButton" type="submit" disabled>Add to cart</button> --}}
                                <button
                                class="themeBtn mt-3"
                                id="addToCartButton"
                                type="submit"
                                {{ !empty($product->external_link) ? 'data-external-link=' . $product->external_link : '' }}
                                {{ !empty($product->external_link) ? '' : 'disabled' }}>
                                Add to cart
                            </button>


                        </form>

                        @if (!auth()->check())
                            <!--<p>To place an order online, you'll need to <a href="{{ route('login.form') }}">login</a>-->
                            <!--    or <a href="">create an account.</a></p>-->
                        @endif

                        {{-- <div class="bundleBox mt-3">
                            <span>Build a bundle</span>
                            <h4>Up to 40% off Cresco, High Supply & FloraCal</h4>
                        </div> --}}
                    </div>
                </div>
                <div class="col-xl-4 col-lg-5  col-md-12">
                    <div class="productRight">

                        {{-- <div class="productRight-wrap d-flex justify-content-between align-items-start">
                            <h2><span>Total THC</span>{{ $product->thc_percentage ?? '0' }}%</h2>

                            <a class="add-cart-btn"
                                href="{{ route('front.vendor.shop', ['vendorId' => $product->user_id]) }}"> Visit Shop
                            </a>
                        </div>

                        <p>Total combined THC/THCa, CBD/CBDa values. <br> Review product labels for exact percentages.
                        </p>
                        @if (isset($product->thc_percentage) && !is_null($product->thc_percentage))
                            <h3>THC<span>{{ $product->thc_percentage ?? '0' }}%</span></h3>
                        @endif
                        @if (isset($product->thca_percentage) && !is_null($product->thca_percentage))
                            <h3>THCA<span>{{ $product->thca_percentage ?? '0' }}%</span></h3>
                        @endif
                        @if (isset($product->cbd_percentage) && !is_null($product->cbd_percentage))
                            <h3>CBD<span>{{ $product->cbd_percentage ?? '0' }}%</span></h3>
                        @endif
                        @if (isset($product->cbda_percentage) && !is_null($product->cbda_percentage))
                            <h3>CBDa<span>{{ $product->cbda_percentage ?? '0' }}%</span></h3>
                        @endif --}}
                        <div id="accordion">
                            {{-- <div class="card">
                                <div id="headingOne ">
                                    <h5 class="mb-0 ">
                                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
                                            aria-expanded="true" aria-controls="collapseOne">About this Strain
                                            <i class="fal fa-chevron-down"></i>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <!--<p>{{ $product->strainType->detail ?? '' }}</p>-->
                                        <span>Terpenes</span>
                                        <div class="btn-group">
                                            @foreach ($product->terpenes as $terpen)
                                                <a href="#">{{ $terpen->name }}</a>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                            <div class="card ">
                                <div id="headingTwo ">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link collapsed" data-toggle="collapse"
                                            data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                            Product Details
                                            <i class="fal fa-chevron-down"></i>
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        <p>{!! $product->description ?? '' !!}</p>
                                        <span>Form</span>
                                        <div class="btn-group">
                                            <a href="#">{{ $product->Category->name ?? '' }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="flower-main realtedProduct">
        <div class="container-fluid">
            <div class="flower-heading" data-aos="fade-up">
                <h3>Related Products</h3>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper flowerSlider" data-aos="zoom-in">
                        <div class="swiper-wrapper">
                            @forelse($related_product as $related_product)
                                <div class="swiper-slide">
                                    <div class="flower-card">
                                        <a href="{{ route('front.shop.product', ['slug' => $related_product->slug]) }}">
                                            <figure>
                                                <img src="{{ $related_product->productImage() }}" class="img-fluid"
                                                    alt="{{ $related_product->product_alt ?? 'img' }}">
                                            </figure>
                                            <div class="flower-content">
                                                <h3>{{ $related_product->Category->name ?? '' }}</h3>
                                                <h4>{{ $related_product->name ?? '' }}</h4>
                                                <h5> ${{ $related_product->price ?? '' }}
                                                </h5>
                                                <div class="d-flex">

                                                    <h6>THC: {{ $related_product->thc_percentage ?? '0' }}%</h6>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            @empty
                                <p>No related products found!</p>
                            @endforelse
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="flower-main realtedProduct Strainproduct">
        <div class="container-fluid">
            <div class="flower-heading" data-aos="fade-up">
                <h3>Other Ways to Enjoy This Strain</h3>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper flowerSlider" data-aos="zoom-in">
                        <div class="swiper-wrapper">
                            @forelse($related_product_strain as $strain_product)
                                <div class="swiper-slide">
                                    <div class="flower-card">
                                        <a href="{{ route('front.shop.product', ['slug' => $strain_product->slug]) }}">
                                            <figure>

                                                <img src="{{ $strain_product->productImage() }}" class="img-fluid"
                                                    alt="{{ $strain_product->product_alt ?? 'img' }}">
                                            </figure>
                                            <div class="flower-content">
                                                <h3>{{ $strain_product->Category->name ?? '' }}</h3>
                                                <h4>{{ $strain_product->name ?? '' }}</h4>
                                                <h5> ${{ $strain_product->price ?? '' }}
                                                </h5>
                                                <div class="d-flex">

                                                    <h6>THC: {{ $strain_product->thc_percentage ?? '0' }}%</h6>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            @empty
                                <p>No strain related products found!</p>
                            @endforelse
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection


@section('script')
    <script>
//         document.addEventListener('DOMContentLoaded', function () {
//     const sizeSelect = document.getElementById('sizeSelect');
//     const quantityInput = document.getElementById('quantity');
//     const stockInfo = document.getElementById('stock-info');

//     sizeSelect.addEventListener('change', function () {
//         const selectedOption = this.options[this.selectedIndex];
//         const maxQty = parseInt(selectedOption.getAttribute('data-quantity')) || 0;

//         if (maxQty > 0) {
//             quantityInput.disabled = false;
//             quantityInput.setAttribute('max', maxQty);
//             quantityInput.value = 1;
//             stockInfo.textContent = `Available stock: ${maxQty}`;
//         } else {
//             quantityInput.disabled = true;
//             quantityInput.value = '';
//             stockInfo.textContent = 'Out of stock for selected size';
//         }
//     });
// });
// document.querySelector('.plus').addEventListener('click', function () {
//     const max = parseInt(quantityInput.getAttribute('max')) || 1;
//     let val = parseInt(quantityInput.value) || 0;
//     if (val < max) quantityInput.value = val + 1;
// });

// document.querySelector('.minus').addEventListener('click', function () {
//     let val = parseInt(quantityInput.value) || 1;
//     if (val > 1) quantityInput.value = val - 1;
// });

//         document.addEventListener('DOMContentLoaded', function () {
//             const colorSelect = document.getElementById('colorSelect');
//             const mainImage = document.querySelector('.productImgContainer.image-holder img.image');

//             colorSelect.addEventListener('change', function () {
//                 const selectedOption = colorSelect.options[colorSelect.selectedIndex];
//                 const newImageUrl = selectedOption.getAttribute('data-image');

//                 if (newImageUrl && mainImage) {
//                     mainImage.src = newImageUrl;
//                 }
//             });
//         });

//         $(document).ready(function() {


//             const $addToCartButton = $('#addToCartButton');
//             const $sizeSelect = $('#sizeSelect');
//             const $colorSelect = $('#colorSelect');
//             const $stateSelect = $('#shippingStateSelect');
//             const externalLink = $addToCartButton.data('external-link');

//             // 🔁 Reusable check function
//             function checkVariationSelections() {
//                 const sizeSelected = $sizeSelect.val();
//                 // const colorSelected = $colorSelect.val();
//                 const stateSelected = $stateSelect.val();

//                 const allSelected = sizeSelected && stateSelected;
//                 // const allSelected = stateSelected;

//                 // if (selectedPrice !== undefined && selectedPrice !== '') {
//                 //     $('#product-price').text(`$ ${selectedPrice}`);
//                 //     $('#product_price').val(selectedPrice);
//                 // } else {
//                 //     // No size selected – reset to original price
//                 //     const originalPrice = $('#product-price').data('original-price');
//                 //     $('#product-price').text(`$ ${originalPrice}`);
//                 //     $('#product_price').val(originalPrice);
//                 // }

//                 if (allSelected) {
//                     $addToCartButton.prop('disabled', false)
//                         .removeClass('btn-primary')
//                         .addClass('btn-success');
//                 } else {
//                     $addToCartButton.prop('disabled', true)
//                         .removeClass('btn-success')
//                         .addClass('btn-primary');
//                 }
//             }

//             // ✅ Handle size selection + update price
//             $sizeSelect.on('change', function () {
//                 const selectedOption = $(this).find(':selected');
//                 const selectedPrice = selectedOption.data('price');

//                 if (selectedPrice !== undefined) {
//                     $('#product-price').text(`$ ${selectedPrice}`);
//                     $('#product_price').val(selectedPrice);
//                 }

//                 checkVariationSelections();
//             });

//             // ✅ Handle color selection
//             $colorSelect.on('change', function () {
//                 checkVariationSelections();
//             });

//             // ✅ Handle shipping state selection
//             $stateSelect.on('change', function () {
//                 checkVariationSelections();
//             });

//             // ✅ External link case
//             if (externalLink) {
//                 $addToCartButton.prop('disabled', false)
//                     .removeClass('btn-success')
//                     .addClass('btn-primary');

//                 $addToCartButton.on('click', function (e) {
//                     e.preventDefault();
//                     window.open(externalLink, '_blank');
//                 });
//             }

//             // 👇 Initial check on page load
//             checkVariationSelections();
        // });
    document.addEventListener('DOMContentLoaded', function () {
        const sizeSelect = document.getElementById('sizeSelect');
        const quantityInput = document.getElementById('quantity');
        const stockInfo = document.getElementById('stock-info');
        const stockWarning = document.getElementById('stock-warning');
        const addToCartButton = document.getElementById('addToCartButton');
        const stateSelect = document.getElementById('shippingStateSelect'); // Your state dropdown

        const productStock = parseInt(quantityInput.getAttribute('data-productStock')) || 0;
        const externalLink = addToCartButton.getAttribute('data-external-link'); // Set this attribute if needed

        function getMaxQuantity() {
            const selectedOption = sizeSelect.options[sizeSelect.selectedIndex];
            if (selectedOption && selectedOption.value) {
                return parseInt(selectedOption.getAttribute('data-quantity')) || 0;
            }
            return productStock;
        }

        function isStateSelected() {
            return stateSelect && stateSelect.value && stateSelect.value.trim() !== '';
        }

        function updateStockInfoAndLimit() {
            const maxQty = getMaxQuantity();
            const selectedSize = sizeSelect.value;

            if (!isStateSelected()) {
                addToCartButton.disabled = true;
                stockInfo.textContent = 'Please select a state';
                quantityInput.disabled = true;
                return;
            }

            if (maxQty > 0) {
                quantityInput.disabled = false;
                quantityInput.setAttribute('max', maxQty);
                if (!quantityInput.value || quantityInput.value == 0) {
                    quantityInput.value = 1;
                }
                stockInfo.textContent = `Available stock: ${maxQty}`;
                addToCartButton.disabled = false;
            } else {
                quantityInput.disabled = true;
                quantityInput.value = '';
                stockInfo.textContent = selectedSize ? 'Out of stock for selected size' : 'Out of stock';
                addToCartButton.disabled = true;
            }

            validateQuantity();
        }

        function validateQuantity() {
            const maxQty = getMaxQuantity();
            const currentQty = parseInt(quantityInput.value) || 0;

            if (currentQty > maxQty || currentQty <= 0) {
                stockWarning.style.display = 'block';
                addToCartButton.disabled = true;
            } else {
                stockWarning.style.display = 'none';
                if (maxQty > 0 && currentQty > 0 && isStateSelected()) {
                    addToCartButton.disabled = false;
                }
            }
        }

        // When size changes
        sizeSelect.addEventListener('change', updateStockInfoAndLimit);

        // When state changes
        if (stateSelect) {
            stateSelect.addEventListener('change', updateStockInfoAndLimit);
        }

        // + button logic
        document.querySelector('.plus').addEventListener('click', function () {
            const max = getMaxQuantity();
            let val = parseInt(quantityInput.value) || 0;
            if (val < max) quantityInput.value = val + 1;
            validateQuantity();
        });

        // - button logic
        document.querySelector('.minus').addEventListener('click', function () {
            let val = parseInt(quantityInput.value) || 1;
            if (val > 1) quantityInput.value = val - 1;
            validateQuantity();
        });

        quantityInput.addEventListener('input', validateQuantity);

        // External link handling
        if (externalLink) {
            addToCartButton.disabled = false;
            addToCartButton.classList.remove('btn-success');
            addToCartButton.classList.add('btn-primary');

            addToCartButton.addEventListener('click', function (e) {
                e.preventDefault();
                window.open(externalLink, '_blank');
            });
        }

        // Initial call
        updateStockInfoAndLimit();
    });

    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var holders = document.querySelectorAll('.image-holder');
            var previewHolder = document.getElementById('hover-preview');
            var imagePreview = previewHolder.querySelector('.image-preview');
            var productDetails = document.getElementById('productDetails');

            holders.forEach(function(holder) {
                var image = holder.querySelector('.image');

                holder.addEventListener('mousemove', function(event) {
                    var rect = holder.getBoundingClientRect();
                    var x = event.clientX - rect.left;
                    var y = event.clientY - rect.top;

                    var previewRect = previewHolder.getBoundingClientRect();
                    var previewWidth = previewRect.width;
                    var previewHeight = previewRect.height;

                    var scaleValue = 2; // Adjust scale value as needed
                    var bgX = -((x / rect.width) * (previewWidth * scaleValue - previewWidth));
                    var bgY = -((y / rect.height) * (previewHeight * scaleValue - previewHeight));

                    imagePreview.style.transform = 'scale(' + scaleValue + ')';
                    imagePreview.style.transformOrigin = 'top left';
                    imagePreview.style.position = 'absolute';
                    imagePreview.style.left = bgX + 'px';
                    imagePreview.style.top = bgY + 'px';

                    // Update magnifying glass position
                    var magGlass = holder.querySelector('.magnifying-glass');
                    magGlass.style.left = (x - 50) + 'px';
                    magGlass.style.top = (y - 50) + 'px';
                });

                holder.addEventListener('mouseenter', function() {
                    imagePreview.src = image.src;
                    previewHolder.classList.remove('d-none');
                    if (productDetails) {
                        productDetails.classList.add('hidden');
                    }
                    var magGlass = document.createElement("DIV");
                    magGlass.className = 'magnifying-glass';
                    holder.appendChild(magGlass);
                });

                holder.addEventListener('mouseleave', function() {
                    previewHolder.classList.add('d-none');
                    if (productDetails) {
                        productDetails.classList.remove('hidden');
                    }
                    imagePreview.style.transform = 'none';
                    imagePreview.style.left = '0';
                    imagePreview.style.top = '0';

                    var magGlass = holder.querySelector('.magnifying-glass');
                    if (magGlass) {
                        magGlass.parentNode.removeChild(magGlass);
                    }
                });
            });
        });
    </script>
@endsection