@extends('layouts.app')

@section('content')
<!-- breadcrumb-area start -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="breadcrumb">
                        <ul>
                            <li><a href="{{url('/')}}">Home</a> <i class="fa fa-angle-right"></i></li>
                            <li>FAQS</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb-area end -->
    
    <!-- blog-area start -->
    <div class="faq-area">
        <div class="container">
            <div class="row">
                <!-- faq-content start -->
                <div class="col-lg-12 col-md-12 order-1 order-lg-2">
                    <div class="faq-content">
                        <h3 class="faq-title">FAQS</h3>
                        <div class="faq-desc">                            
                            
                            
                        </div>
                    </div>
                    <div class="faq-accordion">
                        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                        @foreach($faqs as $faq)
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo{{$faq->id}}">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo{{$faq->id}}" aria-expanded="false" aria-controls="collapseTwo{{$faq->id}}">
                                  {{$faq->question}}
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo{{$faq->id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo{{$faq->id}}">
                              <div class="panel-body">
                               {{$faq->answer}}
                              </div>
                            </div>
                          </div>
                        </div>
                        @endforeach                     
                    </div>
                </div>
                <!-- faq-content end -->
            </div>
        </div>
    </div>
    <!-- blog-area end -->
@endsection