@extends('layouts.app')

@section('title', 'Faq')


@section('content')
    
    <section id="services">
        <div class="container">
            <div class="services-box">
                <div class="service-heading">
                    <h4>@lang('site.Faq')</h4>
                    <hr class="lines">
                    
                    <div class="row pt-5">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div id="accordion" class="faq-accordion">
                                @foreach($faqs as $index=>$faq)
                                <div class="card">
                                    <div class="card-header" id="heading{{$index}}">
                                        <h5 class="mb-0">
                                          <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{$index}}" aria-expanded="{{$index == 0? 'true' : 'false'}}" aria-controls="collapse{{$index}}">
                                            {!! $faq->title !!}
                                          </button>
                                        </h5>
                                    </div>
        
                                    <div id="collapse{{$index}}" class="collapse {{$index == 0? 'show' : 'collapsed'}}" aria-labelledby="heading{{$index}}" data-parent="#accordion" style="">
                                        <div class="card-body">
                                            {!! $faq->body !!}
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </section>
    
@endsection