@extends('layout.main')

@section('page_styles')
{{--CUSTOM STYLES HERE--}}
@stop

@section('layout_sidebar')
{{--sidebar--}}
@include('communication_center.sidebar_chat')
@stop

@section('content')
<!--begin::Wrapper-->
<div class="d-flex flex-column flex-row-fluid wrapper" id="kt_wrapper">
    <!--begin::Content-->
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="subheader py-3 py-lg-8 subheader-transparent" id="kt_subheader">
            <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
                <div class="d-flex align-items-center mr-1">
                    <div class="d-flex align-items-baseline flex-wrap mr-5">
                        <h2 class="d-flex align-items-center text-dark font-weight-bold my-1 mr-3">Communication Center</h2>
                    </div>
                </div>
                <div class="d-flex align-items-center flex-wrap">
                    {{--toolbar buttons--}}
                </div>
            </div>
        </div>
        <!--begin::Entry-->
        <div class="d-flex flex-column-fluid">
            <!--begin::Container-->
            <div class="container">
                <!--begin::Chat-->
                <div class="d-flex flex-row">
                    <!--begin::Aside-->
                    @if(auth()->user())
                    @include('communication_center.thread_list', [
                    'threads' => $threads
                    ])
                    @endif
                    <!--end::Aside-->
                    <!--begin::Content-->
                    @include('communication_center.chat_box')
                    <!--end::Content-->
                </div>
                <!--end::Chat-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Entry-->
    </div>
    <!--end::Content-->
    <!--begin::Footer-->
    <!--doc: add "bg-white" class to have footer with solod background color-->
    <div class="footer py-4 d-flex flex-lg-column" id="kt_footer">
        <!--begin::Container-->
        <div class="container d-flex flex-column flex-md-row align-items-center justify-content-between">
            <!--begin::Copyright-->
            <div class="text-dark order-2 order-md-1">
                <span class="text-muted font-weight-bold mr-2">2021©</span>
                <a href="http://keenthemes.com/metronic" target="_blank" class="text-dark-75 text-hover-primary">Keenthemes</a>
            </div>
            <!--end::Copyright-->
            <!--begin::Nav-->
            <div class="nav nav-dark order-1 order-md-2">
                <a href="http://keenthemes.com/metronic" target="_blank" class="nav-link pr-3 pl-0">About</a>
                <a href="http://keenthemes.com/metronic" target="_blank" class="nav-link px-3">Team</a>
                <a href="http://keenthemes.com/metronic" target="_blank" class="nav-link pl-3 pr-0">Contact</a>
            </div>
            <!--end::Nav-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Footer-->
</div>
<!--end::Wrapper-->
@stop


@section('page_modals')
{{--Page modals--}}
@stop
@section('page_scripts')
<!--CUSTOM SCRIPTS-->

<script>
    "use strict";
    var varEl;
    // Class definition
    var KTLayoutChat = function() {
        // Private functions
        var _init = function(element) {
            var scrollEl = KTUtil.find(element, '.scroll');
            var cardBodyEl = KTUtil.find(element, '.card-body');
            var cardHeaderEl = KTUtil.find(element, '.card-header');
            var cardFooterEl = KTUtil.find(element, '.card-footer');
            varEl = element;
            if (!scrollEl) {
                return;
            }

            // initialize perfect scrollbar(see:  https://github.com/utatti/perfect-scrollbar)
            KTUtil.scrollInit(scrollEl, {
                windowScroll: false, // allow browser scroll when the scroll reaches the end of the side
                mobileNativeScroll: true, // enable native scroll for mobile
                desktopNativeScroll: false, // disable native scroll and use custom scroll for desktop
                resetHeightOnDestroy: true, // reset css height on scroll feature destroyed
                handleWindowResize: true, // recalculate hight on window resize
                rememberPosition: true, // remember scroll position in cookie
                height: function() { // calculate height
                    var height;

                    if (KTUtil.isBreakpointDown('lg')) { // Mobile mode
                        return KTUtil.hasAttr(scrollEl, 'data-mobile-height') ? parseInt(KTUtil.attr(scrollEl, 'data-mobile-height')) : 400;
                    } else if (KTUtil.isBreakpointUp('lg') && KTUtil.hasAttr(scrollEl, 'data-height')) { // Desktop Mode
                        return parseInt(KTUtil.attr(scrollEl, 'data-height'));
                    } else {
                        height = KTLayoutContent.getHeight();

                        if (scrollEl) {
                            height = height - parseInt(KTUtil.css(scrollEl, 'margin-top')) - parseInt(KTUtil.css(scrollEl, 'margin-bottom'));
                        }

                        if (cardHeaderEl) {
                            height = height - parseInt(KTUtil.css(cardHeaderEl, 'height'));
                            height = height - parseInt(KTUtil.css(cardHeaderEl, 'margin-top')) - parseInt(KTUtil.css(cardHeaderEl, 'margin-bottom'));
                        }

                        if (cardBodyEl) {
                            height = height - parseInt(KTUtil.css(cardBodyEl, 'padding-top')) - parseInt(KTUtil.css(cardBodyEl, 'padding-bottom'));
                        }

                        if (cardFooterEl) {
                            height = height - parseInt(KTUtil.css(cardFooterEl, 'height'));
                            height = height - parseInt(KTUtil.css(cardFooterEl, 'margin-top')) - parseInt(KTUtil.css(cardFooterEl, 'margin-bottom'));
                        }
                    }

                    // Remove additional space
                    height = height - 2;

                    return height;
                }
            });

            // attach events
            KTUtil.on(element, '.card-footer textarea', 'keydown', function(e) {
                if (e.keyCode == 13) {
                    _handleMessaging(element);
                    e.preventDefault();
                    return false;
                }
            });

            KTUtil.on(element, '.card-footer .chat-send', 'click', function(e) {
                _handleMessaging(element);
            });
        }

        var _handleMessaging = async function(element) {
            var messagesEl = KTUtil.find(element, '.messages');
            var scrollEl = KTUtil.find(element, '.scroll');
            var textarea = KTUtil.find(element, 'textarea');
            var fileInput = document.getElementById('file-input');
            var fileInput2 = document.getElementById('file-input2');
            var node = document.createElement("DIV");
            var uploadForm = document.getElementById("uploadForm")
            var textarea = document.getElementById("chat-text");
            KTUtil.addClass(node, 'd-flex flex-column mb-5 align-items-end');

if(fileInput.files[0]){
                  var file = fileInput.files[0];
        const formData = new FormData();
        formData.append('file', file);
        formData.append('type',0)
        formData.append('threadId',localStorage.getItem('threadId'))

        await $.ajax({
            url: route('communication_controller.actions'),
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                console.log('File uploaded successfully');
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('File upload failed');
            }
        });
        }else if(fileInput2.files[0]){
            var file = fileInput2.files[0];
        const formData = new FormData();
        formData.append('file', file);
        formData.append('type',0)
        formData.append('threadId',localStorage.getItem('threadId'))

        await $.ajax({
            url: route('communication_controller.actions'),
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                console.log('File uploaded successfully');
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('File upload failed');
            }
        });
        }
        else{
            if(textarea.value == "" || textarea.value == null) return;
            await $.ajax({
                type: 'get',
                url: route('communication_controller.actions'),
                data: {
                    action: "send_message",
                    message: textarea.value,
                    threadId: localStorage.getItem('threadId'),
                    type: 0
                },
                dataType: 'json',
                success: function(resp) {
                    console.log("success")
                },
                error: function(xhr, status, error) {
                    console.log(error)
                }
            });
        }
            uploadForm.reset();
            messagesEl.appendChild(node);
            textarea.value = '';

            scrollEl.scrollTop = parseInt(KTUtil.css(messagesEl, 'height'));

            var ps;
            if (ps = KTUtil.data(scrollEl).get('ps')) {
                ps.update();
            }

        }

        // Public methods
        return {
            init: function(id) {
                // Init modal chat example
                _init(KTUtil.getById(id));

                // Trigger click to show popup modal chat on page load
                setTimeout(function() {
                    if (!KTCookie.getCookie('kt_app_chat_shown')) {
                        var expires = new Date(new Date().getTime() + 60 * 60 * 1000); // expire in 60 minutes from now

                        KTCookie.setCookie('kt_app_chat_shown', 1, {
                            expires: expires
                        });

                        if (KTUtil.getById('kt_app_chat_launch_btn')) {
                            KTUtil.getById('kt_app_chat_launch_btn').click();
                        }
                    }
                }, 2000);
            },

            setup: function(element) {
                _init(element);
            }
        };
    }();

    // Webpack support
    if (typeof module !== 'undefined') {
        module.exports = KTLayoutChat;
    }
</script>

{{--PUSHER--}}
<script>
    var commChannel = pusher.subscribe('communication-channel');
    commChannel.bind('message-event' + localStorage.getItem('threadId'), function(data) {
        var messagesEl = KTUtil.find(varEl, '.messages');
        var scrollEl = KTUtil.find(varEl, '.scroll');
        var textarea = KTUtil.find(varEl, 'textarea');
        if (data.message == "") {
            return;
        }
        var node = document.createElement("DIV");
        
        if(data.type == 1){
            KTUtil.addClass(node, 'd-flex flex-column mb-5 align-items-start');
        var html = '';
        html += '<div class="d-flex align-items-center">';
        html += '	<div>';
        html += '		<span class="text-muted font-size-sm">2 Hours</span>';
        html += '		<a href="#" class="text-dark-75 text-hover-primary font-weight-bold font-size-h6">You</a>';
        html += '	</div>';
        html += '	<div class="symbol symbol-circle symbol-40 ml-3">';
        html += '		<img alt="Pic" src="assets/media/users/300_12.jpg"/>';
        html += '	</div>';
        html += '</div>';
        if(data.is_file == 0){
        html += '<div class="mt-2 rounded p-5 bg-light-primary text-dark-50 font-weight-bold font-size-lg text-right max-w-400px">' + data.message + '</div>';}
        else{
            html += '<a href="' + route("files.download",data.message) + '"><div class="mt-2 rounded p-5 bg-light-primary text-dark-50 font-weight-bold font-size-lg text-right max-w-400px">' + data.message + '</div></a>';
        }
        KTUtil.setHTML(node, html);
                messagesEl.appendChild(node);
                textarea.value = '';
                scrollEl.scrollTop = parseInt(KTUtil.css(messagesEl, 'height'));
    }else{
        KTUtil.addClass(node, 'd-flex flex-column mb-5 align-items-end');
        var html = '';
        html += '<div class="d-flex align-items-center">';
        html += '	<div>';
        html += '		<span class="text-muted font-size-sm">2 Hours</span>';
        html += '		<a href="#" class="text-dark-75 text-hover-primary font-weight-bold font-size-h6">You</a>';
        html += '	</div>';
        html += '	<div class="symbol symbol-circle symbol-40 ml-3">';
        html += '		<img alt="Pic" src="assets/media/users/300_12.jpg"/>';
        html += '	</div>';
        html += '</div>';
        if(data.is_file == 0){
        html += '<div class="mt-2 rounded p-5 bg-light-primary text-dark-50 font-weight-bold font-size-lg text-right max-w-400px">' + data.message + '</div>';}
        else{
            html += '<a href="' + route("files.download",data.message) + '"><div class="mt-2 rounded p-5 bg-light-primary text-dark-50 font-weight-bold font-size-lg text-right max-w-400px">' + data.message + '</div></a>';
        }
        KTUtil.setHTML(node, html);
                messagesEl.appendChild(node);
                textarea.value = '';
                scrollEl.scrollTop = parseInt(KTUtil.css(messagesEl, 'height'));
    }

                var ps;
                if (ps = KTUtil.data(scrollEl).get('ps')) {
                    ps.update();
                }
    });


    async function loadThread(threadId) {
        localStorage.setItem('threadId', threadId)
        await $.ajax({
            type: 'get',
            url: route('communication-center.load-thread'),
            data: {
                threadId: threadId
            },
            dataType: 'json',
            success: function(resp) {
                $('#kt_chat_content').empty().prepend(resp.htmlResponse);
                KTLayoutChat.setup(KTUtil.getById('kt_chat_content'));
            },
            error: function(xhr, status, error) {

            }
        });
        var messagesEl = KTUtil.find(varEl, '.messages');
        var scrollEl = KTUtil.find(varEl, '.scroll');
        scrollEl.scrollTop = parseInt(KTUtil.css(messagesEl, 'height'));
    }

    function receiveMessage() {
        $.ajax({
            type: 'post',
            url: route('communication_controller.actions'),
            data: {
                action: 'receive_message'
            },
            dataType: 'json',
            success: function(resp) {
                $('#main-inbox-section').prepend(resp.respHtml);
            },
            error: function(xhr, status, error) {

            }
        });
    }

    jQuery(document).ready(function() {
        $('body').on('click', '.thread-item', function() {
            $('#view-communication-section').css("visibility", "hidden");
            loadPage(true);
            setTimeout(function() {
                loadPage(false);
                $('#view-communication-section').css("visibility", "visible");
            }, 1000);
        });

        // for (i = 0; i < 5; i++) {
        //     (function(i) {
        //         setTimeout(function () {
        //             receiveMessage();
        //         }, Math.floor(Math.random() * 20) * 1000);
        //     })(i); //Pass current value into self-executing anonymous function
        // }

        // Init editor
        var options = {
            modules: {
                toolbar: {}
            },
            placeholder: 'Type message...',
            theme: 'snow'
        };
        var editor = new Quill('#kt_inbox_reply_editor', options);
    });
</script>
@stop