@extends('layouts.app')

@section('title', 'Frequently Asked Questions - Primary Learning Tutor')

@section('content')
<div class="container py-5">
    <div class="row mb-4">
        <div class="col-12 text-center">
            <h1 class="display-4 fw-bold mb-3">❓ Frequently Asked Questions</h1>
            <p class="lead text-muted">Find answers to common questions about our platform</p>
        </div>
    </div>

    <!-- Category Filter -->
    @if($categories->count() > 0)
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex flex-wrap gap-2 align-items-center">
                <strong class="me-2">Filter by Category:</strong>
                <a href="{{ route('faqs.index') }}" 
                   class="btn btn-sm {{ !request('category') ? 'btn-primary' : 'btn-outline-primary' }}">
                    All
                </a>
                @foreach($categories as $category)
                    <a href="{{ route('faqs.index', ['category' => $category]) }}" 
                       class="btn btn-sm {{ request('category') == $category ? 'btn-primary' : 'btn-outline-primary' }}">
                        {{ $category }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <!-- FAQs by Category -->
    @if($faqsByCategory->count() > 0)
        @foreach($faqsByCategory as $category => $categoryFaqs)
            <div class="mb-5">
                @if($category)
                    <h2 class="h3 mb-3 fw-bold">{{ $category }}</h2>
                @else
                    <h2 class="h3 mb-3 fw-bold">General</h2>
                @endif
                
                <div class="accordion" id="faqAccordion{{ $loop->index }}">
                    @foreach($categoryFaqs as $index => $faq)
                        <div class="accordion-item mb-2">
                            <h2 class="accordion-header" id="heading{{ $faq->id }}">
                                <button class="accordion-button {{ $index > 0 ? 'collapsed' : '' }}" 
                                        type="button" 
                                        data-bs-toggle="collapse" 
                                        data-bs-target="#collapse{{ $faq->id }}" 
                                        aria-expanded="{{ $index === 0 ? 'true' : 'false' }}" 
                                        aria-controls="collapse{{ $faq->id }}">
                                    <strong>{{ $faq->question }}</strong>
                                </button>
                            </h2>
                            <div id="collapse{{ $faq->id }}" 
                                 class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}" 
                                 aria-labelledby="heading{{ $faq->id }}" 
                                 data-bs-parent="#faqAccordion{{ $loop->parent->index }}">
                                <div class="accordion-body">
                                    <div class="faq-answer">
                                        {!! nl2br(e($faq->answer)) !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    @else
        <div class="text-center py-5">
            <div style="font-size: 4rem; margin-bottom: 16px;">❓</div>
            <h4>No FAQs available</h4>
            <p class="text-muted">Check back later for frequently asked questions!</p>
        </div>
    @endif

    <!-- Contact Section -->
    <div class="card mt-5 bg-light">
        <div class="card-body text-center">
            <h5 class="card-title">Still have questions?</h5>
            <p class="card-text">Can't find the answer you're looking for? Please feel free to contact us!</p>
            <a href="{{ route('home') }}" class="btn btn-primary">Go to Home</a>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.accordion-button {
    font-size: 1.1rem;
    font-weight: 500;
}

.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: #0d6efd;
}

.faq-answer {
    line-height: 1.8;
    font-size: 1rem;
    color: #333;
}

.faq-answer p {
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .display-4 {
        font-size: 2rem;
    }
    
    .lead {
        font-size: 1rem;
    }
    
    .accordion-button {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .d-flex.gap-2 {
        flex-wrap: wrap;
    }
    
    .d-flex.gap-2 .btn {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

@media (max-width: 576px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .display-4 {
        font-size: 1.75rem;
    }
    
    .accordion-button {
        font-size: 0.9rem;
        padding: 0.6rem 0.75rem;
    }
    
    .faq-answer {
        font-size: 0.9rem;
    }
    
    .d-flex.gap-2 .btn {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
}
</style>
@endpush