@php
    use App\Enums\FaqCategory;
    use App\Enums\MultiLangMode;
    $categories = [];
    if ($faqs) {
        $categories = $faqs->keys()->all();
    }
@endphp

@extends('layouts.previews.hankyu')
@section('content')
    <div class="page-faq" id="custom-header">
        <div class="button-faq pc" id="filter-faq-pc">
            @foreach ($categories as $index => $category)
                <button class="nav-menu__btn {{ $index == 0 ? 'active' : '' }}" data-category="{{ $category }}">
                    <a class="link-scroll" onclick="handleScrollById('{{ $category }}')"
                        data-i18n="faq_page.categories.{{ $category }}"></a>
                </button>
            @endforeach
        </div>
        <div class="menu-faq__sp sp">
            <ul class="list-menu__faq--sp" id="filter-faq-sp">
                @foreach ($categories as $index => $category)
                    <button class="nav-menu__faq--sp {{ $index == 0 ? 'active' : '' }}" data-category="{{ $category }}">
                        <a class="link-scroll" onclick="handleScrollById('{{ $category }}')"
                            data-i18n="faq_page.categories.{{ $category }}"></a>
                    </button>
                @endforeach
            </ul>
        </div>

        <div class="text-title" data-i18n="faq_page.page_heading"></div>
        @foreach ($categories as $index => $category)
            @php
                $faqByCategory = $faqs->get($category, []);
            @endphp
            <div id="faq-content">
                <div class="content" id="{{ $category }}">
                    <div class="txt-title__content--en" {!! setStyle(['color' => $project->point_color]) !!}>
                        {{ config('translate.' . MultiLangMode::ENGLISH . '.faq_page.' . $category) }}</div>
                    @if ($lang != MultiLangMode::ENGLISH)
                        <div class="txt-title__content--jp" data-i18n="faq_page.categories.{{ $category }}"></div>
                    @endif
                    <div class="faq-content">
                        @foreach ($faqByCategory as $faq)
                            <div class="faq-item">
                                <div class="question-heading">
                                    <span class="icon-question__Q">Q.</span>
                                    <h2 class="txt-question">
                                        {!! 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">
                                    <span class="icon-question__A">A.</span>
                                    <div class="text ck-content">
                                        {!! setTextDefault(textLocale('answer', $faq, $lang)) !!}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endsection

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