@extends('frontend.layouts.master2')
@section('title') FAQ @endsection
@section('main-content')

<!-- Body main wrapper start -->
<main>
    <!-- breadcrumb area start -->
    <section class="bd-breadcrumb-area p-relative fix">
        <!-- breadcrumb background image -->
        <div class="bd-breadcrumb-bg" @if(isset($banner) && $banner && $banner->banner_image) data-background="{{ Storage::url($banner->banner_image) }}" @else data-background="{{ asset('frontend/assets/images/faq_page.jpg') }}" @endif></div>
        <div class="bd-breadcrumb-wrapper p-relative">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-10">
                        <div class="bd-breadcrumb d-flex align-items-center justify-content-center">
                            <div class="bd-breadcrumb-content text-center">
                                <h1 class="bd-breadcrumb-title">Frequently Asked Question</h1>
                                <div class="bd-breadcrumb-list">
                                    <span><a href="{{route('home')}}"><i class="icon-home"></i>Home</a></span>
                                    <span>Frequently Asked Question</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb area end -->

    <!-- tour-listing area start -->
    <section class="bd-tour-listing-area section-space">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xxl-8 col-xl-8 col-lg-8">
                    <div class="accordion-wrapper faq-style-3">
                        <div class="accordion" id="accordionExampleThree">
                            @if($faqs)
				                @foreach($faqs as $faq)
                                    <div class="accordion-item">
                                        <h6 class="accordion-header" id="heading{{$faq->id}}">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$faq->id}}" aria-expanded="true" aria-controls="collapse{{$faq->id}}">
                                                {{$faq->title}}
                                            </button>
                                        </h6>
                                        <div id="collapse{{$faq->id}}" class="accordion-collapse collapse " aria-labelledby="heading{{$faq->id}}" data-bs-parent="#accordionExampleThree">
                                            <div class="accordion-body">
                                                {!!$faq->description!!}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- tour-listing area end -->

    <!-- cta area start -->
    <section class="bd-cta-area section-space-small cta-image-bg image-bg p-relative fix" data-background="assets/images/cta/cta-img-3.png">
        <div class="container">
            <div class="cta-three-shape">
                <div class="cta-three-shape-one p-absolute">
                    <img src="{{ asset('frontend/assets/images/shapes/cta-star.png') }}" alt="shape">
                </div>
                <div class="cta-three-shape-two p-absolute">
                    <img src="{{ asset('frontend/assets/images/shapes/cta-eye.png') }}" alt="shape">
                </div>
                <div class="cta-three-shape-three p-absolute">
                    <img src="{{ asset('frontend/assets/images/shapes/cta-x.png') }}" alt="shape">
                </div>
                <div class="cta-three-shape-four p-absolute">
                    <img src="{{ asset('frontend/assets/images/shapes/cta-star.png') }}" alt="shape">
                </div>
                <div class="cta-three-shape-five p-absolute">
                    <img src="{{ asset('frontend/assets/images/shapes/cta-eye.png') }}" alt="shape">
                </div>
                <div class="cta-three-shape-six p-absolute">
                    <img src="{{ asset('frontend/assets/images/shapes/cta-x.png') }}" alt="shape">
                </div>
                <div class="cta-three-shape-seven p-absolute">
                    <img src="{{ asset('frontend/assets/images/shapes/cta-line.png') }}" alt="shape">
                </div>
                <div class="cta-three-shape-eight p-absolute">
                    <img src="{{ asset('frontend/assets/images/shapes/plane-6.png') }}" alt="shape">
                </div>
            </div>
            <div class="row gy-24 align-items-center justify-content-center">
                <div class="col-xl-6 col-md-8">
                    <div class="cta-content-wrapper cta-style-three text-center position-relative z-index-5">
                        <span class="section-subtitle color-warning mb-15">Find New Places To Visit</span>
                        <h2 class="section-title white-text mb-20">Explore New Places</h2>
                        <p>Visit In Tanzania To Explore and Taste The Thrill Of An African Adventure! Discover the beauty & adventure of Tanzania with our personalized private safaris.
                        </p>
                        <div class="cta-btn">
                            <a href="{{route('destination')}}" class="bd-primary-btn btn-style has-arrow is-bg btn-tertiary is-white radius-60">
                                <span class="bd-primary-btn-arrow arrow-right"><i class="fa-regular fa-arrow-right"></i></span>
                                <span class="bd-primary-btn-text">Explore Now</span>
                                <span class="bd-primary-btn-circle"></span>
                                <span class="bd-primary-btn-arrow arrow-left"><i class="fa-regular fa-arrow-right"></i></span>
                            </a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- cta area end -->

</main>
<!-- Body main wrapper end -->

@endsection