@extends('Frontend.layouts.master')
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">



    <div>
        <div class="chat-sec">
            <div class="chat-box container">
                <h2>Customer Support</h2>
                <div class="row chat-content">
                    <div class="col-md-12 user-chat chat-msgs aos-init aos-animate" data-aos="fade-right"
                        style="height:32rem; overflow:auto">
                        {{-- <div class="" style="min-height:auto">
                            <div class="sent container mb-4">
                                <div class="sentchat-icon">
                                    <div class="contact-details">
                                        <img
                                            src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png">
                                    </div>
                                </div>
                                <div class="sent-chat">
                                    <p>Hi shubham test</p>
                                    <div class="sent-time">
                                        <span>27/09/2023 23:53:24</span>
                                    </div>
                                </div>
                            </div>
                            <div class="send-right">
                                <div class="receive">
                                    <p>Hi Admin</p>
                                    <span
                                        style="float:right; font-weight: bold; font-size: 10px; text-align: center;">27/09/2023
                                        23:53:35</span>
                                </div>
                            </div>
                            <div class="send-right">
                                <div class="receive">
                                    <p>Hi Admin</p>
                                    <span
                                        style="float:right; font-weight: bold; font-size: 10px; text-align: center;">27/09/2023
                                        23:53:35</span>
                                </div>
                            </div>
                            <div class="sent container mb-4">
                                <div class="sentchat-icon">
                                    <div class="contact-details">
                                        <img
                                            src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png">
                                    </div>
                                </div>
                                <div class="sent-chat">
                                    <p>Hi shubham</p>
                                    <div class="sent-time">
                                        <span>27/09/2023 23:53:24</span>
                                    </div>
                                </div>
                            </div>
                            <div class="send-right">
                                <div class="receive">
                                    <p>Hi Admin</p>
                                    <span
                                        style="float:right; font-weight: bold; font-size: 10px; text-align: center;">27/09/2023
                                        23:53:35</span>
                                </div>
                            </div>
                            <div class="sent container mb-4">
                                <div class="sentchat-icon">
                                    <div class="contact-details">
                                        <img
                                            src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png">
                                    </div>
                                </div>
                                <div class="sent-chat">
                                    <p>Hi shubham</p>
                                    <div class="sent-time">
                                        <span>27/09/2023 23:53:24</span>
                                    </div>
                                </div>
                            </div>
                            <div class="send-right">
                                <div class="receive">
                                    <p>Hi Admin</p>
                                    <span
                                        style="float:right; font-weight: bold; font-size: 10px; text-align: center;">27/09/2023
                                        23:53:35</span>
                                </div>
                            </div>
                            <div class="sent container mb-4">
                                <div class="sentchat-icon">
                                    <div class="contact-details">
                                        <img
                                            src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png">
                                    </div>
                                </div>
                                <div class="sent-chat">
                                    <p>Hi shubham</p>
                                    <div class="sent-time">
                                        <span>27/09/2023 23:53:24</span>
                                    </div>
                                </div>
                            </div>
                            <div class="send-right">
                                <div class="receive">
                                    <p>Hi Admin</p>
                                    <span
                                        style="float:right; font-weight: bold; font-size: 10px; text-align: center;">27/09/2023
                                        23:53:35</span>
                                </div>
                            </div>
                        </div> --}}
                        <div class="spinner-border" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                    <div class="send-msg">
                        <form id="form1" enctype="multipart/form-data" method="POST">
                            <div class="input-group w-100 m-auto" id="text-group">
                                <input type="text" class="form-control w-50" name="message" id="message"
                                    aria-label="Text input with dropdown button">
                                <div class="dropdown">
                                    <button class="btn  dropdown-toggle" type="button" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        Attach
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" id="changeToFile" href="javascript:void(0)">File</a>
                                    </div>
                                </div>
                                <button type="submit" id="chat-send">Send</button>
                            </div>
                            <div class="input-group w-100 m-auto d-none" id="file-group">

                                <input type="file" class="form-control" id="file-send" name="user_file"
                                    aria-label="Text input with dropdown button">

                                <div class="input-group-append">

                                    <button class="btn btn-outline-secondary dropdown-toggle" type="button"
                                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Attach</button>

                                    <div class="dropdown-menu">

                                        <a class="dropdown-item" id="changeToText" href="javascript:void(0)">Text</a>

                                    </div>

                                </div>

                                <button type="submit" id="chat-send">Send</button>

                            </div>
                        </form>
                        {{-- <button class="d-none" id="down_btn">down</button> --}}
                        <i class="fa fa-chevron-down d-none" id="down_btn" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            var condition = false;
            $('#down_btn').click(function() {
                condition = true;
                // $('.chat-msgs').scroll(function() {
                $('.chat-msgs').scrollTop($(
                        '.chat-msgs')[0]
                    .scrollHeight);
                condition = false;
                $('#down_btn').addClass('d-none');
                // });
            });

            $(function() {

                getMessage();
                setTimeout(() => {
                    $('.chat-msgs').scrollTop($('.chat-msgs')[0].scrollHeight);
                }, 2000);

            })
            // var autoScrollDown = true;
            setInterval(function() {
                // console.log(autoScrollDown);
                // if (autoScrollDown) {
                getMessage();
                // }
                checkScroll();

                // if (condition) {
                //     $('.chat-msgs').scroll(function() {

                //         setTimeout(() => {
                //             $('.chat-msgs').scrollTop($('.chat-msgs')[0].scrollHeight);
                //         }, 2000);
                //     })
                // } else {
                //     alert('stop');
                // }
            }, 4000);

            $('#changeToText').click(function() {

                $('#message').val('');

                $('#text-group').toggleClass('d-none');

                $('#file-group').toggleClass('d-none');

            })

            $('#changeToFile').click(function() {

                $('#file-send').val(null);

                $('#text-group').toggleClass('d-none');

                $('#file-group').toggleClass('d-none');

            })

            $('#form1').submit(function(e) {

                e.preventDefault();

                var formData = new FormData(this);

                $.ajaxSetup({

                    headers: {

                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

                    }

                });

                $.ajax({

                    url: "{{ route('send-msg') }}",

                    type: "POST",

                    data: formData,

                    processData: false,

                    contentType: false,

                    dataType: "json",

                    success: function(result) {

                        if (result.status == 200) {

                            // $("#companyAddModal").modal("hide");

                            // toastr.success(result.message);

                            // setTimeout(() => {

                            //     location.reload();

                            // }, 1000);

                            getMessage();
                            $('#file-send').val(null);
                            $('#message').val('');
                            // checkScroll();
                            setTimeout(() => {
                                $('.chat-msgs').scrollTop($('.chat-msgs')[0]
                                    .scrollHeight);
                            }, 2000);
                            getMessage();
                            // var height = $('.chat-msgs').height();
                            // $('.sent').scrollTop(height);

                        }

                        if (result.status == 400) {

                            toastr.warning(result.message);

                        }
                        if (result.status == 403) {
                            if (result.message.message) {
                                toastr.warning(result.message.message[0]);
                            } else {
                                toastr.warning(result.message.user_file[0]);
                            }
                        }

                    },

                });

            })

            firstTime = true;

            function getMessage() {

                $.ajax({

                    url: "{{ route('get-chat') }}",

                    type: "GET",

                    success: function(result) {

                        $('.chat-msgs').html('');
                        $('.chat-msgs').append(result);
                        if (firstTime) {
                            $('.chat-msgs').children('div.first').addClass('d-none');
                            $('.chat-msgs').scrollTop($('.chat-msgs')[0].scrollHeight);
                            $('.chat-msgs').children('div.first').removeClass('d-none');
                        }
                        firstTime = false;
                        // if (autoScrollDown) {
                        //     $('.chat-msgs').scrollTop($('.chat-msgs')[0].scrollHeight);
                        // }
                        // checkScroll();
                        // setTimeout(() => {
                        // $('.chat-msgs').scrollTop($('.chat-msgs')[0].scrollHeight);
                        // }, 2000);

                        // $('#kt_drawer_chat_messenger_footer').removeClass('d-none');

                        if (result.status == 400) {

                            toastr.warning(result.message);

                        }

                    },

                });

            }

            function checkScroll() {
                // $(function() {
                var lastScrollTop = 0,
                    delta = 5;
                $('.chat-msgs').scroll(function() {
                    var nowScrollTop = $(this).scrollTop();
                    // alert(nowScrollTop);
                    if (Math.abs(lastScrollTop - nowScrollTop) >= delta) {
                        if (nowScrollTop > lastScrollTop) {
                            // ACTION ON
                            // SCROLLING DOWN 
                            // alert('down');
                            autoScrollDown = true;
                            if ($('.chat-msgs')[0].scrollHeight) {
                                $('#down_btn').addClass('d-none');
                            }
                        } else {
                            // alert('up');
                            // ACTION ON
                            // SCROLLING UP 
                            autoScrollDown = false;
                            if (condition) {
                                $('.chat-msgs').scroll(function() {
                                    setTimeout(() => {
                                        $('.chat-msgs').scrollTop($(
                                                '.chat-msgs')[0]
                                            .scrollHeight);
                                    }, 2000);
                                });
                                condition = false;
                            } else {
                                // alert('stop');
                                $('#down_btn').removeClass('d-none');
                            }
                        }
                        lastScrollTop = nowScrollTop;
                    }
                });
                // });
            }
        });
    </script>
@endsection