@extends('admin.knowledge.index')

@section('sub_content')
    <div class="knowledge-details-body">
        <div class="editor-wrapper">
            <form action="{{ route('admin.knowledge.comment.store', $knowledge->id) }}" method="POST" class="commentForm editorForm">
                @csrf
                <input type="hidden" name="comment_id">
                <div id="editor"></div>
                <input type="hidden" name="description">

                <div class="editor-options">
                    <div class="editor-options-wrapper justify-content-end">
                        <div class="editor-options-action">
                            <div class="flex-align gap-2">
                                <button class="btn btn--base btn--sm">@lang('Comment')</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="knowledge-details-comment allComment">

        </div>

        <div class="my-3 text-center d-none">
            <button class="btn btn--base btn--sm loadMore">
                <i class="las la-spinner"></i>
                @lang('Load More')
            </button>
        </div>
    </div>
@endsection

@push('script')
    <script>
        (function($) {
            "use strict";

            let knowledge = `{{ $knowledge->id }}`;
            let commentForm = $('.commentForm');

            $(document).on('click', '.replyBtn', function() {
                let commentId = $(this).data('comment_id');
                let quote = $(this).closest('.replyComment').find('.replyQuote').val();

                if (quote) {
                    commentForm.find('[name=description]').val(quote);
                    commentForm.find('[name=comment_id]').val(commentId);
                    commentForm.submit();
                } else {
                    notify('error', 'Reply message required');
                }
            });

            $(document).on('keypress', '.replyQuote', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    $(this).closest('.replyArea').find('.replyBtn').click();
                }
            });

            let currentPage = 1;
            $(document).on('click', '.loadMore', function() {
                let url = "{{ route('admin.knowledge.comment.load', $knowledge->id) }}?page=" + currentPage;
                let $btn = $(this);
                $btn.attr('disabled', true).find('i').addClass('la-spin');
                $.get(url, function(res) {
                    
                    $btn.attr('disabled', false).find('i').removeClass('la-spin');
                    if (res.status == 'success') {
                        $('.allComment').append(res.html);
                        if (res.is_last_page) {
                            $btn.parent().remove();
                            return false;
                        }

                        if (currentPage == 1) {
                            $btn.parent().removeClass('d-none');
                        }

                        currentPage++;
                    }
                }).fail(function() {
                    $btn.attr('disabled', false).find('i').removeClass('la-spin');
                });
            });

            $('.loadMore').trigger('click');


        })(jQuery);
    </script>
@endpush
