@extends('layout.app')

@section('page-title', 'FAQs')

@section('breadcrumb')
    <div class="tf-breadcrumb">
        <div class="container">
            <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
                <div class="tf-breadcrumb-list">
                    <a href="{{ url('/new-design/home.php') }}" class="text">Home</a>
                    <i class="icon icon-arrow-right"></i>
                    <a href="{{ url('/new-design/home.php') }}" class="text">About</a>
                    <i class="icon icon-arrow-right"></i>
                    <span class="text">FAQ<span class="lower">s</span></span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div id="faq" class="wt-pages">

        <!-- Faq -->
        @foreach($faqCategories as $faqCategory)
            <section class="flat-spacing-wt">
                <div class="container">
                    <div class="tf-grid-layout md-col-3">
                        <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                            <div class="heading title">
                                {{ $faqCategory->category_name }}
                            </div>
                        </div>
                    </div>

                    @foreach($faqCategory->questions() as $faqQuestion)

                        <div class="tf-grid-layout md-col-indented">
                            <div class="vertical-line" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                            </div>
                            <div class="tf-grid-layout">
                                <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                                    <div class="faq-container">
                                        <div class="faq-question">
                                            <span class="open-close">›</span>
                                            <span class="question-text">{{ $faqQuestion->question }}</span>
                                        </div>
                                        <div class="faq-answer d-none">
                                            @php
                                                $answer = $faqQuestion->answer;
                                                $replace = [
                                                    'wsj_link' => $vv_wsj_link,
                                                    'wt_phone' => $vv_wt_phoneword
                                                ];
                                                foreach ($replace as $key => $value) {
                                                    $answer = str_replace(':' . $key, $value, $answer);
                                                }
                                            @endphp
                                            {!! $answer !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </section>
        @endforeach
        <!-- /Faq -->

    </div>
@endsection


@push('after-foot-js')
    <script>
       document.querySelectorAll(".faq-question").forEach(q => {
            q.addEventListener("click", function () {

                const container = this.closest(".faq-container");
                const answer = container.querySelector(".faq-answer");

                answer.classList.toggle("d-none");
                container.classList.toggle("open");

            });
        });
    </script>
@endpush