@php
    $rand = rand(0,1000);
@endphp
<div class="card">
    <div class="card-header"><strong>Megjegyzések</strong></div>
    <ul class="list-group list-group-flush" id="commentList-{{$rand}}"></ul>
    <div class="input-group p-3">
        <input id="createComment-comment-{{$rand}}" type="text" class="form-control" placeholder="Megjegyzés" aria-label="Megjegyzés" aria-describedby="button-addon" onclick="$(this).focus()">
        <button id="createComment-submit-{{$rand}}" class="btn btn-outline-secondary" type="button" id="button-addon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
                <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/>
            </svg>
            Küld
        </button>
    </div>
</div>

@push('scripts')
<script>
$(document).ready( function () {
    function scroll(element) {
        $([document.documentElement, document.body]).animate({
            scrollTop: $(element).offset().top
        }, 2000);
    }

    const step = 5;
    let show_{{$rand}} = step;
    const model_{{$rand}} = '{{ $comment_target_model ?? ltrim(get_class($comment_target), "App\Models\\") }}';
    const id_{{$rand}} = '{{ $comment_target_id ?? $comment_target->id }}';

    function showMore_{{$rand}}(scroll = false) {
        show_{{$rand}} += step;
        loadComments_{{$rand}}();
        if(scroll) scroll($('#createComment-comment-{{$rand}}'));
    }

    function showLess_{{$rand}}(scroll = false) {
        if(show_{{$rand}} <= step) return;
        show_{{$rand}} -= step;
        loadComments_{{$rand}}();
        if(scroll) scroll($('#createComment-comment-{{$rand}}'));
    }


    function loadComments_{{$rand}}() {
        $.ajax({
            type: 'GET',
            url: '/comments/list/' + model_{{$rand}} + '/' + id_{{$rand}},
        })
        .done(function (response) {
            list = $('#commentList-{{$rand}}');
            list.html('');
            min = Math.min(response.length, show_{{$rand}});
            if(min < response.length) {
                list.append('<li class="list-group-item text-center" id="show_more_{{$rand}}">' +
                    //'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708l6-6z"/><path fill-rule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>' +
                    //' <sub>több</sub> ' +
                    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708l6-6z"/><path fill-rule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>' +
                '</li>');
                $('#show_more_{{$rand}}').on('click', function (e) {
                    showMore_{{$rand}}();
                });
            }
            /*
            if(step < show_{{$rand}}) {
                list.append('<li class="list-group-item text-center" id="show_less_{{$rand}}">' +
                    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/><path fill-rule="evenodd" d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>' +
                    ' <sub>kevesebb</sub> ' +
                    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/><path fill-rule="evenodd" d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>' +
                '</li>');
                $('#show_less_{{$rand}}').on('click', function (e) {
                    showLess_{{$rand}}();
                });
            }
            //*/
            for (let i = response.length - min; i < response.length; i++) {
                element = response[i];
                list.append('<li class="list-group-item">' +
                    '<small class="text-muted float-end">' +
                    element['datetime'] +
                    '</small>' +
                    '<strong>' +
                    element['name'] +
                    '</strong>: ' +
                    element['comment'] +
                    '</li>');
            }
        });
    }
    loadComments_{{$rand}}();

    setInterval(function() {
        loadComments_{{$rand}}();
    }, 30 * 1000);

    function comment_store_{{$rand}}() {
        $.ajax({
            type: 'POST',
            url: '/comments/store',
            data: {
                target: model_{{$rand}},
                id: id_{{$rand}},
                comment: $('#createComment-comment-{{$rand}}').val()
            }
        })
        .done(function (response) {
            $('#createComment-comment-{{$rand}}').val('')
            loadComments_{{$rand}}();
        });
    }

    $('#createComment-comment-{{$rand}}').on('keydown',function(e) {
        if(e.which == 13) { comment_store_{{$rand}}(); }
        if(e.which == 38) { showMore_{{$rand}}(true); }
        if(e.which == 40) { showLess_{{$rand}}(true); }
    });
    $('#createComment-submit-{{$rand}}').on('click', function() {comment_store_{{$rand}}()});

});
</script>
@endpush