@extends('frontend::layouts.master')
@section('content')
    <x-frontend::breadcrumb.default :items="$breadcrumbs" />
    <section class="sect-product-category-title">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="htitle m-b-0">{!! end($breadcrumbs)['name'] ?? '' !!}</h3>
                    {!! end($breadcrumbs)['desc'] ?? '' !!}
                </div>
            </div>
        </div>
    </section>  
    @livewire('frontend::list.products', ['category_id' => $category_id ?? 0,'products_all' => $products_all ?? [],'breadcrumbs' => $breadcrumbs,'title_nav' => $title_nav,'dt' => end($breadcrumbs)['detail'] ?? ''])

    {{-- JS accordion --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const list = document.querySelector(".list");
            if (!list) return;

            // helper ปิด siblings
            function 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 = "+";
                });
            }

            // ให้กดได้ทั้ง menu-item
            list.querySelectorAll(".menu-item").forEach(menuItem => {
                menuItem.addEventListener("click", function(e) {
                    const li = this.closest("li");
                    if (!li) return;

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

                    // เช็คว่าคลิกที่ <a> ที่เป็นลิงก์จริงมั้ย
                    const a = e.target.closest("a");
                    if (a && a.getAttribute("href") && a.getAttribute("href") !== "#" && !a
                        .classList.contains("toggle")) {
                        // เป็นลิงก์จริง → ไปตามปกติ
                        return;
                    }

                    // ถ้าไม่ใช่ลิงก์จริง → toggle
                    e.preventDefault();
                    e.stopPropagation();

                    // ปิด siblings
                    closeSiblings(li);

                    // toggle ตัวเอง
                    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