@extends('backend.layouts.master')
@section('content')
    <style>
        #list-user .fa:before{
            font-size: 18px;
        }
        #list-user .user-now .fa:before{
            color: #b7aeae;
            cursor: not-allowed;
        }
        body {
            overflow-y: hidden;
        }
    </style>
    {{--    <div class="content-body">--}}
    {{--        <div class="app-content content" style="margin: 0;">--}}
    <div class="sidebar-left sidebar-fixed ps" style="z-index: 1;">
        <div class="sidebar">
            <div class="sidebar-content card">
                <div class="card-body chat-fixed-search">
                    <fieldset class="form-group position-relative has-icon-left m-0">
                        <input type="text" class="form-control" id="iconLeft4" placeholder="Tìm kiếm khách hàng">
                        <div class="form-control-position">
                            <i class="ft-search"></i>
                        </div>
                    </fieldset>
                </div>
                <div id="users-list" class="list-group position-relative">
                    <div class="users-list-padding media-list" style="padding-bottom: 11px;">
                        @if(count($data))
                            @foreach($data as $key => $val)
                                <a href="javascript:void(0)" class="media border-0 item-chat" data-id="{{@$val->id}}">
                                    <div class="media-left pr-1">
                                <span class="avatar avatar-md avatar-online"><img class="media-object rounded-circle" src="{{asset(@$val->customer->avatar)}}" alt="Generic placeholder image">
                                <i></i>
                                </span>
                                    </div>
                                    <div class="media-body w-100">
                                        <h6 class="list-group-item-heading">{{@$val->name}} {{($val->time)? '('.$val->time.' giờ)' : ''}}<span class="font-small-3 float-right primary">{{date(@$val->updated_at)}}</span></h6>
                                        <p class="list-group-item-text text-muted mb-0"><i class="ft-check primary font-small-2"></i> {{\Illuminate\Support\Str::words(@end(@json_decode(@$val->messages, true))['m'], 8)}} <span class="float-right primary"><i class="font-medium-1 icon-pin blue-grey lighten-3"></i></span></p>
                                    </div>
                                </a>
                            @endforeach
                        @endif
    {{--                        <a href="#" class="media border-0">--}}
    {{--                            <div class="media-left pr-1">--}}
    {{--                                <span class="avatar avatar-md avatar-online"><img class="media-object rounded-circle" src="http://app-tamly.vin/images/introduce/1566544285-11057103_789355244486723_916165611_n.png" alt="Generic placeholder image">--}}
    {{--                                <i></i>--}}
    {{--                                </span>--}}
    {{--                            </div>--}}
    {{--                            <div class="media-body w-100">--}}
    {{--                                <h6 class="list-group-item-heading">Elizabeth Elliott <span class="font-small-3 float-right primary">4:14 AM</span></h6>--}}
    {{--                                <p class="list-group-item-text text-muted mb-0"><i class="ft-check primary font-small-2"></i> Okay <span class="float-right primary"><i class="font-medium-1 icon-pin blue-grey lighten-3"></i></span></p>--}}
    {{--                            </div>--}}
    {{--                        </a>--}}
                    </div>
                </div>
            </div>
        </div>
        <div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></div>
    <div class="content-right">
        <div class="content-wrapper">
            <div class="content-header row">
            </div>
            <div class="content-body"><div class="content-overlay"></div>
                <section class="chat-app-window" style="height: calc(100% - 80px);">
                    <div class="sidebar-toggle d-block d-lg-none"><i class="ft-menu font-large-1"></i></div>
                    <div class="badge badge-secondary mb-1">Lịch sửa tư vấn</div>
                    <div class="chats">
                        <div class="chats full-content">
                            Cuộc trò chuyện sẽ được hiển thị tại đây, vui lòng chọn khách hàng bạn muốn tư vấn
                        </div>
                    </div>
                </section>
                <section class="chat-app-form" style="padding: 20px 20px;">
                    <form class="chat-app-input d-flex" onsubmit="enter_chat();" action="javascript:void(0);">
                        <fieldset class="form-group position-relative has-icon-left col-11 m-0">
                            <div class="form-control-position">
                                <i class="icon-emoticon-smile"></i>
                            </div>
                            <input type="text" class="form-control message" id="iconLeft4-1" placeholder="Type your message">
                            <div class="form-control-position control-position-right">
                                <i class="ft-image"></i>
                            </div>
                        </fieldset>
                        <fieldset class="form-group position-relative has-icon-left col-1 m-0">
                            <button type="button" class="btn btn-primary send" onclick="enter_chat();"><i class="fa fa-paper-plane-o d-lg-none"></i> <span class="d-none d-lg-block">Send</span></button>
                        </fieldset>
                    </form>
                </section>
            </div>
        </div>
    </div>
    {{--        </div>--}}
    {{--    </div>--}}
    <script type="text/javascript">
        $(document).ready(function(){
            $("body").addClass('chat-application');
            $("body").delegate(".delete-item", "click", function () {
                let elt = $(this).parents('tr');
                var data_id = $(this).data('id');
                swal({
                    title: 'Bạn có chắc chắn xóa mục này?',
                    type: 'error',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    showCloseButton: true,
                }).then(function() {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: { id: data_id },
                        url: "/admin/customers/"+data_id,
                        method: 'delete',
                        success: function() {
                            swal({
                                title: 'Đã xóa thành công!',
                                type: 'success'
                            })}
                    });
                    elt.remove();
                }, function (dismiss) {});
            });
            $('.item-chat').on('click', function () {
                let el = $(this);
                let data_id = $(this).data('id');
                $(".item-chat").each(function() {
                    $(".item-chat").removeClass("active");
                    el.addClass( "active" );
                });
                $.ajax({
                    url : "{{route('data-content-chat')}}",
                    data: {
                        id: data_id,
                    },
                    type: 'GET',
                    beforeSend: function () {
                        $('.full-content').html('<img style="height: 200px;margin: 0 auto;display: block;margin-top: 30px;" src="https://cdn.dribbble.com/users/178981/screenshots/2245419/xxxx.gif" />');
                    },
                    success: function(data){
                        // console.log($data);
                        if (data) {
                            $('#full-content img').fadeOut(2000);
                            // $('.full-content').html($data).fadeIn('fade');
                            var html = '';
                            // console.log(data);
                            $.each(data, function( index, value ) {
                                html += `<div class="chat `+ (index % 2 == 0 ?'chat-left' : '') +`">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="">
                                           <img src="http://app-tamly.vin/images/introduce/1566544285-11057103_789355244486723_916165611_n.png" alt="avatar">
                                       </a>
                                   </div>
                                   <div class="chat-body">
                                       <div class="chat-content">
                                           <p>`+value.m+`</p>
                                       </div>
                                  </div>
                               </div>`;
                            });
                            // console.log(html);
                            $('.full-content.chats').html(html).fadeIn('fade');
                        } else {
                            $('.full-content.chats').html("Chưa có nội dung tư vấn").fadeIn('fade');
                        }
                    }
                })
            })
        });
    </script>
@endsection