@php
    use App\Enums\FaqCategory;
    use App\Enums\MultiLangMode;
@endphp

@extends('layouts.previews.intercontinental')
@section('content')
    <div class="page-faqs" id="page-faqs">
        <div class="faq-content">
            <div class="container">
                <div class="main-heading" data-aos="fade-up">
                    <div class="flex-auto">
                        <div class="heading-line"></div>
                    </div>
                    <div class="text">
                        <span>FAQ</span>
                        @if ($lang != MultiLangMode::ENGLISH)
                            <span></span>
                            <span data-i18n="faq_page.page_heading">
                            </span>
                        @endif
                    </div>
                    <div class="flex-auto">
                        <div class="heading-line"></div>
                    </div>
                </div>
                @if ($faqs)
                    @php
                        $categories = $faqs->keys()->all();
                    @endphp
                    <div class="tab-category">
                        <nav class="flex w-100" id="tab-category">
                            @foreach (FaqCategory::getValues() as $index => $category)
                                <div class="category">
                                    <a class="custom-transition{{ $index == 0 ? 'active' : 0 }}"
                                        data-tab="category-{{ $category }}" href="javascript:;"
                                        data-i18n="faq_page.categories.{{ $category }}"></a>
                                </div>
                            @endforeach
                        </nav>
                    </div>
                    <div class="tab-content" id="tab-content">
                        @foreach (FaqCategory::getValues() as $category)
                            @php
                                $faqByCategory = $faqs->get($category, []);
                            @endphp
                            <div class="tab-pane fade" data-tab="category-{{ $category }}">
                                @foreach ($faqByCategory as $faq)
                                    <div class="tab__info">
                                        <div class="tab__header">
                                            <a href="javascript:;">
                                                <span class="tab__header-title">
                                                    {!! setTextDefault(textLocale('question', $faq, $lang)) !!}
                                                </span>
                                                <span class="tab__icon"></span>
                                            </a>
                                        </div>
                                        <div class="tab__content-wrapper">
                                            <div class="tab__content ck-content">
                                                {!! setTextDefault(textLocale('answer', $faq, $lang)) !!}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

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