@extends('themes.'.config('smartekcms.themes.frontend').'.app', [
    'title' => trans('front.faqs.all_faq_list'),
    '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') ]) }}"
      }]
    }
    </script>
@endsection

@section('content')

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

    <!--================Faq Area =================-->
    <section class="faq_area py-3 my-3 py-md-5 my-md-3 py-lg-5 my-lg-5"> <!-- py-5+my-5 for py-100 -->
        <div class="container">
            <div class="faq_inner st-search pb-3">
                <div class="c_left_title pb-5">
                    <h2>{{ trans('front.faqs.all_frequently_asked_questions') }}</h2>
                    <p class="pt-3">{{ trans('front.faqs.desc') }}</p>
                </div>
                <div class="input-group">
                    <input id="myInputsearch" type="text" class="form-control" aria-label="search box" 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 class="row faq_collaps mt-5" id="myDIVsearch">
                @foreach($faqCategory as $key => $faq )
                <div class="col-lg-6 panel">
                    <div class="panel-group mb-4 position-relative" role="navigation">
                        <h3 class="panel-title">
                            <a class="stretched-link" role="button" href="{{ route('faqs/faqSlug', ['faqs' => trans('route.frontend.faqs'), 'slug' => $faq->slug ]) }}">
                                <i class="fa fa-link me-2"></i> {{ $faq->title }}
                            </a>
                        </h3>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </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 .panel").filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
    </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