@extends('faq::layouts.master')
@section('title', trans('menu.faq_title'))

@section('content')

    <div class="faq-wrapper overflow-hidden">
        <div class="bg-custom-blue-700 px-6 lg:px-[96px] py-[48px]">
            <h1 class="display-sm-bold text-base-white mb-[20px]">
                {{ trans('faq.how_can_we_help') }}
            </h1>
            <form id="filter-form" action="{{ url('faqs/all') }}" method="POST" onsubmit="return false;">
                <div class="flex gap-3 flex-col">
                    <input type="hidden" name="item_filter[category]" value="" id="search_param">
                    <input name="item_filter[question]" class="search-input w-full" type="text"
                        placeholder="{{ trans('faq.search') }}" />
                    <div>
                        <button class="btn-primary-sm btn-search">{{ trans('faq.search') }}</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="px-6 lg:px-[96px] py-[48px] mt-[16px]">
            <div class="flex gap-2 w-full overflow-x-scroll no-scrollbar">
                <button id="general_button" onclick="setCategoryFilter('')"
                    class="faq_hash_button min-w-max text_md_medium text-custom-orange-500 bg-custom-orange-50 px-3 py-1 rounded-[36px]">
                    {{trans("faq.search_all")}}
                </button>

                @foreach ($categories as $key => $category)
                    <button id="topic-{{$category->id}}-button"
                        onclick="setCategoryFilter({{$category->id}})"
                        class="faq_hash_button min-w-max text_md_medium text-custom-grey-500 bg-custom-grey-50 px-3 py-1 rounded-[36px]">
                        {{$category->name}}
                    </button>
                @endforeach

            </div>

            <div id="faqs" class="flex flex-col gap-4 laravel-pagination">
                @include('faq::_faqs', [
                    'faqs'          => $items
                ])
            </div>

        </div>
    </div>

@endsection

    @section('footer-script')

        <script type="text/javascript">
            function setCategoryFilter(id) {
                $("#search_param").val(id).trigger("keyup");
            }

            $('#filter-form input').on("keyup", function(event) {

                let form = $(this).parents('form');

                data = form.serialize();

                getFaqList(form, data, {
                    currentTarget: form.find(".btn-search")
                });

            });

            $('#filter-form #search_param').on("keydown", function(event) {

                let form = $(this).parents('form');

                data = form.serialize();

                getFaqList(form, data, {
                    currentTarget: form.find(".btn-search")
                });

            });

            $("body").on("click", ".btn-helpful", function(event) {

                event.preventDefault();

                let id = $(this).data('id'),
                    type = $(this).data('type');

                PDRequest({
                    type: "POST",
                    url: '/faqs/' + id + '/' + type,
                    data: {},
                    event: event,
                    isFlash: false
                }).then((success) => {

                    $(this).parents('.content-helpful').html('Thank you for your feedback.');

                });
            });

            $("body").on('click', '.accordion-title', function () {
                $(this)
                    .parent()
                    .toggleClass("border-custom-orange-300 bg-custom-orange-25");
                $(this)
                    .find(".accordion-icon")
                    .toggleClass("text-custom-orange-500");
            });

            $("body").on('click', '.faq_hash_button', function () {
                $(".faq_hash_button")
                    .removeClass("text-custom-orange-500 bg-custom-orange-50")
                    .addClass("text-custom-grey-500 bg-custom-grey-50");
                $(this)
                    .removeClass("text-custom-grey-500 bg-custom-grey-50")
                    .addClass("text-custom-orange-500 bg-custom-orange-50");
            });
        </script>

    @stop