@extends('layouts.frontend.app')

@section('title', 'Help Center')

@section('content')

<section class="help-center  pt-0">
    <section class="about-section">

    <div class="container">
        <div class="row">
            <div class="col-md-6 about-frist-row">
                <a href="/" class="back-btn">
                    <span class="svg-ic">
                       <i class="bi bi-arrow-left-circle"></i>
                    </span>
                    Back to Home
                </a>
                <h1>FAQ</h1>
              
            </div>
        </div>
    </div>
</section>
<div class="container py-5">
    <h1 class="mb-4 text-center"></h1>

    <div class="row">
  
<div class="col-md-8 ">
    <h3>{{ $page->title ?? '' }}</h3>
    <div class="accordion" id="faqAccordion">
    @if($page && $page->faqs && $page->faqs->count() > 0)
        @foreach($page->faqs as $key => $faq)
            <div class="accordion-item">
                <h2 class="accordion-header" id="faq{{ $key }}">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $key }}">
                        {{ $faq->question }}
                    </button>
                </h2>
                <div id="collapse{{ $key }}" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        {!! $faq->answer !!}
                    </div>
                </div>
            </div>
        @endforeach
    @else
        <p>No FAQs found.</p>
    @endif
</div>



</div>

        <!-- Sidebar -->
        <div class="col-md-4">
            <h3>Need More Help?</h3>
            <ul class="list-group">
                {{-- <li class="list-group-item"><a href="{{ route('shipping.info') }}">Shipping Information</a></li> --}}
                <li class="list-group-item"><a href="{{ route('privacy.policy') }}">Privacy Policy</a></li>
                <li class="list-group-item"><a href="{{ route('returns.refunds') }}">Returns & Refunds</a></li>
                <li class="list-group-item"><a href="{{ route('contact') }}">Contact Us</a></li>
            </ul>
        </div>
    </div>
</div>


</section>

@endsection