@section('seo')
    @include('layouts._front_includes._seo', ['seo' => $page->seo])
@endsection

@extends('layouts.frontend_master')


@section('content')
    <div class="d-flex justify-content-center align-items-center py-5">
        <p class="text-center text-dark fs-1 fw-medium font-family-Onest col-xxl-6 m-0 px-3 py-2">
            Frequently Asked Questions
        </p>
    </div>

    <section class="container my-5">
        <div class="row justify-content-center">
            <div class="col-lg-3 mb-4">
                <div class="rounded-3 p-3 sticky-top" style="top: 80px; background-color: #f8f9fa; z-index: 1;">
                    <h3 class="text-dark fw-semibold mb-3" style="font-family: 'Onest', sans-serif;">Table of Content</h3>
                    <div class="d-flex flex-column gap-2">
                        @foreach ($categories as $catKey => $cat)
                            <a href="#category-{{ $catKey }}"
                                class="text-decoration-none nav-item {{ $catKey === 0 ? 'active' : '' }}">
                                <div class="rounded-3 p-3 nav-item-content">
                                    <p class="fw-semibold mb-0" style="font-family: 'Onest', sans-serif;">
                                        {{ $cat->title }}</p>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Content (Right Column) -->
            <div class="col-lg-8">
                <!-- FAQ Categories Section -->
                @foreach ($categories as $keyA => $faqCat)
                    <div id="category-{{ $keyA }}" class="accordion pt-4 {{ !$loop->last ? 'mb-5' : '' }}">
                        <h3 class="text-dark fw-medium mb-3" style="font-family: 'Onest', sans-serif;">{{ $faqCat->title }}
                        </h3>
                        @foreach ($faqCat->faqs as $keyB => $faq)
                            <div class="accordion-item border border-grey-700 rounded-3 mb-2">
                                <h2 class="accordion-header">
                                    <button
                                        class="accordion-button {{ !($keyB == 0 && $keyA == 0) ? 'collapsed' : '' }} fs-6 fw-medium font-family-Onest"
                                        type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseOne{{ $keyA }}{{ $keyB }}"
                                        aria-expanded="{{ $keyB == 0 && $keyA == 0 ? 'true' : 'false' }}">
                                        {{ $faq->question }}
                                    </button>
                                </h2>
                                <div id="collapseOne{{ $keyA }}{{ $keyB }}"
                                    class="accordion-collapse collapse {{ $keyB == 0 && $keyA == 0 ? 'show' : '' }}">
                                    <div class="accordion-body text-secondary fs-6 fw-medium font-family-Onest">
                                        {!! $faq->answer !!}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <script>
        // Highlight active nav item on click
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();

                // Remove active class from all items
                document.querySelectorAll('.nav-item').forEach(navItem => {
                    navItem.classList.remove('active');
                });

                // Add active class to clicked item
                this.classList.add('active');

                // Smooth scroll to target
               const target = document.querySelector(this.getAttribute('href'));
if (target) {
    const yOffset = -100; // offset in px (adjust for navbar height)
    const y = target.getBoundingClientRect().top + window.pageYOffset + yOffset;
    window.scrollTo({ top: y, behavior: 'smooth' });
}

            });
        });

        // Update active nav item based on scroll position
        window.addEventListener('scroll', function() {
            const sections = document.querySelectorAll('[id^="category-"]');
            const navItems = document.querySelectorAll('.nav-item');
            let currentSection = '';

            sections.forEach(section => {
                const sectionTop = section.offsetTop;

                const sectionHeight = section.clientHeight;
                if (window.scrollY >= (sectionTop - 150)) {
                    currentSection = section.getAttribute('id');
                }
            });

            // Only update if we have a current section
            if (currentSection) {
                navItems.forEach(item => {
                    item.classList.remove('active');
                    if (item.getAttribute('href') === `#${currentSection}`) {
                        item.classList.add('active');
                    }
                });
            }
        });
    </script>
@endsection