@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('description', $metaTags['metaDescription'])
@section('keywords', $metaTags['metaKeywords'])
@section('other_meta_tags')
    {!! $metaTags['otherMetaTags'] !!}
@endsection
@section('content')
    <div id="pageWrapper" class="collectionPage InnerPage">

        <!-- Cmn_Banner -->
        <section id="InnerBanner">
            <picture>
                <source media="(min-width: 468px)" srcset="{{ $pageBanner['image'] }}" />
                <img src="{{ $pageBanner['mobileImage'] }}" width="1920" height="480" alt="{{ $pageBanner['name'] }}"
                    loading="lazy" />
            </picture>
        </section>

        @if ($useCases->isNotEmpty())
            <section id="collectionSec">
                <div class="container">
                    <div class="headBx wow animate__fadeIn animate__animated">
                        <div class="Btitle wow animate__fadeIn animate__animated">{{ $cms->title }}</div>
                    </div>
                </div>
                <div class="CustomeContainer">
                    <div class="sliderBx wow animate__fadeIn animate__animated">
                        <div class="owl-carousel owl-theme Featureslider">
                            @foreach ($useCases as $useCase)
                                <a href="{{ route('use-case-details', $useCase->slug) }}" class="latestBox"
                                    aria-label="{{ $useCase->title }}">
                                    <div class="imgBox">
                                        <img src="{{ $useCase->image_value }}" alt="{{ $useCase->title }}" width="846" height="545"  loading="lazy">
                                    </div>
                                    <div class="info">
                                        <div class="more">
                                            <svg viewBox="0 0 18 37.031">
                                                <g id="chairs" transform="translate(0)">
                                                    <g id="Group_20867" data-name="Group 20867" transform="translate(0)">
                                                        <path id="Path_101737" data-name="Path 101737"
                                                            d="M148.444,215.175l-1.191,1.085-.847.768-1.032.926a7.714,7.714,0,0,0-2.3,3.918,1.626,1.626,0,0,1-1.668,1.271,1.575,1.575,0,0,1-1.562-1.4,5.224,5.224,0,0,1,1.324-4.421l8.471-9.238a6.663,6.663,0,0,0,.5-8.338l-5.771-8.1a6.669,6.669,0,0,1-1.218-3.918,1.622,1.622,0,0,1,1.4-1.588,1.59,1.59,0,0,1,1.8,1.085,11.694,11.694,0,0,0,2.726,4.447l6.776,7.015a7.112,7.112,0,0,1,1.747,3.071.562.562,0,1,1-1.085.291,6.067,6.067,0,0,0-1.456-2.568l-6.8-6.988a12.992,12.992,0,0,1-2.965-4.871.478.478,0,0,0-.582-.344.529.529,0,0,0-.45.5,5.511,5.511,0,0,0,1.006,3.256l5.771,8.1a7.768,7.768,0,0,1-.582,9.741l-8.47,9.238a4.071,4.071,0,0,0-1.032,3.468.5.5,0,0,0,.5.45.507.507,0,0,0,.529-.4,8.821,8.821,0,0,1,2.647-4.474l1.509-1.35.026-.026,8.629-7.941a5.887,5.887,0,0,0,1.853-3.521.562.562,0,1,1,1.112.159,6.461,6.461,0,0,1-.529,1.853l-.529.979a5.933,5.933,0,0,1-.715.9,3.026,3.026,0,0,1-.291.291m-.9.847-5.506,5.03Z"
                                                            transform="translate(-139.769 -186.113)" />
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                        <div class="ttxBx">
                                            <div class="title">{{ $useCase->title }}</div>
                                            <div class="txt">{{ $useCase->short_description }}</div>
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if ($featuredProducts->count() == 3)
            <section id="featuredProSec">
                <div class="container">
                    <div class="flexBx">
                        <div class="lftB">
                            <div class="item">
                                <a href="{{ route('products.index') }}" class="prBx"
                                    aria-label="{{ $cms->featured_product_title }}">
                                    <img src="{{ $cms->featured_product_image_value }}" width="846" height="545"
                                        alt="{{ $cms->featured_product_title }}" loading="lazy">
                                    <div class="overlay">
                                        <div class="title">{{ $cms->featured_product_title }}</div>
                                        <div class="txt">{{ $cms->featured_product_subtitle }}</div>
                                        <div class="vMre hoveranim"><span>View More</span></div>
                                    </div>
                                </a>
                            </div>
                            @foreach ($featuredProducts as $index => $featuredProduct)
                                @if ($index < 2)
                                    <div class="item">
                                        <a href="@productRoute($featuredProduct->product)" class="prBx"
                                            aria-label="{{ $featuredProduct->product->title }}">
                                            <img src="{{ $featuredProduct->image_value }}" width="846" height="545"
                                                alt="{{ $featuredProduct->product->title }}" loading="lazy">
                                            <div class="hoverBx">
                                                <div class="txtB">
                                                    <div class="ttle">{{ $featuredProduct->product->title }}</div>
                                                    @if ($featuredProduct->product->subtitle)
                                                        <div class="txt">{{ $featuredProduct->product->subtitle }}</div>
                                                    @endif
                                                    <p>{{ $featuredProduct->product->short_description }}</p>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        <div class="ritB">
                            @foreach ($featuredProducts as $index => $featuredProduct)
                                @if ($index == 2)
                                    <div class="item">
                                        <a href="@productRoute($featuredProduct->product)" class="prBx"
                                            aria-label="{{ $featuredProduct->product->title }}">
                                            <img src="{{ $featuredProduct->image_value }}" width="846" height="545"
                                                alt="{{ $featuredProduct->product->title }}" loading="lazy">
                                            <div class="hoverBx">
                                                <div class="txtB">
                                                    <div class="ttle">{{ $featuredProduct->product->title }}</div>
                                                    @if ($featuredProduct->product->subtitle)
                                                        <div class="txt">{{ $featuredProduct->product->subtitle }}</div>
                                                    @endif
                                                    <p>{{ $featuredProduct->product->short_description }}</p>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if ($newArrivals->isNotEmpty())
            <section id="newArrivalSec">
                <div class="container">
                    <div class="BTitle">{{ $cms->new_arrival_title }}</div>
                    <div class="flxhVrBx">
                        @foreach ($newArrivals as $newArrival)
                            <div class="item {{ $loop->iteration == 1 ? ' active' : '' }}">
                                <div class="hdFlx">
                                    <div class="title">{{ $newArrival->title }}</div>
                                    <div class="num">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</div>
                                </div>
                                <div class="flTbx" aria-label="{{ $newArrival->title }}">
                                    <div class="lftB">
                                        <a href="@productRoute($newArrival)" class="imgB" aria-label="{{ $newArrival->title }}">
                                            <img src="{{ $newArrival->primary_image_value }}" width="304" height="420"
                                                alt="{{ $newArrival->title }}" loading="lazy">
                                        </a>
                                    </div>
                                    <div class="ritB">
                                        <a href="@productRoute($newArrival)" class="ttle" aria-label="{{ $newArrival->title }}">
                                            {{ $newArrival->title }}
                                        </a>
                                        @if ($newArrival->subtitle)
                                            <div class="txt">{{ $newArrival->subtitle }}</div>
                                        @endif
                                        <div class="scrlTxt" data-content="8">
                                            <p>{{ $newArrival->short_description }}</p>
                                        </div>
                                        <button class="toggleButton" data-target="8" aria-label="Read More..">Read
                                            More..</button>
                                    </div>
                                </div>
                                <div class="Bxnum">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif
        @if ($imaginatorChairs->isNotEmpty())
            <section id="wiproSeatingSec">
                <div class="container">
                    <div class="seatingBx" id="seatingArea">
                        @foreach ($imaginatorChairs as $imaginatorChair)
                            @if ($imaginatorChair->collectionImaginatorBackgrounds->isNotEmpty())
                                <div class="bgImg objectBg" data-id="{{ $imaginatorChair->id }}">
                                    @foreach ($imaginatorChair->collectionImaginatorBackgrounds as $collectionImaginatorBackground)
                                        <a href="{{ $collectionImaginatorBackground->image_value }}" class="itm"
                                            data-fancybox="itmGal"
                                            data-id="ibg-{{ $collectionImaginatorBackground->id }}">
                                            <div class="info-box" style="opacity:0;">
                                                <h6>Tap and pinch to zoom</h6>
                                            </div>
                                            <picture>
                                                <source media="(min-width: 468px)"
                                                    srcset="{{ $collectionImaginatorBackground->image_value }}" />
                                                <img src="{{ $collectionImaginatorBackground->image_value }}"
                                                    width="1920" height="1080"
                                                    alt="{{ $collectionImaginatorBackground->title }}" loading="lazy" />
                                            </picture>
                                        </a>
                                    @endforeach
                                </div>
                            @endif
                        @endforeach
                        <div class="ttleBx wow animate__fadeIn animate__animated">
                            <div class="Btitle wow animate__fadeIn animate__animated">
                                {!! $cms->imaginator_title !!}
                            </div>
                        </div>
                        <div class="proDbx wow animate__fadeIn animate__animated">
                            <div class="lftBx">
                                <div class="slider mainSlide">
                                    @foreach ($imaginatorChairs as $imaginatorChair)
                                        <div class="gallery_slide{{ $loop->iteration == 1 ? ' active' : '' }}">
                                            @if ($imaginatorChair->collectionImaginatorBackgrounds->isNotEmpty())
                                                <div class="tab-content" id="pills-tabContent{{ $loop->iteration }}">
                                                    <div class="tab-pane fade show active"
                                                        id="pills-{{ $loop->iteration }}" role="tabpanel"
                                                        aria-labelledby="pills-{{ $loop->iteration }}-tab"
                                                        data-id="{{ $imaginatorChair->id }}">
                                                        @if ($imaginatorChair->product)
                                                            <a class="imgB" href="@productRoute($imaginatorChair->product)"
                                                                aria-label="{{ $imaginatorChair->title }}">
                                                                <img src="{{ $imaginatorChair->image_value }}" 
                                                                    alt="{{ $imaginatorChair->title }}" loading="lazy">
                                                            </a>
                                                        @else
                                                            <a class="imgB" aria-label="{{ $imaginatorChair->title }}">
                                                                <img src="{{ $imaginatorChair->image_value }}"
                                                                    alt="{{ $imaginatorChair->title }}" loading="lazy">
                                                            </a>
                                                        @endif
                                                    </div>
                                                    @if ($imaginatorChair->collectionImaginatorBackgrounds->isNotEmpty())
                                                        @foreach ($imaginatorChair->collectionImaginatorBackgrounds as $collectionImaginatorBackground)
                                                            <div class="tab-pane fade"
                                                                id="pills-{{ $loop->parent->iteration }}{{ $loop->iteration }}"
                                                                role="tabpanel"
                                                                aria-labelledby="pills-{{ $loop->parent->iteration }}{{ $loop->iteration }}-tab">
                                                                @if ($imaginatorChair->product)
                                                                    <a class="imgB" href="@productRoute($imaginatorChair->product)"
                                                                        aria-label="{{ $collectionImaginatorBackground->title }}">
                                                                        <img src="{{ $collectionImaginatorBackground->image_value }}"
                                                                            alt="{{ $collectionImaginatorBackground->title }}"
                                                                            loading="lazy">
                                                                    </a>
                                                                @else
                                                                    <a class="imgB"
                                                                        aria-label="{{ $collectionImaginatorBackground->title }}">
                                                                        <img src="{{ $collectionImaginatorBackground->image_value }}"
                                                                            alt="{{ $collectionImaginatorBackground->title }}"
                                                                            loading="lazy">
                                                                    </a>
                                                                @endif
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                </div>
                                                @if ($imaginatorChair->collectionImaginatorBackgrounds->isNotEmpty())
                                                    <ul class="nav nav-pills" id="pills-tab1" role="tablist">
                                                        <li class="nav-item" role="presentation">
                                                            <button class="nav-link remove active"
                                                                id="pills-{{ $loop->iteration }}-tab"
                                                                data-bs-toggle="pill"
                                                                data-bs-target="#pills-{{ $loop->iteration }}"
                                                                type="button" role="tab"
                                                                aria-controls="pills-{{ $loop->iteration }}"
                                                                aria-selected="true" aria-label="No Background"
                                                                data-id="{{ $imaginatorChair->id }}">
                                                                <img src="{{ asset('frontend/images/noBg.png') }}"
                                                                    alt="Default Image" loading="lazy">
                                                            </button>
                                                        </li>
                                                        @foreach ($imaginatorChair->collectionImaginatorBackgrounds as $collectionImaginatorBackground)
                                                            <li class="nav-item" role="presentation">
                                                                <button class="nav-link"
                                                                    id="pills-{{ $loop->parent->iteration }}{{ $loop->iteration }}-tab"
                                                                    data-bs-toggle="pill"
                                                                    data-bs-target="#pills-{{ $loop->parent->iteration }}{{ $loop->iteration }}"
                                                                    type="button" role="tab"
                                                                    aria-controls="pills-{{ $loop->parent->iteration }}{{ $loop->iteration }}"
                                                                    aria-selected="false"
                                                                    aria-label="{{ $collectionImaginatorBackground->title }}"
                                                                    data-id="{{ $imaginatorChair->id }}"
                                                                    data-background-id="ibg-{{ $collectionImaginatorBackground->id }}">
                                                                    <img src="{{ $collectionImaginatorBackground->image_value }}"
                                                                        alt="{{ $collectionImaginatorBackground->title }}"
                                                                        loading="lazy">
                                                                </button>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                @endif
                                            @else
                                                @if ($imaginatorChair->product)
                                                    <a class="imgB" href="@productRoute($imaginatorChair->product)"
                                                        aria-label="{{ $imaginatorChair->title }}">
                                                        <img src="{{ $imaginatorChair->image_value }}"
                                                            alt="{{ $imaginatorChair->title }}" loading="lazy">
                                                    </a>
                                                @else
                                                    <a class="imgB" aria-label="{{ $imaginatorChair->title }}">
                                                        <img src="{{ $imaginatorChair->image_value }}"
                                                            alt="{{ $imaginatorChair->title }}" loading="lazy">
                                                    </a>
                                                @endif
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="ritBx">
                                <div class="slider thumbSlide">
                                    @foreach ($imaginatorChairs as $imaginatorChair)
                                        <div class="item object" data-id="{{ $imaginatorChair->id }}" tabindex="-1">
                                            <div class="clr">
                                                <img src="{{ $imaginatorChair->color_value }}"
                                                    alt="{{ $imaginatorChair->title }}">
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
        @if ($productExists && $findMyChairExists)
            <section id="seatingQiz">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-7">
                            <div class="lftB">
                                <div class="subT">{{ $cms->quiz_subtitle }}</div>
                                <div class="Btitle">{{ $cms->quiz_title }}</div>
                                <div class="txt">{{ $cms->quiz_description }}</div>
                                <a href="{{ route('find-my-chair') }}" class="sbmt hoveranim"
                                    aria-label="{{ $cms->quiz_link_title }}">
                                    <span>{{ $cms->quiz_link_title }}</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="ritB">
                                <div class="proBx">
                                    <img src="{{ $cms->quiz_image_value }}" alt="{{ $cms->quiz_title }}"
                                        loading="lazy">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
    </div>
@endsection
@push('js')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <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>
    <!-- owl carousel  -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

    <script>
        $(document).ready(function() {
            var ftSlider = $('.Featureslider');

            ftSlider.owlCarousel({
                loop: true,
                nav: true,
                dots: false,
                autoplay: false,
                rewind: true,
                smartSpeed: 500,
                autoplayTimeout: 3500,
                items: 1.2,
                autoplayHoverPause: true,
                margin: 10,
                responsive: {
                    468: {
                        items: 1.2,
                        margin: 15,
                    },
                    600: {
                        items: 1.2,
                        margin: 20,
                    },
                    992: {
                        items: 2,
                        margin: 25,
                    },
                    1441: {
                        items: 2.2,
                        margin: 26,
                    }
                },
            });

            function updateFirstActiveItem() {
                ftSlider.find('.owl-item').removeClass('firstactiveitem');
                ftSlider.find('.owl-item.active').first().addClass('firstactiveitem');
            }

            updateFirstActiveItem();
            ftSlider.on('translated.owl.carousel', updateFirstActiveItem);
        });

        $('.Arrivalslider').owlCarousel({
            loop: false,
            rewind: true,
            autoplay: true,
            autoplayTimeout: 3500,
            autoplayHoverPause: false,
            responsiveClass: true,
            nav: false,
            dots: false,
            items: 1,
            autoplayHoverPause: true,
        });

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

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


        });
        $('.mainSlide').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            fade: true,
            asNavFor: '.thumbSlide'
        });
        $('.thumbSlide').slick({
            asNavFor: '.mainSlide',
            slidesToShow: 5,
            infinite: true,
            slidesToScroll: 1,
            dots: false,
            vertical: true,
            centerMode: true,
            centerPadding: '0px',
            arrows: false,
            focusOnSelect: true,
            prevArrow: "<button type='button' class='slick-prev pull-left' aria-label='Previous Slide'></button>",
            nextArrow: "<button type='button' class='slick-next pull-right' aria-label='Next Slide'></button>",
            responsive: [{
                    breakpoint: 1441,
                    settings: {
                        slidesToShow: 4,
                    }
                },
                {
                    breakpoint: 1200,
                    settings: {
                        slidesToShow: 3,
                    }
                },
                {
                    breakpoint: 576,
                    settings: {
                        slidesToShow: 6,
                        vertical: false,
                    }
                },
                {
                    breakpoint: 468,
                    settings: {
                        slidesToShow: 6,
                        vertical: false,
                    }
                }
            ]
        });

        function changeClass(className) {
            const seatingArea = document.getElementById('seatingArea');
            seatingArea.className = 'seatingBx ' + className;
        }

        document.querySelectorAll('.toggleButton').forEach(function(button) {
            button.addEventListener('click', function() {
                var targetId = this.getAttribute('data-target');
                var content = document.querySelector('.scrlTxt[data-content="' + targetId + '"]');
                if (content.classList.contains('expanded')) {
                    content.classList.remove('expanded');
                    this.textContent = 'Read More..';
                } else {
                    content.classList.add('expanded');
                    this.textContent = 'Read Less..';
                }
            });
        });

        $(document).ready(function() {
            $('.item.object').on('click', function() {
                $('#seatingArea').removeClass('open');
                $('.bgImg.objectBg').removeClass('active');
                $('.objectBg .itm').removeClass('active');
                $('.nav-link').removeClass('active');
                var id = $(this).data('id');
                $('.nav-link.remove[data-id="' + id + '"]').addClass('active');
                $('.tab-pane.fade').removeClass('active show');
                $('.tab-pane.fade[data-id="' + id + '"]').addClass('active show');
            });

            $('.nav-link').on('click', function() {
                if (!$(this).hasClass('remove')) {
                    $('#seatingArea').addClass('open');
                    $('.bgImg.objectBg').removeClass('active');
                    $('.objectBg .itm').removeClass('active');
                    var id = $(this).data('id');
                    var backgroundId = $(this).data('background-id');
                    $('.bgImg.objectBg[data-id="' + id + '"]').addClass('active');
                    $('.objectBg .itm[data-id="' + backgroundId + '"]').addClass('active');
                    $('.objectBg .itm[data-id="' + backgroundId + '"] .info-box')
                        .css('opacity', '1')
                        .delay(3000)
                        .queue(function(next) {
                            $(this).css('opacity', '0');
                            next();
                        });
                } else {
                    $('#seatingArea').removeClass('open');
                    $('.bgImg.objectBg').removeClass('active');
                    $('.objectBg .itm').removeClass('active');
                }
            });
        });
    </script>
@endpush