@extends('layouts.front')

@section('title', 'FAQ')

@push('styles')
<style>
    .faq-nav .nav-link {
        color: #999;
        font-weight: 500;
    }
    .faq-nav .nav-link.active {
        color: #000;
    }
    .accordion-button:not(.collapsed) {
        background-color: #fff;
        box-shadow: none;
    }
    .accordion-button:focus {
        box-shadow: none;
    }
</style>
@endpush

@section('content')
<div class="container py-5">
    <h3 class="fw-bold mb-4">Q/A</h3>
    <div class="row">
        <!-- Sidebar Tabs -->
        <div class="col-md-3">
            <div class="nav flex-column nav-pills faq-nav" id="faqTabs" role="tablist" aria-orientation="vertical">
                @foreach($categories as $index => $cat)
                    <button class="nav-link {{ $index === 0 ? 'active' : '' }}" id="tab-{{ $cat->id }}" data-bs-toggle="pill" data-bs-target="#cat-{{ $cat->id }}" type="button" role="tab">
                        {{ strtoupper($cat->name) }}
                    </button>
                @endforeach
            </div>
        </div>

        <!-- Accordion Content -->
        <div class="col-md-9">
            <div class="tab-content" id="faqTabContent">
                @foreach($categories as $index => $cat)
                    <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}" id="cat-{{ $cat->id }}" role="tabpanel">
                        <div class="accordion" id="accordion-{{ $cat->id }}">
                            @forelse($cat->faqs as $faq)
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="heading-{{ $faq->id }}">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ $faq->id }}">
                                            {{ $faq->question }}
                                        </button>
                                    </h2>
                                    <div id="collapse-{{ $faq->id }}" class="accordion-collapse collapse" data-bs-parent="#accordion-{{ $cat->id }}">
                                        <div class="accordion-body">
                                            {!! $faq->answer !!}
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <p>No questions in this category.</p>
                            @endforelse
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection