@extends('layouts.page')

@section('content')
    <section class="intenal-heading">
        <div class="container">
            <div class="col-12">
                <h2>Faqs</h2>
                <a href="{{ route('homepage') }}">Home</a>> <span>Faqs</span>
            </div>
        </div>
    </section>

    <section class="faq-main">
        <div class="container">
            <div class="row d-flex justify-content-center">
                <div class="col-xxl-8 col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
                    <div class="accordion" id="faq-accordion">
                        @foreach ($faqs as $item)
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#faq{{ $item->id }}" aria-expanded="false" aria-controls="faq{{ $item->id }}">
                                        {{ $item->question }}
                                    </button>
                                </h2>
                                <div id="faq{{ $item->id }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}" data-bs-parent="#faq-accordion">
                                    <div class="accordion-body">
                                        {!! $item->answer !!}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    
@endsection