@extends('site.layouts.app')
@section('title', 'FAQ')
@section('content')
    <!-- START SECTION BREADCRUMB -->
    <div class="breadcrumb_section bg_gray page-title-mini">
        <div class="container">
            <!-- STRART CONTAINER -->
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="page-title">
                        <h1>FAQ</h1>
                    </div>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb justify-content-md-end">
                        <li class="breadcrumb-item"><a href="/">Home</a></li>
                        <li class="breadcrumb-item active">FAQ</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- END CONTAINER-->
    </div>
    <!-- END SECTION BREADCRUMB -->

    <!-- START MAIN CONTENT -->
    <div class="main_content">
        <div class="section">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <div class="heading_s1 mb-3 mb-md-5">
                            <h3>Frequently Asked Questions</h3>
                        </div>
                        <div id="accordion" class="accordion accordion_style1">

                        @foreach ($faqs as $key => $faq)
                                <div class="card">
                                    <div class="card-header" id="heading{{ $key }}">
                                        <h6 class="mb-0"> <a class="collapsed" data-bs-toggle="collapse"
                                                href="#collapse{{ $key }}" aria-expanded="false"
                                                aria-controls="collapse{{ $key }}">{{ $faq->question }}?</a>
                                        </h6>
                                    </div>
                                    <div id="collapse{{ $key }}" class="collapse "
                                        aria-labelledby="heading{{ $key }}" data-bs-parent="#accordion">
                                        <div class="card-body">
                                            <p>{!! $faq->answer !!}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>



@endsection