@extends('web.layouts.container')
@section('css')
    <style>
        .faq .accordion-item{
            margin: 15px 0;
            border: 0;
            border-radius: 10px;
            overflow: hidden;
            padding: 5px;
            background-color: #fbfbfb;
        }

        .faq .accordion-item .accordion-button{
            background-color: transparent;
            box-shadow: none;
            font-weight: 500;
            font-size: 18px;
        }

        .faq .accordion-button:not(.collapsed){
            color: #232e4e;
        }
    </style>
@endsection
@section('content')
    <section class="inner_header">
        <img src="{{asset('assets/web/images/icons/inner.svg')}}" alt="" class="inner_shap">
        <div class="container">
            <ul class="links">
                <li>
                    <a href="{{LaravelLocalization::getLocalizedURL($lang, route('home'), [], true)}}">{{__('main.home')}}</a>
                </li>
                <li>
                    <a href="#"> {{__('faqs.head')}} </a>
                </li>
            </ul>
            <h4>{{__('faqs.head')}}</h4>
        </div>
    </section>
    <section class="consultation-sec section_padding">
        <div class="container">
            <div class="box faq">
                <div class="section_head">
                    <h6> <img src="{{asset('assets/web/images/sec_head_sh.svg')}}" alt=""> <small>{{__('faqs.head')}}</small> </h6>
                    <h2 class="fs-4">{{__('faqs.head')}}</h2>
                </div>
                <div class="accordion" id="accordionExample">
                    @if(count($faqs))
                        @foreach($faqs as $faq)
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_{{$loop->iteration}}" aria-expanded="true" aria-controls="collapseOne">
                                    {{$faq->question}}
                                </button>
                            </h2>
                            <div id="collapse_{{$loop->iteration}}" class="accordion-collapse collapse {{$loop->iteration == 1 ? 'show' : ''}}" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    <div class="text">{!! $faq->answer !!}</div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')

@endsection