@extends('layouts.front_main')
@section('title', $page_name)

@if(isset($page) && $page)
   @include('front.partials._meta_properties_page')

@endif
@section('content')
<div class="page-wrapper"> 
    @include('front.partials._breadcrumb')

    <section class="standard-section about-text-section align-items-center justify-content-center">
        <div class="container">
            <div class="row gy-4 gx-5">
                <div class="col-12 col-lg-8" data-aos="fade-up" data-aos-offset="50" data-aos-delay="0" data-aos-duration="2000" data-aos-once="true">
                    @if($faq_categories)
                        @foreach ($faq_categories as $category)
                            <div class="mb-4 mb-md-5">
                                <h4 class="h2 mb-3">{{$category->title}}</h4>
                                @if($category->description)
                                    <p class="h4">{!!$category->description!!}</p>
                                @endif
                                <div class="accordion" id="accordion-collapse-{{$category->id}}">
                                    @if($category->faqs)
                                    @foreach ( $category->faqs as $faq)
                                        <div class="accordion-item">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$faq->id}}" @if($loop->iteration == 1)aria-expanded="true" @else aria-expanded="true" @endif aria-controls="collapse{{$faq->id}}">
                                               {{ $faq->question}}</button>
                                            <div id="collapse{{$faq->id}}" class="accordion-collapse collapse  @if($loop->iteration == 1) show @endif" aria-labelledby="heading{{$faq->id}}" data-bs-parent="#accordion-collapse-{{$category->id}}">
                                                <div class="inside">
                                                    <p>
                                                        {!!$faq->description!!}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                    
                                    @endif
                             
                                </div>
                            </div>
                        @endforeach

                    @endif

                    

                    
                </div>
                <div class="col-12 col-lg-4">
                    <div class="white-box text-center mt-0 mt-lg-5" data-aos="fade-up" data-aos-offset="1" data-aos-delay="0" data-aos-duration="1000" data-aos-once="true">
                        <h2 class="mb-2">Need some help?</h2>
                        <p class="mb-4">Get in contact with one of our team.</p>
                        <p class="mb-0"><a href="#" class="btn blue">Contact Us</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
   
</div>


@endsection




@push('scripts')

@endpush