@extends('front.layouts.app')

@section('title') FAQs  @endsection
@section('tophead')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" >
@endsection
@section('head')
<style>
    .signup-form p {
        text-align: unset;
        padding: unset;
        color: unset;
    }
    p {
       margin-bottom: unset;
    }
</style>
@endsection
@section('content')
    <div class="signup-form" style="margin-top:0;">
        <div class="form-group" style="width: 100%;"><a href="{{route('profile.dashboard')}}" class="closebtn">&times;</a></div>
    	<h1>FAQS</h1>
    	@php
    	    $faqs = \App\Model\Faq::all();
    	@endphp
        <div id="accordion">
            @foreach($faqs as $faq)
                <div class="card mb-2">
                    <div class="card-header" id="heading_{{$loop->index}}" data-toggle="collapse" data-target="#collapse_{{$loop->index}}" aria-expanded="{{$loop->first ? 'true' : 'false'}}" aria-controls="collapse_{{$loop->index}}">
                      {!! $faq->question !!}
                    </div>
                
                    <div id="collapse_{{$loop->index}}" class="collapse {{$loop->first ? 'show' : ''}}" aria-labelledby="heading_{{$loop->index}}" data-parent="#accordion">
                      <div class="card-body">
                        {!! $faq->answer !!}
                      </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection


@section('script')
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
@endsection