@php
    $currentLocale = app()->getLocale();
    $isRTL = in_array($currentLocale, ['ar', 'he', 'fa', 'ur']);
    
    // Thumb carousel options
    $thumbOptions = [
        'slidesToShow' => 4,
        'slidesToScroll' => 1,
        'autoplay' => true,
        'centerMode' => true,
        'centerPadding' => 0,
        'vertical' => true,
        'asNavFor' => '.product-details__carousel',
        'focusOnSelect' => true,
        'verticalSwiping' => true,
        'dots' => false,
        'arrows' => false,
        'responsive' => [
            [
                'breakpoint' => 1200,
                'settings' => [
                    'slidesToShow' => 3
                ]
            ],
            [
                'breakpoint' => 992,
                'settings' => [
                    'vertical' => false,
                    'verticalSwiping' => false
                ]
            ],
            [
                'breakpoint' => 431,
                'settings' => [
                    'slidesToShow' => 3,
                    'vertical' => false,
                    'verticalSwiping' => false
                ]
            ]
        ]
    ];
    
    // Add RTL option if needed
    if ($isRTL) {
        $thumbOptions['rtl'] = true;
    }
    
    // Main carousel options
    $mainOptions = [
        'slidesToShow' => 1,
        'slidesToScroll' => 1,
        'autoplay' => true,
        'asNavFor' => '.product-details__thumb',
        'centerPadding' => 0,
        'vertical' => true,
        'verticalSwiping' => true,
        'dots' => false,
        'arrows' => false,
        'responsive' => [
            [
                'breakpoint' => 992,
                'settings' => [
                    'slidesToShow' => 1,
                    'vertical' => false,
                    'verticalSwiping' => false
                ]
            ]
        ]
    ];
    
    // Add RTL option if needed
    if ($isRTL) {
        $mainOptions['rtl'] = true;
    }
@endphp

<x-website.layout>
    <!-- start banner -->
    @foreach ($sections as $section)
        @if ($section->key == 'products')
            @include('Website.partials._banner', ['page_title' => $product->name])
        @endif
    @endforeach
    <!-- end banner -->

    <section class="product-details section-space">
        <div class="container">
            <div class="row gutter-y-40">
                <div class="col-lg-6" data-aos="fade-right" data-aos-anchor-placement="top-bottom" data-aos-duration="1300">
                    <div class="product-details__product">
                        <div class="product-details__thumb-box">
                            <div class="product-details__thumb deskot-slick__carousel"
                                data-slick-options='{!! json_encode($thumbOptions, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}'>
                                @foreach ($product->images as $image)
                                    <div class="item">
                                        <div class="product-details__thumb__item">
                                            <img src="{{ $image->image_path }}" alt="{{ $image->name }}"
                                                class="w-100 rounded-0 object-fit-cover" loading="lazy"
                                                height="650" />
                                            <div class="product-details__thumb__hover">
                                                <a href="{{ $image->image_path }}" data-fancybox="product-gallery">
                                                    <i class="icon-plus"></i>
                                                </a>
                                            </div><!-- /.product-details__thumb__hover -->
                                        </div><!-- /.product-details__thumb__item -->
                                    </div>
                                @endforeach
                            </div><!-- /.product-details__thumb -->
                        </div><!-- /.product-details__thumb-box -->
                        <div class="product-details__carousel deskot-slick__carousel"
                            data-slick-options='{!! json_encode($mainOptions, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}'>
                            @foreach ($product->images as $image)
                                <div class="item">
                                    <div class="product-details__image">
                                        <img src="{{ $image->image_path }}" alt="{{ $image->name }}"
                                            class="w-100 rounded-0 object-fit-cover" loading="lazy" height="650" />
                                    </div><!-- /.product-details__image -->
                                </div><!-- /.item -->
                            @endforeach
                        </div><!-- /.product-details__carousel -->
                    </div><!-- /.product-details__product -->
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6" data-aos="fade-left" data-aos-anchor-placement="top-bottom"
                    data-aos-duration="1300">
                    <div class="product-details__content">
                        <h3 class="product-details__name">{{ $product->name }}</h3><!-- /.product-title -->
                        <div class="product-details__excerpt">
                            <p class="product-details__excerpt__text">
                                {!! $product->long_desc !!}
                            </p>

                        </div><!-- /.excerp-text -->

                    </div>
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
        <!--==========================Contact==========================-->
        @include('Website.partials._contact_info')
        <!--==========================Contact==========================-->
    </section>
    <!-- /.product-details -->

    <section class="services-one section-space">
        <div class="container">
            <div class="services-one__top">
                <div class="row gutter-y-40 align-items-end">
                    <div class="col-lg-9">
                        <div class="sec-title">
                            <div class="sec-title__top" data-aos="fade-right" data-aos-anchor-placement="top-bottom"
                                data-aos-duration="1500">

                                <p class="sec-title__tagline">{{ __('website.other_products') }}</p>
                            </div>
                            <!-- /.sec-title__top -->


                            <!-- /.sec-title__title -->
                        </div>
                        <!-- /.sec-title -->
                    </div>
                    <!-- /.col-lg-9 -->
                    <div class="col-lg-3">
                        <div class="services-one__custom-navs"></div>
                    </div>
                    <!-- /.col-lg-3 -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.services-one__top -->
            <div class="services-one__carousel deskot-owl__carousel deskot-owl__carousel--basic-nav owl-carousel owl-theme"
                data-owl-options='{
              "items": 1,
              "margin": 30,
              "loop": false,
              "smartSpeed": 700,
              "nav": true,
              "dots": false,
              "navContainer": ".services-one__custom-navs",
              "navText": ["<i class=\"icon-arrow-left\"></i>","<i class=\"icon-arrow-right\"></i>"],
              "autoplay": true,
              "responsive": {
                  "0": {
                      "items": 1,
                      "nav": true,
                      "dots": false
                  },
                  "768": {
                      "items": 2
                  },
                  "1200": {
                      "items": 4
                  }
              }
          }'>

                @foreach ($relatedProducts as $relatedProduct)
                    <div class="item" data-aos="fade-up" data-aos-anchor-placement="top-bottom"
                        data-aos-duration="1300" data-aos-delay="100">
                        <div class="service-card">
                            <div class="service-card__image">
                                <img src="{{ $relatedProduct->image_path }}" alt="{{ $relatedProduct->name }}" />

                            </div>
                            <!-- /.service-card__image -->
                            <div class="service-card__content">
                                <h3 class="service-card__title">
                                    <a href="{{ $relatedProduct->link }}">{{ $relatedProduct->name }}</a>
                                </h3>
                                <p class="service-card__text">
                                    {!! $relatedProduct->short_desc !!}
                                </p>
                                <a href="{{ $relatedProduct->link }}"
                                    class="service-card__link">{{ __('website.more') }}
                                    <span class="service-card__link__icon"><i class="icon-arrow-right"></i></span></a>
                            </div>
                            <!-- /.service-card__content -->
                        </div>
                        <!-- /.service-card -->
                    </div>
                    <!-- /.item -->
                @endforeach
            </div>
            <div class="text-center">

                <a href="{{ Path::AppUrl('products') }}" class="deskot-btn deskot-btn--black mt-4">
                    <span class="deskot-btn__text">{{ __('website.more') }}</span>
                    <span class="deskot-btn__icon-box"><span class="deskot-btn__icon">
                            <i class="icon-arrow-right-up"></i>
                            <i class="icon-arrow-right-up"></i></span>
                    </span>
                </a>
            </div>
            <!-- /.services-one__carousel -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /.services-one -->


    @push('scripts')
        <!-- Fancybox CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />

        <!-- Fancybox JS -->
        <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Initialize Fancybox only for product gallery images
                Fancybox.bind("[data-fancybox='product-gallery']", {
                    // Fancybox options
                });
            });
        </script>
    @endpush
</x-website.layout>