@extends('front.layout.app')
@section('title', 'Product Page')
@section('content')
<style>
    /*.product-detail {*/
    /*    max-width: 500px;*/
    /*    margin: 0 auto;*/
    /*}*/
    /* #variant-image img {
        width: 100%;
        max-height: 300px;
        object-fit: contain;
    } */

    .form-control {
        margin-bottom: 15px;
    }

    .product-detail {
        padding-top: 15rem;
    }

</style>
{{--<section class="inner-banner">
        <img src="{{ asset('front/assets/images/inner-bg.webp') }}" alt="image" class="img-fluid w-100 h-100">
<div class="container">
    <div class="inner-banner__content">
        <div class="row">
            <div class="col-lg-6">
                <h1 class="font-bold">Product Page</h1>
                <p>
                    It is a long established fact that a reader will be distracted by the readable content of a
                    page when looking at its layout.
                </p>
                <div class="btn-group">
                    <a href="{{ route('front.about') }}" class="themeBtn">Learn More</a>
                    <a href="{{ route('front.contact') }}" class="themeBtn">Contact Us</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="inner-banner__bottom">
    <div class="container">
        <ul class="bottom__links d-flex align-items-center justify-content-start">
            <li><a href="{{ route('front.index') }}"><span><i class="fas fa-home"></i></span> Home</a></li>
            <li><a href=""><span><i class="fas fa-angle-right"></i></span> Product</a></li>
        </ul>
    </div>
</div>
</section>--}}
@if ($product)
<section class="product-detail padd-y">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <!-- Main Swiper Slider -->
                <div class="swiper productSlider">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <figure class="productSlider-img">
                                <img src="{{ $syncProduct['thumbnail_url'] ?? '' }}" alt="image" class="img-fluid">
                            </figure>
                        </div>
                        @foreach ($images as $image)
                        <div class="swiper-slide">
                            <figure class="productSlider-img">
                                <img src="{{ $image }}" alt="image" class="img-fluid">
                            </figure>
                        </div>
                        @endforeach
                    </div>
                </div>

                <!-- Thumbnail Swiper Slider -->
                <div thumbsSlider="" class="swiper thumbproductSlider">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <figure class="thumbproductSlider-img">
                                {{-- <img src="{{ $syncProduct['thumbnail_url'] ?? '' }}" alt="image" class="img-fluid"> --}}
                            </figure>
                        </div>
                        {{-- @foreach ($images as $image) --}}
                        <div class="swiper-slide">
                            <figure class="thumbproductSlider-img">
                                {{-- <img src="{{ $image }}" alt="image" class="img-fluid"> --}}
                            </figure>
                        </div>
                        {{-- @endforeach --}}
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="product-main">
                    <h3> {{ $syncProduct['name'] ?? '' }}</h3>
                    <div class="product-review">
                        <ul class="review-stars">
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                        </ul>
                        <div class="review-content">
                            <p>288 reviews</p>
                            <p>100ml</p>
                        </div>
                    </div>
                    <label for="color-select">Choose Color:</label>
                    <select id="color-select" class="form-control">
                        <option value="" disabled selected>Select a color</option>
                        @foreach ($variants as $color => $details)
                        <option value="{{ $color }}">{{ $color }}</option>
                        @endforeach
                    </select>

                    <!-- Size Dropdown -->
                    <label for="size-select">Choose Size:</label>
                    <select id="size-select" class="form-control" disabled>
                        <option value="" disabled selected>Select a size</option>
                    </select>

                    <!-- Price Display -->
                    <p id="price-display" class="price mt-3">Price: $<span>0.00</span></p>

                    <!-- Variant Image -->
                    {{-- <div id="variant-image1" class="mt-3">
                        <img src="" alt="Selected Color Image" class="img-fluid d-none">
                    </div> --}}

                    <div class="product-btn">
                        <div class="numberone d-flex">
                            <span class="minus"><i class="fas fa-minus"></i></span>
                            <input class="in-num" name="quantity" value="1" type="number" min="1" readonly>
                            <span class="plus"><i class="fas fa-plus"></i></span>
                        </div>
                        {{--                                @if (Auth::check() && Auth::user()->hasRole('user')) --}}
                        <a id="add-to-cart-printful" class="themeBtn add-to-cart-printful">Add to cart</a>
                        {{--                                @endif --}}
                    </div>

                    <input type="hidden" value="{{ $syncProduct['id'] }}" id="product_id">
                    <input type="hidden" value="{{ $syncProduct['name'] }}" id="product_name">

                    <div class="product-wishlist">
                        <a href="#"><span><i class="far fa-heart"></i></span> Add to wishlist</a>
                        <p><span><i class="fas fa-arrow-circle-left"></i></span> 30 days money-back guarantee</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
@endif

@endsection


@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

$(document).ready(function () {
    $('.thumbproductSlider').hide();
    const variants = @json($variants);
    const mockups = @json($mockupTaskData['mockups']);

    let defaultImage = "{{ $syncProduct['thumbnail_url'] ?? '' }}";
    if (defaultImage) {
        $('#variant-image img').attr('src', defaultImage).removeClass('d-none');
    }



    $('#color-select').on('change', function () {
        const selectedColor = $(this).val();

        if (variants[selectedColor]) {
            const sizes = variants[selectedColor]['sizes'];
            const selectedVariantIds = Object.values(sizes).map(size => size.variant_id);

            const filteredMockups = mockups.filter(mockup =>
                mockup.variant_ids.some(id => selectedVariantIds.includes(id))
            );
            const hasOnlyFrontMockups = filteredMockups.every(mockup => mockup.placement === "front");

            $('#size-select').empty().append('<option value="" disabled selected>Select a size</option>');

            for (const size in sizes) {
                let updatedPrice = (sizes[size].price * 1.2).toFixed(2);
                $('#size-select').append(
                    `<option value="${size}" data-price="${updatedPrice}" data-variant-id="${sizes[size].variant_id}">${size}</option>`
                );
            }
            $('#size-select').prop('disabled', false);


            let mainSwiperHTML = `<div class="swiper-wrapper">`;
            let thumbSwiperHTML = `<div class="swiper-wrapper">`;
            let addedPlacements = new Set();

            filteredMockups.forEach((mockup, index) => {

                if (addedPlacements.has(mockup.placement)) return;
                    addedPlacements.add(mockup.placement);


                // mainSwiperHTML += `<div class="swiper-slide" data-placement="${mockup.placement}" data-swiper-slide-index="${index}">
                //     <figure class="productSlider-img zoom" id="variant-image" onmousemove="zoom(event)">
                //         <img src="${mockup.mockup_url}" alt="${mockup.placement}" class="img-fluid">
                //     </figure>
                // </div>`;
                 mainSwiperHTML += `<div class="swiper-slide" data-placement="${mockup.placement}" data-swiper-slide-index="${index}">
                    <figure class="productSlider-img zoom-container" id="variant-image">
                        <img src="${mockup.mockup_url}" alt="${mockup.placement}" class="img-fluid zoom-image">
                    </figure>
                </div>`;

                // Add to Thumbnail Swiper (if not "front")
                if (mockup.placement !== "front") {
                    thumbSwiperHTML += `<div class="swiper-slide" data-index="${index}">
                                            <figure class="thumbproductSlider-img">
                                                <img src="${mockup.mockup_url}" alt="${mockup.placement}" class="img-fluid">
                                            </figure>
                                        </div>`;
                }
            });

            mainSwiperHTML += `</div>`;
            thumbSwiperHTML += `</div>`;

            $('.productSlider').html(mainSwiperHTML);
            $('.thumbproductSlider').html(thumbSwiperHTML);

            let thumbSlideCount = $('.thumbproductSlider .swiper-slide').length;

            if (!hasOnlyFrontMockups || thumbSlideCount === 1) {
                $('.thumbproductSlider').show();
            } else {
                $('.thumbproductSlider').hide();
            }


            let productSwiper = new Swiper(".productSlider", { slidesPerView: 1, loop: true });
            let thumbSwiper = new Swiper(".thumbproductSlider", {
                slidesPerView: 3,
                // loop: true,
                spaceBetween: 30,
            });


            $('.thumbproductSlider-img img').on('click', function () {
                let clickedSrc = $(this).attr('src');
                let thumbIndex = $(this).closest('.swiper-slide').data('index');

                $('.productSlider .swiper-slide').each(function () {
                    if ($(this).find('img').attr('src') === clickedSrc) {
                        let mainIndex = $(this).data('swiper-slide-index');
                        productSwiper.slideTo(mainIndex);
                    }
                });

                $('#variant-image img').attr('src', clickedSrc);
            });

        } else {
            $('#size-select').prop('disabled', true).empty().append('<option value="" disabled selected>Select a size</option>');
            $('#variant-image img').addClass('d-none').attr('src', '');
            $('.thumbproductSlider').hide();
        }

        $('#price-display span').text('0.00');
    });

    $('#size-select').on('change', function () {
        const selectedOption = $(this).find(':selected');
        const price = selectedOption.data('price');
        $('#price-display span').text(price);
    });


    $(document).on("mousemove", ".zoom-container", function (event) {
        let zoomImg = $(this).find('.zoom-image');

        let offset = $(this).offset();
        let x = (event.pageX - offset.left) / $(this).width() * 100;
        let y = (event.pageY - offset.top) / $(this).height() * 100;

        zoomImg.css({
            "transform-origin": `${x}% ${y}%`,
            "transform": "scale(2)"
        });
    });

    $(document).on("mouseleave", ".zoom-container", function () {
        $(this).find('.zoom-image').css({
            "transform": "scale(1)"
        });
    });
});
$('#add-to-cart-printful').on('click', function (e) {
        e.preventDefault();

        const selectedColor = $('#color-select').val();
        const selectedSize = $('#size-select').val();
        const quantity = $('input[name="quantity"]').val();
        const productId = $('#product_id').val();
        const productName = $('#product_name').val();

        // Ensure selections are valid
        if (!selectedColor || !selectedSize) {
            alert('Please select a color and size.');
            return;
        }

        // Send AJAX request
        $.ajax({
            url: "{{ route('front.add.to.cart.printful') }}",
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                product_id: productId,
                selectedColor: selectedColor,
                selectedSize: selectedSize,
                quantity: quantity,
                productName: productName,
                variants: @json($variants),
            },
            success: function (response) {
                toastr.success(response.success);
                window.location.href = "{{ route('front.cart') }}";

            },
            error: function (xhr, status, error) {
                console.error(error);
                alert('Failed to add item to cart.');
            }
        });
    });
</script>
@endpush