@extends('layouts.frontapp')

@section('title', 'FAQ')

@section('content')

<!--Main Content Start-->
 <div class="main-content innerpagebg wf100 p30">
    <!--News Large Page Start--> 
    <!--Start-->
    <div class="news-large">

       <div class="container">
                  <div class="row">
                     <div class="col-lg-4">
                         <div class="nav nav-pills faq-nav" id="faq-tabs" role="tablist" aria-orientation="vertical">
                             @foreach($faq_category as $key=>$item) 
                             <a href="#tab{{$item->id}}" class="nav-link @if($key==0) active @endif" data-toggle="pill" role="tab" aria-controls="tab1" aria-selected="true">
                                 <i class="mdi mdi-help-circle"></i> {{$item->category_name}}
                             </a>
                             @endforeach
                         </div>
                     </div>
                     <div class="col-lg-8">
                         <div class="tab-content" id="faq-tab-content">
                          @if(count($faq_category)>0) 
                            @foreach($faq_category as $key=>$item)

                            @php
                              $faq = DB::table('faq')->where('is_delete','0')->orderBy('id', 'DESC')->where('category_id',$item->id)->get();
                            @endphp

                               <div class="tab-pane fade show @if($key==0) active @endif" id="tab{{$item->id}}" role="tabpanel" aria-labelledby="tab1">
                                   <div class="accordion" id="accordion-tab-{{$item->id}}">
                                    @if(count($faq)>0) 
                                      @foreach($faq as $k=>$val)
                                          <div class="card">
                                             <div class="card-header" id="accordion-tab-{{$item->id}}-heading-{{$val->id}}">
                                                 <h5>
                                                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-{{$item->id}}-content-{{$val->id}}" aria-expanded="false" aria-controls="accordion-tab-{{$item->id}}-content-{{$val->id}}">{{ $val->question }}</button>
                                                 </h5>
                                             </div>
                                             <div class="collapse @if($k==0) show @endif" id="accordion-tab-{{$item->id}}-content-{{$val->id}}" aria-labelledby="accordion-tab-{{$item->id}}-heading-{{$val->id}}" data-parent="#accordion-tab-{{$item->id}}">
                                                 <div class="card-body">
                                                     {!! $val->answer !!}
                                                 </div>
                                             </div>
                                         </div>
                                      @endforeach
                                     @else 
                                      <div class="card">
                                        <p>No records to display!</p>
                                      </div>
                                      @endif
                                   </div>
                               </div>
                            @endforeach
                          @else 
                            <p>No records to display!</p>
                          @endif
                         </div>
                     </div>
                 </div>
               </div>
    </div>
    <!--End--> 
 </div>
 <!--Main Content End--> 
@endsection