@section('metaTitle', $product->getMetaTags()['title'])
@section('metaDescription', $product->getMetaTags()['description'])
@section('metaKeywords', $product->getMetaTags()['keywords'])
@extends('frontend.layouts.applayout')
@section('main-content')
    @php
        $special = false;
        $default_variant = '';
        $today = date('Y-m-d');
        if ($product->special_price_from) {
            if ($product->special_price_from <= $today && $product->special_price_to >= $today) {
                $special = true;
            }
        }
        foreach ($product->variants as $index => $variant) {
            if ($index === 0 && $variant?->variant_value?->name) {
                $default_variant = $variant->id;
            }
        }
    @endphp
    @push('styles')
        <style>
            body,
            html {
                overflow-x: hidden;
            }

            .product_variant {
                border: 2px solid #7f385e;
                font-size: 13px !important;
                text-align: center;
                padding: 5px 10px;
            }

            .product_variant.active_variant {
                background: #7f385e;
                color: white !important;
                font-size: 13px !important;
                text-align: center;
                padding: 5px 10px;

            }

            .product_variant.active_variant p {
                color: white !important;
            }

            .previewPane {
                width: 100%;
            }
        </style>
    @endpush




    <div class="content mt-4 detail_page ">
        <div class="container mt-3">
            <nav aria-label="breadcrumb">
                <div class="row">
                    <div class="col-lg-11 px-4 mx-auto">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ $product->name }}</li>
                        </ol>
                    </div>
                </div>
            </nav>
        </div>

        <div class="container secs pt-0">
            <div class="row px-lg-5">
                <div class="product_preview_column col-md-4  mx-auto">
                    {{-- <div class="containerssdd d-md-none d-none">
                        <div class="exzoom" id="exzoom">
                            <div class="exzoom_img_box">
                                <ul class="exzoom_img_ul">
                                    @if (is_null($product->images) || count($product->images) == 0)
                                        <li class="item">
                                            <img src="{{ asset('frontend/assets/images/default.png') }}"
                                                alt="Product Image">
                                        </li>
                                    @else
                                        @foreach ($product->images as $image)
                                            <li class="item previewPane">
                                                <img src="{{ $image->image_url }}"
                                                    data-magnify-src="{{ $image->image_url }}" alt="Product Image"
                                                    class="image_key w-100">
                                            </li>
                                        @endforeach
                                    @endif
                                </ul>
                            </div>
                            <div class="exzoom_nav"></div>
                        </div>
                    </div> --}}
                    <div class="prd_images d-md-block d-block mx-auto">
                        <div id="sync1" class="owl-carousel owl-theme">
                            @php
                                $variant = $product->variants->first(); // Get the first variant
                            @endphp
                            @if ($variant && !empty($variant->variant_image))
                                <div class="item">
                                    <img id="variantImage" src="{{ asset('storage/' . $variant->variant_image) }}"
                                        alt="Product Image" class="image_key w-100">
                                </div>
                            @elseif ($variant && (empty($variant->variant_image) && !empty($product->images) && count($product->images) > 0))
                                <div class="item">
                                    <img src="{{ asset($product->images[0]->image_url) }}" alt="Product Image"
                                        class="image_key w-100">
                                </div>
                            @elseif (!empty($product->images) && count($product->images) > 0)
                                <div class="item">
                                    <img src="{{ asset($product->images[0]->image_url) }}" alt="Product Image"
                                        class="image_key w-100">
                                </div>
                            @else
                                <div class="item">
                                    <img src="{{ asset('frontend/images/default.jpg') }}" alt="Produc Image"
                                        class="image_key w-100">
                                </div>
                            @endif


                        </div>
                        {{-- <div id="sync2" class="owl-carousel owl-theme mt-2">
                            @foreach ($product->images as $image)
                                <div class="item">
                                    <img src="{{ $image->image_url }}" alt="Product Image" class="">
                                </div>
                            @endforeach
                        </div> --}}
                    </div>
                </div>
                <div class="div col-md-7">
                    <div class="prd_desc">
                        <h2 class="mb-3" style="font-size: 22px;">{{ $product->name }}</h2>
                        <p>
                            @if ($product->brand_name)
                                <span><b>By</b>
                                    <img style="height:30px;" src="{{ asset($product?->brand_name?->image) }}"
                                        alt="">
                                    <em class="text-capitalize">{{ $product?->brand_name?->name }}</em>
                                </span>
                            @endif
                            {{-- <span class="mx-2">|</span> --}}
                        </p>
                        <p><span class="sku"><b>SKU :</b> {{ $product->sku }}</span></p>
                        <p><b>Quantity :</b> {{ $product->weight . ' ' . $product->weight_type }}
                            {{-- @foreach ($product->reviews as $review)
                                <div class="">
                                    <div class="">
                                        @for ($i = 0; $i < 5; $i++)
                                            @if ($i < $review->rating)
                                                <span>
                                                    <i class='bx bxs-star'></i>
                                                </span>
                                            @else
                                                <span>
                                                    <i class='bx bx-star'></i>
                                                </span>
                                            @endif
                                        @endfor
                                    </div>

                                </div>
                            @endforeach
                            <b></b> --}}
                        </p>
                        <p><strong>Description:</strong> {{ $product->small_description }}</p>
                        {{-- <p>{!! $product->description !!}</p> --}}
                        <div class="row align-items-center g-2" id="variantContainer">
                            @foreach ($product->variants as $index => $variant)
                                <div class="col-md-2 p-0  col-4 variant-item {{ $index >= 5 ? 'd-none' : '' }}">
                                    <div id="v_container"
                                        class="product_variant rounded {{ $loop->first ? 'active_variant' : '' }}"
                                        data-bs-toggle="tooltip" data-bs-placement="top"
                                        data-variant-id="{{ $variant->id }}"
                                        data-image="{{ $variant->variant_image ? asset('storage/' . $variant->variant_image) : asset($product->images[0]->image_url) }}"
                                        title="{{ $variant->variant_value->name ?? '' }}"
                                        onclick="showVariantImage('{{ $variant->variant_image ? asset('storage/' . $variant->variant_image) : asset($product->images[0]->image_url) }}')">

                                        <img src="{{ $variant->variant_image ? asset('storage/' . $variant->variant_image) : asset('frontend/images/default.jpg') }}"
                                            alt="{{ $variant->variant_value->name ?? 'Doaba Logo' }}"
                                            class="img-fluid rounded v_image">
                                    </div>
                                </div>
                            @endforeach

                            @if (count($product->variants) > 5)
                                <!-- Right Arrow Button -->
                                <div class="col-md-2 col-4 text-center">
                                    <button id="showMoreVariants"
                                        class="btn btn-light border rounded-circle d-flex align-items-center justify-content-center"
                                        style="width: 70px; height: 70px;">
                                        <i class="fas fa-chevron-right"></i>
                                    </button>
                                </div>
                            @endif
                        </div>
                        <p class="prd-price mb-1">
                            @if ($special)
                                <del>${{ number_format($product->price, 2) }}</del>
                                ${{ number_format($product->special_price, 2) }}
                            @else
                                ${{ number_format($product->price, 2) }}
                            @endif
                        </p>
                        <hr>
                        <div class="comments">
                            <p class="mb-1">Comments</p>
                            <textarea name="comments" id="comments" class="form-control" placeholder="Add any comments here..."></textarea>
                        </div>
                        <hr>
                        <div class="detail-addtocart">
                            <div class="number">
                                {{-- <p class="mb-1">Quantity</p> --}}
                                {{-- <div class="input-group">
                                    <a data-id="{{ $product->id }}" type="button"
                                        class="d-flex justify-content-center align-items-center button-plus qtyDecrement">-</a>
                                    <input type="text" step="1" max="" value="1" name="quantity"
                                        id="quantity-{{ $product->id }}"
                                        class="quantity-field quantity-{{ $product->id }}">
                                    <a data-id="{{ $product->id }}" type="button"
                                        class="d-flex justify-content-center align-items-center button-minus qtyIncrement">+</a>
                                </div> --}}
                                <div class="qty-list input-group align-self-center">
                                    <a type="button"
                                        style="border-top-left-radius: 15px !important;border-bottom-left-radius: 15px !important;"
                                        data-id="{{ $product->id }}"
                                        class="d-flex justify-content-center align-items-center button-minus qtyDecrement">-</a>
                                    <input type="text" step="1" value="1" name="quantity"
                                        id="quantity-{{ $product->id }}"
                                        class="quantity-field quantity-{{ $product->id }}">
                                    <a type="button"
                                        style="border-top-right-radius: 15px !important;border-bottom-right-radius: 15px !important;"
                                        data-id="{{ $product->id }}"
                                        class="d-flex justify-content-center align-items-center button-plus qtyIncrement">+</a>
                                </div>
                            </div>
                            <!--<div class="clearflix"></div>-->
                            <div class="">
                                {{-- <p class="mb-1">&nbsp;</p> --}}
                                <div class="add-cart">
                                    @if ($product->inventory->inventory > 0)
                                        <a class="addToCart" data-id="{{ $product->id }}"
                                            data-variant="{{ $default_variant }}"> Add to cart</a>
                                    @else
                                        <p class="stock-out">
                                            <a class=" bg-danger text-white d-inline-block py-2 px-4"
                                                data-id="{{ $product->id }}">
                                                Out Of Stock
                                            </a>
                                        </p>
                                    @endif
                                    @if (auth('customer')->user())
                                        @php
                                            $wishlistProductIds = auth('customer')
                                                ->user()
                                                ->wishlist()
                                                ->pluck('product_id')
                                                ->toArray();
                                            $productIdToCheck = $product->id;
                                            $isInWishlist = in_array($productIdToCheck, $wishlistProductIds);
                                        @endphp
                                        @if ($isInWishlist)
                                            <a style="min-width: 0" class="addToWishlist" data-id="{{ $product->id }}"
                                                href="{{ route('add-to-wishlist', $product->id) }}">
                                                <i style="font-size: 23px;" class='bx bxs-heart'></i>
                                            </a>
                                        @else
                                            <a style="min-width: 0" class="addToWishlist" data-id="{{ $product->id }}"
                                                href="{{ route('add-to-wishlist', $product->id) }}">
                                                <i style="font-size: 23px;" class='bx bx-heart'></i>
                                            </a>
                                        @endif
                                    @endif
                                </div>
                            </div>
                        </div>
                        @if (auth('customer')->user())
                            <div class="">
                                <button class="btn my-4"
                                    style="background:#7f385e;border:0;color:#fff;border-radius: 1.25rem;" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#reviewForm" aria-expanded="false"
                                    aria-controls="reviewForm">
                                    Write a review
                                </button>
                            </div>
                        @endif
                        <div class="collapse" id="reviewForm">
                            <div class="card card-body">
                                <div class="mt-2">
                                    <div id="rateYo"></div>
                                    <form action="{{ route('reviews.store') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="rating" id="rating">
                                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                                        <div class="mt-3">
                                            <label class="form-label" for="title">Title *</label>
                                            <input type="text" id="title" name="title" class="form-control"
                                                required>
                                        </div>
                                        <div class="mt-3">
                                            <label class="form-label" for="comment">Comment</label>
                                            <textarea name="comment" class="form-control" rows="3"></textarea>
                                        </div>
                                        <div class="mt-3">
                                            <button type="submit" style="background:#7f385e;border:0;color:#fff;"
                                                class="btn">Submit Review
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>

        @push('scripts')
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                    tooltipTriggerList.map(function(tooltipTriggerEl) {
                        return new bootstrap.Tooltip(tooltipTriggerEl);
                    });
                });

                function showVariantImage(imageUrl) {
                    document.getElementById('variantImagePreview').src = imageUrl;
                    var variantModal = new bootstrap.Modal(document.getElementById('variantImageModal'));
                    variantModal.show();
                }
                document.addEventListener("DOMContentLoaded", function() {
                    let showMoreBtn = document.getElementById("showMoreVariants");
                    let hiddenVariants = document.querySelectorAll(".variant-item.d-none");
                    let isExpanded = false; // Track state

                    showMoreBtn?.addEventListener("click", function() {
                        if (!isExpanded) {
                            // Expand: Show hidden variants
                            hiddenVariants.forEach(item => item.classList.remove("d-none"));
                            this.innerHTML = '<i class="fas fa-chevron-left"></i>'; // Change to left arrow
                        } else {
                            // Collapse: Hide variants
                            hiddenVariants.forEach(item => item.classList.add("d-none"));
                            this.innerHTML = '<i class="fas fa-chevron-right"></i>'; // Change back to right arrow
                        }
                        isExpanded = !isExpanded; // Toggle state
                    });
                });
            </script>
            <script>
                $(document).ready(function() {
                    $(".product_variant").click(function() {
                        console.log("sfdf");

                        let imageUrl = $(this).data("image");

                        if (imageUrl) {
                            console.log("Switching to Image:", imageUrl);
                            $(".owl-item.active img, .owl-item.cloned img").attr("src", imageUrl);
                        }
                    });
                });
            </script>
            <script>
                $(document).ready(function() {
                    $(".containerssdd").imagesLoaded(function() {
                        $("#exzoom").exzoom({
                            autoPlay: false
                        });
                        $("#exzoom").removeClass("hidden");
                    });
                    // $(".image_key").magnify({
                    //     shape: "square",
                    // });
                });
            </script>
            {{-- <script>
            $(document).ready(function() {
                $('.addToWishlist').click(function(event) {
                    let product_id = $(this).data("id");
                    let url = window.location.origin + "/add/wishlist";
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: {
                            product_id: product_id,
                            _token: "{{ csrf_token() }}" // Include CSRF token
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success('Item added to wishlist')
                            }
                            if (response.error) {
                                toastr.error(response.error)
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error(xhr.responseText);
                        },
                        complete: function() {
                            $('.enquire-btn').prop('disabled', false);
                        }
                    });
                });
            });
        </script> --}}
            {{-- <script src="{{ asset('frontend/assets/tumbs.js') }}" referrerpolicy="no-referrer"></script> --}}
            <script>
                $(document).ready(function() {
                    var sync1 = $("#sync1");
                    var sync2 = $("#sync2");
                    var syncedSecondary = true;

                    sync1.owlCarousel({
                        items: 1,
                        slideSpeed: 2000,
                        nav: false,
                        autoplay: false,
                        dots: false,
                        loop: true,
                        responsiveRefreshRate: 200,
                    }).on("changed.owl.carousel", function(event) {
                        syncPosition(event);
                        reinitializeZoom();
                    });

                    sync2.on("initialized.owl.carousel", function() {
                        sync2.find(".owl-item").eq(0).addClass("current");
                    }).owlCarousel({
                        dots: false,
                        nav: true,
                        smartSpeed: 200,
                        slideSpeed: 500,
                        slideBy: 1,
                        responsiveRefreshRate: 100,
                        navText: ["<i class='bx bx-left-arrow-alt'></i>", "<i class='bx bx-right-arrow-alt'></i>"],
                        responsive: {
                            0: {
                                items: 2
                            },
                            600: {
                                items: 3
                            },
                            1000: {
                                items: 4
                            },
                            1280: {
                                items: 5
                            },
                            1400: {
                                items: 5
                            },
                            1600: {
                                items: 6
                            },
                            1800: {
                                items: 6
                            }
                        }
                    }).on("changed.owl.carousel", syncPosition2);

                    sync2.on("click", ".owl-item", function(e) {
                        e.preventDefault();
                        var number = $(this).index();
                        sync1.data("owl.carousel").to(number, 300, true);
                        reinitializeZoom();
                    });

                    function syncPosition(el) {
                        var count = el.item.count - 1;
                        var current = Math.round(el.item.index - el.item.count / 2 - 0.5);

                        if (current < 0) {
                            current = count;
                        }
                        if (current > count) {
                            current = 0;
                        }

                        sync2.find(".owl-item")
                            .removeClass("current")
                            .eq(current)
                            .addClass("current");

                        var onscreen = sync2.find(".owl-item.active").length - 1;
                        var start = sync2.find(".owl-item.active").first().index();
                        var end = sync2.find(".owl-item.active").last().index();

                        if (current > end) {
                            sync2.data("owl.carousel").to(current, 100, true);
                        }
                        if (current < start) {
                            sync2.data("owl.carousel").to(current - onscreen, 100, true);
                        }
                    }

                    function syncPosition2(el) {
                        if (syncedSecondary) {
                            var number = el.item.index;
                            sync1.data("owl.carousel").to(number, 100, true);
                            reinitializeZoom();
                        }
                    }

                    function reinitializeZoom() {
                        // Remove any existing zoom containers to avoid conflicts
                        $('.zoomContainer').remove();

                        // Find the active item in the main carousel
                        var activeItem = $('#sync1 .owl-item.active img');

                        // Apply the zoom only to the active image
                        if (activeItem.length) {
                            activeItem.ezPlus({
                                zoomType: 'inner',
                                cursor: 'crosshair',
                                onZoomedImageLoaded: function() {
                                    // Customize zoom window if needed
                                    $('.zoomWindow').css({
                                        'background-color': '#ffff',
                                    });
                                }
                            });
                        }
                    }

                    reinitializeZoom();

                    sync1.on('dragged.owl.carousel', function(event) {
                        reinitializeZoom();
                    });

                    sync1.on('translated.owl.carousel', function(event) {
                        reinitializeZoom();
                    });

                    $('.owl-carousel.owl-two').owlCarousel({
                        loop: false,
                        margin: 0,
                        nav: true,
                        dots: false,
                        thumbs: false,
                        navText: ["<i class='bx bx-left-arrow-alt'></i>", "<i class='bx bx-right-arrow-alt'></i>"],
                        responsive: {
                            0: {
                                items: 2
                            },
                            600: {
                                items: 3
                            },
                            700: {
                                items: 3
                            },
                            1000: {
                                items: 5
                            },
                            1280: {
                                items: 5
                            },
                            1400: {
                                items: 6
                            },
                            1600: {
                                items: 6
                            },
                            1800: {
                                items: 7
                            }
                        }
                    });
                });
            </script>
            <script>
                $(function() {
                    var $rateYo = $("#rateYo").rateYo({
                        fullStar: true
                    });
                    $("#rateYo").click(function() {
                        /* get rating */
                        var rating = $rateYo.rateYo("rating");
                        $('#rating').val(rating);
                    });
                });
                $(document).ready(function() {
                    $('.product_variant').on('click', function() {
                        $('.product_variant').removeClass('active_variant');
                        $(this).addClass('active_variant');
                        var variantId = $(this).data('variant-id');
                        // var variantPrice = $(this).data('variant-price');
                        // var title = $(this).data('title');
                        // var size = $(this).data('size');
                        $('.addToCart').data('variant', variantId);
                        // $('.prd-price').text('');
                        // $('.prd-price').text('$' + variantPrice);
                        // $('#prod-title').text('');
                        // $('#prod-title').text(title);
                        // $('#prod-size').text('');
                        // $('#prod-size').text(size);
                    });
                });
            </script>
            <script>
                // $(function() {
                //     $('.previewPane').mousemove(function(ev) {
                //         $('#zoomer').css('display', 'inline-block');
                //         var img = $(this).find('.image_key').attr('src');
                //         var posX = ev.offsetX ? (ev.offsetX) : ev.pageX - $(this).offset().left;
                //         var posY = ev.offsetY ? (ev.offsetY) : ev.pageY - $(this).offset().top;
                //         $('#zoomer').css('background-position', ((-posX * 1) + "px " + (-posY * 1) + "px"));
                //         $('#zoomer').css('background-image', 'url(' + img + ')');
                //         // Set z-index of previewPane to 1
                //         $(this).css('z-index', '9999999');
                //     });

                //     $('.previewPane').mouseleave(function() {
                //         $('#zoomer').css('display', 'none');
                //         $(this).css('z-index', '');
                //     });
                // });
            </script>
        @endpush
    @endsection