@extends('layouts.app')

@section('content')
<h1 class="text-center">{{ __('faq.title') }}</h1>
<hr class="my-4" />
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-9">

            @for ($i = 1; $i < 21; $i++ )
                @if ( __('faq.Question-'.sprintf("%02d", $i)) != 'faq.Question-'.sprintf("%02d", $i) )
                <button class="accordion"><i class="fas fa-angle-right mr-2"></i>{{ __('faq.Question-'.sprintf("%02d", $i)) }}</button>
                <div class="panel" style="display: none;">
                    <p>{!! __('faq.Question-'.sprintf("%02d", $i).'-Paragraph') !!}</p>
                </div>
                @endif
            @endfor
    </div>
</div>
@endsection

@section('title')
{{ __('meta.title.faq') }}
@endsection

@section('description')
{{ __('meta.description.faq') }}
@endsection

@push('scripts')
<script>
  $(document).ready(function() {
    if( $(window.location.hash).length ) {
      $(window.location.hash).trigger('click');
    }
  });

  $('html').on('click', '.accordion', function() {
    $(this).children('.fas').toggleClass('active');
    $(this).next('.panel').toggle();
  });
</script>
@endpush