@extends('layouts.app')

@section('content')

<style>
    @media (max-width: 992px) {
        .site-header .main-menu>ul>li a {
            font-size: 17px;
        }
    }
    .accordion-container {
        width: 800px; 
        margin: 0 auto; 
    }
    .accordion-item{
        margin-bottom: 12px;
    }

    .accordion-button {
        color: #2991d0!important;
        background-color: #e7f1ff;
    }
    .accordion-button:not(.collapsed) {
        color: #f4a000!important;
    }
</style>
<div class="site-content pt0">
    <div class="section-banner ratio" style="--bs-aspect-ratio: 30%; position: relative;">
        <img src="{{ Storage::disk('s3')->url('website/faq-cover.jpg') }}" alt="Team" class="full-w" style="position: absolute; width: 100%; height: 100%; object-fit: cover;">
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);"></div>
     <div class="container d-flex align-items-center " style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
        <div class="col-lg-6">
            <div class="heading heading-alway-white wow animate__fadeInLeft">
                <h2 class="heading-title size-xl">{{ __("messages.Stora Tax FAQ") }}</h2>
            </div>
        </div>
    </div> 
    </div>
    <section class="page-title">
        <div class="container">
            <div class="inner align-center">
                <h1>{{ __("messages.Stora Tax FAQ") }}</h1>
                <div class="desc">{{ __("messages.Common Answers to Your Questions") }}</div>
            </div>
        </div>
    </section>
    <div class="container d-flex  justify-content-center">
    <div class="accordion w-75 " id="faqAccordion">

        @if($faqs->count() > 0)
        @foreach($faqs as $faq)
        <div class="accordion-item">
            <h2 class="accordion-header" id="heading{{$faq->id}}">
                <button class="accordion-button {{ ($loop->iteration == 1) ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$faq->id}}" aria-expanded="true" aria-controls="collapse{{$faq->id}}">
                    {{ (App::getLocale() == 'en') ? $faq->question : $faq->question_fr }}
                </button>
            </h2>
            <div id="collapse{{$faq->id}}" class="accordion-collapse collapse {{ ($loop->iteration == 1) ? 'show' : '' }}" aria-labelledby="heading{{$faq->id}}" data-bs-parent="#faqAccordion">
                <div class="accordion-body">
                    {!! (App::getLocale() == 'en') ? $faq->answer : $faq->answer_fr !!}
                </div>
            </div>
        </div>
        @endforeach
        @endif
    </div>
</div>
</div>

@endsection