@extends('frontend::layouts.master')
@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />


    @livewire('frontend::list.products-detail', ['breadcrumb' => $breadcrumb,'machines' => $machines,'machines_id' => $machines_id ?? 0,'article' => $article ?? []])

    <!-- Swiper CSS/JS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

    <!-- GLightbox CSS/JS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>

    <!-- Swiper Gallery -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            
            /* ================== Swiper Gallery ================== */
            const galleryThumbs = new Swiper(".gallery-thumbs", {
                spaceBetween: 10,
                slidesPerView: 4, // แสดง 4 thumbnails ต่อครั้ง
                watchSlidesProgress: true,
                freeMode: true,
                navigation: {
                    nextEl: ".swiper-button-next-thumb",
                    prevEl: ".swiper-button-prev-thumb",
                },
                on: {
                    init: function () {
                        // อัปเดต navigation buttons หลังจาก init
                        this.navigation.init();
                        this.navigation.update();
                    },
                    slideChange: function () {
                        // อัปเดต navigation buttons หลังจากเปลี่ยนสไลด์
                        this.navigation.update();
                    }
                },
                breakpoints: {
                    // รองรับ responsive
                    320: {
                        slidesPerView: 2,
                        spaceBetween: 5
                    },
                    640: {
                        slidesPerView: 3,
                        spaceBetween: 8
                    },
                    768: {
                        slidesPerView: 4,
                        spaceBetween: 10
                    }
                }
            });

            const galleryTop = new Swiper(".gallery-top", {
                spaceBetween: 10,
                autoHeight: true, // ปรับความสูงอัตโนมัติตามรูปภาพ
                loop: true, // วนลูปสไลด์
                autoplay: {
                    delay: 5000, // เปลี่ยนสไลด์ทุก X วินาที
                    disableOnInteraction: false, // ไม่หยุดเมื่อผู้ใช้โต้ตอบ
                    pauseOnMouseEnter: true, // หยุดเมื่อ hover
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                thumbs: {
                    swiper: galleryThumbs,
                },
                on: {
                    slideChange: function () {
                        // อัพเดทความสูงเมื่อเปลี่ยน slide
                        this.updateAutoHeight(300);
                    },
                    imagesReady: function () {
                        // อัพเดทความสูงเมื่อรูปภาพโหลดเสร็จ
                        this.updateAutoHeight();
                    }
                }
            });

            // Update swiper height when images load
            const galleryImages = document.querySelectorAll('.gallery-top .swiper-slide img');
            galleryImages.forEach(img => {
                img.addEventListener('load', function() {
                    if (galleryTop) {
                        galleryTop.updateAutoHeight();
                    }
                });
            });

            // Initialize GLightbox for click-to-zoom functionality
            const lightbox = GLightbox({
                selector: '.glightbox',
                touchNavigation: true,
                loop: true,
                autoplayVideos: false
            });


            /* ================== Sidebar Menu Toggle ================== */
            const list = document.querySelector(".list");
            if (list) {
                const closeSiblings = li => {
                    const siblings = Array.from(li.parentElement.children).filter(ch => ch !== li);
                    siblings.forEach(sib => {
                        sib.classList.remove("open");
                        const ssub = sib.querySelector(":scope > .sub-list");
                        if (ssub) ssub.style.display = "none";
                        const sibBtn = sib.querySelector(":scope > .menu-item > .toggle-btn");
                        if (sibBtn) sibBtn.textContent = "+";
                    });
                };

                list.querySelectorAll(".menu-item").forEach(menuItem => {
                    menuItem.addEventListener("click", e => {
                        const li = menuItem.closest("li");
                        if (!li) return;

                        const sub = li.querySelector(":scope > .sub-list");
                        if (!sub) return;

                        const a = e.target.closest("a");
                        if (a && a.getAttribute("href") && a.getAttribute("href") !== "#" && !a
                            .classList.contains("toggle")) return;

                        e.preventDefault();
                        e.stopPropagation();

                        closeSiblings(li);

                        const willOpen = !li.classList.contains("open");
                        li.classList.toggle("open", willOpen);
                        sub.style.display = willOpen ? "block" : "none";

                        const myBtn = li.querySelector(":scope > .menu-item > .toggle-btn");
                        if (myBtn) myBtn.textContent = willOpen ? "-" : "+";
                    });
                });
            }

        });
    </script>

    <!-- Accordion Dynamic Hieght -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sourceContainer = document.getElementById('source-items');
            const gridContainer = document.getElementById('grid-container');

            // --- 1. ACCORDION LOGIC ---
            // Changed to listen on #grid-container only to prevent duplicate bubbling issues
            gridContainer.addEventListener('click', function(e) {
                // Find closest title element that was clicked
                const header = e.target.closest('.ac-title');
                
                // If we didn't click a header, do nothing
                if (!header) return;

                // Optional: prevent default if it behaves weirdly
                e.preventDefault();

                // Find the parent item and toggle
                const item = header.parentElement;
                item.classList.toggle('active');
            });

            // --- 2. STRICT GRID DISTRIBUTOR ---
            
            // Convert NodeList to Array to keep reference
            const items = Array.from(sourceContainer.children);
            
            function distributeItems() {
                // Check screen width to determine columns
                // > 992px (lg) = 4 columns
                // > 768px (md) = 2 columns
                // < 768px      = 1 column
                const width = window.innerWidth;
                let cols = 1;
                if (width >= 992) cols = 4;
                else if (width >= 768) cols = 2;

                // Clear current grid
                gridContainer.innerHTML = '';
                
                // Create Column Buckets
                const buckets = [];
                for(let i=0; i<cols; i++) {
                    const colDiv = document.createElement('div');
                    // Use Bootstrap classes for column sizing
                    if(cols === 4) colDiv.className = 'col-lg-3 col-md-6 col-12 grid-column';
                    else if(cols === 2) colDiv.className = 'col-md-6 col-12 grid-column';
                    else colDiv.className = 'col-12 grid-column';
                    
                    buckets.push(colDiv);
                    gridContainer.appendChild(colDiv);
                }

                // Distribute Items: Item 0 -> Col 0, Item 1 -> Col 1, Item 2 -> Col 2, Item 3 -> Col 0...
                items.forEach((item, index) => {
                    const bucketIndex = index % cols;
                    buckets[bucketIndex].appendChild(item);
                });
            }

            // Run on load
            distributeItems();

            // Run on resize (with debounce for performance)
            let resizeTimer;
            window.addEventListener('resize', () => {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(distributeItems, 200);
            });
        });
    </script>
@endsection