@extends('web.layouts.layout')
@section('content')


<!-- ---------- Start breadcrumb ----------- -->

@include('web.pages.components.header.header')


<!-- ---------- faq page ----------- -->
<section class="faq-pg pb-4">
    <div class="container">
        <!-- <div class="line-title mb-4 mt-4"> <h5 class="bg-white pe-3"> طلب مساعدة </h5> </div> -->
        <ul class="nav nav-pills" id="pills-tab" role="tablist">
            @foreach($faq_categories as $keyCategory => $category)
                <li class="nav-item" role="presentation">
                    <button class="nav-link {{$keyCategory == 0 ? 'active' : ''}}" id="pills-faq{{$category->id}}-tab" data-bs-toggle="pill" data-bs-target="#pills-faq{{$category->id}}">
                        <span class="txt"> {{$category->title}}  </span>
                    </button>
                </li>
            @endforeach
        </ul>
        <div class="tab-content" id="pills-tabContent">
            @foreach($faq_categories as $keyCategory => $category)
                <div class="tab-pane fade {{$keyCategory == 0 ? 'show active' : ''}}" id="pills-faq{{$category->id}}">
                    <div class="accordion" id="accordionExample">
                        @foreach($category->faqs as $key => $row)
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button {{$key != 0 ? 'collapsed' : ''}}" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapse{{$category->id}}One{{$row->id}}" aria-expanded="{{$key == 0 ? 'true' : 'false'}}" aria-controls="collapse{{$category->id}}One{{$row->id}}">
                                        {!! $row->currentDescription->question !!}
                                    </button>
                                </h2>
                                <div id="collapse{{$category->id}}One{{$row->id}}" class="accordion-collapse {{$key == 0 ? 'collapse show' : 'collapse'}}" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <div class="text">
                                            {!! $row->currentDescription->answer !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

@endsection