@extends('customer.layouts.app')
@section('title')
    All Messages
@endsection
@section('css')
    <link href="{{ asset('assets_admin/css/chat.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
        integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

    <style>
        h1 {
            color: #d98732;
        }

        .list-group-horizontal .list-group-item.active a {
            color: #d98732 !important;
        }

        .list-group-item.active {
            background: none !important;
            border-color: none !important;
        }

        .list-group-item {
            border: none;
            background: none;
        }

        .list-group .list-group-item a {
            color: rgb(10, 10, 10) !important;
        }

        .unread-msgs .list-group-item:first-child {
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
        }

        .unread-msgs .list-group-item:last-child {
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        .unread-msgs .list-group-item {
            height: 65px;
            font-size: 13px
        }

        .bg-warning {
            background: rgb(231, 134, 99) !important;
        }
    </style>
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card" style="background: black;">
                    <div class="card-body">
                        @if(count($msgs) > 0)
                            <div class="row justify-content-center h-100">
                                <div class="col-md-4 col-xl-4 chat ">
                                    <div class="card chat-card contacts_card border border-dark bg-dark bg-gradient">
                                        <div class="card-header" style="background: orangered">
                                            <div class="input-group">
                                                <input type="text" placeholder="Search..." name=""
                                                    class="form-control search">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text search_btn h-100"><i
                                                            class="fas fa-search"></i></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-body contacts_body" style="overflow: auto;">
                                            <ul class="contacts">
                                                @foreach ($msgs as $msg)
                                                    @php
                                                        $count_unread = \App\Models\MessageReply::where('message_id', $msg->id)
                                                            ->where('sender_id', '!=', Auth::user()->id)
                                                            ->where('msg_status', 'unread')
                                                            ->count();
                                                    @endphp
                                                    <li class="border-bottom  msg 
                                                        {{ $msg->msg_status == 'unread' || $count_unread > 0 ? ' bg-success ' : '' }}"
                                                        id="msg{{ $msg->id }}" data-id="{{ $msg->id }}"
                                                        onclick="loadMessages({{ $msg->id }})">
                                                        <div class="d-flex bd-highlight">
                                                            <div class="img_cont">
                                                                <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
                                                                    class="rounded-circle user_img">
                                                                <span class="online_icon"></span>
                                                            </div>
                                                            <div class="user_info">
                                                                <span>{{ $msg->resident->user->first_name . ' ' . $msg->resident->user->last_name }}</span>
                                                                <p>{{ $msg->created_at->format('d-m-Y, H:m') }}
                                                                    <br> {{ $msg->resident->apartment->name }}
                                                                </p>

                                                            </div>
                                                            <div class="w-100 d-flex justify-content-end align-items-center">
                                                                @if ($count_unread > 0)
                                                                    <span class="count-unread{{ $msg->id }}"><span
                                                                            class="badge badge-danger bg-danger"
                                                                            data-bs-toggle="tooltip" data-bs-placement="top"
                                                                            title="{{ $count_unread }} Unread Messages">{{ $count_unread }}</span></span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-8 col-xl-8 chat">
                                    <div class="card chat-card border border-dark bg-dark bg-gradient">
                                        <div class="card-header msg_head">
                                            <div class="d-flex bd-highlight">
                                                <div class="img_cont">
                                                    <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
                                                        class="rounded-circle user_img">
                                                    <span class="online_icon"></span>
                                                </div>
                                                <div class="ms-2 mt-3">
                                                    <p class="h6" id="user-name" style="line-height: 0"></p>
                                                    <span class="apartment-name" style="font-size: 12px"></span><br>
                                                    <p id="user-total-reply" class="badge bg-success"></p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="auto-load hidden  text-center">
                                            
                                        </div>
                                        <div class="card-body msg_card_body msg-list" style="height: 100vh;overflow: auto;"
                                            id="chat-box">


                                        </div>
                                        
                                        <div class="card-footer bg-secondary bg-gradient">
                                            {!! Form::open([
                                                'enctype' => 'multipart/form-data',
                                                'id' => 'msg-form',
                                                'route' => 'message-reply.store',
                                                'method' => 'POST',
                                            ]) !!}
                                            <div class="input-group">
                                                <input type="hidden" name="msg_status" value="read">
                                                <input type="hidden" name="msg_id" value="" class="msg-id">
                                                <label for="upload-file" class="input-group-append">
                                                    <span class="input-group-text attach_btn h-100"><i
                                                            class="fas fa-paperclip text-dark"></i></span>
                                                    <input type="file" class="hidden" id="upload-file" name="msg_file">
                                                </label>
                                                <input name="message" class="form-control type_msg required"
                                                    placeholder="Type your message...">
                                                <button type="submit" class="input-group-append btn btn-sm p-0 m-0">
                                                    <span class="input-group-text send_btn h-100 "><i
                                                            class="fas fa-location-arrow text-dark"></i></span>
                                                </button>

                                            </div>
                                            {!! Form::close() !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                            <p class=" text-center p-1" style="background: rgb(224, 102, 45)"><strong>--------------</strong></p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="{{asset('assets_admin/js/jquery.validate.min.js')}}"></script>
    <script src="{{asset('assets_admin/js/moment.min.js')}}"></script>
    <script type="text/javascript">
        var login_user = ;
        var page = 1;
        $(document).ready(function() {
            var id = $('.msg').data('id');
            console.log(id)
            loadMessages(id);
        })

        function loadMessages(id) {

            var id = id;
            this.page = 1;
            $.ajax({
                url: '/customer/customer-message/message-list?page='+page,
                type: 'get',
                data: {
                    id: id
                },
                success: function(data) {
                    console.log(data)
                    $('.mark-btn').empty();
                    $('.msg-list').empty();
                    var bodyData = '';

                    $('.msg-id').val(id)
                    bodyData = '<div id="data'+page+'"></div>';
                    $.each(data.replyer_msgs.data.reverse(), function(key, val) {
                        if (val.message) {

                            bodyData = bodyData + '<div class="d-flex  mb-4  ' + (login_user == val
                                .sender_id ? 'justify-content-end' : 'justify-content-start') + '">'
                            bodyData = bodyData +
                                '<div class="img_cont_msg"><img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"></div>';
                            bodyData = bodyData + '<div class="msg_cotainer  ' + (login_user == val
                                    .sender_id ? 'msg_cotainer_reciever' : 'msg_cotainer_sender') +
                                '">' + val.message + ' <span class="msg_time ">' + moment(val
                                    .created_at).format('LLL') + '</span></div></div>';

                        }
                        if (val.file) {
                            bodyData = bodyData + '<div class="d-flex  mb-4  ' + (login_user == val
                                    .sender_id ? 'justify-content-end' : 'justify-content-start') +
                                '">'
                            bodyData = bodyData +
                                '<div class="img_cont_msg"><img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"></div>';
                                bodyData = bodyData + '<div class="msg_cotainer  ' + (login_user == val.sender_id ? 'msg_cotainer_reciever' : 'msg_cotainer_sender') +'">';
                                if(val.file.split('.').pop() == 'xlsx' || val.file.split('.').pop() == 'xls'){
                                    bodyData = bodyData+'<p class="p-1 text-center  rounded bg-secondary"><i class="far fa-file-excel text-success fs-1"></i></p><p class="text-end"><a href="/admin/message-reply/download/'+val.file+'"><i class="fa fa-download text-white"></i></a></p>';
                                }
                                else if(val.file.split('.').pop() == 'pdf'){
                                    bodyData = bodyData+'<p class="p-1 text-center  rounded bg-secondary"><i class="far fa-file-pdf text-danger fs-1"></i></p><p class="text-end"><a href="/admin/message-reply/download/'+val.file+'"><i class="fa fa-download text-white"></i></a></p>';
                                }else if(val.file.split('.').pop() == 'docx'){
                                    bodyData = bodyData+'<p class="p-1 text-center  rounded bg-secondary"><i class="far fa-file-word text-primary fs-1"></i></p><p class="text-end"><a href="/admin/message-reply/download/'+val.file+'"><i class="fa fa-download text-white"></i></a></p>';
                                }else{
                                    bodyData = bodyData+'<img src="/MessageFiles/'+val.file+'" height="100" width="100"><p class="text-end"><a href="/admin/message-reply/download/'+val.file+'"><i class="fa fa-download text-white"></i></a></p>';
                                }
                                bodyData = bodyData+'<span class="msg_time text-dark">' + moment(val.created_at).format('LLL') + '</span></div></div>';

                            }
                    })
                    $('.msg').removeClass('bg-warning white active');
                    if (data.msg.msg_status == 'read') {
                        $('#msg' + id + '').removeClass('bg-success text-dark').addClass('bg-warning');
                    }
                    $('#msg' + id + '').addClass('bg-warning text-white active');
                    $('.msg-list').append(bodyData);
                    $("#chat-box").scrollTop(9999);
                    if (data.replyer_msgs.data.length > 0) {
                        $('.count-unread' + id + '').empty();
                    }

                    $('#user-name').empty();
                    $('#user-name').append(data.resident.user.first_name + ' ' + data.resident.user.last_name +'')


                    $('.apartment-name').empty();
                    $('.apartment-name').append(data.resident.apartment.name);

                    $('.auto-load').empty()
                    $('.auto-load').append('<img src="/assets_admin/images/loader.gif" height="50"width="50">')
                    $('.mark-btn').append('<a href="/admin/message-reply/delete/' + data.msg.id +
                        '" class="btn btn-danger text-white mark-read"><i class="fa fa-trash"></i></a>');
                }
            });
        }

        function loadMore(page) {

            var id = $('.msg.active').attr('data-id');
            $.ajax({
                url: '/customer/customer-message/message-list?page='+page,
                type: 'get',
                data: {
                    id: id
                },
                beforeSend: function() {
                    $('.auto-load').show();
                }
            }).done(function(data) {
                console.log(data);
                bodyData = '';
                if (data.replyer_msgs.data.length == 0) {
                    $('.auto-load').html(" ")
                } else {
                    $('.auto-load').hide();
                    bodyData = '<div id="data'+page+'"></div>';
                    $.each(data.replyer_msgs.data.reverse(), function(key, val) {
                        if (val.message) {

                            bodyData =bodyData+'<div class="d-flex  mb-4  ' + (login_user == val
                                    .sender_id ? 'justify-content-end' : 'justify-content-start') +
                                '">'
                            bodyData = bodyData +
                                '<div class="img_cont_msg"><img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"></div>';
                            bodyData = bodyData + '<div class="msg_cotainer  ' + (login_user == val
                                    .sender_id ? 'msg_cotainer_reciever' : 'msg_cotainer_sender') +
                                '">' + val.message + ' <span class="msg_time text-white">' + moment(
                                    val.created_at).format('LLL') + '</span></div></div>';

                        }
                        if (val.file) {
                            bodyData = bodyData + '<div class="d-flex  mb-4  ' + (login_user == val
                                    .sender_id ? 'justify-content-end' : 'justify-content-start') +
                                '">'
                            bodyData = bodyData +
                                '<div class="img_cont_msg"><img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"></div>';
                                bodyData = bodyData + '<div class="msg_cotainer  ' + (login_user == val.sender_id ? 'msg_cotainer_reciever' : 'msg_cotainer_sender') +'">';
                                if(val.file.split('.').pop() == 'xlsx' || val.file.split('.').pop() == 'xls'){
                                    bodyData = bodyData+'<p class="p-1 text-center  rounded bg-secondary"><i class="far fa-file-excel text-success fs-1"></i></p><p class="text-end"><a href="/admin/message-reply/download/'+val.file+'"><i class="fa fa-download text-white"></i></a></p>';
                                }
                                else if(val.file.split('.').pop() == 'pdf'){
                                    bodyData = bodyData+'<p class="p-1 text-center  rounded bg-secondary"><i class="far fa-file-pdf text-danger fs-1"></i></p><p class="text-end"><a href="/admin/message-reply/download/'+val.file+'"><i class="fa fa-download text-white"></i></a></p>';
                                }else if(val.file.split('.').pop() == 'docx'){
                                    bodyData = bodyData+'<p class="p-1 text-center  rounded bg-secondary"><i class="far fa-file-word text-primary fs-1"></i></p><p class="text-end"><a href="/admin/message-reply/download/'+val.file+'"><i class="fa fa-download text-white"></i></a></p>';
                                }else{
                                    bodyData = bodyData+'<img src="/MessageFiles/'+val.file+'" height="100" width="100"><p class="text-end"><a href="/admin/message-reply/download/'+val.file+'"><i class="fa fa-download text-white"></i></a></p>';
                                }
                                bodyData = bodyData+'<span class="msg_time text-dark">' + moment(val.created_at).format('LLL') + '</span></div></div>';

                            }
                    })
                    var p = page-1;
                    console.log(p)
                    $('#data'+p).append(bodyData);
                    $( "#chat-box" ).scrollTop(100);
                }

            })
        }
        var myDiv = document.getElementById('chat-box');
        myDiv.addEventListener('scroll', myPageScroll);

        function myPageScroll() {
            var scrollTop = myDiv.scrollTop;
            var scrollHeight = myDiv.scrollHeight;
            var diff = scrollHeight - scrollTop;
            var height = myDiv.clientHeight;
            if (scrollHeight == diff) {
                page++;
                loadMore(page);
            }
            console.log(scrollHeight, scrollTop, diff, height);
        }
    </script>
@endsection