{% extends 'base.html' %}
{% load static %}
{% block title %}
<title>Chat</title>
{% endblock %}
{% block css %}
<link rel="stylesheet" href="{% static 'assets/vendors/mdi/css/materialdesignicons.min.css' %}">
<link rel="stylesheet" href="{% static 'assets/vendors/css/vendor.bundle.base.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
<!-- End layout styles -->
<link rel="shortcut icon" href="{% static 'assets/images/favicon.png' %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script  src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script  src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<link rel="shortcut icon" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
{% endblock %}
{% block content %}
<div class="container-scroller">
{% include 'admin_header.html' %}
<div class="container-fluid page-body-wrapper">
<div class="main-panel chat-box-new">
   <div class=" ">
      <div class="dashboard-container">
         <div class="sidebar-p">
            <div class="inbox_people">
               <div class="inbox_chat">
                  <h4 class="d-heading"> All Drivers </h4>
                  <input type="hidden" class="admin_id" value="{{admin_id}}">
                  {% for driver in driver_obj %}
                  <div class="chat_list">
                     <div class="chat_people">
                        <!-- <div class="chat_img"> <img src="http://18.130.221.132:9090/static/images/user-profile-icon4.png" alt="sunil">
                           </div> -->
                        <div class="chat_img"> <img class="chat_image" src="{% if driver.image %}{{driver.image}}{% else %}{% static 'images/camera.png' %}{% endif %}">
                           <input type="hidden" class="driver_sidebarid" value="{{driver.id}}">
                           <input type="hidden" class="driver_name" value="{{driver.name}}">
                        </div>
                        <div class="chat_ib">
                           <h5>
                              {{ driver.name }}  
                              <span class="chat_date">
                                 <!-- -- days ago -->
                              </span>
                           </h5>
                           <p>
                              {{driver.recentmessage}}
                           </p>
                        </div>
                     </div>
                  </div>
                  {% endfor %}
               </div>
            </div>
         </div>
         <form>
            {% csrf_token %}
         </form>
         <div class="left-side-sec">
            <div class="container">
               <div class="row">
                  <div class="col-md-12">
                     <div class="mesgs chat_driver_info">
                        <div class="chat-person-info">
                           <h4>Deepak Kumar</h4>
                           <img src="/static/profile/dan_k8StRdi.jpg"  class="chat_driver_image">
                           <input type="hidden" class="driver_infoid" >
                        </div>
                        <div class="msg_history">
                           <!-- Here messages are shown of selected user -->
                        </div>
                        <div class="type_msg">
                           <div class="input_msg_write">
                              <form id="admin-message-form" method="POST" action="##" enctype="multipart/form-data" >
                                 {% csrf_token %}
                                 <input type="text" class="write_msg" name="message" placeholder="Type a message.....">
                                 <div class="browser-attach">
                                    <a class="msg_send_btn  attached attachment" href="#">
                                    <input type="file" class="attach-2" id="attachment-file" name="attachment-file" />
                                    <img src="/static/images/attah-icon.png">
                                    </a>
                                 </div>
                                 <button type="Submit" class="msg_send_btn" type="button"><i class="mdi mdi-reply  menu-icon"></i></button>
                              </form>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

</div>
</div>
{% include 'admin_footer.html' %}
</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
   $(document).ready(function(){
       $('body').addClass("side-t")
   })
   
</script>
<script src="{% static 'js/reconnecting-websocket.min.js' %}" ></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->
<script src="{% static 'js/admin_chat_test.js' %}" ></script>
<!-- <script src="https://unpkg.com/@popperjs/core@2" ></script> -->
<script>
   function previewFile() {
     var preview = document.querySelector('#show-im');
     var file    = document.querySelector('input[type=file]').files[0];
     var reader  = new FileReader();
     reader.addEventListener("load", function () {
       $('#add-image-srcdata').val(reader.result)
       preview.src = reader.result;
     }, false);
     if (file) {
       reader.readAsDataURL(file);
     }
   }
   function editpreviewFile() 
   {
     var preview = document.querySelector('#edit-show-image');
     var file    = document.querySelector('#edit_im').files[0];
     var reader  = new FileReader();
     reader.addEventListener("load", function () {
     $('#edit-image-srcdata').val(reader.result)
     preview.src = reader.result;
     console.log(reader.result);
     return false;
     }, false);
   
     if (file) {
       reader.readAsDataURL(file);
     }
   }
</script>
<script>
   // $(document).ready(function(){
   //   $('[data-toggle="tooltip"]').tooltip(); 
   // });
   $( document ).ready(function() {
   $('.chat_list:first').click()
   });
</script>
{% endblock %}