@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: 450px;
        }

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

        .user:hover {
            background: #eeeeee;
        }

        .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 {
            /*width: 18rem;*/
            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: #eeeeee;
        }

        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
        }

        .dropzone .dz-preview.lp-preview {
            width: 150px;
        }

        .dropzone.hzScroll {
            height: 50vh;
            overflow-x: auto;
            /* white-space: nowrap; */
        }

        /* this will set the toastr icon */
        #toast-container>.toast-custom {
            content: "\f00C";
        }

        /* this will set the toastr style */
        .toast-custom {
            background-color: rgb(255, 0, 0);
        }

    </style>
@endsection

@extends('layouts.Home.app')

@section('content')
    <div class="page-section">
        <div class="container">
            <div class="card border-success mb-3" style="max-width: 70rem;">
                <div class="card-header bg-transparent newStatus"><a href="{{ route('Konsultasi.DaftarKonsultasi') }}"><i
                            class="fa fa-arrow-left" aria-hidden="true"></i></a>
                    <b class="">{{ $admins[0]->name }}</b>
                    @if ($admins[0]->status == 2)
                        <span class="badge badge-primary prosesx">Dalam Peroses Pencarian</span>
                    @elseif($admins[0]->status == 3)
                        <span class="badge badge-warning prosesx">Solusi Ditemukan</span>
                    @endif
                </div>
                <div class="card-body text-success">
                    <div class="message-wrapper">
                        <ul class="messages">
                            @include('guest.Chat.message')
                        </ul>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    @if ($admins[0]->status != 4)
                        <div class="row boxchat">
                            <div class="col-lg-10">
                                <input type="hidden" value="{{ Crypt::encrypt($admins[0]->id) }}" class="approved">
                                <input type="hidden" value="{{ $admins[0]->id }}" class="approveds">
                                <input type="hidden" value="{{ $admins[0]->id_admins }}" class="admins">
                                <div class="input-text">
                                    {{-- <input type="text" name="message" > --}}

                                    <textarea class="form-control submit" style="min-width: 100%" name="message"
                                        id="chattext"></textarea>

                                </div>
                                {{-- <input type="text" name="message" class="submit" placeholder="Ketik pesan anda"> --}}
                            </div>
                            <div class="col-lg-2">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <button type="button" class="btn btn-default btn-block" data-toggle="modal"
                                            data-target="#modal-default" data-backdrop="static">
                                            <i class="fa fa-cloud-upload fa-2x" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                    <div class="col-lg-6">
                                        <button class="btn btn-block send"><i class="fa fa-paper-plane fa-2x"
                                                aria-hidden="true"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    @endif
                </div>
            </div>
        </div> <!-- .container -->
    </div> <!-- .page-section -->


    <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.file',$admins[0]->id)}}">
                        @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 -->

@endsection
@section('footer')
    <script>
        $(document).ready(function() {
            let approved = $('.approved').val();
            // let my_id = "{{ Auth::user()->id_user }}";
            var receiver_id = $('.admins').val();
            scrollToBottomFuncs();

            // 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('sip :', data);
                if (data.id_user_external == my_id && data.status == 'ProsesPencarian') {
                    $(".prosesx").remove();
                    $('.newStatus').append(
                        '<span class="badge badge-primary prosesx">Proses Pencarian</span>');
                } else if (data.id_user_external == my_id && data.status == 'solusi') {
                    $(".prosesx").remove();
                    $('.newStatus').append(
                        '<span class="badge badge-warning prosesx">Solusi Ditemukan</span>');
                } else if (data.id_user_external == my_id && data.status == 'AkhirChat') {
                    $(".prosesx").remove();
                    $(".boxchat").remove();
                } else if (my_id == data.id_user_external) {
                    // console.log('dari admin');
                    if (status == 'read') {
                        $.ajax({
                            url: '/Chat/' + approved
                        }).done(function(data) {
                            $('.messages').html(data);
                            scrollToBottomFuncs();
                        }).fail(function() {
                            console.log("Failed to load data!");
                        })

                    } else {
                        // console.log('ini apo');
                        $.ajax({
                            url: '/Chat/' + approved
                        }).done(function(data) {
                            $('.messages').html(data);
                            scrollToBottomFuncs();
                        }).fail(function() {
                            console.log("Failed to load data!");
                        })
                    }
                } else if (data.user_from == my_id) {
                    if (data.status == 'read') {
                        $.ajax({
                            url: '/Chat/' + approved
                        }).done(function(data) {
                            $('.messages').html(data);
                            scrollToBottomFuncs();
                        }).fail(function() {
                            console.log("Failed to load data!");
                        })
                    } else if (data.status == 'Chat') {
                        $.ajax({
                            url: '/Chat/' + approved
                        }).done(function(data) {
                            $('.messages').html(data);
                            scrollToBottomFuncs();
                        }).fail(function() {
                            console.log("Failed to load data!");
                        })
                    }
                }
            });


            $(document).on('keyup', '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) {

                } 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: "/Chat", // 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() {
                $('body').on('click', '.send', function(e) {
                    let message = $('.submit').val();
                    // console.log(message);
                    // console.log(approved);
                    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: "/Chat", // need to create this post route
                            data: datastr,
                            cache: false,
                            success: function(data) {},
                            error: function(jqXHR, status, err) {}
                        })
                    } else {
                        console.log('tidak blh kosong');
                    }
                });
            });

            $(".closed_modal").click(function() {
                $("#modal-default").modal('hide');
            });

        });



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

                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