@extends('web.layouts.app')

@push('styles')
    <style>
        .flex-center { 
            display: flex !important;
            align-items: center!important;
            justify-content: center!important;
        }
        .clearfix {
            clear: both;
        }
        .hidden {
            display: none !important;
        }
        .del-btn {
            position: absolute;
            top: -12px;
            right: -8px;
            cursor: pointer;
        }
        .select-template-message, .select-quick-reply-message, .assign-to, .agent_or_team {
            cursor: pointer;
        }
        .quick-replies {
            max-height: 400px;
            height: 400px;
            overflow-y: auto;
        }
        .quick-replies .select-quick-reply-message, .quick-replies .select-template-message {
            background-color: #f5f5f5 !important;
        }
        .quick-replies .del-btn {
            display: none;
        }
        .quick-reply-attachment-row {
            position: relative;
            border: 1px solid #ccc;
            padding: 2px;
        }
        .agents_and_teams {
            max-height: 300px;
            overflow-y: auto;
        }
        .assigned-to span {
            display: none;
        }
        .agent_or_team:hover {
            background-color: #fafafa;
        }
        .agent_or_team.active {
            background-color: #e6ebf5;
            cursor: auto;
        }
        .chat-list .unread {
            background: #fff;
        }
        #chat-message, .emojionearea-editor {
            resize: none;
            overflow: hidden;
            min-height: 41px !important;
            max-height: 100px !important;
        }
        .chat-conversation .conversation-list {
            max-width: 67%;
        }
        .chat-conversation {
            overflow-y: auto;
        }
        .private-message .ctext-wrap-content {
            background: yellow !important;
        }
        .private-message .conversation-name {
            font-size: 12px !important;
            font-weight: normal !important;
            font-style: italic;
            color: #bbb;
        }
        .chat-conversation::-webkit-scrollbar-track, .agents_and_teams::-webkit-scrollbar-track, .quick-replies::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,0.2);background-color:#F5F5F5}
        .chat-conversation::-webkit-scrollbar, .agents_and_teams::-webkit-scrollbar, .quick-replies::-webkit-scrollbar{width:8px;background-color:#F5F5F5}
        .chat-conversation::-webkit-scrollbar-thumb, .agents_and_teams::-webkit-scrollbar-thumb, .quick-replies::-webkit-scrollbar-thumb{background-color:#b8b8b8}

        .send-attachment-loader-container {
            position: absolute;
            width: 100%;
            z-index: 20;
            margin-top: -60px;
            background: white;
            opacity: 0.7;
            text-align: center;
        }
        .send-attachment-loader-container .spinner-border {
            width: 3rem;
            height: 3rem;
            z-index: 30;
            margin-top: 15px;
            position: absolute;
            top: 0;
        }
        .pan {
            cursor: zoom-in;
        }
        #chat-reply-preview-container {
            background: #f5f7fb;
            position: sticky;
            bottom: 0;
            width: 100%;
            z-index: 10;
        }
    </style>
    @if (env('APP_PROJECT') == 'Mora')
        <style>
            .flex-center {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
            .unread-message span {
                font-size: 12px;
                width: auto;
                height: auto;
                min-width: 20px;
                min-height: 20px;
                margin-top: -5px;
            }
            .page-header-breadcrumb {
                margin-block: 1.25em !important;
            }
            .chat-leftsidebar {
                margin-top: 10px;
            }
            @media (min-width: 992px) {
                #chat-conversation {
                    /*height: calc(100% - 134px);
                    position: relative;
                    overflow: hidden scroll;*/
                }
                .main-chat-list {
                    overflow-y: scroll;
                }
                .chat-conversation {
                    height: calc(100vh - 330px);
                }
                .chat-conversation {
                    overflow-y: auto;
                }
                .main-chat-body {
                    overflow-y: scroll;
                }
                .chat-sidebar .custom-card {
                    height: calc(100% - 20px);
                }
                .chat-sidebar .main-content-app, .chat-sidebar .main-content-left {
                    height: 100%;
                }
                .chat-sidebar .main-chat-list {
                    height: 100%;
                }
            }
            .emojionearea .emojionearea-editor {
                text-align: left;
            }
        </style>
    @endif
    <link rel="stylesheet" href="{{ asset('web/assets/css/emojionearea.min.css') }}">
    <link rel="stylesheet" href="{{ asset('web/assets/css/jquery.pan.css') }}" type="text/css"/>
@endpush

@section('content')
@if (env('APP_PROJECT') == 'Mora')
  <div class="row row-sm">
@endif
     <!-- start chat-leftsidebar -->
    <div class="chat-leftsidebar me-lg-1 ms-lg-0">
        <div class="tab-content">
            @if (isset($conversations))
                @if (env('APP_PROJECT') == 'Mora')
                    <div class="row main-chart-wrapper row-sm">
                        @include('web/partials/sidebar-chat-mora')
                        <div class="col-sm-12 col-md-12 col-lg-12 col-xxl-9 flex-center" id="msg_history">
                            @if (empty($conversationId))
                                <div class="col-sm-12 col-md-12 col-lg-12 col-xxl-8 flex-center">
                                    <div class="card custom-card p-5 text-center">
                                        <div class="main-content-app pt-0">
                                            <div class="main-content-body main-content-body-chat">
                                                <div class="d-lg-flex">
                                                    <!-- start chat conversation section -->
                                                    <div class="w-100 overflow-hidden position-relative">
                                                        <h3 class="text-center">@lang('user.no_message_selected')</h3>
                                                        <p>@lang('user.please_select_message_from_sidebar')</p>
                                                    </div>
                                                    <!-- end chat conversation section -->
                                                </div>
                                                <!-- End User chat -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                @else
                    @include('web/partials/sidebar-chat')
                @endif
            @endif
        </div>
        <!-- end tab content -->
    </div>
    <!-- end chat-leftsidebar -->

    @if (env('APP_PROJECT') != 'Mora')
        <!-- Start User chat -->
        <div class="w-100 overflow-hidden flex-center" id="msg_history">
            @if (empty($conversationId))
                <div class="d-lg-flex">
                    <!-- start chat conversation section -->
                    <div class="w-100 overflow-hidden position-relative">
                        <h3 class="text-center">@lang('user.no_message_selected')</h3>
                        <p>@lang('user.please_select_message_from_sidebar')</p>
                    </div>
                    <!-- end chat conversation section -->
                </div>
                <!-- End User chat -->
            @endif
        </div>
    @endif
    <!-- end  layout wrapper -->
@if (env('APP_PROJECT') == 'Mora')
  </div>
@endif
@endsection

@push('scripts')
    <script type="text/javascript" src="{{ asset('web/assets/js/emojionearea.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('web/assets/js/jquery.pan.js') }}"></script>
    <script>
        var messagesContainer = "{{ env('APP_PROJECT') == 'Mora' ? 'main-chat-body' : 'chat-conversation' }}";
        $(function(){
            socket.on('messenger_chat_message', function(data) {
                let unreadCount = data.conversationUnreadCount;
                if (conversationId == data.conversationId) {
                    unreadCount = 0;
                }

                if ($('#conversation-' + data.conversationId).length) {
                    $('#conversation-' + data.conversationId).remove();
                }

                if (data.authorized_users.includes('{{ $user->id }}') || skipAssignee == "1") {
                    @if (env('APP_PROJECT') == 'Mora')
                        $('.chat-list').prepend(`<div class="unread">
                                <a id="conversation-${data.conversationId}" class="media new open-chat-btn" data-conversation_id="${data.conversationId}" href="javascript:void(0);">
                                    <div class="main-img-user online">
                                        <img alt="" src="${ data.contactImage }"> 
                                        <div class="unread-message" ${unreadCount <= 0 ? ' style="display: none"' : ''}>
                                            <span>${ unreadCount }</span>
                                        </div>
                                    </div>
                                    <div class="media-body">
                                        <div class="media-contact-name">
                                            <span>${ data.contactName }</span> 
                                            <span class="font-size-11">${data.datetime}</span>
                                        </div>
                                        <p class="chat-user-message">${ data.message }</p>
                                    </div>
                                </a>
                            </div>`);
                    @else
                        $('.chat-list').prepend(`<li class="unread">
                                <a href="javascript:void(0)" id="conversation-${data.conversationId}" class="open-chat-btn" data-conversation_id="${data.conversationId}">
                                    <div class="d-flex">
                                        <div class="chat-user-img align-self-center me-3 ms-0">
                                            <img src="${ data.contactImage }"
                                                class="rounded-circle avatar-xs" alt="">
                                        </div>

                                        <div class="flex-grow-1 overflow-hidden">
                                            <h5 class="text-truncate font-size-15 mb-1">${ data.contactName }</h5>
                                            <p class="chat-user-message text-truncate mb-0">${ data.message }</p>
                                        </div>
                                        <div class="font-size-11">${data.datetime}</div>
                                        <div class="unread-message" ${unreadCount <= 0 ? ' style="display: none"' : ''}>
                                            <span class="badge badge-soft-danger rounded-pill">${ unreadCount }</span>
                                        </div>
                                    </div>
                                </a>
                            </li>`);
                    @endif
                    showNotification("@lang('user.incoming_message')", data.message, data.contactId);
                } else if (data.authorized_users.length == 0) {
                    $('#chat_history_spinner').show();
                }

                if (conversationId == data.conversationId) {
                    if (!$('.today_label').length) {
                        $('#msg_history .chat-conversation ul').append(`<li>
                                <div class="chat-day-title main-chat-time">
                                    <span class="title today_label">{{ __('user.today') }}</span>
                                </div>
                            </li>`);
                    }
                    if (!$('#message-' + data.id).length) {
                        $('#msg_history .chat-conversation ul').append(`<li id="message-${ data.id }" class="media">
                                    <div class="conversation-list">
                                        <div class="user-chat-content">
                                            <div class="ctext-wrap">
                                                <div class="ctext-wrap-content main-msg-wrapper">
                                                    <p class="mb-0">${ data.message.replace(/(?:\r\n|\r|\n)/g, '<br>') }</p>
                                                    <p class="chat-time mb-0"><i class="align-middle"></i>
                                                        <span class="align-middle">${ data.datetime }</span>
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="conversation-name">{{ __('user.from_whatsapp') }}</div>
                                        </div>
                                    </div>
                                </li>`);
                        document.getElementById(messagesContainer).scrollTop =  document.getElementById(messagesContainer).scrollHeight;
                        
                        if ($('.get-templates').length) {
                            $('.conversation-expiration-alert').hide();
                            $('.get-templates').remove();
                            $('.emojionearea').removeClass('hidden');
                            $('#send-chat-message').show();
                            $('#attachment-label').show();
                        }

                        $.ajax({
                            url: "{{ route('web.conversations.changeReadStatus') }}",
                            type: 'POST',
                            data: {
                                conversation_id: conversationId,
                                read_status: '0'
                            },
                            dataType: "JSON",
                            success: function (result2) {}
                        });
                    }
                }
            });

            socket.on('messenger_message_status_change', function(data) {
                if (conversationId == data.conversationId) {
                    let fontClass = '';
                    if (data.status == '2') {
                        fontClass = 'ri-check-double-fill';
                    } else if (data.status == '4') {
                        fontClass = 'ri-check-double-fill text-success';
                    } else if (data.status == '6') {
                        fontClass = 'ri-alert-line text-danger';
                    }

                    if (fontClass != '') {
                        $('#message-' + data.id + ' .chat-time i').removeClass('ri-check-double-fill text-success ri-alert-line text-danger');
                        $('#message-' + data.id + ' .chat-time i').addClass(fontClass);
                    }
                }
            });
            
            socket.on('messenger_conversation_assign', function(data) {
                if (conversationId == data.conversationId) {
                    window.location.href = "{{ route('web.conversations') }}";
                } else if (!data.authorized_users.includes('{{ $user->id }}') && skipAssignee == "0") {
                    $('#conversation-' + data.conversationId).remove();
                } else if ($('#conversation-' + data.conversationId).length == 0) {
                    showNotification("@lang('user.new_assigned_conversation')", "@lang('user.contact_name'): " + data.contactName, data.contactId);
                    reloadConversationSidebar();
                }
            });
        });
    </script>

    <script>
        var userType = '';
        var userId = '';
        var conversationId = '';
        var replyToMessage = '';
        var isPrivateMessage = false;
        var isExpiredConversation = false;
        var assignTo = 'all';
        var spinner = `<div class="flex-center h-100">
                <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>`;
        var voiceRecorderData = '';
        var totalSeconds = 0;

        (function () {
            // window.addEventListener('load', function () {
                $(document).on('click', '.open-chat-btn', function () {
                    conversationId = $(this).data('conversation_id');
                    openConversation(conversationId);
                });
            // });

            @if (!empty($conversationId))
                openConversation({{ $conversationId }});
            @endif

            $(document).on('keypress', '.emojionearea-editor', function(event) {
                var keycode = (event.keyCode ? event.keyCode : event.which);
                if (keycode == '13' && !event.shiftKey) {
                    event.preventDefault();
                    sendChatMessage();
                }
            });
            $(document).on('click', '#send-chat-message', function() {
                sendChatMessage();
            });

            $(document).on('click', '.get-templates', function(){
                $.ajax({
                    url: "{{ route('web.messenger_conversations.templates') }}",
                    success: function(response){ 
                        $('#templatesModal .modal-body').html(response.content);
                        $('#templatesModal').modal('show'); 
                    }
                });
            });

            $(document).on('click', '.open-quick-replies', function() {
                $('.quick-replies').empty();
                url = "{{ route('web.messenger_conversations.templates') }}";
                $('.show-templates').addClass('btn-light');

                $.ajax({
                    url: url,
                    success: function(response){ 
                        $('.quick-replies').html(response.content);
                    }
                });
            });
            $(document).on('click', '.show-templates', function() {
                $.ajax({
                    url: "{{ route('web.messenger_conversations.templates') }}",
                    success: function(response){ 
                        $('.quick-replies').html(response.content);
                    }
                });
            });
            
            $(document).on('click', '.select-template-message', function(){
                let newRow = $(this).clone();
                newRow.removeClass('select-template-message');
                $('.send-template-message').attr('data-template-id', $(this).data('template-id'));
                $('#sendTemplateConfirmationModal .modal-body').html(newRow);
                $('#templatesModal').modal('hide');
                $('#sendTemplateConfirmationModal').modal('show');
            });

            $(document).on('click', '.send-template-message', function(){
                sendTemplateMessage();
            });

            $(document).on('click', '.assign-to', function() {
                assignTo = $(this).attr('rel');
                $('.assign-to').removeClass('border-bottom');
                $(this).addClass('border-bottom');
                if (assignTo == 'all') {
                    $('.agent-row').show();
                    $('.team-row').show();
                } else if (assignTo == 'agents') {
                    $('.agent-row').show();
                    $('.team-row').hide();
                } else if (assignTo == 'teams') {
                    $('.agent-row').hide();
                    $('.team-row').show();
                }
            });

            $(document).on('click', '.agent_or_team', function() {
                if (!$(this).hasClass('active')) {
                    $('.agent_or_team').removeClass('active');
                    $(this).addClass('active');
                    assign($(this).attr('data-type'), $(this).attr('rel'));
                    $('.assigned-to').html($(this).html());
                }
            });

            $(document).on('click', '.mark_as_closed', function() {
                markAsClosed();
            });

            $(document).on('click', '.show-private-message', function() {
                if (isPrivateMessage) {
                    $(this).removeClass('btn-light');
                    isPrivateMessage = false;
                    $('.emojionearea-editor').attr("placeholder", "{{ __('user.enter_message') }}...");
                    if ($('.get-templates').length) {
                        $('.get-templates').show();
                        $('.emojionearea').addClass('hidden');
                        $('#send-chat-message').hide();
                        $('#attachment-label').hide();
                    }
                } else {
                    $(this).addClass('btn-light');
                    isPrivateMessage = true;
                    $('.emojionearea-editor').attr("placeholder", "{{ __('user.enter_private_message') }}...");
                    $('.get-templates').hide();
                    $('.emojionearea').removeClass('hidden');
                    $('#send-chat-message').show();
                    $('#attachment-label').show();
                }
            });

            $(document).on('click', '.del-btn', function() {
                $(this).parent().remove();
            });

            $(document).on('click', '.user-chat-remove', function() {
                $('#msg_history').html(`<div class="w-100 overflow-hidden flex-center" id="msg_history">
                    <div class="d-lg-flex">
                        <div class="w-100 overflow-hidden position-relative">
                            <h3 class="text-center">@lang('user.no_message_selected')</h3>
                            <p>@lang('user.please_select_message_from_sidebar')</p>
                        </div>
                    </div>
                </div>`);
                $('#msg_history').removeClass('user-chat');
            });

            $(document).on('change', '#attachment', function() {
                const fileInput = document.getElementById("attachment");
                const selectedFiles = fileInput.files;
                // Check if any files are selected
                if (selectedFiles.length === 0) {
                    return;
                }

                $('.send-attachment-loader-container').show();

                const formData = new FormData();
                // Append each selected file to the FormData object
                for (let i = 0; i < selectedFiles.length; i++) {
                    formData.append("files[]", selectedFiles[i]);
                }

                $.ajax({
                    url: "{{ route('web.messenger_conversations.uploadFiles') }}",
                    data: formData,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    success: function(data){
                        let attachmentsHtml = `<div class="clearfix quick-reply-attachments">`;
                        
                        data.files.forEach(function (file) {
                            attachmentsHtml += `
                                <div class="quick-reply-attachment-row float-start me-2">
                                    <span class="del-btn"><i class="ri-close-circle-fill"></i></span>
                                    <img src="{{ url('/') }}/${file.icon}" height="32" />
                                    <input type="hidden" name="attachments[]" value="${file.url}" />
                                </div>`;
                        });

                        attachmentsHtml += `</div>`;

                        $('.conversation-attachments').empty().html(attachmentsHtml).show();
                        $('.send-attachment-loader-container').hide();
                    },
                    error: function(data) {
                        toastr.error("{{ __('user.upload_attachment_error') }}");
                        $('.send-attachment-loader-container').hide();
                    }
                });
            });

            $(document).on('click', '.pan', function(e) {
                var t = $(this);
                var href = t.attr("src");
                var linkElt = t;
                $('.controls.link').attr("href", href).attr("target", linkElt.attr("target")).attr("title", 'Download');
                $('#loading').addClass('loading');
                var imgViewer = $('.panWrapper img.i').css('display', 'none').attr('src', '');
                window.document.body.classList.add('no-scroll');
                $(".panWrapper").show();
                imgViewer.css("width", "auto").attr("src", href).on('load', function () {
                    var target = this;
                    var showImage = function () {
                        $('#loading').removeClass('loading');
                        target.style.display = "";
                    };

                    panInit(e);
                    showImage();
                });
            });

            $(document).on('click', '#voice-recorder-btn', function(e) {
                totalSeconds = 0;
                $('#voice-recorder-container').remove();
                $('#chat-input-fields').hide();
                $('.chat-input-section').prepend(`<div id="voice-recorder-container" class="flex-center">
                    <div id="voice-recorder-stop-container" class="text-success h3">
                        <label id="minutes">00</label>:<label id="seconds">00</label>
                        <button class="btn btn-secondary ms-2" id="voice-recorder-stop">STOP RECORDING</button>
                    </div>
                    <audio id="voice-recorder-play" controls controlsList="nodownload" style="display: none"></audio>
                    <button class="btn btn-primary ms-2" id="voice-recorder-send" style="display:none">Send</button>
                    <button class="btn btn-danger ms-2" id="voice-recorder-cancel" style="display:none">Cancel</button>
                </div>`);
                recordAudio();
            });
            $(document).on('click', '#voice-recorder-cancel', function(e) {
                $('#voice-recorder-container').remove();
                $('#chat-input-fields').show();
            });
            $(document).on('click', '#voice-recorder-send', function(e) {
                const formData = new FormData();
                formData.append("conversation_id", conversationId);
                formData.append('file', voiceRecorderData, 'file.ogg');
                $.ajax({
                    type: 'POST',
                    url: "{{ route('web.messenger_conversations.sendVoiceNote') }}",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (result2) {
                        $('#voice-recorder-container').remove();
                        $('#chat-input-fields').show();

                        if (result2.success == true) {
                            if (!$('.today_label').length) {
                                $('#msg_history .chat-conversation ul').append(`<li>
                                        <div class="chat-day-title main-chat-time">
                                            <span class="title today_label">{{ __('user.today') }}</span>
                                        </div>
                                    </li>`);
                            }

                            var messageLabel = "{{ __('user.sent_by_user') }}";
                            result2.messages.forEach(function (messageObj) {
                                $('#msg_history .chat-conversation ul').append(`<li id="message-${messageObj.id}" class="media flex-row-reverse right">
                                                    <div class="conversation-list">
                                                        <div class="user-chat-content">
                                                            <div class="ctext-wrap">
                                                                <div class="ctext-wrap-content main-msg-wrapper">
                                                                    <p class="mb-0">${messageObj.message}</p>
                                                                    <p class="chat-time mb-0"><i class="ri-check-fill ri-xl align-middle"></i>
                                                                        <span class="align-middle">${result2.datetime}</span>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <div class="conversation-name">${messageLabel}</div>
                                                        </div>
                                                    </div>
                                                </li>`);
                                $('#conversation-' + conversationId + ' .chat-user-message').text(messageObj.message);
                                $('#conversation-' + conversationId + ' .font-size-11').text(result2.datetime);

                                clonedConversation = $('#conversation-' + conversationId).parent().clone();
                                $('#conversation-' + conversationId).parent().remove();
                                $('.chat-list').prepend(clonedConversation);
                            });
                            
                            document.getElementById(messagesContainer).scrollTop = document.getElementById(messagesContainer).scrollHeight;
                        } else {
                            toastr.error(result2.message);
                        }
                    }
                });
            });

            $(document).on('click', '.message-reply', function() {
                replyToMessage = $(this).attr('rel');
                $('#chat-reply-preview').html($(this).parent().find('.ctext-wrap-content').clone());
                $('#chat-reply-preview .chat-time').remove();
                $('#chat-reply-preview-container').show();
            });
            
            $(document).on('click', '.chat-reply-cancel', function() {
                replyToMessage = '';
                $('#chat-reply-preview').empty();
                $('#chat-reply-preview-container').hide();
            });

            $(document).on('click', '#user-profile-hide', function() {
                $('.user-profile-sidebar').hide();
            });
            
            $('.pan').pan();
        })();

        function setTime() {
            ++totalSeconds;
            $('#seconds').html(pad(totalSeconds % 60));
            $('#minutes').html(pad(parseInt(totalSeconds / 60)));
        }

        function pad(val) {
            var valString = val + "";
            if (valString.length < 2) {
                return "0" + valString;
            } else {
                return valString;
            }
        }

        function panInit(event) {
            //CAN'T USE event.preventDefault(); BECAUSE IT'S A PASSIVE HANDLER FOR SOME EVENTS!! (wheel & touchmove)
            //That's because of CLS metrics in Google Lighthouse that affect performance and SEO
            var panImg = $(".panWrapper img.i");
            var panWrapper = $(".panWrapper");

            var w = parseInt(panImg.css("width"));  //Image width
            var h = parseInt(panImg.css("height")); //Image height
            var vpW = panWrapper.width();   //Viewport width
            var vpH = panWrapper.height();   //Viewport height

            //Swap dimensions if image is rotated from the original angle (0)
            var angle = parseInt((panImg.data('rotAngle'))) || 0;
            var rotated = angle % 180 != 0;
            if (rotated) {
                w = [h, h = w][0];    //for old browsers that don't support destructuration
            }

            /*Margin on the left (difference between the width of the container and the image width).
            If the image is wider than the container, it's negative (the image goes outside the viewport),
            if the image is less wide than the container, it's positive (it's the ammount of margin on the left to center the image) */
            var ml = -(w - vpW);
            //Idem with the height
            var mt = -(h - vpH);
            //The amount of scroll from the top in the current page, to correct for pointer position
            var scrollHOffset = window.pageXOffset || document.documentElement.scrollLeft,
                scrollVOffset = window.pageYOffset || document.documentElement.scrollTop;

            //Left position of the pointer in page (first, try mouse, then try jQuery touch, default case native event touch for old jQuery versions), and in Viewport (substracting the scroll from left)
            var posOfPointerInPageX = __getPointerPosX(event),
                posOfPointerInViewportX = posOfPointerInPageX - scrollHOffset,
                vpW = panWrapper.width();   //Viewport width
            if (posOfPointerInViewportX < 0) posOfPointerInViewportX = 0; //In touch devices this can be slightly outside the viewport boundaries
            if (posOfPointerInViewportX > vpW) posOfPointerInViewportX = vpW;

            //Top position of the pointer in page (first, try mouse, then try jQuery touch, default case native event touch for old jQuery versions), and in Viewport (substracting the scroll from top)
            var posOfPointerInPageY = __getPointerPosY(event),
                posOfPointerInViewportY = posOfPointerInPageY - scrollVOffset,
                vpH = panWrapper.height();   //Viewport height
            if (posOfPointerInViewportY < 0) posOfPointerInViewportY = 0; //In touch devices this can be slightly outside the viewport boundaries
            if (posOfPointerInViewportY > vpH) posOfPointerInViewportY = vpH;

            //New left: the new amount we need to move from the left to show other parts of the image depending on the current mouse position
            var nl = Math.floor((ml * posOfPointerInViewportX) / vpW);

            //New top: the new amount we need to move from the top to show other parts of the image depending on the current mouse position
            var nt = Math.floor(mt * posOfPointerInViewportY / vpH);

            var leftWhenCentered = (vpW - w) / 2;
            var topWhencentered = (vpH - h) / 2;

            if (vpW > w && vpH > h) {   //If the image is smaller than the available viewport, center it in both directions
                nl = leftWhenCentered;
                nt = topWhencentered;
            }
            else if (vpW > w) { //If the image width is less than the viewport, center it horizontally
                nl = leftWhenCentered;
            }
            else if (vpH > h) { //If the image height is less than the viewport height, center it vertically
                nt = topWhencentered;
            }

            //Position image in viewport as calculated
            var tX = 0, tY = 0;
            switch (angle % 360) {
                case 0:
                    tX = nl;
                    tY = nt;
                    break;
                case 90:
                case -270:
                    tX = nt;
                    tY = -(w + nl);
                    break;
                case 180:
                case -180:
                    tX = -(w + nl)
                    tY = -(h + nt);
                    break;
                case 270:
                case -90:
                    tX = -h - nt;
                    tY = nl;
                    break;
            }
            panImg.css('transform', 'rotate(' + angle + 'deg) translate(' + tX + 'px,' + tY + 'px)');
        }
        function __getPointerPos(event, prop) {
            var pos = event[prop];  //Normal mousemove event
            if (pos == undefined) {
                pos = 0;    //Default value if the next conditionals don't work
                if (event.touches)  //jQuery for touch pointer move. Not available in jQuery 1.x
                    pos = event.touches[0][prop];
                else if (event.originalEvent) { //original window event
                    if (event.originalEvent.touches)
                        pos = event.originalEvent.touches[0][prop];
                }
            }
            return pos;
        }
        function __getPointerPosX(event) {
            return __getPointerPos(event, 'pageX');
        }
        function __getPointerPosY(event) {
            return __getPointerPos(event, 'pageY');
        }

        function openConversation(id)
        {
            conversationId = id;
            isPrivateMessage = false;
            isExpiredConversation = false;

            $('#conversation-' + id + ' .unread-message').hide();
            $('#conversation-' + id).parent().removeClass('unread');
            $('#msg_history').addClass('user-chat user-chat-show');
            $('#msg_history').removeClass('flex-center');
            $('#msg_history').html(spinner);
            $.getJSON('{{url("messenger/conversations")}}/' + conversationId, function(data){
                $('#msg_history').html(data.content);
                $('.chat-input-section').show();
                document.getElementById(messagesContainer).scrollTop = document.getElementById(messagesContainer).scrollHeight;
                // if (!$('.get-templates').length) {
                    $("#chat-message").emojioneArea();
                // }

                // $(".pan").pan();
            });
        }

        function sendChatMessage()
        {
            if ($("#chat-message")[0].emojioneArea.getText() != '' || $(".conversation-attachments input[name='attachments[]']").length > 0) {
                var route = "{{ route('web.messenger_conversations.sendMessage') }}";
                if (isPrivateMessage) {
                    route = "{{ route('web.messenger_conversations.sendPrivateMessage') }}";
                }
                msg = $("#chat-message")[0].emojioneArea.getText();

                var attachments = $(".conversation-attachments input[name='attachments[]']").map(function(){return $(this).val();}).get();

                $.ajax({
                    url: route,
                    type: 'POST',
                    data: {
                        conversation_id: conversationId,
                        reply_to: replyToMessage,
                        message: msg,
                        attachments: attachments
                    },
                    dataType: "JSON",
                    success: function (result2) {
                        if (result2.success == true) {
                            $('#chat-message').val('');
                            $("#chat-message")[0].emojioneArea.setText("");
                            $('.conversation-attachments').empty();
                            $('.conversation-attachments').hide();
                            if (!$('.today_label').length) {
                                $('#msg_history .chat-conversation ul').append(`<li>
                                        <div class="chat-day-title main-chat-time">
                                            <span class="title today_label">{{ __('user.today') }}</span>
                                        </div>
                                    </li>`);
                            }

                            var messageLabel = "{{ __('user.sent_by_user') }}";
                            if (isPrivateMessage) {
                                messageLabel = `{{ __('user.private_message_added_by') }} {{ $user->name }} {{ __('user.at') }} ${result2.datetime}. {{ __('user.only_visible_for_agents') }}`;
                            }

                            result2.messages.forEach(function (messageObj) {
                                $('#msg_history .chat-conversation ul').append(`<li id="message-${messageObj.id}" class="media flex-row-reverse right">
                                                    <div class="conversation-list${isPrivateMessage ? ' private-message' : ''}">
                                                        <div class="user-chat-content">
                                                            <div class="ctext-wrap">
                                                                <div class="ctext-wrap-content main-msg-wrapper">
                                                                    <p class="mb-0">${messageObj.message}</p>
                                                                    <p class="chat-time mb-0"><i class="ri-check-fill ri-xl align-middle"></i>
                                                                        <span class="align-middle">${result2.datetime}</span>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <div class="conversation-name">${messageLabel}</div>
                                                        </div>
                                                    </div>
                                                </li>`);
                                $('#conversation-' + conversationId + ' .chat-user-message').html(messageObj.message);
                                $('#conversation-' + conversationId + ' .font-size-11').text(result2.datetime);

                                clonedConversation = $('#conversation-' + conversationId).parent().clone();
                                $('#conversation-' + conversationId).parent().remove();
                                $('.chat-list').prepend(clonedConversation);
                            });
                            
                            document.getElementById(messagesContainer).scrollTop = document.getElementById(messagesContainer).scrollHeight;
                        } else {
                            // ToDo: handle send message failure
                        }

                        if (replyToMessage != '') {
                            $('.chat-reply-cancel').trigger('click');
                        }
                    }
                });
            }
        }

        function sendTemplateMessage()
        {
            $('#sendTemplateFormError').hide();
            templateId = $('.send-template-message').attr('data-template-id');
            if (templateId != '') {
                if ($('#sendTemplateForm').length && !$('#sendTemplateForm')[0].checkValidity()) {
                    $('#sendTemplateFormError').show();
                    return false;
                } else {
                    var formData;
                    if ($('#sendTemplateForm').length) {
                        formData = new FormData(document.getElementById('sendTemplateForm'));
                    } else {
                        formData = new FormData();
                    }
                    formData.append('conversation_id', conversationId);
                    formData.append('template_id', templateId);
                    
                    $.ajax({
                        url: "{{ route('web.messenger_conversations.sendTemplate') }}",
                        type: 'POST',
                        processData: false,
                        contentType: false,
                        data: formData,
                        success: function (result2)
                        {
                            if (result2.success == true) {
                                if (!$('.today_label').length) {
                                    $('#msg_history .chat-conversation ul').append(`<li>
                                            <div class="chat-day-title main-chat-time">
                                                <span class="title today_label">{{ __('user.today') }}</span>
                                            </div>
                                        </li>`);
                                }
                                $('#msg_history .chat-conversation ul').append(`<li id="message-${result2.id}" class="media flex-row-reverse right">
                                                    <div class="conversation-list">
                                                        <div class="user-chat-content">
                                                            <div class="ctext-wrap">
                                                                <div class="ctext-wrap-content main-msg-wrapper">
                                                                    <p class="mb-0">${result2.msg}</p>
                                                                    <p class="chat-time mb-0"><i class="ri-check-fill ri-xl align-middle"></i>
                                                                        <span class="align-middle">${result2.datetime}</span>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <div class="conversation-name">{{ __('user.sent_by_user') }}</div>
                                                        </div>
                                                    </div>
                                                </li>`);

                                $('#conversation-' + conversationId + ' .chat-user-message').html(result2.msg);
                                $('#conversation-' + conversationId + ' .font-size-11').text(result2.datetime);

                                clonedConversation = $('#conversation-' + conversationId).parent().clone();
                                $('#conversation-' + conversationId).parent().remove();
                                $('.chat-list').prepend(clonedConversation);

                                $('#sendTemplateConfirmationModal').modal('toggle');

                                document.getElementById(messagesContainer).scrollTop =  document.getElementById(messagesContainer).scrollHeight;
                            } else {
                                // ToDo: handle send message failure
                            }
                        }
                    });
                }
            }
        }

        function assign(type, id)
        {
            $.ajax({
                url: "{{ route('web.conversations.assign') }}",
                type: 'POST',
                data: {
                    conversation_id: conversationId,
                    type: type,
                    id: id
                },
                dataType: "JSON",
                success: function (result2)
                {
                    if (result2.success == true) {
                        $(".user-chat-topbar .dropdown-toggle").trigger("click");
                        toastr.success(result2.message);
                        
                        // if (result2.reload == true) {
                            setTimeout(function(){
                                window.location.href = "{{ route('web.conversations') }}";
                            }, 3000);
                        // }
                    } else {
                    }
                }
            });
        }

        function searchAgents()
        {
            var input = document.getElementById("seach_agents_input");
            var filter = input.value.toLowerCase();
            var nodes = 'agent_or_team';
            if (assignTo == 'agents') {
                var nodes = document.getElementsByClassName('agent-row');
            } else if (assignTo == 'teams') {
                var nodes = document.getElementsByClassName('team-row');
            } else {
                var nodes = document.getElementsByClassName('agent_or_team');
            }

            for (i = 0; i < nodes.length; i++) {
                if (nodes[i].innerText.toLowerCase().includes(filter)) {
                    nodes[i].style.display = "block";
                } else {
                    nodes[i].style.display = "none";
                }
            }
        }

        function searchQuickReplies()
        {
            var input = document.getElementById("seach-quick-replies-input");
            var filter = input.value.toLowerCase();
            var className = 'select-quick-reply-message';
            if ($('.show-templates').hasClass('btn-light')) {
                className = 'select-template-message';
            }
            var nodes = document.getElementsByClassName(className);
            
            for (i = 0; i < nodes.length; i++) {
                if (nodes[i].innerText.toLowerCase().includes(filter)) {
                    nodes[i].style.display = "block";
                } else {
                    nodes[i].style.display = "none";
                }
            }
        }

        function markAsClosed()
        {
            $.ajax({
                url: "{{ route('web.conversations.markAsClosed') }}",
                type: 'POST',
                data: {
                    conversation_id: conversationId
                },
                dataType: "JSON",
                success: function (result2)
                {
                    if (result2.success == true) {
                        $('.mark_as_closed').hide();
                        toastr.success(result2.message);
                        window.location.href = "{{ route('web.conversations') }}";
                    } else {
                    }
                }
            });
        }

        function auto_grow(element) {
            element.style.height = "5px";
            element.style.height = (element.scrollHeight) + "px";
        }

        function reloadConversationSidebar()
        {
            let sidebarContainer = $('.chat-leftsidebar .tab-content');
            $.ajax({
                url: "{{ route('web.conversations.sidebar') }}"
            }).done(function(response) {
                sidebarContainer.html(response);
            }).fail(function(err) {
            }).always(function() {});
        }

        function recordAudio()
        {
            let audioIN = { audio: true };
            navigator.mediaDevices.getUserMedia(audioIN).then(function (mediaStreamObj) {
                let stop = document.getElementById('voice-recorder-stop');
                let playAudio = document.getElementById('voice-recorder-play');
                playAudio.src = '';

                let options = [];
                if (MediaRecorder.isTypeSupported('audio/mp4')) {
                    options = {mimeType: "audio/mp4"};
                }
                let mediaRecorder = new MediaRecorder(mediaStreamObj, options);
                mediaRecorder.start();
                let timerHandle = setInterval(setTime, 1000);

                stop.addEventListener('click', function (ev) {
                    mediaRecorder.stop();
                });

                mediaRecorder.ondataavailable = function (ev) {
                    dataArray.push(ev.data);
                }

                let dataArray = [];
                mediaRecorder.onstop = function (ev) {
                    voiceRecorderData = new Blob(dataArray,
                                { 'type': 'audio/ogg' });
                    dataArray = [];
                    let audioSrc = window.URL.createObjectURL(voiceRecorderData);
                    playAudio.src = audioSrc;
                    clearInterval(timerHandle);
                    $('#voice-recorder-stop-container').hide();
                    $('#voice-recorder-play').show();
                    $('#voice-recorder-send').show();
                    $('#voice-recorder-cancel').show();

                    let tracks = mediaStreamObj.getTracks();
                        tracks.forEach(track=>{
                        track.stop()
                    });
                }
            })
            .catch(function (err) {
                console.log(err.name, err.message);
            });
        }

        /*setInterval(function(){
            reloadConversationSidebar();
        }, 60000);*/
    </script>
@endpush