@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('keywords', $metaTags['metaKeywords'])
@section('description', $metaTags['metaDescription'])
@section('other_meta_tags')
    {!! $metaTags['otherMetaTags'] !!}
@endsection
@push('css')
    <!-- owl carousel  -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    @if ($products->count() % 2 === 0)
        <style>
            /* Center items inside stage wrapper */
            .featuredSlider .owl-stage {
                margin: 0 auto !important;
            }
        </style>
    @endif
@endpush
@section('content')
    <div id="pageWrapper" class="productDetailPage InnerPage">
        <section id="featureSec">
            <div class="container">
                <div class="flxHead">
                    <div class="Btitle wow animate__fadeIn animate__animated">{{ $findMyChairCms->recommend_title }}</div>
                </div>
                {!! $findMyChairCms->recommend_description !!}
            </div>
            <div class="featuredSlider owl-carousel wow animate__fadeIn animate__animated">
                @foreach ($products as $product)
                    <div class="item">
                        <div class="slideBx">
                            <a href="@productRoute($product)" class="ftrBx" aria-label="{{ $product->title }}">
                                <div class="imgBx">
                                    <img class="hvr" src="{{ $product->primary_image_value }}"
                                        alt="{{ $product->title }}" loading="lazy">
                                    <img class="onhvr" src="{{ $product->secondary_image_value }}"
                                        alt="{{ $product->title }}" loading="lazy">
                                </div>
                                <div class="txtBx">
                                    <div class="txtInb">
                                        <div class="ttle">{{ $product->title }}</div>
                                        @if ($product->subtitle)
                                            <div class="txt">{{ $product->subtitle }}</div>
                                        @endif
                                        <div class="hideBx">
                                            <p>{{ $product->short_description }}</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    </div>
@endsection
@push('js')
    <!-- owl carousel  -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script>
        var totalItems = $('.featuredSlider .item').length;
        var middleItem = Math.floor(totalItems / 2);

        $('.featuredSlider').owlCarousel({
            loop: false,
            rewind: true,
            center: (totalItems % 2 !== 0),
            startPosition: (totalItems % 2 !== 0) ? middleItem : middleItem - 1, // even → middle-left
            responsiveClass: true,
            nav: false,
            dots: false,
            smartSpeed: 600,
            margin: 5,
            responsive: {
                0: {
                    items: 1,
                    margin: 10,
                    mouseDrag: true,
                    touchDrag: true,
                    pullDrag: true,
                    autoplay: true,
                    autoplayTimeout: 3000,
                    autoplayHoverPause: true,
                },
                576: {
                    items: 2,
                    margin: 15,
                    mouseDrag: true,
                    touchDrag: true,
                    pullDrag: true,
                    autoplay: true,
                    autoplayTimeout: 3000,
                    autoplayHoverPause: true,
                },
                768: {
                    items: 3,
                    margin: 20,
                    mouseDrag: true,
                    touchDrag: true,
                    pullDrag: true,
                    autoplay: true,
                    autoplayTimeout: 3000,
                    autoplayHoverPause: true,
                },
                992: {
                    items: 4,
                    margin: 25,
                    mouseDrag: false,
                    touchDrag: false,
                    pullDrag: false
                },
                1200: {
                    items: 5,
                    margin: 30,
                    mouseDrag: false,
                    touchDrag: false,
                    pullDrag: false
                }
            }
        });

        var testiSlider = $('.featuredSlider');

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

        $('#featureSec .customSlideNav.OwlPrev').click(function() {
            testiSlider.trigger('prev.owl.carousel');
        });
    </script>
@endpush