@php
    use App\Enums\FaqCategory;
@endphp

@extends('layouts.previews.ana')
@section('content')
    <div class="page-faq">
        <div class="page-faq-banner">
            <div class="container">
                <h2 class="page-heading" data-i18n="faq_page.page_heading" data-aos="fade-up"></h2>
            </div>
        </div>
        @if ($faqs)
            @php
                $categories = $faqs->keys()->all();
            @endphp
            <div class="page-sub-menu__content" data-aos="fade-up">
                <div class="container">
                    <ul class="clearfix">
                        @foreach (FaqCategory::getValues() as $category)
                            <li>
                                <a class="link-scroll" href="#category-{{ $category }}"
                                    data-i18n="faq_page.categories.{{ $category }}"></a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            @foreach (FaqCategory::getValues() as $category)
                @php
                    $faqByCategory = $faqs->get($category, []);
                @endphp
                @if ($faqByCategory)
                    <div class="faq-content" id="category-{{ $category }}" data-aos="fade-up">
                        <div class="container">
                            <h2 class="content-title" data-i18n="faq_page.categories.{{ $category }}"></h2>
                            @foreach ($faqByCategory as $faq)
                                <div class="faq-item">
                                    <div class="question-heading">
                                        <h2>{!! setTextDefault(textLocale('question', $faq, $lang)) !!}</h2>
                                        <div class="question-button">
                                            <div class="close-bar1"></div>
                                            <div class="close-bar2"></div>
                                        </div>
                                    </div>
                                    <div class="question-answer ck-content">
                                        {!! setTextDefault(textLocale('answer', $faq, $lang)) !!}
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            @endforeach
        @endif
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://assets.micado-rayout.jp/css/content-style.css">
@endpush