@extends('admin.layouts.master')

@section('page_title', __('admin.Add New :name', ['name' => __('admin.Archived Message')]))

@section('page_heading', __('admin.Add New :name', ['name' => __('admin.Archived Message')]))

@section('page_text', __('admin.Add New :name', ['name' => __('admin.eArchived Message')]))

@section('page_breadcrumb_icon') <i class="ki-duotone ki-home fs-3 text-gray-500 me-n1"></i> @endsection

@section('page_breadcrumb_item', 'Archived Message')

@section('page_breadcrumb_item2', 'Archived Message')

@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>
        .list-group-item:first-child {
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
        }

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

        .list-group-item {
            height: 65px;
            font-size: 13px
        }
        .bg-primary{
            background: #0d6efdbf !important;
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-flush">
                <div class="card-body h-100">
                    @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">
                                    <div class="card-header">
                                        <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
                                                @if (($msg->sender_id != Auth::user()->id && $msg->msg_status == 'read') || $msg->sender_id == Auth::user()->id)
                                                    <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>
                                                @endif
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8 col-xl-8 chat">
                                <div class="card chat-card border">
                                    <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">
                                        {!! 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"></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"></i></span>
                                            </button>

                                        </div>
                                        {!! Form::close() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </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">
        // CSRF Token
        var login_user = ;
        var page = 1;
        var id = $('.msg').data('id');
        $(document).ready(function() {

            loadMessages(id);
        })

        function loadMessages(id) {

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

                    bodyData = '<div id="data'+page+'"></div>';
                    $('.msg-id').val(id)
                    $.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') +'">';
                            bodyData = bodyData+''+val.message+'<span class="msg_time text-dark">' + 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-primary text-white active');
                    if (data.msg.msg_status == 'read') {
                        $('#msg' + id + '').removeClass('bg-success text-dark').addClass('bg-primary');
                    }
                    $('#msg' + id + '').addClass('bg-primary text-white active');
                    $('.msg-list').append(bodyData);
                    $( "#chat-box" ).scrollTop(9999);

                    if (data.replyer_msgs.data.length > 0) {
                        $('.count-unread' + id).empty();
                    }


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

                    $('.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: '/admin/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-dark">' + 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);
                $('.auto-load').show();
            }
            console.log(diff , scrollHeight)
        }
    </script>
@endsection