@extends('layouts.frontlayout')
@section('content')
<!-- ==== Breadcarmb_Start === -->
<section class="breadcame_area top-space">
    <div class="container">
        <div class="row">
            <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="inner_area">
                    <div class="header_area">
                        <h1>Frequently asked questions</h1>
                    </div>
                    <div class="image_area">
                        <img src="{{url('frontend/images/bg_2.png')}}" alt="..." />
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ==== Breadcarmb_End === -->

<!-- ==== Faq_Section_Start === -->
<section class="faq_section">
    <div class="container">
        <div class="row">
            <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="detail_area">
                    <div class="row">
                        <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                            <div class="left_side">
                                <div class="inner_area">
                                    <h4>
                                        Any Questions?
                                    </h4>
                                    <h4>
                                        Check out the FAQs
                                    </h4>
                                    <p>Still have unanswered questions and need to get in touch
                                    </p>
                                    <div class="button">
                                        <a href="{{route('contactus.index')}}" class="btn btn-primary w-100">Contact Us</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-8 col-12">
                            <div class="right_side">
                                <div class="faq_detail_area">
                                    <div class="accordion" id="accordionExample">
                                        @foreach($faqs as $k => $faq )
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingOne-{{$k+1}}">
                                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapseOne-{{$k+1}}" aria-expanded="true" aria-controls="collapseOne-{{$k+1}}">
                                                    {{$faq->title}}
                                                </button>
                                            </h2>
                                            <div id="collapseOne-{{$k+1}}" class="accordion-collapse collapse @if($k+1 == 1) {{ 'show' }} @endif" aria-labelledby="headingOne-{{$k+1}}"
                                                data-bs-parent="#accordionExample">
                                                <div class="accordion-body">
                                                    <p>
                                                       {{$faq->description}}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ====  faq_Section_End=== -->


@endsection