@extends('layouts.master')
@section('content')

    <section class="faq">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="title">
                        <h4>Frequently Asked Questions</h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <!-- Tab Menu -->
                    <div class="tab-container">
                        @foreach($faqCategories as $index => $category)
                            <button class="tab {{ $index === 0 ? 'active' : '' }}" data-tab="tab-{{ $category->id }}">
                                {{ $category->name }}
                            </button>
                        @endforeach
                    </div>
                    
                    <!-- Tab Content -->
                    @foreach($faqCategories as $index => $category)
                        <div class="content {{ $index === 0 ? 'active' : '' }}" id="tab-{{ $category->id }}">
                            <div class="faq">
                                @forelse($category->faqs as $faq)
                                    <button class="faq-question">{{ $faq->question }}</button>
                                    <div class="faq-answer"><p>{{ $faq->answer }}</p></div>
                                @empty
                                    <p>No FAQs available in this category.</p>
                                @endforelse
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const tabs = document.querySelectorAll(".tab");
            const contents = document.querySelectorAll(".content");
        
            tabs.forEach(tab => {
                tab.addEventListener("click", function () {
                    tabs.forEach(t => t.classList.remove("active"));
                    contents.forEach(c => c.classList.remove("active"));
        
                    this.classList.add("active");
                    document.getElementById(this.dataset.tab).classList.add("active");
                });
            });
        });
    </script>
    
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const faqQuestions = document.querySelectorAll(".faq-question");
        
            faqQuestions.forEach(question => {
                question.addEventListener("click", function () {
                    // Toggle active state
                    this.classList.toggle("active");
        
                    // Toggle next sibling (faq-answer)
                    let answer = this.nextElementSibling;
                    if (answer.style.display === "block") {
                        answer.style.display = "none";
                    } else {
                        answer.style.display = "block";
                    }
                });
            });
        });
    </script>

                                

@endsection

@section('footer')
    @include('layouts.footer')
@endsection