@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="faq_pg section">
            <div class="container">
                <div class="title text-center d-flex justify-content-center mb-5">
                    <h2 class="sec_title ">
                        <span class="">{{ __('faqs::faqs.customer_questions_answers') }}</span>
                        <img src="{{asset('assets/web/images/vector-1.svg')}}" class="line d-block mt-4" alt="">
                    </h2>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="accordion-side">
                            <div class="accordion" id="accordionProcess">
                                @foreach($faqs as $faq)
                                    <div class="accordion-item">
                                        <div class="accordion-header" id="heading_{{ $faq->id }}">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_{{ $faq->id }}">
                                                <span class="num"> {{ $loop->iteration }} / </span> <h3> {{ $faq->currentDescription->title ?? "" }} </h3>
                                            </button>
                                        </div>
                                        <div id="collapse_{{ $faq->id }}" class="accordion-collapse collapse" data-bs-parent="#accordionProcess">
                                            <div class="accordion-body">
                                                <div class="text">
                                                    {{ strip_tags($faq->currentDescription->description ?? "") }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/web/images/faq.png')}}" alt="" class="faq_shap">
            <img src="{{asset('assets/web/images/faq.png')}}" alt="" class="faq_shap2">
        </section>
    </main>

@endsection

@push('stack_scripts')
    <script>
        $("#accordionProcess .accordion-button:not(:first)").addClass('collapsed');
        $('#accordionProcess .accordion-collapse:first').addClass('show');
    </script>
@endpush