@extends('layouts.app')

@section('content')
    @foreach ($promo as $item)
    @endforeach
    <section class="hero-wrap hero-wrap-2" style="background-image: url({{ asset('storage/' . $item->gambar) }});"
        data-stellar-background-ratio="0.5">
        <div class="overlay"></div>
        <div class="container">
            <div class="row no-gutters slider-text js-fullheight align-items-center justify-content-center">
                <div class="col-md-9 ftco-animate pb-0 text-center">
                    <p class="breadcrumbs"><span class="mr-2"><a href="{{ url('') }}">Home <i
                                    class="fa fa-chevron-right"></i></a></span> <span>{{ $title }} <i
                                class="fa fa-chevron-right"></i></span></p>
                    <h1 class="mb-3 bread">{{ $title }}</h1>
                </div>
            </div>
        </div>
    </section>
    <section class="ftco-section goto-here">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 heading-section text-center ftco-animate mb-5">
                    <span class="subheading">Pertanyaan Umum</span>
                    <h2 class="mb-2">Pertanyaan Yang Sering Diajukan</h2>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="accordion accordion-flush shadow-sm rounded" id="faqAccordion">
                        @foreach ($faq as $item)
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="heading{{ $item->id }}">
                                    <button class="accordion-button collapsed fw-bold" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#collapse{{ $item->id }}"
                                        aria-expanded="false" aria-controls="collapse{{ $item->id }}">
                                        {{ $item->question }}
                                    </button>
                                </h2>
                                <div id="collapse{{ $item->id }}" class="accordion-collapse collapse"
                                    aria-labelledby="heading{{ $item->id }}" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        {!! $item->answer !!}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection