@section('style')
    <style>
        .swal2-container{
            z-index: 1000000;
        }
        /* 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: 40rem;
            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.admin.app')

@section('content')


    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <section class="content-header">
                <h1>
                    List Chat
                    {{-- <small>Control panel</small> --}}
                </h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-comments-o" aria-hidden="true"></i>Chat</a></li>
                </ol>
            </section>

            <!-- 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('admins.Chatting.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: 1050">
        <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('chats.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>

    <!-- /.content-wrapper -->
    <div class="modal fade listUser" id="listUser" aria-hidden="true">
        <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('admins.Chatting.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>



@endsection
@section('footer')

    <script>
        let receiver_id = '';
        let approved = '';
        let level = '';
        let my_id = "{{ Auth::user()->id_admins }}";
        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) {
                console.log('lihat ini :', data);
                let datastr = "receiver_id=" + receiver_id + "&approved_id=" + approved + "&level=" + level;
                if (my_id == data.user_from && approved == data.convandapp) {
                    if (data.status == 'ProsesPencarian') {
                        $(".spanbadge").remove();
                        $(".proses").remove();
                        $(".akhir").remove();
                        $('.menux').append(
                            '<a class="dropdown-item proses">Solusi Ditemukan</a> <a class="btn btn-danger akhir" href="javascript:void(0)" id="endChat">Akhiri Chat</a>'
                        )
                        $('.newStatus').append(
                            '<span class="label label-info spanbadge">Dalam Proses Pencarian</span>'
                        );
                    } else if (data.status == 'solusi') {
                        $(".proses").remove();
                        $(".spanbadge").remove();
                        $(".akhir").remove();
                        $('.menux').append(
                            ' <a class="btn btn-danger akhir" href="javascript:void(0)" id="endChat">Akhiri Chat</a>'
                        );
                        $('.newStatus').append(
                            '<span class="label label-warning spanbadge">Solusi  Ditemukan</span>'
                        );
                    } else if (data.status == 'read') {
                        console.log('ccc');

                        $.ajax({
                            url: '/messages?' + datastr
                        }).done(function(data) {
                            setTimeout(function() {
                                $('.messages').html(data);
                                scrollToBottomFunc();
                            }, 1000);
                        }).fail(function() {
                            console.log("Failed to load data!");
                        })
                    } else if (data.status == 'AkhirChat') {
                        $('#messages').css("visibility", "hidden");
                        // console.log('okey nian');
                        $.ajax({
                            url: '/Chat'
                        }).done(function(data) {
                            $('.todo').html(data);
                        }).fail(function() {
                            console.log("Failed to load data!");
                        });
                    } else {
                        // console.log('wwawxxsa');

                        $.ajax({
                            url: '/messages?' + datastr
                        }).done(function(data) {
                            $('.messages').html(data);
                            scrollToBottomFuncx();
                        }).fail(function() {
                            console.log("Failed to load data!");
                        })
                    }
                } else if (my_id == data.user_from && data.status == 'AkhirChat') {
                    // console.log('masuk pak eko');
                    $('#messages').css("visibility", "hidden");
                    $.ajax({
                        url: '/Chat'
                    }).done(function(data) {
                        $('.todo').html(data);
                    }).fail(function() {
                        console.log("Failed to load data!");
                    });
                } else if (my_id == data.user_to || my_id == data.id_user_external) {
                    console.log('aku disini sekarang ');
                    if (approved == data.convandapp) {
                        // console.log('api ni kb ? ', data.convandapp);
                        $.ajax({
                            url: '/messages?' + datastr
                        }).done(function(data) {
                            setTimeout(function() {
                                $('.messages').html(data);
                                scrollToBottomFunc();
                            }, 1000);
                        }).fail(function() {
                            console.log("Failed to load data!");
                        })
                    } else {
                        let url = '';
                        if (search != null && search != '') {

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


            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);
                };
            }

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

            $(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 + '&user_level=' +
                        level;
                    console.log(datastr);
                    $.ajax({
                        type: "POST",
                        url: "/Chat/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', '#endChat', function(e) {
                $('#EndChat').modal('show');
            });

            $('body').on('click', '.submit-endchat', function(e) {
                var frm = $('#contactForm1');

                // console.log('wew');
                $(".submit-endchat").attr("disabled", true);
                e.preventDefault();
                let datainput = frm.serialize() + "&receiver_id=" + receiver_id + "&approved_id=" +
                    approved
                $.ajax({
                    type: frm.attr('method'),
                    url: frm.attr('action'),
                    data: datainput,
                    success: function(data) {
                        Swal.fire(
                            'Berhasil',
                            '',
                            'success'
                        ).then(
                            function() {
                                $('.modal').each(
                                    function() {
                                        $(this).modal('hide');
                                    })
                                $(".submit-endchat").attr("disabled", false);
                            }
                        )
                    },
                    error: function(data) {
                        // console.log(data);
                        Swal.fire(
                            'Pilih Proses Terlebih Dahulu',
                            '',
                            'error'
                        )
                        $(".submit-endchat").attr("disabled", false);
                    },
                });

            });

            $(function() {
                $('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 +
                            '&user_level=' + level;
                        $("#chattext").val('');
                        $.ajax({
                            type: "POST",
                            url: "/Chat/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');
                    }
                });
            });

        });

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

        function scrollToBottomFuncx() {
            $('.message-wrapper').animate({
                scrollTop: $('.message-wrapper').get(0).scrollHeight
            }, 50, 'easeInOutExpo');
        }

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


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

                $.ajax({
                    type: "get",
                    url: "/message", // need to create this route
                    data: datastr,
                    cache: false,
                    success: function(data) {
                        $('#messages').html(data);
                        scrollToBottomFunc();
                        $.ajax({
                            url: '/NotifChat'
                        }).done(function(data) {
                            $('.notifchat').html(data);
                        }).fail(function() {
                            console.log("Failed to load data x!");
                        });
                    }
                });
            });

            $('body').on('click', '.proses', function(e) {
                let datastr = "receiver_id=" + receiver_id + "&approved_id=" + approved;

                $.ajax({
                    type: "get",
                    url: "/Proses/Pencarian",
                    data: datastr,
                    cache: false, // need to create this route
                    success: function(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 class="btn btn-block btn-primary Forward" 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) {
                $.ajax({
                    type: "get",
                    url: "/Chat/List/Forward/user", // need to create this route
                    cache: false,
                    success: function(data) {
                        // console.log('masuk');
                        $('#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: "/Forward",
                    data: {
                        listUser: listUser,
                        listMessage: listMessage
                    }, // need to create this route
                    cache: false,
                    success: function(data) {
                        $('#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="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>'
                        )
                        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>'
                    )
                });
            });


        });
    </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) {
                   Swal.fire({
                      icon: 'error',
                      title: 'Oops...',
                      text: 'File Yang Anda Masukan Lebih Dari 2MB!',
                    });
                    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);
                    formData.append("level_users", level);
                });

                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>
@stop