<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
          content="Cuba admin is super flexible, powerful, clean &amp; modern responsive bootstrap 5 admin template with unlimited possibilities.">
    <meta name="keywords"
          content="admin template, Cuba admin template, dashboard template, flat admin template, responsive admin template, web app">
    <meta name="author" content="pixelstrap">
    <link rel="icon" href="/RTL/superAdmin/images/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="/RTL/superAdmin/images/favicon.png" type="image/x-icon">
    <title>آنسه تیم</title>
    <!-- Google font-->

    <script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i,700,700i&amp;display=swap"
          rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900&amp;display=swap"
          rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/font-awesome.css">
    <!-- ico-font-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/icofont.css">
    <!-- Themify icon-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/themify.css">
    <!-- Flag icon-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/flag-icon.css">
    <!-- Feather icon-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/feather-icon.css">
    <!-- Plugins css start-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/scrollbar.css">
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/prism.css">
    <!-- Plugins css Ends-->
    <!-- Bootstrap css-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/bootstrap.css">
    <!-- App css-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/style.css">
    <link id="color" rel="stylesheet" href="/RTL/superAdmin/css/color-1.css" media="screen">
    <!-- Responsive css-->
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/responsive.css">
    <link rel="stylesheet" type="text/css" href="/RTL/superAdmin/css/vendors/select2.css">
</head>
<body class="rtl">
<!-- tap on top starts-->
<div class="tap-top"><i data-feather="chevrons-up"></i></div>
<!-- tap on tap ends-->
<!-- page-wrapper Start-->
<div class="page-wrapper compact-wrapper" id="pageWrapper">
    <!-- Page Header Start-->

    <%- include('../../../partials/header') %>

    <!-- Page Sidebar Ends-->
    <div class="page-body">
        <div class="container-fluid">
            <div class="page-title">
                <div class="row">
                    <div class="col-12">
                        <ol class="breadcrumb" style="-webkit-box-pack: start!important;">
                            <li class="breadcrumb-item"><a href="/<%= lan.ShortName %>/dashboard"><i
                                            data-feather="home"></i></a></li>
                            <li class="breadcrumb-item"> مکالمات</li>
                            <li class="breadcrumb-item"> مکالمات</li>
                            <li class="breadcrumb-item active">لیست  مکالمات</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>



        <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="row">
                <div class="col call-chat-sidebar col-sm-12">
                    <div class="card">
                        <div class="card-body chat-body">
                            <div class="chat-box">
                                <!-- Chat left side Start-->
                                <div class="chat-left-aside">
                                    <div class="media"><img class="rounded-circle user-image" src="../assets/images/user/12.png" alt="">
                                        <div class="about">
                                            <div class="name f-w-600"><%= user.Name%></div>
                                            <div class="status"><%= user.Status%></div>
                                        </div>
                                    </div>
                                    <div class="people-list" id="people-list">
                                        <div class="search">
                                            <form class="theme-form">
                                                <div class="mb-3">
                                                    <input class="form-control" type="text" placeholder="Search"><i class="fa fa-search"></i>
                                                </div>
                                            </form>
                                        </div>
                                        <ul class="list">
                                            <% conversations.forEach(function(item) { %>
                                                <% if(item.ModelType == "Group") {%>
                                                <li class="clearfix" onclick="getMessage('<%=item.Reference%>','<%=item.ModelType%>')"><img class="rounded-circle user-image" src="../assets/images/user/1.jpg" alt="">
                                                    <div class="status-circle away"></div>
                                                    <div class="about" id="<%=item._id%>">
                                                        <div class="name"  ><%= item.listGroup[0].Name %></div>
                                                        <div class="status">...</div>
                                                    </div>
                                                </li>
                                                <% } if(item.ModelType == "Channel"){ %>
                                                <li class="clearfix" onclick="getMessage('<%=item.Reference%>','<%=item.ModelType%>')"><img class="rounded-circle user-image" src="../assets/images/user/1.jpg" alt="">
                                                    <div class="status-circle away"></div>
                                                    <div class="about" id="<%=item._id%>">
                                                        <div class="name"  ><%= item.listChannel[0].Name %></div>
                                                        <div class="status">...</div>
                                                    </div>
                                                </li>
                                                <% }if(item.ModelType == "Conversation"){%>
                                                <li class="clearfix" onclick="getMessage('<%=item.Reference%>','<%=item.ModelType%>')"><img class="rounded-circle user-image" src="../assets/images/user/1.jpg" alt="">
                                                    <div class="status-circle away"></div>
                                                    <div class="about" id="<%=item._id%>">
                                                        <div class="name"  ><%= item.listConversation[0].Name %></div>
                                                        <div class="status">...</div>
                                                    </div>
                                                </li>
                                            <% }  });%>

                                        </ul>
                                    </div>
                                </div>
                                <!-- Chat left side Ends-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col call-chat-body">
                    <div class="card">
                        <div class="card-body p-0">
                            <div class="row chat-box">
                                <!-- Chat right side start-->
                                <div class="col pe-0 chat-right-aside">
                                    <!-- chat start-->
                                    <div class="chat">
                                        <!-- chat-header start-->
                                        <div class="chat-header clearfix"><img class="rounded-circle" src="../assets/images/user/8.jpg" alt="">
                                            <div class="about">
                                                <div class="name">Kori Thomas  <span class="font-primary f-12">Typing...</span></div>
                                                <div class="status">Last Seen 3:55 PM</div>
                                            </div>
                                            <ul class="list-inline float-start float-sm-end chat-menu-icons">
                                                <li class="list-inline-item"><a href="#"><i class="icon-search"></i></a></li>
                                                <li class="list-inline-item"><a href="#"><i class="icon-clip"></i></a></li>
                                                <li class="list-inline-item"><a href="#"><i class="icon-headphone-alt"></i></a></li>
                                                <li class="list-inline-item"><a href="#"><i class="icon-video-camera"></i></a></li>
                                                <li class="list-inline-item toogle-bar"><a href="#"><i class="icon-menu"></i></a></li>
                                            </ul>
                                        </div>
                                        <!-- chat-header end-->
                                        <div class="chat-history chat-msg-box custom-scrollbar">
                                            <ul id="messageBox">
                                                <% messages.forEach(function(row) { %>
                                                    <li>
                                                        <div class="message my-message"><img class="rounded-circle float-start chat-user-img img-30" src="../assets/images/user/3.png" alt="">
                                                            <div class="message-data text-end"><span class="message-data-time">10:12 am</span></div><%= row.Text%>
                                                        </div>
                                                    </li>
                                                <% }) %>

                                            </ul>
                                        </div>
                                        <!-- end chat-history-->
                                        <div class="chat-message clearfix">
                                            <div class="row">
                                                <div class="col-xl-12 d-flex">
                                                    <div class="smiley-box bg-primary">
                                                        <div class="picker"><img src="../assets/images/smiley.png" alt=""></div>
                                                    </div>

                                                    <div class="input-group text-box">

                                                        <input class="form-control input-txt-bx" id="message-to-send" type="text" name="message-to-send" placeholder="Type a message......";  into="<%= url %>">
                                                        <button class="input-group-text btn btn-primary" id="sendMessage" type="button">SEND</button>
                                                   
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end chat-message-->
                                        <!-- chat end-->
                                        <!-- Chat right side ends-->
                                    </div>
                                </div>
                                <div class="col ps-0 chat-menu">
                                    <ul class="nav nav-tabs border-tab nav-primary" id="info-tab" role="tablist">
                                        <li class="nav-item"><a class="nav-link active" id="info-home-tab" data-bs-toggle="tab" href="#info-home" role="tab" aria-selected="true">CALL</a>
                                            <div class="material-border"></div>
                                        </li>
                                        <li class="nav-item"><a class="nav-link" id="profile-info-tab" data-bs-toggle="tab" href="#info-profile" role="tab" aria-selected="false">STATUS</a>
                                            <div class="material-border"></div>
                                        </li>
                                        <li class="nav-item"><a class="nav-link" id="contact-info-tab" data-bs-toggle="tab" href="#info-contact" role="tab" aria-selected="false">PROFILE</a>
                                            <div class="material-border"></div>
                                        </li>
                                    </ul>
                                    <div class="tab-content" id="info-tabContent">
                                        <div class="tab-pane fade show active" id="info-home" role="tabpanel" aria-labelledby="info-home-tab">
                                            <div class="people-list">
                                                <ul class="list">
                                                    <li class="clearfix"><img class="rounded-circle user-image" src="../assets/images/user/4.jpg" alt="">
                                                        <div class="about">
                                                            <div class="name">Erica Hughes</div>
                                                            <div class="status"><i class="fa fa-share font-success"></i>  5 May, 4:40 PM</div>
                                                        </div>
                                                    </li>
                                                    <li class="clearfix"><img class="rounded-circle user-image mt-0" src="../assets/images/user/1.jpg" alt="">
                                                        <div class="about">
                                                            <div class="name">Vincent Porter
                                                                <div class="status"><i class="fa fa-reply font-danger"></i>  5 May, 5:30 PM</div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="clearfix"><img class="rounded-circle user-image" src="../assets/images/user/8.jpg" alt="">
                                                        <div class="about">
                                                            <div class="name">Kori Thomas</div>
                                                            <div class="status"><i class="fa fa-share font-success"></i>  1 Feb, 6:56 PM</div>
                                                        </div>
                                                    </li>
                                                    <li class="clearfix"><img class="rounded-circle user-image" src="../assets/images/user/2.png" alt="">
                                                        <div class="about">
                                                            <div class="name">Aiden Chavez</div>
                                                            <div class="status"><i class="fa fa-reply font-danger"></i>  3 June, 1:22 PM</div>
                                                        </div>
                                                    </li>
                                                    <li class="clearfix"><img class="rounded-circle user-image" src="../assets/images/user/4.jpg" alt="">
                                                        <div class="about">
                                                            <div class="name">Erica Hughes</div>
                                                            <div class="status"><i class="fa fa-share font-success"></i>  5 May, 4:40 PM</div>
                                                        </div>
                                                    </li>
                                                    <li class="clearfix"><img class="rounded-circle user-image mt-0" src="../assets/images/user/1.jpg" alt="">
                                                        <div class="about">
                                                            <div class="name">Vincent Porter</div>
                                                            <div class="status"><i class="fa fa-share font-success"></i>  5 May, 5:30 PM</div>
                                                        </div>
                                                    </li>
                                                    <li class="clearfix"><img class="rounded-circle user-image" src="../assets/images/user/8.jpg" alt="">
                                                        <div class="about">
                                                            <div class="name">Kori Thomas</div>
                                                            <div class="status"><i class="fa fa-reply font-danger"></i>                                                                      1 Feb, 6:56 PM</div>
                                                        </div>
                                                    </li>
                                                    <li class="clearfix"><img class="rounded-circle user-image" src="../assets/images/user/4.jpg" alt="">
                                                        <div class="about">
                                                            <div class="name">Erica Hughes</div>
                                                            <div class="status"><i class="fa fa-share font-success"></i>  5 May, 4:40 PM</div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="info-profile" role="tabpanel" aria-labelledby="profile-info-tab">
                                            <div class="people-list">
                                                <div class="search">
                                                    <form class="theme-form">
                                                        <div class="mb-3">
                                                            <input class="form-control" type="text" placeholder="Write Status..."><i class="fa fa-pencil"></i>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="status">
                                                <p class="font-dark">Active</p>
                                                <hr>
                                                <p>
                                                    Established fact that a reader will be
                                                    distracted  <i class="icofont icofont-emo-heart-eyes font-danger f-20"></i><i class="icofont icofont-emo-heart-eyes font-danger f-20 m-l-5"></i>
                                                </p>
                                                <hr>
                                                <p>Dolore magna aliqua  <i class="icofont icofont-emo-rolling-eyes font-success f-20"></i></p>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="info-contact" role="tabpanel" aria-labelledby="contact-info-tab">
                                            <div class="user-profile">
                                                <div class="image">
                                                    <div class="avatar text-center"><img alt="" src="../assets/images/user/2.png"></div>
                                                    <div class="icon-wrapper"><i class="icofont icofont-pencil-alt-5"></i></div>
                                                </div>
                                                <div class="user-content text-center">
                                                    <h5 class="text-uppercase">mark jenco</h5>
                                                    <div class="social-media">
                                                        <ul class="list-inline">
                                                            <li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
                                                            <li class="list-inline-item"><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                                            <li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
                                                            <li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
                                                            <li class="list-inline-item"><a href="#"><i class="fa fa-rss"></i></a></li>
                                                        </ul>
                                                    </div>
                                                    <hr>
                                                    <div class="follow text-center">
                                                        <div class="row">
                                                            <div class="col border-right"><span>Following</span>
                                                                <div class="follow-num">236k</div>
                                                            </div>
                                                            <div class="col"><span>Follower</span>
                                                                <div class="follow-num">3691k</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    <div class="text-center">
                                                        <p class="mb-0">Mark.jecno23@gmail.com</p>
                                                        <p class="mb-0">+91 365 - 658 - 1236</p>
                                                        <p class="mb-0">Fax: 123-4560</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Container-fluid Ends-->



    </div>
    <!-- popup -->
    <%- include("../../../partials/popup") %>
    <!-- popup-->

    <%- include("../../../partials/footer") %>
</div>
</div>
<!-- latest jquery-->
<script src="/RTL/superAdmin/js/jquery-3.5.1.min.js"></script>
<!-- Bootstrap js-->
<script src="/RTL/superAdmin/js/bootstrap/bootstrap.bundle.min.js"></script>
<!-- feather icon js-->
<script src="/RTL/superAdmin/js/icons/feather-icon/feather.min.js"></script>
<script src="/RTL/superAdmin/js/icons/feather-icon/feather-icon.js"></script>
<!-- scrollbar js-->
<script src="/RTL/superAdmin/js/scrollbar/simplebar.js"></script>
<script src="/RTL/superAdmin/js/scrollbar/custom.js"></script>
<!-- Sidebar jquery-->
<script src="/RTL/superAdmin/js/config.js"></script>
<!-- Plugins JS start-->
<script src="/RTL/superAdmin/js/sidebar-menu.js"></script>
<script src="/RTL/superAdmin/js/prism/prism.min.js"></script>
<script src="/RTL/superAdmin/js/clipboard/clipboard.min.js"></script>
<script src="/RTL/superAdmin/js/custom-card/custom-card.js"></script>
<script src="/RTL/superAdmin/js/tooltip-init.js"></script>
<!-- Plugins JS Ends-->
<!-- Theme js-->
<script src="/RTL/superAdmin/js/script.js"></script>
<!-- login js-->
<!--error message for inputs-->
<script src="/RTL/superAdmin/js/input-error.js"></script>
<script src="/RTL/superAdmin/js/tiny/tinymce.min.js"></script>
<!-- Plugin used-->
<script src="/RTL/superAdmin/js/select2/select2.full.min.js"></script>
<script src="/RTL/superAdmin/js/select2/select2-custom.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<!-- script pop up -->
<script src="/RTL/superAdmin/js/anse/albumPopup.js"></script>

<script>
    $(document).ready(function () {
        $('#addTags').click(function () {
            $('#rowTags').append(
                "<div class='col-sm-6'><a class='removeTag'><i class='fa fa-trash-o'></i></a><input class='form-control' name='Tags' id='Tags' type='text' placeholder='متن تگ را وارد کنید '></div>"
            );
        });
        $('#rowTags').on('click', 'div a.removeTag', function () {
            $(this).parent().remove();
        });
    });
    function getMessage(id,type){
        window.location.href='/<%= lan.ShortName %>/'+type+'/get/'+id

    }
    const sendMessage = document.getElementById("sendMessage");
    sendMessage.addEventListener("click", function (event){
        $("#message-to-send")[0].value;
        axios.post('/<%= lan.ShortName %>/channel/sendMessage',{
            Reference: $("#message-to-send")[0].attributes.into.value,
            Text: $("#message-to-send")[0].value
        })


            .then(function (response) {
                $("#message-to-send")[0].value='';
                window.location.reload();

            })
            .catch(function (error) {
                console.log(error);
            });
    });
</script>

<script>
    tinymce.init({
        selector: '#editor',
        plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
        toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
    });
</script>

</body>
</html>
