@extends('frontend::layouts.app')

@section('content')
    <section id="product-page" class="product-page p-t-60 p-b-60">
        <div class="container">

            <div class="row">
                <!-- Left Column: Content -->
                <div class="col-lg-6 col-md-12">
                    <!-- Breadcrumb -->
                    @if (!empty($breadcrumb))
                        <div class="breadcrumb m-b-20">
                            <ul>
                                @foreach ($breadcrumb as $item)
                                    @if ($loop->last)
                                        <li class="active"><a href="#">{!! $item['name'] ?? '' !!}</a></li>
                                    @else
                                        <li><a href="{{ $item['url'] ?? '' }}">{!! $item['name'] ?? '' !!}</a></li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <!-- Product Title -->
                    <h1 class="product-title m-b-20">{!! $dt['name'] ?? '' !!}</h1>

                    <!-- Contact Us Link -->
                    <p class="m-b-40">@lang('frontend::lang.interested') <a href="{{ $contact_url ?? '' }}"
                            class="contact-link">@lang('frontend::lang.contact_us')</a></p>

                    <!-- Lorem ipsum Section 2 -->
                    <div class="product-section m-b-40">
                        {!! $dt['desc'] ?? '' !!}
                    </div>
                </div>
                <!-- Right Column: Image Slider -->
                @if (!empty($dt['gallery']))
                    <div class="col-lg-6 col-md-12">
                        <div class="product-image-slider">
                            <div class="carousel" data-items="1" data-dots="true" data-autoplay="5000">
                                {{-- @foreach ($dt['gallery'] as $item) --}}
                                @foreach ($dt['gallery'] as $item)
                                    <div class="slide">
                                                                                @if ($type_file == 'mp4')
                                            <video src="{{ asset($item['image'] ?? '') }}" controls></video>
                                        @else
                                            <img src="{{ asset($item['image'] ?? '') }}" alt="{{ $item['name'] ?? '' }}" class="zoomable-image" />
                                        @endif

                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    {!! $dt['detail'] ?? '' !!}
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <!-- Product Catalog Section -->
                    @if (!empty($dt['file']))
                        <div class="product-section m-b-40">
                            <h2 class="section-title">@lang('frontend::lang.product_catalog')</h2>
                            <hr class="section-divider">
                            <ul class="catalog-list">
                                @foreach ($dt['file'] as $item)
                                    <li><a target="_blank" href="{{ asset($item['image']) }}">{!! $item['name'] ?? '' !!}<i
                                                class="fa fa-chevron-right"></i></a></li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
    <!-- Zoom Modal -->
    <div id="zoomModal" class="zoom-modal">
        <span class="zoom-close">&times;</span>
        <img class="zoom-modal-content" id="zoomedImage" src="" alt="Zoomed Product Image">
    </div>
@endsection

@section('scripts')
    <script>
        (function() {
            'use strict';

            // ตั้งค่า autoplay ให้ carousel - ใช้วิธีที่แน่นอน
            function initProductSliderAutoplay() {
                if (typeof jQuery === 'undefined' || typeof jQuery.fn.flickity === 'undefined') {
                    setTimeout(initProductSliderAutoplay, 50);
                    return;
                }

                const $carousel = jQuery('.product-image-slider .carousel');

                if ($carousel.length === 0) {
                    setTimeout(initProductSliderAutoplay, 50);
                    return;
                }

                // ฟังก์ชันเริ่ม autoplay
                function startAutoplay() {
                    const flickityInstance = $carousel.data('flickity');

                    if (!flickityInstance || !flickityInstance.slides || flickityInstance.slides.length <= 1) {
                        return false;
                    }

                    // หยุด autoplay เดิมถ้ามี
                    if (flickityInstance.autoPlayInterval) {
                        clearInterval(flickityInstance.autoPlayInterval);
                    }

                    // เริ่ม autoplay ทันที
                    flickityInstance.autoPlayInterval = setInterval(function() {
                        if (flickityInstance && flickityInstance.slides && flickityInstance.slides.length > 0) {
                            const currentIndex = flickityInstance.selectedIndex || 0;
                            const nextIndex = (currentIndex + 1) % flickityInstance.slides.length;
                            flickityInstance.select(nextIndex);
                        }
                    }, 3000);

                    return true;
                }

                // เช็คว่า carousel ready แล้วหรือยัง
                const flickityInstance = $carousel.data('flickity');
                if (flickityInstance && flickityInstance.slides && flickityInstance.slides.length > 0) {
                    // ถ้า ready แล้ว เริ่ม autoplay ทันที
                    startAutoplay();
                } else {
                    // ถ้ายังไม่ ready ให้เช็คซ้ำ
                    let attempts = 0;
                    const maxAttempts = 200; // เพิ่มจำนวนครั้ง
                    const checkInterval = setInterval(function() {
                        attempts++;
                        const instance = $carousel.data('flickity');
                        if (instance && instance.slides && instance.slides.length > 0) {
                            clearInterval(checkInterval);
                            startAutoplay();
                        } else if (attempts >= maxAttempts) {
                            clearInterval(checkInterval);
                        }
                    }, 50); // เช็คทุก 50ms
                }

                // ใช้ event listener เป็น backup
                $carousel.one('ready.flickity', function() {
                    setTimeout(startAutoplay, 100);
                });
            }

            // เริ่ม init autoplay - ใช้หลายวิธีเพื่อให้แน่ใจ
            function runInitAutoplay() {
                initProductSliderAutoplay();
            }

            // ใช้ DOMContentLoaded
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', function() {
                    setTimeout(runInitAutoplay, 300);
                });
            } else {
                setTimeout(runInitAutoplay, 300);
            }

            // ใช้ window load เป็น backup
            window.addEventListener('load', function() {
                setTimeout(runInitAutoplay, 500);
            });

            // ใช้ jQuery ready เป็น backup อีกชั้น
            if (typeof jQuery !== 'undefined') {
                jQuery(document).ready(function() {
                    setTimeout(runInitAutoplay, 400);
                });
            }

            // Zoom functionality
            const zoomModal = document.getElementById('zoomModal');
            const zoomedImage = document.getElementById('zoomedImage');
            const zoomClose = document.querySelector('.zoom-close');

            // ฟังก์ชันเปิด zoom
            function openZoom(imgSrc) {
                if (zoomModal && zoomedImage) {
                    zoomModal.style.display = 'flex';
                    zoomedImage.src = imgSrc;
                    document.body.style.overflow = 'hidden';

                    // หยุด autoplay เมื่อเปิด zoom
                    if (typeof jQuery !== 'undefined') {
                        const $carousel = jQuery('.product-image-slider .carousel');
                        const flickityInstance = $carousel.data('flickity');
                        if (flickityInstance) {
                            if (flickityInstance.player && flickityInstance.player.pause) {
                                flickityInstance.player.pause();
                            } else if (flickityInstance.autoPlayInterval) {
                                clearInterval(flickityInstance.autoPlayInterval);
                                flickityInstance.autoPlayInterval = null;
                            }
                        }
                    }
                }
            }

            // ฟังก์ชันปิด zoom
            function closeZoom() {
                if (zoomModal) {
                    zoomModal.style.display = 'none';
                    document.body.style.overflow = '';

                    // เริ่ม autoplay ใหม่เมื่อปิด zoom
                    if (typeof jQuery !== 'undefined') {
                        const $carousel = jQuery('.product-image-slider .carousel');
                        const flickityInstance = $carousel.data('flickity');
                        if (flickityInstance) {
                            if (flickityInstance.player && flickityInstance.player.play) {
                                flickityInstance.player.play();
                            } else if (!flickityInstance.autoPlayInterval && flickityInstance.slides) {
                                // เริ่ม autoplay ใหม่ด้วย setInterval
                                let currentIndex = flickityInstance.selectedIndex || 0;
                                const totalSlides = flickityInstance.slides.length;

                                flickityInstance.autoPlayInterval = setInterval(function() {
                                    currentIndex = (currentIndex + 1) % totalSlides;
                                    flickityInstance.select(currentIndex);
                                }, 3000);
                            }
                        }
                    }
                }
            }

            // ใช้ event delegation เพื่อจับ click event บน parent container
            function initZoom() {
                const productSlider = document.querySelector('.product-image-slider');

                if (productSlider) {
                    productSlider.addEventListener('click', function(e) {
                        const img = e.target.closest('.zoomable-image');
                        if (img) {
                            e.preventDefault();
                            e.stopPropagation();
                            openZoom(img.src || img.getAttribute('src'));
                        }
                    });
                }

                // รอให้ carousel initialize เสร็จแล้วจับ element อีกครั้ง
                setTimeout(function() {
                    const zoomableImages = document.querySelectorAll('.zoomable-image');
                    zoomableImages.forEach(function(img) {
                        img.addEventListener('click', function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            openZoom(this.src || this.getAttribute('src'));
                        });
                    });
                }, 500);
            }

            // รอให้ DOM พร้อม
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initZoom);
            } else {
                initZoom();
            }

            // ปิด zoom เมื่อคลิกปุ่ม X
            if (zoomClose) {
                zoomClose.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    closeZoom();
                });
            }

            // ปิด zoom เมื่อคลิกที่พื้นหลัง
            if (zoomModal) {
                zoomModal.addEventListener('click', function(e) {
                    if (e.target === zoomModal) {
                        closeZoom();
                    }
                });
            }

            // ปิด zoom เมื่อกด ESC
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && zoomModal && zoomModal.style.display === 'flex') {
                    closeZoom();
                }
            });
        })();
    </script>
@endsection