@extends('layouts.app')
@section('header')
    <link rel="stylesheet" href="{{ asset('css/template.css') }}"/>
@endsection
@section('content')
    <section id="page-breadcrumb" class="breadcrumb-section">
        <div class="container">
            <div class="row align-items-center mt-3">
                <div class="col-12 col-lg-12 col-md-12 ps-0">
                    <div class="page-title text-left ">
                        <h1>سوالات متداول</h1>
                    </div>
                </div>
                <div class="col-12 col-lg-12 col-md-12 p-0">
                    <nav aria-label="breadcrumb" class="theme-breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('index') }}"> خانه </a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('faqs.index') }}">سوالات متداول</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>
    <div class="container-fluid P-Sq01 position-relative">
        <div class="container p-0">
            <section class="col-lg-10 mx-auto col-12 pb-5 pt-5">
                <div class="card crd-inner">
                    <div class="card-body mx-5 my-3">
                        <div class="accordion" id="accordionExample">
                            @foreach($faqs as $faq)
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="faq{{ $faq->id }}">
                                        <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#collapse{{ $faq->id }}"
                                                aria-expanded="true"
                                                aria-controls="collapse{{ $faq->id }}">
                                            {!! $faq->question !!}
                                        </button>
                                    </h2>
                                    <div id="collapse{{ $faq->id }}"
                                         class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                                         aria-labelledby="faq{{ $faq->id }}"
                                         data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <p>{!! $faq->answer !!}</p>
                                        </div>
                                    </div>
                                </div>
                          @endforeach
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection