@extends('layouts.app')

@section('title', __('faq.page_title'))
@section('meta_description', __('faq.meta_description'))

@section('content')

{{-- Breadcrumb --}}
<div class="edu-breadcrumb-area">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">{{ __('faq.page_title') }}</h1>
            </div>
            <ul class="edu-breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ LaravelLocalization::localizeUrl('/') }}">{{ __('navigation.home') }}</a>
                </li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('faq.page_title') }}</li>
            </ul>
        </div>
    </div>
    <ul class="shape-group">
        <li class="shape-1"><span></span></li>
        <li class="shape-2 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-13.png') }}" alt="shape"></li>
        <li class="shape-3 scene"><img data-depth="-2" src="{{ asset('assets/images/about/shape-15.png') }}" alt="shape"></li>
        <li class="shape-4"><span></span></li>
        <li class="shape-5 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-07.png') }}" alt="shape"></li>
    </ul>
</div>

{{-- FAQ Area --}}
<section class="edu-section-gap faq-page-area">
    <div class="container">
        <div class="row">
            {{-- Colonne gauche : intro + contact --}}
            <div class="col-lg-4">
                <div class="faq-page-nav">
                    <h3 class="title">{{ __('faq.sidebar_title') }}</h3>
                    <p>{{ __('faq.sidebar_description') }}</p>

                    <div class="mt-5">
                        <h5 class="mb-2">{{ __('faq.still_questions') }}</h5>
                        <p>{{ __('faq.contact_us_text') }}</p>
                        <a href="{{ route('contact') }}" class="edu-btn btn-medium btn-border mt-2">
                            {{ __('faq.contact_link') }} <i class="icon-4"></i>
                        </a>
                    </div>
                </div>
            </div>

            {{-- Colonne droite : accordion --}}
            <div class="col-lg-8">
                @if($faqs->count() > 0)
                <div class="faq-accordion" id="faq-accordion">
                    <div class="accordion">
                        @foreach($faqs as $index => $faq)
                        <div class="accordion-item" id="faq-{{ $faq->id }}">
                            <h5 class="accordion-header">
                                <button class="accordion-button {{ $index > 0 ? 'collapsed' : '' }}"
                                        type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#collapse-{{ $faq->id }}"
                                        aria-expanded="{{ $index === 0 ? 'true' : 'false' }}">
                                    {{ $faq->question }}
                                </button>
                            </h5>
                            <div id="collapse-{{ $faq->id }}"
                                 class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}"
                                 data-bs-parent="#faq-accordion">
                                <div class="accordion-body">
                                    @sanitized($faq->answer)
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @else
                <div class="text-center py-5">
                    <p class="text-muted">{{ __('faq.no_faqs') }}</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script>
function openFaq(e, collapseId) {
    e.preventDefault();
    var el = document.getElementById(collapseId);
    if (!el) return;
    // Fermer les autres
    document.querySelectorAll('#faq-accordion .accordion-collapse.show').forEach(function(open) {
        if (open.id !== collapseId) {
            var bsCollapse = bootstrap.Collapse.getInstance(open);
            if (bsCollapse) bsCollapse.hide();
        }
    });
    // Ouvrir/fermer celui-ci
    var bsCollapse = bootstrap.Collapse.getOrCreateInstance(el);
    bsCollapse.show();
    // Scroll vers l'item
    setTimeout(function() {
        el.closest('.accordion-item').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 150);
}
</script>
@endpush