@extends('front.layout.app')
@section('content')
    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>

    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{asset('images/innerbnr1.png')}}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <h2>FAQs</h2>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->

    <!-- FAQ SECTION -->
    <section class="faq-section inner-section">
        <div class="container">
            <div class="text-center">
                <h2 class="heading mx-auto" data-aos="fade-up">frequently asked questions</h2>
                <div class="col-lg-11 mx-auto">
                    <div class="accordion" id="faqModule">
                        @forelse($faq as $key => $val)
                        <div class="accordion-item" data-aos="fade-up">
                            <div class="card-header" id="faqOne">
                                <button class="btn" type="button" data-toggle="collapse" data-target="#collapseOne{{ $key }}" aria-expanded="true" aria-controls="collapseOne">
                                    {{ $val->title }}
                                </button>
                            </div>

                            <div id="collapseOne{{ $key }}" class="collapse {{ $key == 0 ? 'show' : '' }}" aria-labelledby="faqOne" data-parent="#faqModule">
                                <div class="card-body">
                                    <p>{!! $val->detail !!}</p>
                                </div>
                            </div>
                        </div>
                        @empty
                            <p>Faq are empty!</p>
                        @endforelse

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- !@FAQ SECTION -->
    @include('front.layout.contact-form')
@endsection