@extends(ucfirst(getScope()).'.Layout.master')
@section('content')
    <div class="FAQManager">
        <div class="row">
            <div class="col-md-7">
                <h3>
                    <img src="{{ $imagePath }}/1660216.svg">
                    {{ _mt($moduleId,'Faq.q_a') }}
                    <button class="btn btn-circle btn-outline primaryButton ladda-button addFAQ" data-style="contract">
                        <i class="fa fa-plus"></i>
                        {{ _mt($moduleId,'Faq.add') }}
                    </button>
                    <button class="btn btn-circle btn-outline primaryButton ladda-button showFaq" data-style="contract">
                        {{ _mt($moduleId,'Faq.show_all') }}
                    </button>
                </h3>
                <div class="faqWrapper"></div>
            </div>
            <div class="col-md-5">
                <h3>
                    <img src="{{ $imagePath }}/1141913.png">
                    {{ _mt($moduleId,'Faq.categories') }}
                    <button class="btn btn-circle btn-outline primaryButton ladda-button addCategories" data-style="contract">
                        <i class="fa fa-plus"></i>
                        {{ _mt($moduleId,'Faq.add') }}
                    </button>
                </h3>
                <div class="categoryWrapper"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function () {
            loadFaqs();
            loadCategory();

            function loadFaqs(route) {
                simulateLoading('.faqWrapper');
                route = route ? route : '{{ scopeRoute('faq.index') }}';
                $.post(route, function (response) {
                    $('.faqWrapper').html(response);
                    Ladda.stopAll();
                }).fail(function () {
                    Ladda.stopAll();
                });
            }

            function loadCategory(route) {
                simulateLoading('.categoryWrapper');
                route = route ? route : '{{ scopeRoute('category.index') }}';
                $.post(route, function (response) {
                    $('.categoryWrapper').html(response);
                })
            }
        });

        $('.addFAQ').click(function () {
            simulateLoading('.faqWrapper');
            $.post('{{ scopeRoute('faq.question.form') }}', function (response) {
                $('.faqWrapper').html(response);
                Ladda.stopAll();
            }).fail(function (xhr) {
                toastr.error(xhr.responseJSON.message);
                Ladda.stopAll();
            });
        });

        $('.addCategories').click(function () {
            simulateLoading('.categories');
            $.post('{{ scopeRoute('faq.category.form') }}', function (response) {
                $('.categoryWrapper').html(response);
                Ladda.stopAll();
            }).fail(function () {
                Ladda.stopAll();
            });
        });

        $('.showFaq').click(function () {
            simulateLoading('.faqWrapper');
            $.post('{{ scopeRoute('faq.index') }}', function (response) {
                $('.faqWrapper').html(response);
                Ladda.stopAll();
            }).fail(function () {
                Ladda.stopAll();
            });
        });
    </script>
    <style>
        .page-content {
            /*background: #eee;*/
        }
    </style>
@endsection