@extends('layouts.front-layout')

@section('content')
    <div class="preLoader black">
        <img src="{{( isset($setting) && $setting->getFirstMediaUrl('logo') ?  $setting->getFirstMediaUrl('logo') : asset('upload/placeholder.png'))}}" alt="img">
    </div>
    <div class="preLoader white"></div>


    <section class="innerBaner">
        <img src="{{( isset($faqs_single) && $faqs_single->getFirstMediaUrl('faqs_top_banner_image') ?  $faqs_single->getFirstMediaUrl('faqs_top_banner_image') : asset('upload/placeholder.png'))}}
            " class="w-100" alt="img">
        <div class="container">
            <div class="content">
                <h2>FAQ’s</h2>
                <!-- <ul>
                    <li><a href="{{route('home')}}">Home</a></li>
                    <li><i class="far fa-long-arrow-alt-right"></i></li>
                    <li><span>{{ $pageData['Faqs']['top_title'] ?? '' }}</span></li>
                </ul> -->
            </div>
        </div>
    </section>


    <section class="faqs">
        <div class="container">
            <div class="row">

{{--                <div class="col-md-6">--}}
{{--                    <div id="accordion">--}}
{{--                        @foreach($get_all_faqs as $key => $get_all_faq)--}}
{{--                            <div class="card">--}}
{{--                                <div class="card-header" id="headingLeft{{$key}}">--}}
{{--                                    <h5 class="mb-0">--}}
{{--                                        <button class="btn btn-link {{$key == 0 ? 'show' : 'collapsed'}}" data-toggle="collapse" data-target="#collapseLeft{{$key}}"--}}
{{--                                                aria-expanded="{{$key == 0 ? 'true' : 'false'}}" aria-controls="collapseLeft{{$key}}">--}}
{{--                                            {{ str_pad($key+1, 2, '0', STR_PAD_LEFT) }} {{ $get_all_faq->title ?? '' }}--}}
{{--                                            <span><i class="fas fa-chevron-down"></i></span>--}}
{{--                                        </button>--}}
{{--                                    </h5>--}}
{{--                                </div>--}}

{{--                                <div id="collapseLeft{{$key}}" class="collapse {{$key == 0 ? 'show' : ''}}" aria-labelledby="headingLeft{{$key}}"--}}
{{--                                     data-parent="#accordion">--}}
{{--                                    <div class="card-body">--}}
{{--                                        <p>{!! $get_all_faq->description ?? '' !!}</p>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        @endforeach--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="col-md-6">--}}
{{--                    <div id="accordion1">--}}
{{--                        @foreach($get_all_faqs as $key => $get_all_faq)--}}
{{--                            <div class="card">--}}
{{--                                <div class="card-header" id="headingRight{{$key+1}}">--}}
{{--                                    <h5 class="mb-0">--}}
{{--                                        <button class="btn btn-link {{$key == 3 ? 'show' : 'collapsed'}}" data-toggle="collapse" data-target="#collapseRight{{$key+1}}"--}}
{{--                                                aria-expanded="{{$key == 3 ? 'true' : 'false'}}" aria-controls="collapseRight{{$key+1}}">--}}
{{--                                            {{ str_pad($key+3, 2, '0', STR_PAD_LEFT) }} {{ $get_all_faq->title ?? '' }}--}}
{{--                                            <span><i class="fas fa-chevron-down"></i></span>--}}
{{--                                        </button>--}}
{{--                                    </h5>--}}
{{--                                </div>--}}

{{--                                <div id="collapseRight{{$key+1}}" class="collapse {{$key == 0  ? 'show' : ''}}" aria-labelledby="headingRight{{$key+1}}"--}}
{{--                                     data-parent="#accordion1">--}}
{{--                                    <div class="card-body">--}}
{{--                                        <p>{!! $get_all_faq->description ?? '' !!}</p>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        @endforeach--}}
{{--                    </div>--}}
{{--                </div>--}}
                <div class="row">
                    <div class="col-md-6">
                        <div id="accordionLeft">
                        @foreach($get_all_faqs as $key => $get_all_faq)
                            @if($key % 2 == 0) <!-- For headingLeft -->
                                <div class="card">
                                    <div class="card-header" id="headingLeft{{$key}}">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link {{$key == 0 ? 'show' : 'collapsed'}}" data-toggle="collapse" data-target="#collapseLeft{{$key}}"
                                                    aria-expanded="{{$key == 0 ? 'true' : 'false'}}" aria-controls="collapseLeft{{$key}}">
                                                {{ str_pad($key+1, 2, '0', STR_PAD_LEFT) }} {{ $get_all_faq->title ?? '' }}
                                                <span><i class="fas fa-chevron-down"></i></span>
                                            </button>
                                        </h5>
                                    </div>

                                    <div id="collapseLeft{{$key}}" class="collapse {{$key == 0 ? 'show' : ''}}" aria-labelledby="headingLeft{{$key}}"
                                         data-parent="#accordionLeft">
                                        <div class="card-body">
                                            <p>{!! $get_all_faq->description ?? '' !!}</p>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            @endforeach
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div id="accordionRight">
                        @foreach($get_all_faqs as $key => $get_all_faq)
                            @if($key % 2 != 0) <!-- For headingRight -->
                                <div class="card">
                                    <div class="card-header" id="headingRight{{$key}}">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link {{$key == 1 ? 'show' : 'collapsed'}}" data-toggle="collapse" data-target="#collapseRight{{$key}}"
                                                    aria-expanded="{{$key == 1 ? 'true' : 'false'}}" aria-controls="collapseRight{{$key}}">
                                                {{ str_pad($key+1, 2, '0', STR_PAD_LEFT) }} {{ $get_all_faq->title ?? '' }}
                                                <span><i class="fas fa-chevron-down"></i></span>
                                            </button>
                                        </h5>
                                    </div>

                                    <div id="collapseRight{{$key}}" class="collapse {{$key == 1 ? 'show' : ''}}" aria-labelledby="headingRight{{$key}}"
                                         data-parent="#accordionRight">
                                        <div class="card-body">
                                            <p>{!! $get_all_faq->description ?? '' !!}</p>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>


            </div>

        </div>
    </section>
@endsection