@extends('frontend::layouts.app')
@section('title', $productDetails->meta_title)
@section('keywords', $productDetails->meta_keywords)
@section('description', $productDetails->meta_description)
@section('image', $productDetails->primary_image_value)
@section('other_meta_tags')
    {!! $productDetails->other_meta_tags !!}
@endsection
@push('css')
    <!-- Slick Carousel CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"
        integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- owl carousel  -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
@endpush
@section('content')
    <div id="pageWrapper" class="productDetailPage InnerPage">
        <section id="proGalSec">
            <div class="container">
                <div class="headBx wow animate__fadeIn animate__animated">
                    <div class="Btitle wow animate__fadeIn animate__animated">{{ $productDetails->title }}</div>
                </div>
            </div>
            @if ($productDetails->productImages->isNotEmpty())
                <div class="CustomeContainer">
                    <div class="sliderBx wow animate__fadeIn animate__animated">
                        <div class="owl-carousel owl-theme toplider">
                            @foreach ($productDetails->productImages as $productImage)
                                <div class="latestBox">
                                    <div class="imgBox">
                                        <img src="{{ $productImage->image_value }}" alt="{{ $productDetails->title }}"
                                            loading="lazy">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </section>
        <section id="detailSec">
            <div class="heDbtnFlx">
                <div class="container">
                    <div class="flxBtn">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#c1"
                            aria-expanded="true" aria-controls="c1" aria-label="Features">
                            Features
                        </button>
                        @if ($productDetails->productConfigurations->isNotEmpty())
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#c2" aria-expanded="false" aria-controls="c2"
                                aria-label="Configurations/Specifications">
                                Configurations/Specifications
                            </button>
                        @endif
                        @if ($productDetails->productFinduses->isNotEmpty())
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#c3" aria-expanded="false" aria-controls="c3" aria-label="Find Us">
                                Find Us
                            </button>
                        @endif
                        @if ($productDetails->productGalleries->isNotEmpty())
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#c4" aria-expanded="false" aria-controls="c4" aria-label="Gallery">
                                Gallery
                            </button>
                        @endif
                    </div>
                </div>
            </div>
            <div class="accordion dtailAccord" id="dtailAccord">
                <div class="accordion-item">
                    <div class="container">
                        <div class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#c1"
                                aria-expanded="true" aria-controls="c1" aria-label="Features">
                                Features
                            </button>
                        </div>
                    </div>
                    <div id="c1" class="accordion-collapse collapse show" data-bs-parent="#dtailAccord">
                        <div class="accordion-body">
                            <div class="container">
                                <div class="dtailBx">
                                    <div class="lftB">
                                        @if ($productDetails->productColors->isNotEmpty())
                                            <div class="slider mainSlide">
                                                @foreach ($productDetails->productColors as $productColor)
                                                    <div class="item">
                                                        <img src="{{ $productColor->color_image_value }}"
                                                            alt="{{ $productDetails->title }}">
                                                    </div>
                                                @endforeach
                                            </div>
                                        @else
                                            <div class="imgBx">
                                                <img src="{{ asset('frontend/images/noImg.png') }}"
                                                    class="product-color-image" alt="{{ $productDetails->title }}"
                                                    loading="lazy">
                                            </div>
                                        @endif
                                        @if (!empty($productDetails->youtube_video_url))
                                            <div class="videoBx">
                                                <a href="{{ $productDetails->youtube_video_url }}" class="vidBx"
                                                    data-fancybox="vidGal" aria-label="Play Video">
                                                    <img src="{{ $productDetails->thumbnail_image_value }}"
                                                        alt="{{ $productDetails->title }}" width="342" height="205"
                                                        loading="lazy">
                                                    <div class="ico">
                                                        <svg viewBox="0 0 16.967 19.592">
                                                            <path id="Polygon_1" data-name="Polygon 1" class="cls-1"
                                                                d="M408.217,515.274l-16.967,9.8V505.478Z"
                                                                transform="translate(-391.25 -505.478)" />
                                                        </svg>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="ritB">
                                        <div class="title">{{ $productDetails->title }}</div>
                                        <p>{{ $productDetails->short_description }}</p>
                                        <div class="flB">
                                            <div class="ltB">
                                                @if ($productDetails->productColors->isNotEmpty() && $productDetails->productColors->count() > 1)
                                                    <div class="ttle">Colour</div>
                                                    <div class="thumbSlide">
                                                        @foreach ($productDetails->productColors as $color)
                                                            <div class="thumb-slide">
                                                                <div class="imgB">
                                                                    <div class="clr">
                                                                        <img src="{{ $color->color_value }}"
                                                                            alt="{{ $color->title }}">
                                                                    </div>
                                                                </div>
                                                                <div class="txt">{{ $color->title }}</div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="rtB">
                                                <div class="share">
                                                    <div class="txt">Share</div>
                                                    <input class="menu__trigger" type="checkbox" id="menu-trigger" />
                                                    <div class="menu">
                                                        <label class="menu__btn" for="menu-trigger">
                                                            <svg viewBox="0 0 16 17.067">
                                                                <g id="share" transform="translate(-16)">
                                                                    <g id="Group_23104" data-name="Group 23104"
                                                                        transform="translate(16)">
                                                                        <path id="Path_103955" data-name="Path 103955"
                                                                            class="cls-1"
                                                                            d="M29,11.067a2.989,2.989,0,0,0-2.406,1.225L21.866,9.871a2.83,2.83,0,0,0-.088-1.959l4.948-2.978A2.984,2.984,0,1,0,26,3a2.972,2.972,0,0,0,.209,1.079L21.246,7.065a2.995,2.995,0,1,0,.189,3.708l4.713,2.413a2.959,2.959,0,0,0-.147.88,3,3,0,1,0,3-3Z"
                                                                            transform="translate(-16)" />
                                                                    </g>
                                                                </g>
                                                            </svg>
                                                        </label>
                                                        <div class="menu__list">
                                                            <div class="menu__item">
                                                                <a class="fb" href="{{ $shareLinks['facebook'] }}"
                                                                    target="_blank" aria-label="Share on Facebook">
                                                                    <img src="{{ asset('frontend/images/s2.svg') }}"
                                                                        width="20" height="20" alt="facebook"
                                                                        loading="lazy">
                                                                </a>
                                                            </div>
                                                            <div class="menu__item">
                                                                <a class="tw" href="{{ $shareLinks['twitter'] }}"
                                                                    target="_blank" aria-label="Share on X">
                                                                    <img src="{{ asset('frontend/images/s3.svg') }}"
                                                                        width="20" height="20" alt="x"
                                                                        loading="lazy">
                                                                </a>
                                                            </div>
                                                            <div class="menu__item">
                                                                <a class="yt" href="{{ $shareLinks['linkedin'] }}"
                                                                    target="_blank" aria-label="Share on LinkedIn">
                                                                    <img src="{{ asset('frontend/images/s5.svg') }}"
                                                                        width="20" height="20" alt="linkedin"
                                                                        loading="lazy">
                                                                </a>
                                                            </div>
                                                            <div class="menu__item">
                                                                <a class="ig" href="{{ $shareLinks['whatsapp'] }}"
                                                                    target="_blank" aria-label="Share on WhatsApp">
                                                                    <img src="{{ asset('frontend/images/s6.svg') }}"
                                                                        width="20" height="20" alt="whatsapp"
                                                                        loading="lazy">
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @if ($productSeatingCapacities->isNotEmpty())
                                            <div class="ttle">Seating Capacity</div>
                                            <div class="flxB">
                                                @foreach ($productSeatingCapacities as $productSeatingCapacity)
                                                    <div class="sizeD">
                                                        <div class="txt">{{ $productSeatingCapacity->title }}</div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                        {!! $productDetails->description !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @if ($productDetails->productConfigurations->isNotEmpty())
                    <div class="accordion-item">
                        <div class="container">
                            <div class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#c2" aria-expanded="false" aria-controls="c2"
                                    aria-label="Configurations/Specifications">
                                    Configurations/Specifications
                                </button>
                            </div>
                        </div>
                        <div id="c2" class="accordion-collapse collapse" data-bs-parent="#dtailAccord">
                            <div class="accordion-body">
                                <div class="container">
                                    <div class="flxhVrBx">
                                        @foreach ($productDetails->productConfigurations as $productConfiguration)
                                            <div class="item{{ $loop->iteration == 1 ? ' active' : '' }}">
                                                <div class="hdFlx">
                                                    <div class="title">{{ $productConfiguration->title }}</div>
                                                </div>
                                                <div class="flTbx">
                                                    <div class="ttle">
                                                        {{ $productConfiguration->title }}
                                                    </div>
                                                    <p>{{ $productConfiguration->description }}</p>
                                                    @if ($productConfiguration->images_value)
                                                        <div class="imgFlx">
                                                            @foreach ($productConfiguration->images_value as $image)
                                                                <div
                                                                    class="itm{{ count($productConfiguration->images_value) == 1 ? ' w100' : '' }}">
                                                                    <div class="imgB">
                                                                        <img src="{{ $image['url'] }}"
                                                                            alt="{{ $productConfiguration->title }}"
                                                                            loading="lazy">
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                @if ($productDetails->productFinduses->isNotEmpty())
                    <div class="accordion-item">
                        <div class="container">
                            <div class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#c3" aria-expanded="false" aria-controls="c3" aria-label="Find Us">
                                    Find Us
                                </button>
                            </div>
                        </div>
                        <div id="c3" class="accordion-collapse collapse" data-bs-parent="#dtailAccord">
                            <div class="accordion-body">
                                <div class="container">
                                    <div class="findFlx">
                                        @foreach ($productDetails->productFinduses as $productFindus)
                                            <a href="{{ $productFindus->link }}" class="item" target="_blank"
                                                aria-label="{{ $productDetails->title }}">
                                                <div class="imgB">
                                                    <img src="{{ $productFindus->image_value }}"
                                                        alt="{{ $productDetails->title }}">
                                                </div>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                @if ($productDetails->productGalleries->isNotEmpty())
                    <div class="accordion-item">
                        <div class="container">
                            <div class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#c4" aria-expanded="false" aria-controls="c4" aria-label="Gallery">
                                    Gallery
                                </button>
                            </div>
                        </div>
                        <div id="c4" class="accordion-collapse collapse" data-bs-parent="#dtailAccord">
                            <div class="accordion-body">
                                <div class="CustomeContainer">
                                    <div class="gallerySlide owl-carousel">
                                        @foreach ($productDetails->productGalleries->chunk(7) as $chunk)
                                            <div class="item">
                                                <div class="flxGrid">
                                                    @foreach ($chunk as $gallery)
                                                        <div class="item">
                                                            <div class="prodBx">
                                                                <img src="{{ $gallery->image_value }}"
                                                                    alt="{{ $gallery->title }}" loading="lazy">
                                                                <div class="hvrB">
                                                                    <div class="ttle">{{ $gallery->title }}</div>
                                                                    <div class="txt">{{ $gallery->description }}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="galleryMobSlider owl-carousel">
                                        @foreach ($productDetails->productGalleries as $gallery)
                                            <div class="item">
                                                <div class="prodBx">
                                                    <img src="{{ $gallery->image_value }}" alt="{{ $gallery->title }}"
                                                        loading="lazy">
                                                    <div class="hvrB">
                                                        <div class="ttle">{{ $gallery->title }}</div>
                                                        <div class="txt">{{ $gallery->description }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <div @class(['container', 'mb-5' => $productDetails->model_3d_value])>
                <div class="dwnldSc">
                    <div class="lftB">
                        <div class="ttle">"{{ $productCms->brochure_title }}"</div>
                        @if (!empty($productCms->brochure_description))
                            <div class="txt">{{ $productCms->brochure_description }}</div>
                        @endif
                    </div>
                    <div class="ritB">
                        <button class="dwnload hoveranim downloadBtn" data-bs-toggle="modal"
                            data-bs-target="#productBrochureModal" data-id="{{ base64_encode($productDetails->id) }}"
                            aria-label="Download Brochure">
                            <span>download brochure</span>
                            <div class="arw">
                                <img src="{{ asset('frontend/images/arrow.svg') }}" alt="arrow" loading="lazy">
                            </div>
                        </button>
                    </div>
                </div>
            </div>
            @if ($productDetails->model_3d_value)
                <div class="container">
                    <div class="dwnldSc">
                        <div class="lftB">
                            <div class="ttle">"{{ $productCms->model_3d_title }}"</div>
                            @if (!empty($productCms->model_3d_description))
                                <div class="txt">{{ $productCms->model_3d_description }}</div>
                            @endif
                        </div>
                        <div class="ritB">
                            <button class="dwnload hoveranim downloadBtn" data-bs-toggle="modal"
                                data-bs-target="#product3DModelModal" data-id="{{ base64_encode($productDetails->id) }}"
                                aria-label="Download 3D Model">
                                <span>Download 3D Model</span>
                                <div class="arw">
                                    <img src="{{ asset('frontend/images/arrow.svg') }}" alt="arrow" loading="lazy">
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            @endif
        </section>
        @if ($productDetails->productCharacteristics->isNotEmpty())
            <section id="Characteristics">
                <div class="container">
                    <div class="secT">Characteristics</div>
                    <div class="owl-carousel owl-theme Characteristicslider">
                        @foreach ($productDetails->productCharacteristics as $productCharacteristic)
                            <div class="item">
                                <div class="prBx">
                                    <div class="imgB">
                                        <img src="{{ $productCharacteristic->image_value }}"
                                            alt="{{ $productCharacteristic->title }}" loading="lazy">
                                    </div>
                                    <div class="txtB">
                                        <div class="ttle">{{ $productCharacteristic->title }}</div>
                                        <div class="txtScrol">
                                            <p>{{ $productCharacteristic->description }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif
        @if ($similarProducts->isNotEmpty())
            <section id="featureSec">
                <div class="container">
                    <div class="flxHead">
                        <div class="Btitle wow animate__fadeIn animate__animated">Similar Products</div>
                    </div>
                </div>
                <div class="featuredSlider owl-carousel wow animate__fadeIn animate__animated">
                    @foreach ($similarProducts as $similarProduct)
                        <div class="item">
                            <div class="slideBx">
                                <a href="@productRoute($similarProduct)" class="ftrBx" aria-label="{{ $similarProduct->title }}">
                                    <div class="imgBx">
                                        <img class="hvr" src="{{ $similarProduct->primary_image_value }}"
                                            width="274" height="350" alt="{{ $similarProduct->title }}"
                                            loading="lazy">
                                        <img class="onhvr" src="{{ $similarProduct->secondary_image_value }}"
                                            width="274" height="400" alt="{{ $similarProduct->title }}"
                                            loading="lazy">
                                    </div>
                                    <div class="txtBx">
                                        <div class="txtInb">
                                            <div class="ttle">{{ $similarProduct->title }}</div>
                                            @if ($similarProduct->subtitle)
                                                <div class="txt">{{ $similarProduct->subtitle }}</div>
                                            @endif
                                            <div class="hideBx">
                                                <p>{{ $similarProduct->short_description }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
        @endif
    </div>
    @include('frontend::product.modals.product-brochure-modal')
    @include('frontend::product.modals.product-3d-model-modal')
@endsection
@push('js')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
    <!-- Slick Carousel CSS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"
        integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- owl carousel  -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script>
        $('.toplider').owlCarousel({
            loop: true,
            nav: true,
            dots: false,
            autoplay: true,
            rewind: true,
            smartSpeed: 500,
            autoplayTimeout: 3500,
            items: 1,
            autoplayHoverPause: true,
            margin: 10,
            responsive: {
                468: {
                    items: 1.5,
                    margin: 15,
                },
                600: {
                    items: 2.2,
                    margin: 20,
                },
                992: {
                    items: 2.2,
                    margin: 25,
                }
            },
        });
        $('.Characteristicslider').owlCarousel({
            loop: true,
            nav: true,
            dots: false,
            autoplay: false,
            rewind: true,
            smartSpeed: 500,
            autoplayTimeout: 3500,
            items: 1,
            autoplayHoverPause: true,
            margin: 10,
            responsive: {
                576: {
                    items: 2,
                    margin: 15,
                },
                992: {
                    items: 3,
                    margin: 25,
                },
                1441: {
                    items: 3,
                    margin: 30,
                }
            },
        });

        $('.featuredSlider').owlCarousel({
            loop: true,
            rewind: true,
            autoplay: true,
            autoplayTimeout: 3500,
            autoplayHoverPause: false,
            responsiveClass: true,
            nav: false,
            dots: false,
            items: 1,
            margin: 5,
            responsive: {
                478: {
                    items: 1.6,
                    margin: 20,
                },
                576: {
                    items: 2,
                    margin: 20,
                },
                768: {
                    items: 3,
                    margin: 25,
                },
                992: {
                    items: 4,
                    margin: 25,
                },
                1441: {
                    items: 5,
                    margin: 40,
                }
            }
        });

        var testiSlider = $('.featuredSlider');

        $('#featureSec .customSlideNav.OwlNext').click(function() {
            testiSlider.trigger('next.owl.carousel');
        });

        $('#featureSec .customSlideNav.OwlPrev').click(function() {
            testiSlider.trigger('prev.owl.carousel');
        });


        $('#detailSec .flxhVrBx .item').click(function(e) {
            $('#detailSec .flxhVrBx .item').removeClass('active');
            $(this).addClass('active');

            var lis_count = $('#detailSec .flxhVrBx .item').length;
            var active_li_index = $('#detailSec .flxhVrBx .item.active').index();
        });

        var productGalleries = "{{ $productDetails->productGalleries->count() }}";
        $('.gallerySlide').owlCarousel({
            loop: productGalleries > 7 ? true : false,
            nav: false,
            dots: false,
            autoplay: true,
            slideTransition: 'linear',
            autoplayTimeout: 10000,
            autoplaySpeed: 10000,
            autoplayHoverPause: false,
            responsiveClass: true,
            rtl: false,
            dots: false,
            items: 1.1,
            margin: 30,
            moseDrag: true,
            touchDrag: true,
            onInitialized: function(event) {
                setTimeout(function() {
                    event.target.trigger('play.owl.autoplay', [1000]); // Changed timeout to 1000
                }, 0);
            }
        });

        $('.galleryMobSlider').owlCarousel({
            center: false,
            loop: true,
            nav: false,
            dots: false,
            autoplay: true,
            slideTransition: 'linear',
            autoplayTimeout: 10000,
            autoplaySpeed: 10000,
            autoplayHoverPause: false,
            responsiveClass: true,
            rtl: false,
            dots: false,
            items: 2.2,
            margin: 5,
            moseDrag: true,
            touchDrag: true,
            responsive: {
                430: {
                    items: 2.8,
                    margin: 15,
                },
                576: {
                    items: 3.5,
                    margin: 15,
                }
            },
            onInitialized: function(event) {
                setTimeout(function() {
                    event.target.trigger('play.owl.autoplay', [10000]);
                }, 1000);
            }
        });
        $('.mainSlide').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            fade: true,
            asNavFor: '.thumbSlide'
        });
        $('.thumbSlide').slick({
            slidesToShow: 5,
            infinite: true,
            slidesToScroll: 1,
            asNavFor: '.mainSlide',
            dots: false,
            vertical: false,
            arrows: false,
            focusOnSelect: true,
            prevArrow: "<button type='button' class='slick-prev pull-left'></button>",
            nextArrow: "<button type='button' class='slick-next pull-right'></button>",
            responsive: [{
                breakpoint: 992,
                settings: {
                    slidesToShow: 5,
                }
            }]
        });
        $(document).on("click", ".downloadBtn", function() {
            $('input[name="product_id"]').val($(this).data("id"));
        });
    </script>
    {{-- <script>
        productColorImage($('.product-color').val());
        $(document).on('change', '.product-color', function() {
            var colorId = $(this).val();
            productColorImage(colorId)
        });

        function productColorImage(colorId) {
            if (colorId) {
                $.ajax({
                    url: "{{ route('get-product-color-image', ':colorId') }}".replace(':colorId', colorId),
                    dataType: 'json',
                    success: function(result) {
                        $('.product-color-image').attr('src', result.success ? result.data :
                            "{{ asset('frontend/images/noImg.png') }}");
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error('AJAX error:', textStatus, errorThrown);
                    }
                });
            }
        }
    </script> --}}
@endpush