@extends('frontend.master')
@section('content')
<!--=======Breadcrumb =======-->
    <section id="breadcrumbs" class="breadcrumbs">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
            <h2>FAQ</h2>
            <ol>
            <li><a href="{{url('/')}}">Home</a></li>
            <li>Frequently Asked Questions</li>
            </ol>
            </div>
        </div>
    </section>
<!--=======End Breadcrumbs=======-->

<!-- ======= Frequently Asked Questions Section ======= -->
    <section id="faq" class="faq pt-5 pb-4">
        <div class="container" data-aos="fade-up">
            <div class="row mb-2">
                <div class="col-md-12">
                    <div class="faq-list">
                    <ul>
                        @foreach ($faq as $faqq)
                            <li data-aos="fade-up" class="border" data-aos-delay="200">
                                <a data-bs-toggle="collapse" data-bs-target="#faq-list{{$faqq->id}}" class="collapsed">{{$faqq->title}}<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
                                <div id="faq-list{{$faqq->id}}" class="collapse" data-bs-parent=".faq-list">
                                    <p>
                                        @php echo $faqq->description; @endphp
                                    </p>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                    </div>
                </div>
            </div>
            {{$faq->links('pagination::bootstrap-5')}}
        </div>
    </section>
<!--=======Frequently Asked Questions Section=======-->
@endsection()