@extends('layouts.front')

@section('title')@lang('FAQ') - {{config('app.name')}}@endsection

@section('content')
<br>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <ul class="breadcrumb">
                <li><a href="{{url('/')}}">@lang('Home')</a></li>
                <li>@lang('FAQ')</li>
            </ul>
        </div>
    </div>
    <!--start faq area-->
        <div class="row">
            <div class="col-lg-12">
                <div class="section-heading text-center">
                    <h2>Frequently Asked Questions</h2>
                </div>
            </div>
        </div>
        <!--start faq accordian-->
        <div id="accordion2" role="tablist">
            <!-- Faq Setcion -->
            @if($faqs)
            @foreach($faqs as $keyCount=>$faq)
            <div class="row">
                <div class="col-md-12"><h4 class="gold-color"><strong>{{$faq->question}}</h4></strong></div>
                <div class="col-md-6">
                    
                    @foreach($faq->getFaqs as $key=>$single_faq)
                    <!--start faq single-->
                    <div class="faq-card">
                        <div class="faq-card-header" role="tab" id="{{ str_replace(' ','', strip_tags($faq->question)) . ($key+1)}}">
                            <div class="mb-0">
                                <a data-toggle="collapse" href="#collapse{{($keyCount+1).($key+1)}}" aria-expanded="false" aria-controls="collapse{{($keyCount+1).($key+1)}}">{{$single_faq->question}}</a>
                            </div>
                        </div>
                        <div id="collapse{{($keyCount+1).($key+1)}}" class="collapse" role="tabpanel" aria-labelledby="{{ str_replace(' ','', strip_tags($faq->question)) . ($key+1)}}" data-parent="#accordion2">
                            <div class="faq-card-body">{!! $single_faq->answer !!}</div>
                        </div>
                    </div>
                    @php
                        $count      = $faq->getFaqs->count();
                        $splitRow   = ceil($faq->getFaqs->count()/2);
                    @endphp
                    @if($splitRow == ($key+1))
                        </div>
                    <div class="col-md-6">
                    @endif
                    <!--end faq single-->
                    @endforeach
                </div>
            </div>
            @endforeach
            @endif
            <!-- Faq Section -->
            
        </div>
        <!--end faq accordian-->
    <!--end faq area-->
</div>
@endsection

@section('scripts')
<!-- <script src="{{asset('js/bootstrap.min.js')}}"></script> -->
<script src="{{asset('js/faq.js')}}"></script>
<!-- <script>
(function ($) {
    "use strict";

    /*---------------------------------------------------
        accordian
    ----------------------------------------------------*/
    $('.collapse').on('shown.bs.collapse', function () {
        $(this).prev().addClass('active');
    });

    $('.collapse').on('hidden.bs.collapse', function () {
        $(this).prev().removeClass('active');
    });

}(jQuery));
</script> -->
@endsection