@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::page-title', ['breadcrumbs' => $breadcrumb,'bgImage' => Module::asset('frontend:images/bg-title-subpage.jpg')])

    <section class="sect-product-1 page-product-detail">
        <div class="container">
             <!-- Back Button -->
             <x-frontend::actions.button-back href="{{ $product['categories'][0]['url'] ?? '' }}" />
            <div class="row">
                @if (!empty($product['gallery']))
                    <div class="col-xs-12 col-sm-12 col-md-6 col-detail">
                        <div class="sect-product-gallery">
                            <div class="project-gallery">
                                <!-- Swiper Main -->
                                <div class="swiper gallery-top rounded-4">
                                    <div class="swiper-wrapper">
                                        @foreach ($product['gallery'] as $img)
                                            <div class="swiper-slide">
                                                <a href="{{ asset($img['image'] ?? '') }}" class="glightbox" data-gallery="product-gallery">
                                                    <img src="{{ asset($img['image'] ?? '') }}" alt="{{ $img['name'] ?? '' }}">
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <!-- Navigation Buttons -->
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>

                                <!-- Swiper Thumbs -->
                                <div class="swiper gallery-thumbs mt-2">
                                    <div class="swiper-wrapper">
                                        @foreach ($product['gallery'] as $img)
                                            <div class="swiper-slide">
                                                <img src="{{ asset($img['image'] ?? '') }}"
                                                    alt="{{ $img['name'] ?? '' }}">
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <!-- Thumbnail Navigation Buttons -->
                                <div class="swiper-button-next-thumb"></div>
                                <div class="swiper-button-prev-thumb"></div>
                            </div>
                        </div>
                    </div>
                @endif
                
                <div class="col-xs-12 col-sm-12 col-md-6 col-image">
                    <div class="product-info bg-white p-4 rounded-4 shadow-sm h-100">
                        {!! $product['desc'] ?? '' !!}
                        <a href="{{ $page_init['contact']['social']['line']['url'] ?? '' }}" target="_blank" class="btn btn-quote btn-pulse">{!! __('frontend::text.btn.request_quote') !!}</a>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <section class="sect-product-detail">
        <div class="container">
            <div class="row">

                <!-- Main Content -->
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <article class="news-article">
                        <!-- Article Content (Text Editor) -->
                        <div class="article-content ctrl-text-editor bg-white p-4 rounded-4 shadow-sm h-100">
                            {!! $product['detail'] ?? '' !!}
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </section>

    <!-- 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() {

            
            /* ================== 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,
                },
                autoplay: {
                    delay: 3500,
                    disableOnInteraction: false,
                },
                loop: true,
            });

            const lightbox = GLightbox({
                selector: ".glightbox"
            });


            /* ================== 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