@extends('layouts.frontend')

@section('title', 'Frequently Asked Questions - Trade Plus Education')

@section('content')
<!-- Hero Section -->
<section class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-20">
    <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center">
            <h1 class="text-5xl font-bold mb-6">Frequently Asked Questions</h1>
            <p class="text-xl text-blue-100">Find answers to common questions about studying abroad</p>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="py-20 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
            @if($faqs && $faqs->count() > 0)
            @foreach($faqs as $category => $categoryFaqs)
            <div class="mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-6 capitalize">
                    @if($category)
                    {{ ucfirst($category) }} Questions
                    @else
                    General Questions
                    @endif
                </h2>

                <div class="space-y-4">
                    @foreach($categoryFaqs as $faq)
                    <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
                        <button type="button"
                            class="faq-question w-full text-left px-6 py-5 flex justify-between items-center hover:bg-gray-50 transition"
                            onclick="toggleFaq(event)">
                            <span class="text-lg font-semibold text-gray-900 pr-4">{{ $faq->question_en }}</span>
                            <i class="fas fa-chevron-down text-blue-600 transition-transform duration-300 faq-icon"></i>
                        </button>
                        <div class="faq-answer hidden px-6 pb-5 pt-2">
                            <div class="text-gray-700 leading-relaxed">{{ $faq->answer_en }}</div>
                            @if($faq->answer_bn)
                            <div class="text-gray-600 mt-3 pt-3 border-t text-sm">
                                <strong>বাংলা:</strong> {{ $faq->answer_bn }}
                            </div>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endforeach
            @else
            <div class="bg-white rounded-lg shadow-md p-12 text-center">
                <i class="fas fa-question-circle text-6xl text-gray-300 mb-4"></i>
                <p class="text-gray-500 text-lg">No FAQs available at the moment.</p>
                <a href="{{ route('contact') }}"
                    class="inline-block mt-6 bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition">
                    Contact Us for Questions
                </a>
            </div>
            @endif
        </div>
    </div>
</section>

<!-- Still Have Questions -->
<section class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-16">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-4xl font-bold mb-6">Still Have Questions?</h2>
        <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
            Our expert team is here to help you with any questions or concerns
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('contact') }}"
                class="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold hover:bg-blue-50 transition">
                Contact Us
            </a>
            <a href="https://wa.me/821032662956" target="_blank"
                class="bg-green-500 text-white px-8 py-4 rounded-lg font-semibold hover:bg-green-600 transition inline-flex items-center justify-center">
                <i class="fab fa-whatsapp text-xl mr-2"></i>
                Chat on WhatsApp
            </a>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script>
    function toggleFaq(event) {
    const button = event.currentTarget;
    const answer = button.nextElementSibling;
    const icon = button.querySelector('.faq-icon');
    
    // Close all other FAQs
    document.querySelectorAll('.faq-answer').forEach(item => {
        if (item !== answer && !item.classList.contains('hidden')) {
            item.classList.add('hidden');
            const otherIcon = item.previousElementSibling.querySelector('.faq-icon');
            if (otherIcon) {
                otherIcon.classList.remove('fa-chevron-up');
                otherIcon.classList.add('fa-chevron-down');
            }
        }
    });
    
    // Toggle current FAQ
    answer.classList.toggle('hidden');
    
    if (answer.classList.contains('hidden')) {
        icon.classList.remove('fa-chevron-up');
        icon.classList.add('fa-chevron-down');
    } else {
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-up');
    }
}
</script>
@endpush