@extends('frontend::layouts.master')
@section('content')
<x-frontend::breadcrumb.default :items="$breadcrumbs" />

    @livewire('frontend::list.detail-products',['id' => $id])


    <!-- 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>


    <script>
        document.addEventListener("DOMContentLoaded", function() {

            /* ================== Quote Popup ================== */
            const quotePopup = document.getElementById("quotePopup");
            const successPopup = document.getElementById("successPopup");
            const quoteForm = document.getElementById("quoteForm");
            const openQuoteBtn = document.getElementById("openQuote");
            const closeQuoteBtn = document.getElementById("closeQuote");

            const showQuotePopup = () => {
                if (!quotePopup) return;
                quotePopup.style.display = "flex";
                document.body.style.overflow = "hidden";
            };

            const hideQuotePopup = () => {
                if (!quotePopup) return;
                quotePopup.style.display = "none";
                document.body.style.overflow = "auto";
            };

            const showSuccessPopup = () => {
                if (!successPopup) return;
                successPopup.style.display = "flex";
                document.body.style.overflow = "hidden";
            };

            const hideSuccessPopup = () => {
                if (!successPopup) return;
                successPopup.style.display = "none";
                document.body.style.overflow = "auto";
            };

            // เปิด popup
            openQuoteBtn?.addEventListener("click", () => {
                showQuotePopup();
            });

            // ปิด popup
            closeQuoteBtn?.addEventListener("click", () => {
                hideQuotePopup();
            });

            // ปิด success popup
            window.closeSuccess = () => {
                hideSuccessPopup();
                if (typeof grecaptcha !== 'undefined' && widget !== null) {
                    grecaptcha.reset(widget);
                }
            };

            document.addEventListener('livewire:init', () => {
                Livewire.on('openQuote', () => {
                    showQuotePopup();
                });
                Livewire.on('closeQuote', () => {
                    hideQuotePopup();
                });
                Livewire.on('successPopup', () => {
                    hideQuotePopup();
                    showSuccessPopup();
                });
                Livewire.on('resetRecaptcha', () => {
                    if (typeof grecaptcha !== 'undefined' && widget !== null) {
                        grecaptcha.reset(widget);
                    }
                });
            });


            /* ================== 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,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                thumbs: {
                    swiper: galleryThumbs,
                },
                zoom: {
                    enabled: true,
                    maxRatio: 3,
                    minRatio: 1,
                },
            });

            // Hover zoom functionality
            const gallerySlides = document.querySelectorAll('.gallery-top .swiper-slide');

            gallerySlides.forEach(slide => {
                const img = slide.querySelector('img');
                const zoomContainer = slide.querySelector('.swiper-zoom-container');

                if (img && zoomContainer) {
                    let isZoomed = false;
                    let zoomLevel = 1;
                    const maxZoom = 3;
                    const minZoom = 1;

                    // Mouse enter - start zoom
                    slide.addEventListener('mouseenter', (e) => {
                        if (!isZoomed) {
                            const rect = slide.getBoundingClientRect();
                            const x = e.clientX - rect.left;
                            const y = e.clientY - rect.top;

                            // Set transform origin to mouse position
                            zoomContainer.style.transformOrigin = `${x}px ${y}px`;
                            zoomContainer.style.transform = `scale(${maxZoom})`;
                            isZoomed = true;
                        }
                    });

                    // Mouse move - update zoom center
                    slide.addEventListener('mousemove', (e) => {
                        if (isZoomed) {
                            const rect = slide.getBoundingClientRect();
                            const x = e.clientX - rect.left;
                            const y = e.clientY - rect.top;

                            // Update transform origin to follow mouse
                            zoomContainer.style.transformOrigin = `${x}px ${y}px`;
                        }
                    });

                    // Mouse leave - reset zoom
                    slide.addEventListener('mouseleave', () => {
                        zoomContainer.style.transform = 'scale(1)';
                        zoomContainer.style.transformOrigin = 'center center';
                        isZoomed = 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>
@endsection