@extends('web.layouts.master')
@section('title', trans('data.header_messages'))
@section('contents')

    <!-- start page title -->
    <section class="page-title">
        <div class="container">
            <h3 class="main-title">{{trans('data.header_messages')}}</h3>
        </div>
    </section>
    <!-- end page title -->
    @if($rooms->count() > 0)

        <!-- start brands  -->
        <section class="chat-block">
            <div class="container">
                <div class="main-content grey-bg">
                    <div class="title">
                        <h3 class="no-psedu wow fadeInDown">{{trans('data.header_messages')}}</h3>
                    </div>
                    <div class="all-chats white-bg wow fadeInUp">
                        <div class="row">
                            <div class="col-md-5 col-lg-4">
                                <div class="all-convs white-bg">
                                    <div class="form-group search-box">
                                        <span class="icon"><i class="fas fa-search"></i></span>
                                        <input id="search_user" type="search" name="user_name" class="form-control"
                                               placeholder="@lang('data.search_here')">
                                    </div>
                                    <ul class="list-unstyled convs-list" id="room_in">
                                        @include('web.messages.rooms')
                                    </ul>
                                </div>
                            </div>
                            <div class="col-md-7 col-lg-8">
                                <div class="chat-body">
                                    @include('web.messages.chat')
                                    <input type="hidden" value="
                                 @if(isset($rooms) && $rooms->count() > 0)
                                    {{$rooms[0]['id']}}
                                    @elseif(isset($room_in))
                                    {{$room_in->id}}
                                    @endif"
                                           name="room_message">
                                    <div class="typing-block">
                                        <div class="form-group">
                                            <input name="message_input" type="text" class="form-control bottom-border"
                                                   placeholder="@lang('data.enter_your_message')">
                                            <button onclick="send_message()" type="submit" class="btn send">
                                                <img src="{{asset('web/img/dynamic/icons/send.png')}}" alt="img">
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end brands  -->
    @else
        <section class="chat-block">
            <div class="container">
                <p>@lang('data.no_messages')</p>
            </div>
        </section>
    @endif
@endsection

@section('script')
    <script>

        // var objDiv = $(".chat-content");
        // var h = objDiv.get(0).scrollHeight;
        // objDiv.animate({scrollTop: h});
        // $(document).ready(function () {
        //     var room_id = $("input[name=room_message]").val();
        //     $(".room_" + room_id + "").css("background-color", "#f1f5f7");
        //     console.log(room_id);
        // });

        function send_message(id = null) {
            if (id) {
                var room_id = id;
            } else {
                var room_id = $("input[name=room_message]").val();
            }
            var message = $("input[name=message_input]").val();

            console.log(room_id, message);

            if (message != null) {
                $.ajax({
                    type: 'POST',
                    url: '{{route('send_message')}}',
                    data: {room_id: room_id, message: message},
                    success: function (data) {
                        console.log(data);
                        $("input[name=message_input]").val('')
                        $("#message-in").html(data.html_messages);
                        $("#room_in").html(data.html_rooms);
                        $("input[name=room_message]").val(room_id);
                        $(".room_" + room_id + "").css("background-color", "#f1f5f7");

                        var height = 0;
                        $('div ul').each(function(i, value){
                            height += parseInt($(this).height());
                        });

                        height += '';

                        $('div').animate({scrollTop: height});
                    }
                });
            }
        }

        // setInterval(function () {
        //     all_messages();
        //     // $('.chat-content').scrollTop($('.chat-content').prop("scrollHeight"));
        //     // updateScroll()
        // }, 4000);

        // function updateScroll(){
        //     var element = document.getElementById("message-in");
        //     element.scrollTop = element.scrollHeight;
        // }

        {{--function all_messages() {--}}
        {{--    var room_id = $("input[name=room_message]").val();--}}
        {{--    console.log(room_id);--}}

        {{--    $.ajax({--}}
        {{--        type: 'GET',--}}
        {{--        url: '{{route('all_messages')}}',--}}
        {{--        data: {room_id: room_id},--}}
        {{--        success: function (data) {--}}
        {{--            console.log(data.html);--}}
        {{--            $("#message-in").html('');--}}
        {{--            $("#message-in").html(data.html);--}}
        {{--            $("input[name=room_message]").val(room_id);--}}
        {{--            // $("html, body").animate({--}}
        {{--            //     scrollTop: $(--}}
        {{--            //         'html, body').get(0).scrollHeight--}}
        {{--            // }, 2000);--}}
        {{--            // $('.chat-content').scrollTop($('.chat-content').prop("scrollHeight"));--}}

        {{--        },--}}
        {{--    });--}}


        {{--}--}}




        $("#search_user").keyup(function (e) {
            var user_name = $("input[name=user_name]").val();
            console.log(user_name);
            $.ajax({
                type: 'POST',
                url: '{{route('search_rooms')}}',
                data: {user_name: user_name},
                success: function (data) {
                    console.log(data.html);
                    $("#room_in").html(data.html);
                }
            });
        });

    </script>
@endsection