@extends('mommy.layouts.contentLayoutMaster')
{{-- title --}}
@section('title','FAQ')
{{-- vendor style --}}
@section('vendor-styles')
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/css/extensions/swiper.min.css')}}">
@endsection
{{-- page-styles --}}
@section('page-styles')
    <link rel="stylesheet" type="text/css" href="{{asset('css/plugins/extensions/swiper.css')}}">
    <link rel="stylesheet" type="text/css" href="{{ mix('css/pages/mommy/faq.css') }}">

@endsection

@section('content')
    <section class="faq">
        <div class="row">
            <div class="col-12">
                <!-- swiper start -->
                <div class="card bg-transparent shadow-none">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="swiper-centered-slides swiper-container p-1">
                                <div class="swiper-wrapper">
                                    @foreach($tabs as $tab)
                                        <div class="swiper-slide rounded swiper-shadow" id="{{ $tab['tabId'] }}">
                                            <i class="bx bx-flag mb-1 font-large-1"></i>
                                            <div class="cent-text1">
                                                {{ $tab['label'] }}
                                            </div>
                                        </div>
                                    @endforeach
                                </div><!-- Add Arrows -->
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                            <div class="main-wrapper-content">
                                @foreach($questions as $question)
                                    @php
                                        $accordionWrapar =  'accordionWrapar' . $question['tabId'].'x'.$loop->iteration;
                                        $accordion = 'accordion' . $question['tabId'].'x'.$loop->iteration;
                                    @endphp


                                <div class="wrapper-content" data-faq="{{ $question['tabId'] }}">
{{--                                    <div class="text-center p-md-4 p-sm-1 py-1 p-0">--}}
{{--                                        <h1 class="faq-title">Getting Started</h1>--}}
{{--                                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam reprehenderit--}}
{{--                                            alias voluptas aspernatur maiores quis molestiae totam deserunt--}}
{{--                                            exercitationem ipsam officiis nisi, labore magni, commodi quaerat quia earum--}}
{{--                                            quas illo ea amet minus ad dolor?</p>--}}
{{--                                    </div><!-- accordion start -->--}}

                                    <div class="collapse-icon accordion-icon-rotate" id="accordion-icon-wrapper{{ $question['tabId'].'x'.$loop->iteration }}">
                                        <div class="accordion" id="{{ $accordionWrapar  }}">
                                            <div class="card collapse-header">
                                                <div aria-controls="{{$accordion}}" aria-expanded="false"
                                                     class="card-header" data-target="#{{$accordion}}"
                                                     data-toggle="collapse" id="heading5" role="button">
                                                    <span class="collapse-title d-flex align-items-center"><i
                                                                class="bx bxs-circle font-small-1"></i>  {{ $question['question'] }}</span>
                                                </div>
                                                <div aria-labelledby="heading5" class="collapse"
                                                     data-parent="#{{ $accordionWrapar  }}" id="{{$accordion}}" role="tabpanel">
                                                    <div class="card-content">
                                                        <div class="card-body">
                                                            {!! $question['answer'] !!}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                @endforeach


                            </div>
                        </div>
                    </div>
                </div><!-- swiper ends -->
            </div>
        </div>
    </section>

    <!-- fab bottom start -->
    <section class="faq-bottom">
        <div class="row mb-2">
            <div class="col-12 text-center">
                <h2 class="faq-subtitle">You still have a question?</h2>
                <p class="p-2 text-muted font-medium-1">If you cannot find a question in our FAQ, you can always contact us. We
                    will answer to you shortly!</p>
            </div>
        </div>
        <div class="row d-flex justify-content-center mb-5">
            <div class="col-sm-12 col-md-4 text-center border rounded p-2 mr-md-2 m-1">
                <i class="bx bx-phone-call primary font-large-1 text-muted p-50"></i>
                <h5>04-23760082</h5>
                <p class="text-muted font-medium-1">周一至周五 9:00 ～ 18:00</p>
            </div>
            <div class="col-sm-12 col-md-4 text-center border color-gray-faq rounded p-2 m-1">
                <i class="bx bx-mail-send primary font-large-1 p-50"></i>
                <h5><a href="mailto:hello@help.com">service@june1.com.tw</a></h5>
                <p class="text-muted font-medium-1"></p>
            </div>
        </div>
    </section>
@endsection



{{-- vendor scripts --}}
@section('vendor-scripts')
    <script src="{{asset('vendors/js/extensions/swiper.min.js')}}"></script>
@endsection
{{-- page scripts --}}
@section('page-scripts')
    <script src="{{ mix('assets/js/mommy/faq.js') }}"></script>
@endsection