@php
    $faqs = App\Models\Faq::where('status', 1)->get();
    $faqImage = App\Models\FaqImage::first();
@endphp
<section class="why-choose v2 pt-50 pt-md-70 pt-xl-100">
    <div class="container">
        <div class="row">
            <div class="col-xl-5">
                <div class="why-choose-img">
                    <img src="{{ asset('uploads/faqs/' . $faqImage->image) }}" alt="faq-img">
                </div>
            </div>
            <div class="col-xl-7">
                <div class="section-title v1">
                    <h6 class="text-para-1 text-xl-6 text-medium text-upper">FAQ</h6>
                    <h2 class="text-5 text-xl-3 text-bold">Answers To Frequently<br>asked Questions.
                    </h2>
                </div>
                <ul class="accordion-main" id="faq">
                    @foreach ($faqs as $key => $faq)
                        <li class="wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                            data-wow-duration="0.8s">
                            <button class="accordion-btn {{ $key == 0 ? '' : 'collapsed' }}" type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#faq-item-{{ $key }}">{{ $faq->question }}</button>
                            <div id="faq-item-{{ $key }}" class="collapse {{ $key == 0 ? 'show' : '' }}"
                                data-bs-parent="#faq">
                                <div class="box-content">
                                    <p class="text-para-2 text-para-xl-1">
                                        {!! $faq->answer !!}
                                    </p>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</section>