@extends('front.layout.app')
<style>
    .custom-style{
       background: var(--primary) !important;
       transition: background 0.3s ease;
       color: white !important;
    }
    .custom-style:hover, .custom-style:active {
       background: #c6991d !important;
    }
</style>
@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 fdfsdfd">
                                <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" data-base-price="{{ $product->price ?? 0 }}">
                                ${{ number_format($product->price ?? 0, 2) }}
                            </span></li>
                        </ul>

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



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

            @foreach($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 }}"
                        data-quantity="{{ $variation->quantity ?? 0 }}"
                        value="{{ $sizeIdentifier }}">
                        {{ $sizeLabel }}
                    </option>
                    @php $addedSizes[] = $sizeIdentifier; @endphp
                @endif
            @endforeach
        </select>
    </div>
@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" name="product_price" id="product_price_input" value="{{ $product->price }}">

                            {{-- <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"
                                                    data-productStock="{{ $product->stock_quantity }}"
                                                    name="quantity" id="quantity" value="1" readonly>

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

                            @if (!auth()->check())
                            @elseif($product->stock_quantity == 0 && !isset($product->external_link))
                                <button class="themeBtn mt-3" type="submit" disabled>Out Of Stock
                                </button>
                            @endif
                            @if(isset($product->external_link) && !empty($product->external_link))

                            @else
                                <div id="stock-info" class="text-info mt-2"></div>
                            @endif
                            <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"--}}
{{--                                {{ !empty($product->external_link) ? 'data-external-link=' . $product->external_link : '' }}--}}
{{--                                {{ !empty($product->external_link) ? '' : 'disabled' }}>--}}
{{--                                Add to cart--}}
{{--                            </button>--}}
                                <button
                                    class="custom-style mt-3"
                                    id="addToCartButton"
                                    type="button"
                                    onclick="{{ !empty($product->external_link) ? "window.location.href='{$product->external_link}'" : 'this.form.submit()' }}">
                                    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>
                </div>
                <div class="col-xl-4 col-lg-5  col-md-12">
                    <div class="productRight">


                        <div id="accordion">

                            <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">
                <h3>Related Products</h3>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper flowerSlider">
                        <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">
                <h3>Other Ways to Enjoy This Strain</h3>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper flowerSlider">
                        <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');
            const stockWarning = document.getElementById('stock-warning');
            const addToCartButton = document.getElementById('addToCartButton');
            const stateSelect = document.getElementById('shippingStateSelect');
            const priceElement = document.getElementById('product-price');
            const hiddenPriceInput = document.getElementById('product_price_input');

            const basePrice = parseFloat(priceElement?.getAttribute('data-base-price')) || 0;
            const productStock = parseInt(quantityInput?.getAttribute('data-productStock')) || 0;
            const externalLink = addToCartButton?.getAttribute('data-external-link');

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

            function getMaxQuantity() {
                const selectedOption = sizeSelect?.options[sizeSelect.selectedIndex];
                const selectedSize = sizeSelect?.value;

                if (isStateSelected()) {
                    if (selectedSize) {
                        return parseInt(selectedOption?.getAttribute('data-quantity')) || 0;
                    } else {
                        return productStock;
                    }
                }
                return 0;
            }

            function updateStockInfoAndLimit() {
                const selectedOption = sizeSelect?.options[sizeSelect.selectedIndex];
                const selectedSize = sizeSelect?.value;
                const selectedPrice = parseFloat(selectedOption?.getAttribute('data-price')) || basePrice;
                const maxQty = getMaxQuantity();

                if (!isStateSelected()) {
                    priceElement.textContent = `$${basePrice.toFixed(2)}`;
                    hiddenPriceInput.value = basePrice.toFixed(2);
                    quantityInput.disabled = true;
                    addToCartButton.disabled = true;
                    stockInfo.textContent = 'Please select a state';
                    return;
                }

                priceElement.textContent = `$${selectedPrice.toFixed(2)}`;
                hiddenPriceInput.value = selectedPrice.toFixed(2);

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

                validateQuantity();
            }

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

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

            // Events
            if (sizeSelect) sizeSelect.addEventListener('change', updateStockInfoAndLimit);
            if (stateSelect) stateSelect.addEventListener('change', updateStockInfoAndLimit);

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

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

            quantityInput.addEventListener('input', validateQuantity);

            // 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');
            //     });
            // }
            if (externalLink) {
                addToCartButton.addEventListener('click', function (e) {
                    e.preventDefault(); // Stop form from submitting
                    window.open(externalLink, '_blank'); // Open link in new tab
                });
            }

            // Initial setup
            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