{% 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' %}">
<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">

{% endblock %}
{% block content %}
<div class="container-scroller">
   {% include 'driver_header.html' %}
   <div class="container-fluid page-body-wrapper">
      {% include 'driver_sidebar.html' %}
      <div class="main-panel ">
         <div class="content-wrapper driver-all-chat">
            <div class="row">
               <div class="col-md-12 ">
                  <div class="chat-box-new driver-chat">
                     <div class="mesgs">
                        <div class="chat-person-info">
                           <h4>Admin</h4>
                           <input type="hidden" class="driver_infoid" value="{{driverid}}">
                           <!--  <span>Online</span> -->
                        </div>
                        <div class="msg_history">

                        {% if all_chats %}
                           {% for chat in all_chats %}
                              {% ifequal chat.sender 'admin' %}
                                 <div class="incoming_msg">
                                    <div class="incoming_msg_img"> <img src="
                                       /static/images/user-profile-icon4.png" alt="sunil"> </div>
                                    <div class="received_msg">
                                       <div class="received_withd_msg">
                                          <p>{% if chat.message %}{{chat.message}}{% else %}<a download href="{{chat.attachment}}" target="_blank">Download</a>{% endif %}</p>
                                          <span class="time_date"> {{chat.time}}</span>
                                       </div>
                                    </div>
                                 </div>
                              {% endifequal %}
                              {% ifequal chat.sender 'driver' %}
                                 <div class="outgoing_msg">
                                    <div class="sent_msg">
                                       <p>{% if chat.message %}{{chat.message}}{% else %}<a download href="{{chat.attachment}}" target="_blank">Download</a>{% endif %}</p>
                                       <span class="time_date"> {{chat.time}}</span> 
                                    </div>
                                 </div>
                              {% endifequal %}
                           {% endfor %}
                        {% endif %}
                           
                        </div>
                        <div class="type_msg">
                           <div class="input_msg_write">
                               <form id="driver-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>
         {% include 'driver_footer.html' %}
      </div>
   </div>
</div>
<div id="loading-img" style="display:none;">
   <img src="{% static 'images/loading-12.gif' %}">
</div>
{% endblock %}
{% block js %}
<script src="{% static 'assets/vendors/js/vendor.bundle.base.js' %}"></script>
<script src="{% static 'assets/vendors/chart.js/Chart.min.js' %}"></script>
<script src="{% static 'assets/js/off-canvas.js' %}"></script>
<script src="{% static 'assets/js/hoverable-collapse.js' %}"></script>
<script src="{% static 'assets/js/misc.js' %}"></script>
<script src="{% static 'assets/js/dashboard.js' %}"></script>
<script src="{% static 'assets/js/todolist.js' %}"></script>

<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!-- <script src="{% static 'js/reconnecting-websocket.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>

// $(document).ready(function(){
  // var driverid=$('.driver_infoid').val();
  // var ws_scheme = window.location.protocol == "https:" ? "wss://" : "ws://";
  //     // const socket = new WebSocket('ws://' + window.location.host + '/api/driver/'+driverid+'/getchats/');
  //     var socket = new ReconnectingWebSocket(ws_scheme + window.location.host + '/api/chats/driver/'+driverid+'/');
      

  //     socket.onopen = function (e) {
  //     console.log('sockets connection created in normal.');
  //      };
  //     socket.onmessage = function(e){

  //        console.log('front end message received - success');

  //        console.log(e.data);
  //        socket_data = JSON.parse(e.data)
  //        console.log(socket_data.adminid)
  //        console.log(socket_data.adminname)
  //        console.log(socket_data.driverid)
  //        console.log(socket_data.drivername)
  //        console.log(socket_data.message)
  //        console.log(socket_data.sender)
  //        console.log(socket_data.attachment)
  //        console.log(socket_data.time)
  //        // debugger;
  //         if (socket_data.sender == 'admin')
  //         {  
  //           if($('.notify-label').length)
  //           {
  //             old_count = parseInt($('.notify-label').html())
  //             new_count = old_count + 1  

  //             $('.notify-label').html(new_count) 
  //           }
  //           else
  //           {
  //             if($('li a .mdi-bell-outline').length)
  //             {
  //               ele = $('li a .mdi-bell-outline')
  //               ele.parent().append('<span class="notify-label" >1</span>')
  //             }
              
  //           }


  //           html='<div class="incoming_msg"><div class="received_msg"><div class="received_withd_msg"><p>'
  //           if (socket_data.message != '')
  //           {
  //             txt = socket_data.message
  //           }
  //           else if(socket_data.attachment != '')
  //           {
  //             txt = '<a download href="' + socket_data.attachment + '">Download</a>'
  //           }
  //           html = html + txt + '</p> <span class="time_date">'+socket_data.time+'</span> </div></div></div>'
  //              $('.msg_history').append(html)
           
  //         }
  //         else if (socket_data.sender == 'driver')
  //         {  
  //           $('.write_msg').val('');
  //           $('#attachment-file').removeAttr('value');
            
  //           html='<div class="outgoing_msg"><div class="sent_msg"><p>'
  //           if (socket_data.message != '')
  //           {
  //             txt = socket_data.message
  //           }
  //           else if(socket_data.attachment != '')
  //           {
  //             txt = '<a download href="' + socket_data.attachment + '">Download</a>'
  //           }
  //           html = html + txt + '</p> <span class="time_date">'+socket_data.time+'</span> </div></div>'
  //              $('.msg_history').append(html)
           
  //         }
  //        $('.msg_history').animate({
  //     scrollTop: $('.msg_history').prop("scrollHeight")}, 'fast');
         
  //      };
  //     socket.onerror = function(e){
  //        console.log('error received.');
  //      };
  //      socket.onclose = function(e){
  //        console.log('socket connection closed.');
  //      };
       


</script>




<script src="{% static 'js/driver_chat_test.js' %}" ></script>

<script>
   // $(document).ready(function(){
   //   $('[data-toggle="tooltip"]').tooltip(); 
   // });
   $( document ).ready(function() {
    $('.msg_history').animate({
      scrollTop: $('.msg_history').prop("scrollHeight")}, 'fast');
          
});
</script>

<script>
//      function sendTexte() {
//   // Construct a msg object containing the data the server needs to process the message from the chat client.
//   alert('in sendText function')
//   var msg = [{
//     sender: "driver",
//     driver_id: "1",
//     messageexist:"yes",
//     message:"yes",
//     attachmentexist:"no",
//     messageexist:"yes"
//   }];

//   socket.send(JSON.stringify(msg));
  
// } 


//   var socket = new WebSocket('ws://' + window.location.host + '/api/driver/1/getchats/');

// socket.onopen = function (e) {
//       console.log('WebSockets connection created.');
//      // socket.send('thanks')
//      sendText();

//    };


// socket.onmessage = function(e){
//      console.log('front end message received.');
     
//    };
</script>
{% endblock %}