@extends('master')

@section('seo_title', 'FAQs')
@section('seo_keywords', '')
@section('seo_description', '')

@section('content')

    @include('layout.breadcrumbs', ['page_title' => 'FAQs'])

    <meta name="locale" content="{{ app()->getLocale() }}">

    <!-- Contents -->
    <section class="about-area section-padding-80 {{ @$displayTopBarPromotionBanner ? 'section-padding-180' : '' }}">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-heading">
                        <h3>FAQs</h3>
                    </div>

                    <div class="tab-content">
                        <p>@lang('messages.FAQS_INTRO')</p>
                        <br >

                        @foreach ($faqs as $key => $faq)
                            <div class="card mb-4 {{ $faq->link }}">
                                <div class="card-header {{ $key == 0 ? 'active' : '' }}" role="tab">
                                    <h4 class="card-title">
                                        <a class="{{ $key > 0 ? 'collapsed' : '' }}" data-bs-toggle="collapse" href="#collapsed_{{ $faq->link }}" role="button" aria-expanded="false" aria-controls="collapsed_{{ $faq->link }}">
                                            <i class="fa-icon fa fa-arrow-circle-o-down"></i> <i class="fa-icon fa fa-arrow-circle-o-down"></i>
                                            {{ $faq->pergunta }}
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapsed_{{ $faq->link }}" class="panel-collapse collapse {{ $key == 0 ? 'show' : '' }}" role="tabpanel" aria-labelledby="tab1_heading{{ $faq->link }}" aria-expanded="false">
                                    <div class="card-body">
                                        {!! $faq->resposta !!}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

        </div>
    </section>

    <script>
        function locateAndOpen(hash) {

            hash = hash.replace("#", ".");
            let el = $(hash);

            setTimeout(() => {
                if (el.length) {
                    let top = el.offset().top;

                    jQuery("html, body").animate({
                        scrollTop: top - 100
                    }, 700, e => {
                        if (el.find('[data-toggle="collapse"]').hasClass('collapsed')) {
                            el.find('[data-toggle="collapse"]').click();
                        }
                    });
                }
            }, 250);
        }

        document.addEventListener("DOMContentLoaded", function(e) {
            $(function() {
                $(window).scrollTop(0);
            });

            if (window.location.hash != '') {
                locateAndOpen(window.location.hash);
            }

            $('footer a').click(e => {
                let str = $(e.currentTarget).attr("href");
                let position = str.indexOf("#");

                if (position != -1) {
                    e.preventDefault();

                    let hash = str.substring(position, 9999).trim();
                    locateAndOpen(hash);
                }
            });
        }, false);
    </script>

@endsection