@extends('admin.layouts.app')
@section('content')


<div class="row mt-4">
    <!-- Navigation -->
    <div class="col-lg-3 col-md-4 col-12 mb-md-0 mb-3">
        <div class="d-flex justify-content-between flex-column mb-2 mb-md-0">
            <div class="d-none d-md-block">
                <div class="mt-4">
                    <img src="{{ asset('dashboard/assets/img/illustrations/girl-sitting-with-laptop.png') }}" class="img-fluid" width="270" alt="FAQ Image" />
                </div>
            </div>
        </div>
    </div>
    <!-- /Navigation -->

    <!-- FAQ's -->
    <div class="col-lg-9 col-md-8 col-12">
        <div class="d-flex mb-3 gap-3">
            <div>
                <span class="badge bg-label-primary rounded-2 p-2">
                    <i class="fa fa-question-circle fa-lg fs-5"></i>
                </span>
            </div>
            <div>
                <h4 class="mb-0">
                    <span class="align-middle">FAQs</span>
                </h4>
                <small>Get help with FAQs</small>
            </div>
        </div>
        <div id="accordionPayment" class="accordion">
            @forelse ($faqs as $key => $faq)
            <div class="card accordion-item mb-3">
                <h2 class="accordion-header d-flex justify-content-between align-items-center">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" aria-expanded="true" data-bs-target="#faqs-{{ $faq->id }}" aria-controls="accordionPayment-1">
                        {{ $faq->question }}
                    </button>
                </h2>

                <div id="faqs-{{ $faq->id }}" class="accordion-collapse collapse">
                    <div class="accordion-body">
                        {{ $faq->answer }}
                    </div>
                </div>
            </div>
            @empty
            <div class="text-center mt-5">
                <img src="https://example.com/path/to/no-faqs.png" alt="No FAQs" class="img-fluid" style="max-width: 200px;">
                <p class="mt-3">No FAQs available at the moment.</p>
            </div>
            @endforelse
        </div>
    </div>
    <div class="col-12 text-end">
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                {{ $faqs->links('vendor.pagination.bootstrap-4') }}
            </ul>
        </nav>
    </div>
    <!-- /FAQ's -->
</div>

<!-- Contact -->
<div class="row mt-5">
    <div class="col-12 text-center mb-4">
        <div class="badge bg-label-primary">Question?</div>
        <h4 class="my-2">You still have a question?</h4>
        <p>If you can't find question in our FAQ, you can contact us. We'll answer you shortly!</p>
    </div>
</div>
<div class="row text-center justify-content-center gap-sm-0 gap-3">
    <div class="col-sm-6">
        <div class="py-3 rounded bg-faq-section text-center">
            <span class="badge bg-label-primary my-3 rounded-2 p-2">
                <i class="ti ti-phone ti-md"></i>
            </span>
            <h4 class="mb-2"><a class="text-body" href="tel:+(810)25482568">+ (810) 2548 2568</a></h4>
            <p>We are always happy to help</p>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="py-3 rounded bg-faq-section text-center">
            <span class="badge bg-label-primary my-3 rounded-2 p-2">
                <i class="ti ti-mail ti-md"></i>
            </span>
            <h4 class="mb-2"><a class="text-body" href="mailto:help@help.com">help@help.com</a></h4>
            <p>Best way to get a quick answer</p>
        </div>
    </div>
</div>
<!-- /Contact -->
@endsection

@section('script')
<script>
    // Add any specific scripts for FAQs if needed

</script>
@endsection