@section('style')
    <style>
        /* width */
        ::-webkit-scrollbar {
            width: 7px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: #a7a7a7;
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #929292;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .user-wrapper,
        .message-wrapper {
            border: 1px solid #dddddd;
            overflow-y: auto;
        }

        .user-wrapper {
            height: 515px;
        }

        .user {
            cursor: pointer;
            padding: 5px 0;
            position: relative;
        }

        .user:hover {
            background: #00c67d;
        }

        .user:last-child {
            margin-bottom: 0;
        }

        .pending {
            position: absolute;
            left: 13px;
            top: 9px;
            background: #b600ff;
            margin: 0;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            line-height: 18px;
            padding-left: 5px;
            color: #ffffff;
            font-size: 12px;
        }

        .media-left {
            margin: 0 10px;
        }

        .media-left img {
            margin-left: 10px;
            width: 50px;
            border-radius: 64px;
        }

        .media-body p {
            margin: 6px 0;
        }

        .message-wrapper {
            padding: 10px;
            height: 390px;
            background: #ece9e9;
        }

        .messages .message {
            margin-bottom: 15px;
        }

        .messages .message:last-child {
            margin-bottom: 0;
        }

        .received,
        .sent {
            max-width: 30rem;
            padding: 3px 10px;
            border-radius: 10px;
        }

        .received {
            background: #ffffff;
            float: left;
            text-align: left;
        }

        .sent {
            background: #a4ffbfe0;
            float: right;
            text-align: right;
        }

        .message p {
            margin: 5px 0;
        }

        .date {
            color: #777777;
            font-size: 12px;
        }

        .active {
            background: #00c67d;
        }

        input[type=text] {
            width: 100%;
            padding: 12px 20px;
            margin: 15px 0 0 0;
            display: inline-block;
            border-radius: 4px;
            box-sizing: border-box;
            outline: none;
            border: 1px solid #cccccc;
        }

        input[type=text]:focus {
            border: 1px solid #aaaaaa;
        }

        p {
            color: black
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            min-width: 160px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

    </style>
@endsection
@extends('layouts.Home.app')
@section('content')
    <div class="page-section">
        <div class="container">
            <div class="content-wrapper">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <!-- Main content -->
                    <section class="content">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="user-wrapper">
                                        <div style="background: #fff">
                                            <input id="search" type="text" placeholder="Search user..." style="margin:0px">
                                        </div>
                                        <ul class="users">
                                            <section class="todo">
                                                @include('intermediator.Chats.listUsers')
                                            </section>

                                        </ul>
                                    </div>
                                </div>

                                <div class="col-md-8" id="messages">

                                </div>

                            </div>
                        </div>

                    </section>
                    <!-- /.content -->
            </div>

            <div class="modal fade" id="modal-default" style="z-index: 2000">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4>Upload File Kamu</h4>
                        </div>
                        <div class="modal-body">
                            <form id="dropzoneForm" class="dropzone" action="{{ route('chat.files') }}">
                                @csrf
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default pull-left closed_modal"
                                data-dismiss="modal">Batal</button>
                            <button type="button" class="btn btn-primary submit-all">Kirim</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->

            <!-- /.content-wrapper -->
            <div class="modal fade listUser" id="listUser" aria-hidden="true" style="z-index: 2000">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4>List User</h4>
                        </div>
                        <div class="modal-body">

                            <section class="listUserx">
                                @if ($listUser)
                                    @include('intermediator.Chats.listUserForward')
                                @endif
                            </section>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Batal</button>
                            <button type="button" class="btn btn-success submitForward">Kirim</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
            </div>
        </div>
    </div>
@endsection
@section('footer')
    <script>
        let receiver_id = '';
        let approved = '';
        let level = '';
        let search = '';
        $(document).ready(function() {
            // ajax setup form csrf token
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            Pusher.logToConsole = true;

            var pusher = new Pusher('cf41b2c9effee3d8c5c9', {
                cluster: 'ap1'
            });

            var channel = pusher.subscribe('my-channel-chat');
            channel.bind('my-chat', function(data) {
                let datastr = "receiver_id=" + receiver_id + "&approved_id=" + approved;
                if (my_id == data.user_from && approved == data.convandapp) {
                    // console.log('masuk k');
                    $.ajax({
                        url: '/messagesinters?' + datastr
                    }).done(function(data) {
                        $('.messages').html(data);
                        scrollToBottomFunc();
                    }).fail(function() {
                        console.log("Failed to load data!");
                    })
                } else if(my_id == data.user_from && approved == data.approveandconve && data.status == 'read'){
                    $.ajax({
                            url: '/messagesinters?' + datastr
                        }).done(function(data) {
                            $('.messages').html(data);
                            scrollToBottomFunc();
                        }).fail(function() {
                            console.log("Failed to load data!");
                        })
                }
                else if (my_id == data.id_user_external) {
                    if (approved == data.convandapp) {
                        // console.log('kesini dak ');
                        $.ajax({
                            url: '/messagesinters?' + datastr
                        }).done(function(data) {
                            $('.messages').html(data);
                            scrollToBottomFunc();
                        }).fail(function() {
                            console.log("Failed to load data!");
                        })
                    } else {
                        let url = '';
                        if (search != null && search != '') {

                        } else {
                            // console.log('xxx');
                            $.ajax({
                                url: '/chats'
                            }).done(function(data) {
                                $('.todo').html(data);
                            }).fail(function() {
                                console.log("Failed to load data!");
                            });
                        }
                    }

                }
            });

            //delay Search User
            function delay(callback, ms) {
                var timer = 0;
                return function() {
                    var context = this,
                        args = arguments;
                    clearTimeout(timer);
                    timer = setTimeout(function() {
                        callback.apply(context, args);
                    }, ms || 0);
                };
            }

            //Input Search
            $('#search').keyup(delay(function(e) {
                // console.log('masuk pak eko: ', this.value);
                search = this.value;
                $.ajax({
                    url: '/chats?search=' + this.value
                }).done(function(data) {
                    $('.todo').html(data);
                }).fail(function() {
                    console.log("Failed to load data!");
                });
            }, 500));

            //send Message By Enter
            $(document).on('keyup', '.input-text textarea', function(e) {
                let message = $('.submit').val();
                // check if enter key is pressed and message is not null also receiver is selected
                if (event.keyCode == 13 && event.shiftKey) {
                    // console.log(message + `</n>`);

                } else if (e.keyCode == 13 && message != '' && approved != '') {
                    $(this).val(''); // while pressed enter text box will be empty
                    let datastr = "approved=" + approved + "&message=" + message;
                    // console.log(datastr);
                    $.ajax({
                        type: "POST",
                        url: "/Chats/Send", // need to create this post route
                        data: datastr,
                        cache: false,
                        success: function(data) {},
                        error: function(jqXHR, status, err) {}
                    })
                } else {
                    // console.log('tidak blh kosong');
                }
            });

            $('body').on('click', '.send', function(e) {
                let message = $('.submit').val();
                if (message != '' && approved != '') {
                    $(this).val('');
                    // while pressed enter text box will be empty
                    let datastr = "approved=" + approved + "&message=" + message;
                    $("#chattext").val('');
                    $.ajax({
                        type: "POST",
                        url: "/Chats/Send", // need to create this post route
                        data: datastr,
                        cache: false,
                        success: function(data) {},
                        error: function(jqXHR, status, err) {}
                    })
                } else {
                    console.log('tidak blh kosong');
                }
            });

            $('body').on('click', '.user', function(e) {
                $('#messages').css("visibility", "visible");
                $('.user').removeClass('active');
                $(this).addClass('active');
                $(this).find('.pending').remove();
                approved = $(this).attr('id');
                receiver_id = $(this).children('.approved').val();


                let datastr = "receiver_id=" + receiver_id + "&approved_id=" + approved;

                $.ajax({
                    type: "get",
                    url: "/messageinter", // need to create this route
                    data: datastr,
                    cache: false,
                    success: function(data) {
                        $('#messages').html(data);
                        scrollToBottomFuncs();
                        $.ajax({
                            url: '/Notif/chats'
                        }).done(function(data) {
                            $('.badegs').html(data);
                        }).fail(function() {
                            console.log("Failed to load data!");
                        });
                    }
                });
            });

            $('body').on('click', '.forward', function(e) {
                // console.log();
                $('.chekforward').css("visibility", "inherit");
                $('.inputsFlex').remove();
                // $('.textinputs').append(' <div class="inputsFlex"> <div class="col-lg-10"> <div class="input-text"><textarea class="form-control submit" style="min-width: 100%" name="message"id="chattext"></textarea> </div> </div><div class="col-lg-2">  <div class="row"><div class="col-lg-6"><button class="btn btn-block" style="margin-top: 16px"><i class="fa fa-cloud-upload"aria-hidden="true"></i></button></div> <div class="col-lg-6"><button class="btn btn-block send" style="margin-top: 16px"><i class="fa fa-paper-plane" aria-hidden="true"></i> </button></div> </div></div> </div>')
                $('.textinputs').append(
                    '   <div class="inputsFlex"><div class="" style="display: flex;"><div style="flex: 6"><div class="input-text"><button class="btn btn-block btn-danger batalkirim" style="margin-top: 16px"><i class="fa fa-times" aria-hidden="true"></i></button></div></div><div style="flex: 6"><div class="input-text"><button type="button" class="btn btn-default btn-block btn-primary Forward" data-toggle="modal" data-target="#listUser" data-backdrop="static" style="margin-top: 16px"><i class="fa fa-share" aria-hidden="true"></i></button></div></div></div></div>'
                )

            });

            let listMessage = null;
            let listUser = null;

            $('body').on('click', '.chekforward', function(e) {
                values = [];
                $(".chekforward").each(function() {
                    if ($(this).is(":checked"))
                        values.push($(this).val());
                });
                listMessage = JSON.stringify(values);
            });


            $('body').on('click', '.Forward', function(e) {
                $('#my-modal').modal({
                    show: 'false'
                });
                $.ajax({
                    type: "get",
                    url: "/Chats/List/Forward/user", // need to create this route
                    cache: false,
                    success: function(data) {
                        $('#listUser').modal('show')
                        $('.listUserx').html(data);
                    }
                });

            });

            $('body').on('click', '.listuserForward', function(e) {
                valuseOfuser = [];
                $(".listuserForward").each(function() {
                    if ($(this).is(":checked"))
                        valuseOfuser.push([$(this).val(), $(this).attr('ids')]);
                });
                // console.log('Users', $(this).val());
                listUser = JSON.stringify(valuseOfuser);
            });


            $('body').on('click', '.submitForward', function(e) {
                $.ajax({
                    type: "post",
                    url: "/Forwards",
                    data: {
                        listUser: listUser,
                        listMessage: listMessage
                    }, // need to create this route
                    cache: false,
                    success: function(data) {
                        // console.log('dapatkan : ', $("#listUser").modal());
                        // $('.modal-backdrop').hide();
                        $("#listUser").modal('hide');
                        $('.chekforward').prop('checked', false); // Unchecks it
                        $('.listuserForward').prop('checked', false); // Unchecks it
                        $('.chekforward').css("visibility",
                            "collapse");
                        $('.inputsFlex').remove();
                        $('.textinputs').append(
                            '<div class="inputsFlex"><div class="" style="display: flex;"><div style="flex: 6"><div class="input-text"><textarea class="form-control textareaSize submit" style="max-width: 100%; resize: none;"name="message" id="chattext" placeholder="Ketik Pesan Ada Disini..."></textarea></div></div><div style="flex: 1"><button type="button" class="btn btn-default btn-block" data-toggle="modal" data-target="#modal-default"data-backdrop="static" style="margin-top: 5px"><i class="fa fa-cloud-upload fa-2x" aria-hidden="true"></i></button></div><div style="flex: 1"><button class="btn btn-default btn-block send" style="margin-top: 5px"><i class="fa fa-paper-plane fa-2x" aria-hidden="true"></i></button></div></div></div>'
                        )
                        values = [];
                        valuseOfuser = [];
                        listUser = null;
                        listMessage = null;
                    }
                });
            });

            $(function() {
                $('body').on('click', '.batalkirim', function(e) {
                    values = [];
                    valuseOfuser = [];
                    $('.chekforward').prop('checked', false); // Unchecks it
                    $('.listuserForward').prop('checked',
                        false); // Unchecks it
                    $('.chekforward').css("visibility", "collapse");
                    $('.inputsFlex').remove();
                    $('.textinputs').append(
                        '<div class="inputsFlex"><div class="" style="display: flex;"><div style="flex: 6"><div class="input-text"><textarea class="form-control textareaSize submit" style="max-width: 100%; resize: none;"name="message" id="chattext" placeholder="Ketik Pesan Ada Disini..."></textarea></div></div><div style="flex: 1"><button type="button" class="btn btn-default btn-block" data-toggle="modal" data-target="#modal-default"data-backdrop="static" style="margin-top: 5px"><i class="fa fa-cloud-upload fa-2x" aria-hidden="true"></i></button></div><div style="flex: 1"><button class="btn btn-default btn-block send" style="margin-top: 5px"><i class="fa fa-paper-plane fa-2x" aria-hidden="true"></i></button></div></div></div>'
                    )
                });
            });


        });

        function scrollToBottomFunc() {
            $('.message-wrapper').animate({
                scrollTop: $('.message-wrapper').get(0).scrollHeight
            }, 20);
        }

        function scrollToBottomFuncs() {
            $('.message-wrapper').animate({
                scrollTop: $('.message-wrapper').get(0).scrollHeight
            }, 2000);
        }
    </script>

    <script type="text/javascript">
        Dropzone.options.dropzoneForm = {
            // untuk biso nahan upload file sebelum di klik
            autoProcessQueue: false,
            // untuk biso uploads multiple file
            parallelUploads: 100,
            // untuk ngasih batasan file yang di upload
            maxFiles: 100,

            addedfile: function(file) {
                // console.log();
                if (file.size > 2000000) {
                    return;
                }
                if (this.element === this.previewsContainer) {
                    this.element.classList.add("dz-started");
                }

                if (this.previewsContainer && !this.options.disablePreviews) {
                    file.previewElement = Dropzone.createElement(
                        this.options.previewTemplate.trim()
                    );
                    file.previewTemplate = file.previewElement; // Backwards compatibility

                    for (let thumbnailElement of file.previewElement.querySelectorAll("[data-dz-thumbnail]")) {
                        // untuk atur size image ny
                        thumbnailElement.style.width = "120px";
                        thumbnailElement.style.height = "120px";

                        // untuk nentuin image berdasarkan tip mime type ny
                        switch (file.type) {
                            case "application/pdf":
                                thumbnailElement.src = "{{ asset('assets/fileicon/pdf.jpg') }}";
                                break;
                            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
                                thumbnailElement.src = "{{ asset('assets/fileicon/excel.jpg') }}";
                                break;
                            case "application/vnd.openxmlformats-officedocument.presentationml.presentation":
                                thumbnailElement.src = "{{ asset('assets/fileicon/ppt.jpg') }}";
                                break;
                            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
                                thumbnailElement.src = "{{ asset('assets/fileicon/doc.jpg') }}";
                                break;
                            default:
                        }
                    }

                    file.previewElement.classList.remove("dz-file-preview");
                    file.previewElement.classList.add("dz-image-preview")

                    this.previewsContainer.appendChild(file.previewElement);
                    for (var node of file.previewElement.querySelectorAll("[data-dz-name]")) {
                        node.textContent = file.name;
                    }
                    for (node of file.previewElement.querySelectorAll("[data-dz-size]")) {
                        node.innerHTML = this.filesize(file.size);
                    }


                    file._removeLink = Dropzone.createElement(
                        `<a class="dz-remove" href="javascript:undefined;" data-dz-remove>${this.options.dictRemoveFile}</a>`
                    );
                    file.previewElement.appendChild(file._removeLink);

                    let removeFileEvent = (e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        this.removeFile(file);
                    }

                    for (let removeLink of file.previewElement.querySelectorAll(
                            "[data-dz-remove]"
                        )) {
                        removeLink.addEventListener("click", removeFileEvent);
                    }
                }
            },
            init: function() {
                var submitButton = document.querySelector(".submit-all");
                var close_button = document.querySelector(".closed_modal")
                myDropzone = this;

                this.on("sending", function(file, xhr, formData) {
                    formData.append("Conversesion_id", approved);
                });

                submitButton.addEventListener('click', function() {
                    myDropzone.processQueue();
                });

                this.on("complete", function() {
                    if (this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0) {
                        var _this = this;
                        _this.removeAllFiles();
                    }
                });

                // myDropZone.on("", function(files, response) {
                //     $(".closed_modal").attr("disabled", false);
                //     // console.log(response);
                // });

                close_button.addEventListener('click', function() {
                    myDropzone.removeAllFiles();
                });

            }

        };
    </script>
@endsection