@extends('themes.'.config('smartekcms.themes.frontend').'.app', [
    'title' => trans('front.faq.frequently_asked_questions').' | '.trans('front.faq.faq'),
    'meta_description' => trans('front.faq.meta_description', ['appName' => $general_settings->website_title ?? config('app.name') ]),
    'cover_image' => $coverImage,
    'model_type' => 'faq',
])

@section('head')
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "{{ trans('front.general.home') }}",
        "item": "{{ route('home') }}"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ trans('front.faqs.all_faq_list') }}",
        "item": "{{ route('faqs/', ['faqs' => trans('route.frontend.faqs') ]) }}"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "{{ trans('front.faq.faq') }}",
        "item": "{{ route('faq', ['faq' => trans('route.frontend.faq') ]) }}"
      }]
    }
    </script>

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [
 @if($findData->faqs)
  @foreach($findData->faqs as $question)
      {
       "@type": "Question",
       "name": "{{ $question->title }}",
       "acceptedAnswer": {
         "@type": "Answer",
         "text": "{{ $question->text }}</p>"
       }
      }
      {{ ($loop->last == false) ? ',' : '' }}
  @endforeach
 @endif
      ]
    }
    </script>
@endsection

@section('content')

    <!-- ====== Banner Start ====== -->
    <section class="st-page-banner bring-forward">
        <!--v2 banner-->
        <div class="card">
            <div class="card-img-overlay" style="background-position: center top; background-image: url('{{ $coverImage = $general_settings->getFirstMediaUrlTraitAttribute('faq', 'default') }}');"></div>
            <div class="container" style="z-index: 1;">
                <div class="st-banner-content">
                    <h1 class="text-center">{{ $findData->title.' | '.trans('front.faq.faq') }}</h1>
                </div>
                <ul class="st-breadcrumb">
                    <li><a href="{{ route('home') }}">{{ trans('front.general.home') }}</a></li>
                    <li><a href="{{ route('faqs/', ['faqs' => trans('route.frontend.faqs') ]) }}">{{ trans('front.faqs.all_faq_list') }}</a></li>
                    <li class="active"><a href="{{ route('faq', ['faq' => trans('route.frontend.faq') ]) }}">{{ $findData->title.' | '.trans('front.faq.faq') }}</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- ====== Banner End ====== -->

    <!--================Faq Area =================-->
    <section class="st-faq-area pt-3 mt-3 pt-md-5 mt-md-3 pt-lg-5 mt-lg-5"> <!-- py-5+my-5 for py-100 -->
        <div class="container">
            <div class="faq-area st-search pb-3">
                <div class="area-desc pb-5">
                    <h2>{{ $findData->title }}</h2>
                    <p class="pt-3">{{ trans('front.faq.desc') }}</p>
                </div>
                <div class="area-search input-group">
                    <input id="myInputsearch" type="text" role="searchbox" class="form-control" placeholder="{{ trans('front.faq.search_your_answer') }}">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                    </span>
                </div><!-- /input-group -->
            </div>
        </div>

        <!-- ====== FAQ Start ====== -->
        <div id="faq" class="ud-faq bg-transparent py-5">
            <div class="shape">
                <img src="{{ asset('themes/smartblue/images/faq/shape.svg') }}" alt="shape" />
            </div>
            <div class="container">
                <div class="row" id="myDIVsearch">
                @if($findData->faqs)
                    @php($chunkSize = ceil($findData->faqs->count() / 2))
                    @foreach($findData->faqs->chunk($chunkSize) as $key => $chunk )
                        <div class="col-lg-6 wow fadeInUp" data-wow-delay=".{{ $key + 0,5 }}s">
                            @foreach( $chunk as $k => $question)
                                <div class="ud-single-faq wow fadeInUp" data-wow-delay=".{{ $k + 1 }}s">
                                    <div class="accordion">
                                        <button class="ud-faq-btn st-collapse-button {{ ($loop->first == false) ? 'collapsed' : '' }}" data-bs-toggle="collapse" data-bs-target="#collapse{{ $k }}" aria-expanded="{{ ($loop->first == true) ? 'true' : 'false' }}" aria-controls="collapse{{ $k }}">
                                            <span class="icon">
                                                <i class="lni lni-chevron-down" aria-hidden="true"></i>
                                            </span>
                                            <span>{{ $question->title }}</span>
                                        </button>
                                        <div id="collapse{{ $k }}" class="accordion-collapse collapse {{ ($loop->first == true) ? 'show' : '' }}" role="region" tabindex="{{ ($loop->first == true) ? '0' : '-1' }}">
                                            <div class="ud-faq-body">
                                                {{ strip_tags(htmlspecialchars_decode($question->text)) }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach
                @endif
                </div>
            </div>
        </div>
        <!-- ====== FAQ End ====== -->
    </section>
    <!--================End Faq Area =================-->

    <!-- ====== Submit Question Area Start ====== -->
    <section id="contact" class="ud-contact">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-10 col-lg-12">
                    <div class="ud-contact-form-wrapper wow fadeInUp" data-wow-delay=".2s">
                        <h3 class="ud-contact-form-title">{{ trans('front.faq.submit_title') }}</h3>
                        <form class="ud-contact-form" action="{{ route('contactFormPost') }}" method="post" id="ContactForm" novalidate="novalidate">
                            @csrf
                            <div class="ud-form-group">
                                <label for="email" class="d-none">{{ trans('front.contact.email_address') }}*</label>
                                <input id="email" type="email" name="email" placeholder="{{ trans('front.contact.email_address') }}*"/>
                            </div>
                            <div class="ud-form-group">
                                <label for="subject" class="d-none">{{ trans('front.contact.subject') }}*</label>
                                <input id="subject" type="text" name="subject" placeholder="{{ trans('front.contact.subject') }}*"/>
                            </div>
                            <div class="ud-form-group">
                                <label for="message" class="d-none">{{ trans('front.contact.your_message') }}*</label>
                                <textarea id="message" name="message" rows="3" placeholder="{{ trans('front.contact.your_message') }}*"></textarea>
                            </div>
                            <div class="ud-form-group mb-0">
                                <button type="submit" class="ud-main-btn">{{ trans('front.contact.submit_now') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ====== Submit Question Area End ====== -->

@endsection

@section('js')
    <!--====== Searchbox Dynamic Search Start ======-->
    <script>
        $(document).ready(function () {
            $("#myInputsearch").on("keyup", function () {
                var value = $(this).val().toLowerCase();
                $("#myDIVsearch .ud-single-faq").filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                    //== smartek.added.091121
                    var faqCollapse = new bootstrap.Collapse( this.querySelector('.accordion-collapse'), { toggle:false });
                    if( value !== '') {
                        faqCollapse.show();
                    } else {
                        faqCollapse.hide();
                    }
                });
            });
        });
    </script>
    <!--====== Searchbox Dynamic Search End ======-->

    <!--====== Contact Form Start ======-->
    <script>
        $(document).ready(function(){
            (function($) {
                "use strict";
                // Validate Forms
                $(function() {
                    //validate indexContactForm form
                    $('#ContactForm').validate({
                        rules: {
                            subject: {
                                required: true,
                            },
                            email: {
                                required: true,
                                email: true
                            },
                            message: {
                                required: true,
                                minlength: 20
                            }
                        },
                        messages: {
                            subject: {
                                required: "{{ trans('front.contact.subject_required') }}",
                                minlength: "{{ trans('front.contact.subject_minlength') }}"
                            },
                            email: {
                                required: "{{ trans('front.contact.email_required') }}"
                            },
                            message: {
                                required: "{{ trans('front.contact.message_required') }}",
                                minlength: "{{ trans('front.contact.message-minlength') }}"
                            }
                        },
                        submitHandler: function(form) {
                            $(form).ajaxSubmit({
                                type:"POST",
                                data: $(form).serialize(),
                                url:"/contact",
                                success: function() {
                                    $('#indexContactForm :input').attr('disabled', 'disabled');
                                    $('#indexContactForm').fadeTo( "slow", 1, function() {
                                        $(this).find(':input').attr('disabled', 'disabled');
                                        $(this).find('label').css('cursor','default');
                                        $('#success').fadeIn()
                                        $('.modal').modal('hide');
                                        $('#success').modal('show');
                                    })
                                },
                                error: function() {
                                    $('#indexContactForm').fadeTo( "slow", 1, function() {
                                        $('#error').fadeIn()
                                        $('.modal').modal('hide');
                                        $('#error').modal('show');
                                    })
                                }
                            })
                        }
                    });
                })
                // end.code here
            })(jQuery)
        });
    </script>
    <!--====== Contact Form End ======-->
	@parent
@endsection