@php
    $rand = rand(0,1000);
    $hide_send = isset($hide_send) ? $hide_send : false;
@endphp
<style>
    .search-list {
        display: none;
        border: 1px solid #ccc;
        top: 0;
        background: white;
        z-index: 1000;
        max-height: 200px;
        overflow-y: auto;
    }
    .search-list div {
        padding: 8px;
        cursor: pointer;
    }
    .search-list div:hover {
        background-color: #eee;
    }
</style>

<div class="card">
    <div class="card-header"><strong>Megjegyzések</strong></div>
    <ul class="list-group list-group-flush" id="commentList-{{$rand}}"></ul>
    <input type="hidden" id="post_it_{{$rand}}" name="post_it_{{$rand}}" value="{{ $post_it ?? false }}">
    @if(!$hide_send)
    <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()"> --}}
        <textarea id="createComment-comment-{{$rand}}" class="form-control" placeholder="Megjegyzés" aria-label="Megjegyzés" aria-describedby="button-addon" onclick="$(this).focus()" rows="2"></textarea>
        <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 id="search-list-{{$rand}}" class="search-list m-3 mt-0"></div>--}}
    <select size="10" id="search-list-{{$rand}}" class="search-list m-3 mt-0"></select>
    @endif
</div>

@if( ! Request::ajax() )
@push('scripts')
@endif
<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 }}';

    var hide_other_fields_{{$rand}} = $('#post_it_{{$rand}}').val() == true ? 'd-none' : '';

    function showMore_{{$rand}}(scroll = false) {
        const list = $('body').find('#search-list-{{$rand}}');
        show_{{$rand}} += step;
        loadComments_{{$rand}}();
        if(scroll && !list.is(":visible")) 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}}() {
        var timestamp = new Date().getTime();
        $.ajax({
            type: 'GET',
            url: '/comments/list/' + model_{{$rand}} + '/' + id_{{$rand}} + '?timestamp=' + timestamp,
            cache: false,
        })
        .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];

                var delete_url = "{{ route('comments.destroy', [':id']); }}";
                delete_url = delete_url.replace(':id', element.id);


                var edit_url = "{{ route('comments.edit', [':id']) }}";
                edit_url = edit_url.replace(':id', element.id);
                
                list.append('<div class="list-group-item">' +
                    '<div class="'+hide_other_fields_{{$rand}}+'"><strong>' +
                        element['name'] +
                    '</strong>: </div>' +
                    '<div class="my-2">' + element['comment'].replace(/\n/g, '<br>') + '</div>' +
                    '<small class=" '+hide_other_fields_{{$rand}}+'">' +
                        element['datetime'] +
                    '</small>' +
                    '<div class=" @if(!isset($post_it)) d-none @endif">' +
                    '@can("edit-comment")' +
                        '<button type="button" data-toggle="tooltip" data-placement="bottom" class="btn btn-primary btn-sm mr-1" data-action="edit" title="{{ __("Módosítás") }}" ' +
                            'onclick="formModal(\''+ edit_url +'\', \'Megjegyzés szerkesztése\', \'Mentés\', function(){}, function(){}, function(){window.location.reload();}, function(){}, function () {} );">' +
                            '<i class="fas fa-edit"></i>' +
                        '</button>' +
                    '@endcan' +
                    '@can("delete-comment")' +
                        '<button type="button" data-toggle="tooltip" data-placement="bottom" class="btn btn-danger btn-sm mr-1" data-action="delete" title="{{ __("Törlés") }}" ' +
                            'onclick="rowDelete(\'' + delete_url + '\', documents_table_dt_offer.row(this), \'Dokumentum törlése\', \'Valóban törölni akarod?\', \'Mehet\', \'delete\', function() {window.location.reload()})">' +
                            '<i class="fas fa-trash"></i>' +
                        '</button>' +
                    '@endcan' +
                    '</div>' +
                    '</div>');
            }
        });
    }
    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>
<script>
$(document).ready(function() {
    let timeout;
    const list = $('body').find('#search-list-{{$rand}}');
    const textarea = $('body').find('#createComment-comment-{{$rand}}');

    textarea.on('keyup', function(e) {
        clearTimeout(timeout);
        const value = $(this).val();
        const mentionChar = value.lastIndexOf('@');
        // Csak akkor folytatjuk, ha az "@" karaktert találunk
        if (mentionChar !== -1) {
            const query = value.substring(mentionChar + 1);
            //console.log(query.length);
            // Ha a query üres, ne küldjünk AJAX kérést
            if (query.length >= 0) {
                timeout = setTimeout(function() {
                    $.ajax({
                        url: '{{route("comments.search")}}', // A route, amely a felhasználókat visszaadja
                        method: 'GET',
                        data: { q: query },
                        success: function(data) {
                            list.empty();
                            if (data.length > 0) {
                                data.forEach(data => {
                                    list.append(`<option value="${data.value}" data-value="${data.value}">${data.text}</option>`);
                                });   
                                const options = list.find('option');                                         
                                size = options.length;
                                list.attr('size', size > 5 ? 5 : size);
                                list.show();
                                select_list();
                            } else {
                                list.hide();
                            }
                        }
                    });
                }, 100);
            } else {
                list.hide();
            }
        } else {
            list.hide();
        }
    });

    // Kiválasztás esemény
    $(document).on('click', '#search-list-{{$rand}} option', function() {
        const text = $(this).data('value');
        const mention_char = textarea.val().lastIndexOf('@');
        const new_value = textarea.val().substring(0, mention_char) + '@' + text + ' ';
        textarea.val(new_value);
        list.hide();
        textarea.focus();
    });

    $(document).on('click', function(event) {
        // Ellenőrizzük, hogy a kattintás nem a listára vagy a textarea-ra történt
        if (!list.is(event.target) && !textarea.is(event.target) && !list.has(event.target).length) {
            list.hide(); // A lista elrejtése
        }
    });

    // Ha a textarea-t elhagyjuk, rejtsük el a listát
    textarea.on('blur', function() {
        let list_focused = false;

        list.on('focus', function() {
            list_focused = true;
        });

        setTimeout(function() {
            if(!list_focused)
                list.hide();
        }, 200); // késleltetést, hogy a kattintás esemény lefusson előtte
    });

    function select_list() {
        const options = list.find('option');
        let selected_index = options.index(options.filter(':selected'));

        if(list.is(":visible")) {
            textarea.on('keydown', function(e) {
                // Ha a lefelé nyilat nyomják, a fókusz a select elemre kerül
                if (e.key === 'ArrowDown') {
                    options.first().prop('selected', true);
                    list.focus(); // Fókusz a select elemre
                }

                list.on('keyup', function(e) {
                    if (e.key === 'Escape') {
                        list.hide();
                    }

                    if (e.key === 'Enter') {
                        list.find(':selected').trigger('click');
                        list.hide(); // Lista eltüntetése
                    }
                });
            });
        }
    }
});
</script>
@if( ! Request::ajax() )
@endpush
@endif