@include('main-site.chat.inc.html_messages')
<script>

    var chat_id = null;
    @if (request('chat_id'))
        chat_id = "{{ request('chat_id') }}";

        fetch_head_chat("{{ route('site.chat.messages', request('chat_id')) }}", "{{ request('chat_id') }}")
    @endif
    $('.fetch-msg').on('click', function() {
        fetch_head_chat($(this).data('url'), $(this).data('id'))
    });



    function fetch_head_chat(url, id) {
        var input_fetched = '#fetched-' + id;
        var last_chat = $('.last_chat');
        var currentChatId = id;

        if (last_chat.val() != currentChatId) {
            $('.fetch-msg').parent().removeClass('active');

            last_chat.val(currentChatId);
            $(this).parent().addClass('active');
            $('.chatbox').removeClass('d-none');
            $('.msgs-wrapper').empty()
            get_message(url, input_fetched, true)

        }
    }

    function get_message(url = null, input_fetched = null, is_bottom_scroll = null) {



        $.ajax({
            url,
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function(res) {
                $(input_fetched).val('1');
                $('.chatbox-head').html(`
                                <div ><img style="width: 2.25rem;
                                        height: 2.25rem;
                                        object-fit: contain;
                                        background: #F1F3F6;
                                        border-radius: 50%;"
                                        src="${res.data.chat_data.user.image}">
                                </div>
                                <span class="dark-color small-text">${res.data.chat_data.user.name}</span>`)
                // إضافة الرسائل إلى الواجهة
                messages = res.data.messages.data;

                $.each(messages, function(key, val) {
                    // console.log(val)
                    set_message(val);
                });

                if (is_bottom_scroll) {

                    document.querySelector('.chatbox-body').scrollTo(0, document.querySelector(
                        '.chatbox-body').scrollHeight);

                } else {
                    document.querySelector('.chatbox-body').scrollTo(0, 200);

                }
                $("#next_page_url").val(res.data.messages.links.next)

            },
            error: function(res) {
                console.log(res);
            }
        });
    }


    $(".form-send-message").submit(function(e) {
        e.preventDefault();
        var actionUrl = $(this).attr("action")
        $(".border-danger").removeClass("border-danger")

        $.ajax({
            url: actionUrl,
            method: 'POST',
            dataType: 'json',
            data: new FormData(this),
            cache: false,
            contentType: false,
            processData: false,
            success: function(res) {
                console.log(res)
                var product_html = ``;
                if (res.data.product != null) {
                    product_html += get_product_html(res.data.product, res.data.sender.id)
                }

                var message_html = ``;
                if (res.data.message !== null) {
                    message_html += get_message_html(res.data.message, res.data.sender.id)

                }

                var attachment_html = ``;
                if (res.data.attach != null) {
                    attachment_html += get_attachment_html(res.data.attach, res.data.file_name,
                        res.data.file_size, res.data.sender.id)
                }


                $('.msgs-wrapper').append(`
                    <div class="msg left-msg">
                                <div class="msg-img"><img src="${res.data.sender.image}"></div>
                                <div class="msg-info">
                                    ${product_html}
                                    ${message_html}
                                    ${attachment_html}
                                    <span class="time">${res.data.created_at_format} </span>
                                </div>
                            </div>`)
                document.querySelector('.chatbox-body').scrollTo(0, document.querySelector(
                    '.chatbox-body').scrollHeight);

                $('.message-send').val('')


            },
            error: function(res) {
                // console.log(res)
                $(".btn_with_load").attr('disabled', false)
                if ((res.status == 500 || res.status == 405 || 422 || res.status ==
                        400) && res.responseJSON) {
                    toastr["error"](res.responseJSON.message)
                } else if (res.status == 404) {
                    toastr["error"]('404 غير موجود')

                } else {
                    toastr["error"]('حدث خطأ ما')
                }

                $(".btn_with_load .loader").addClass("d-none")
            }
        })

    })

    if (!chat_id)
        chat_id = $('.fetch-msg').data('id')


    $('#form_chat_id').val(chat_id)
    if (chat_id) {
        var channel = pusher.subscribe("chat-" + chat_id + "-user-{{ auth()->id() }}");
        channel.bind("chat", function(data) {

            if (data.data.user_id != "{{ auth()->id() }}") {

                var product_html = ``;
                if (data.data.product.length != 0) {
                    if (data.data.product.attachments != null && data.data.product.attachments.length != 0) {

                        product_html += get_product_html(data.data.product, data.data.sender_id)
                    }
                }
                var attachment_html = ``;
                if (data.data.attach != null) {
                    attachment_html += get_attachment_html(data.data.attach, data.data.file_name,
                        data.data.file_size, data.data.sender_id)
                }

                var message_html = ``;
                if (data.data.message !== null) {
                    message_html += get_message_html(data.data.message, data.data.sender_id)
                }

                console.log(data, message_html);

                $('.msgs-wrapper').append(`
                        <div class="msg right-msg">
                                    <div class="msg-img"><img src="${data.data.sender_image}"></div>
                                    <div class="msg-info">
                                        ${product_html}
                                        ${message_html}
                                        ${attachment_html}
                                        <span class="time">${data.data.created_at} </span>
                                    </div>
                                </div>`)
                document.querySelector('.chatbox-body').scrollTo(0, document.querySelector(
                    '.chatbox-body').scrollHeight);
            }
        })
    }
</script>