@extends('frontend.layout.applayout')
@section('title', $product->name)
@section('main-content')
    <style>
        .product_variant {
            border: 2px solid #3b7d7c;
        }

        .product_variant.active_variant {
            background: #3b7d7c;
            color: white !important;
        }
    </style>
    @php
        use Carbon\Carbon;

        $special = false;
        $default_variant = '';
        $today = Carbon::today();
        $specialPriceFrom = Carbon::today()->toDateString();
        $specialPriceTo = $product->special_price_to;

        if ($specialPriceFrom && $specialPriceTo) {
            $specialFrom = Carbon::parse($specialPriceFrom);
            $specialTo = Carbon::parse($specialPriceTo);

            if ($specialFrom->lte($today) && $specialTo->gte($today)) {
                $special = true;
            }
        }
        foreach ($product->variants as $variant) {
            if ($variant?->variant_value?->name == 'Case') {
                $default_variant = $variant->id;
            }
        }
    @endphp
    @push('scripts')
        <script>
            $(document).ready(function() {
                const defaultActiveVariant = $('.product_variant.active_variant');
                if (defaultActiveVariant.length > 0) {
                    const variantId = defaultActiveVariant.data('variant-id');
                    const variantPrice = defaultActiveVariant.data('variant-price');
                    const title = defaultActiveVariant.data('title');
                    const size = defaultActiveVariant.data('size');

                    $('.addToCart').data('variant', variantId);
                    $('.prd-price').text('$' + variantPrice);
                    $('#prod-size').text(size);
                    $('#prod-title').text(title);
                }

                $('.product_variant').on('click', function() {
                    $('.product_variant').removeClass('active_variant');
                    $(this).addClass('active_variant');
                    const variantId = $(this).data('variant-id');
                    const variantPrice = $(this).data('variant-price');
                    const title = $(this).data('title');
                    const size = $(this).data('size');

                    $('.addToCart').data('variant', variantId);
                    $('.prd-price').text('$' + variantPrice);
                    $('#prod-size').text(size);
                    $('#prod-title').text(title);
                });
            });
        </script>
    @endpush


    <div class="content mt-4 detail_page ">
        <div class="container mt-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $product->name }}</li>
                </ol>
            </nav>
        </div>

        <div class="container product_detail normal secs">
            <div class="row pb-5">
                <div class="prd_images col-md-5">
                    <div id="sync1" class="owl-carousel owl-theme">
                        @if (is_null($product->images) || count($product->images) == 0)
                            <div class="item">
                                <img src="{{ asset('frontend/assets/images/default.png') }}" alt="Product Image">
                            </div>
                        @else
                            @foreach ($product->images as $image)
                                <div class="item previewPane">
                                    <img src="{{ $image->image_url }}" data-magnify-src="{{ $image->image_url }}"
                                        alt="Product Image" class="image_key w-100">
                                </div>
                            @endforeach
                        @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 class="div col-md-7">
                    <div class="prd_desc">
                        <h2 class="text-capitalize">
                            {{ $product->name }}
                            <span id="prod-title">
                                @foreach ($product->variants as $variant)
                                    @if ($loop->first || $variant->variant_value?->name == 'Case')
                                        - {{ $variant->title }}
                                    @endif
                                @endforeach
                            </span>
                        </h2>
                        <p>
                            <span><b>By</b>
                                <em class="text-capitalize">{{ $product->brand_name->name ?? 'N/A' }}</em>
                            </span>
                            <span style="margin: 0 2px;">|</span>
                            <span style="margin: 0 2px;">|</span>
                            <span class="sku"><b>SKU</b> {{ $product->sku }}</span>

                        </p>
                        <p><b>Size :</b>
                            <span id="prod-size">
                                {{ $product->variants->first()?->size ?? $product->weight . ' ' . $product->weight_type }}
                            </span>
                        </p>

                        @if (Auth::guard('customer')->check())
                            <div class="row">
                                @foreach ($product->variants as $variant)
                                    <div class="col-md-2 col-4">
                                        <div style="cursor: pointer;"
                                            class="product_variant p-2 rounded {{ $variant?->variant_value?->name == 'Case' ? 'active_variant' : '' }}"
                                            data-variant-id="{{ $variant->id }}" data-title="{{ $variant->title }}"
                                            data-size="{{ $variant->size }}" data-variant-price="{{ $variant->price }}">
                                            <p class="mb-0"><strong>{{ $variant?->variant_value?->name }}</strong></p>
                                            <p class="mb-0">$ {{ $variant->price }}</p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        @if ($product->quantity_on_hand > 0)
                            <p class="text-success">In Stock.</p>
                            <p>{{ $product->small_description }}</p>

                            {{-- <p><span class="ratings"><i class="bx bxs-star active"></i><i class="bx bxs-star active"></i><i
                                        class="bx bxs-star active"></i><i class="bx bxs-star active"></i><i
                                        class="bx bxs-star"></i></span></p> --}}
                            @if (Auth::guard('customer')->check())
                                <hr>
                                <p class="prd-price">
                                    @if ($product->variants->isNotEmpty())
                                        @php
                                            $activeVariant = $product->variants->first();
                                            $variantPrice = $activeVariant->price;
                                        @endphp
                                        ${{ $variantPrice }}
                                    @else
                                        @if ($special)
                                            <del>{{ $product->price }}</del>
                                            ${{ $product->special_price }}
                                        @else
                                            ${{ $product->price }}
                                        @endif
                                    @endif
                                </p>
                                <hr>
                            @endif

                            <div class="detail-addtocart">
                                <div class="number">
                                    <p class="mb-1">Quantity</p>
                                    <div class="input-group"><input type="button" value="-" data-field="quantity"
                                            class="button-minus"> <input type="text" step="1" max=""
                                            id="quantity-{{ $product->id }}" value="1" name="quantity"
                                            class="quantity-field"> <input type="button" value="+"
                                            data-field="quantity" class="button-plus"></div>
                                </div>
                                <div>
                                    <p class="mb-1">&nbsp;</p>
                                    <div class="add-cart">
                                        <a class="addToCart" data-id="{{ $product->id }}"
                                            data-variant="{{ $default_variant }}"> Add to cart</a>
                                    </div>

                                </div>
                            </div>
                        @else
                            <p class="text-danger">Currently unavailable.</p>
                        @endif

                    </div>

                </div>
            </div>
        </div>
    </div>


    <div class="container products mt-lg-5 mb-5">
        <h2 class="sec_title">Related Products</h2>
        <div class="owl-carousel owl-theme owl-two">
            @foreach ($relatedProducts as $relateproducts)
                <div class="item">
                    <div class="prd-box">
                        @if (count($relateproducts->images))
                            <a
                                href="{{ route('productByCategory', $relateproducts->id) . '?sku=' . $relateproducts->sku }}">
                                <img src="{{ asset($relateproducts?->images[0]->image_url) }}" class="img-fluid">
                            </a>
                        @else
                            <a
                                href="{{ route('productByCategory', $relateproducts->id) . '?sku=' . $relateproducts->sku }}">
                                <img src="{{ asset('frontend/assets/images/cash-carry.png') }}"
                                    class="img-fluid product-thumb">
                            </a>
                        @endif
                        <div class="prd-desc">
                            <span class="brand_name"> <b>Brand:</b> {{ $relateproducts->brand_name->name ?? 'N/A' }}
                            </span>
                            <span class="d-block prd-name">
                                <a
                                    href="{{ route('productByCategory', $relateproducts->id) . '?sku=' . $relateproducts->sku }}">
                                    {{ $relateproducts->name }} </a>
                            </span>
                        </div>
                        @if (Auth::guard('customer')->check())
                            <div class="product_grid_pricing d-flex">
                                <p class="pe-2 mb-1" style="color: rgb(79, 71, 173)">Price</p>

                                <span class="price">${{ number_format($relateproducts->price ?? 0, 2) }}</span>
                            </div>
                        @endif
                        <div class="detail-addtocart">
                            <div class="number">
                                <div class="input-group">
                                    <a data-id="{{ $relateproducts->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-{{ $relateproducts->id }}"
                                        class="quantity-field quantity-{{ $relateproducts->id }}">
                                    <a data-id="{{ $relateproducts->id }}" type="button"
                                        class="d-flex justify-content-center align-items-center button-minus qtyIncrement">+</a>
                                </div>
                                <a class="add_to_cart addToCart" data-id="{{ $relateproducts->id }}">
                                    <i class='bx bx-cart-add'></i> Add
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>


    <div class="container products mt-lg-5 mb-5">
        @if ($recentViewed->count() != 0)
            <h2 class="sec_title">Recently Viewed Products</h2>
            <div class="owl-carousel owl-theme owl-two">
                @foreach ($recentViewed as $recentproduct)
                    <div class="item">
                        <div class="prd-box">
                            @if (count($recentproduct->images))
                                <a
                                    href="{{ route('productByCategory', $recentproduct->id) . '?sku=' . $recentproduct->sku }}">
                                    <img src="{{ asset($recentproduct?->images[0]->image_url) }}" class="img-fluid">
                                </a>
                            @else
                                <a
                                    href="{{ route('productByCategory', $recentproduct->id) . '?sku=' . $recentproduct->sku }}">
                                    <img src="{{ asset('frontend/assets/images/cash-carry.png') }}"
                                        class="img-fluid product-thumb">
                                </a>
                            @endif
                            <div class="prd-desc">
                                <span class="brand_name"> <b>Brand:</b> {{ $recentproduct->brand_name->name ?? 'N/A' }}
                                </span>
                                <span class="d-block prd-name">
                                    <a
                                        href="{{ route('productByCategory', $recentproduct->id) . '?sku=' . $recentproduct->sku }}">
                                        {{ $recentproduct->name }} </a>
                                </span>
                            </div>
                            @if (Auth::guard('customer')->check())
                                <div class="product_grid_pricing d-flex">
                                    <p class="pe-2 mb-1" style="color: rgb(79, 71, 173)">Price</p>

                                    <span class="price"> ${{ number_format($recentproduct->price ?? 0, 2) }}</span>
                                </div>
                            @endif
                            <div class="detail-addtocart">
                                <div class="number">
                                    <div class="input-group">
                                        <a data-id="{{ $recentproduct->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-{{ $recentproduct->id }}"
                                            class="quantity-field quantity-{{ $recentproduct->id }}">
                                        <a data-id="{{ $recentproduct->id }}" type="button"
                                            class="d-flex justify-content-center align-items-center button-minus qtyIncrement">+</a>
                                    </div>
                                    <a class="add_to_cart addToCart" data-id="{{ $recentproduct->id }}">
                                        <i class='bx bx-cart-add'></i> Add
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

        <div class="btn_wrapper text-center">
            <a href="{{ route('guest.productlists') }}" class="view-all">View All Products <i
                    class='bx bx-right-arrow-alt'></i></a>
        </div>
    </div>

    @push('scripts')
        {{-- <script src="{{ asset('frontend/assets/tumbs.js') }}"></script> --}}
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const variants = document.querySelectorAll('.product_variant');
                if (variants.length > 0) {
                    variants[0].classList.add('active_variant');
                }
            });
        </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() {
                    $('.zoomContainer').remove();

                    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();
                });
            });
        </script>
        <script>
            $('.owl-carousel.owl-one').owlCarousel({
                loop: true,
                margin: 10,
                nav: false,
                dots: false,
                autoplay: true,
                autoplayTimeout: 4000,
                autoplayHoverPause: true,
                navText: ["<i class='bx bx-left-arrow-alt'></i>", "<i class='bx bx-right-arrow-alt'></i>"],
                items: 1,
                thumbs: true,
                thumbImage: true,
                thumbContainerClass: 'owl-thumbs',
                thumbItemClass: 'owl-thumb-item',
            });
            $('.owl-carousel.owl-two').owlCarousel({
                loop: true,
                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: 4
                    },
                    1000: {
                        items: 5
                    },
                    1280: {
                        items: 6
                    },
                    1600: {
                        items: 7
                    },
                    1700: {
                        items: 7
                    }
                }
            });
        </script>
        <script>
            $('.input-group').on('click', '.button-plus', function(e) {
                incrementValue(e);
            });

            $('.input-group').on('click', '.button-minus', function(e) {
                decrementValue(e);
            });

            function incrementValue(e) {
                e.preventDefault();
                var fieldName = $(e.target).data('field');
                var parent = $(e.target).closest('div');
                var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);

                if (!isNaN(currentVal)) {
                    parent.find('input[name=' + fieldName + ']').val(currentVal + 1);
                } else {
                    parent.find('input[name=' + fieldName + ']').val(0);
                }
            }

            function decrementValue(e) {
                e.preventDefault();
                var fieldName = $(e.target).data('field');
                var parent = $(e.target).closest('div');
                var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);

                if (!isNaN(currentVal) && currentVal > 1) {
                    parent.find('input[name=' + fieldName + ']').val(currentVal - 1);
                } else {
                    parent.find('input[name=' + fieldName + ']').val(1);
                }
            }
        </script>
    @endpush
@endsection