{% load counter_tag %}
<h4 id="chattitle" style="margin-top: -3px">{{roomdata.roomname}}
  {% if user in roomdata.chatmembers_admin.all or user == roomdata.creator %}
  <span style="margin-top: -10px">
  <button  class="btn btn-secondary btn-sm ml-2 " style="float: right;" onclick="javascript:$('#confirm-delete_{{roomdata.pk}}').modal('toggle')"><small><i class="fas fa-trash"></i></small></button>
  <button  class="btn btn-secondary btn-sm " onclick="window.location.href='{% url 'chat:chat-update' roomdata.pk %}'" style="float: right;"><small><i class="fas fa-pen"></i></small></button>
</span>
  {% endif %}
</h4>  


    <hr>
    <div class="card" >
      <div class="card-body scroll" id="chatcontentcomplete">        
        
        <div id="roomstart" style="min-width: 100%; text-align: center;">          
          <small>Unterhaltung gestartet am {{roomdata.chatroom_createddate}}</small>          
        </div>
        <hr>
        
        <div id="chatmessages">
          {% for message in roomdata.messages.all %}  
            
            {% if forloop.counter0 == 0 %}
              {% setMessageDayInfo message %}
            {% else %}
              {% getMessageDayInfo message as newday %}
              {% if newday == True %} 
              <div style="" class="chatmessageele_breaker col-12  mb-3">             
              <div class="col-12 mb-3" style="text-align: center;">          
                <hr>
                <small>{{message.sendtime|date:"d.m.Y"}}</small>                
              </div>      
              </div>        
              {% endif %}            
            {% endif %}

            {% if message.author == request.user %}
              <div style="" class="chatmessageele_me col-7 mb-3 " id="usermessage_{{message.pk}}">
                <div class='icon-container ml-2 mt-1 ' style="float: right;">
                 <img class="img-profile roundimg" src="{{ message.author.profile.get_photo_url }}">  
                </div>
                <h6 class="mt-3"><button class="btn btn-small" onclick="javascript:deleteOwnMessage({{message.pk}})"><small><i class="fas fa-trash"></i></small></button>&nbsp;<small>{{message.sendtime|date:"H:i"}}</small>                
                </h6>          
                <div style="text-align: left;" class="mt-1">   
                  <span style="float: right !important; font-size: 1.0em;">
                    {{message.content}}                                        
                  </span>                                            
                </div>                
              </div>
            {% else %}
            <div style="" class="chatmessageele_other col-7  mb-3" id="usermessage_{{message.pk}}">
              <div class='icon-container mr-2 mt-1 ' style="float: left;">
               <img class="img-profile roundimg" src="{{ message.author.profile.get_photo_url }}">  
              </div>                
              <h6 class="mt-3"><small>{{message.author.first_name}} {{message.author.last_name}},&nbsp;{{message.sendtime|date:"H:i"}}</small></h6>
              <div style="text-align: left;" class="mt-1">   
                <span style="float: left !important; font-size: 1.0em;">
                  {{message.content}}
                </span>                            
              </div>
            </div>
            {% endif %}
          {% endfor %}
          </div><!-- END CHAT MESSAGES -->
          <span id="scrolltarget">&nbsp;</span>
        </div><!-- END CARD BODY-->

        <div id="is_typing" class="ml-2">                            
          <div class="spinner-grow spinner-border-sm" id="typingspinner" role="status" style="display: none;">
            <span class="sr-only">Jemand tippt...</span>
          </div>
          <small id="is_typing_name" class="">&nbsp;
          </small>
        </div>
      <div class="card-footer bg-transparent border-success">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Neue Nachricht" id="message" aria-describedby="">
          <div class="input-group-append">
            <button class="btn btn-primary" id="sendNewMessgeButton" onclick="javascript:sendNewMessage()" type="button"><i class="fas fa-location-arrow"></i></button>
          </div>
        </div>
      </div>
    </div>

<script type="text/javascript">
$(document).ready(function(){
    $('#chatcontentcomplete').scrollTop( $('#chatcontentcomplete').height()*200 )
});
  
      userownid = "{{user.pk}}";      

      ws_string = 'wss://'
      if (location.protocol !== 'https:') {
        ws_string = 'ws://'
      }
      
      if(typeof chatwebsocket != "undefined"){        
        chatwebsocket = new WebSocket(ws_string+window.location.host+"/ws/groupchat/{{roomdata.pk}}/")
      }
      else{
       chatwebsocket = new WebSocket(ws_string+window.location.host+"/ws/groupchat/{{roomdata.pk}}/") 
      }

      chatwebsocket.onmessage = function(e) {         

        datainfo = e["data"].split("__");        
        if(datainfo[0] == "starttyping")            
        {
            typingname = (datainfo[1].split("_"))[1];
            typingid = (datainfo[1].split("_"))[0];
            if(typingid != userownid){
              $("#is_typing_name").html("" + typingname);
              $("#typingspinner").show();            
            }
        }

        if(datainfo[0] == "stoptyping")            
        {
          $("#is_typing_name").html("&nbsp;");
          $("#typingspinner").hide();
        }

        if(datainfo[0] == "reloadmessages")            
        {
            $.ajax(
            {
              type: "GET",
              url: "{% url 'chat:chat-ajax' %}",
              data : {
                action : "loadnewestmessage",
                room : {{roomdata.pk}}
              },
              success: function( data ) 
              { 
                $("#chatmessages").append(data);
                $('#chatcontentcomplete').scrollTop( $('#chatcontentcomplete').height()*200 );                
              }
           });
        }

        if(datainfo[0] == "delete_message"){
          $("#usermessage_" + datainfo[1]).remove();
        }

      }
  
      chatwebsocket.onclose = function(e) {
          console.error('Chat socket closed unexpectedly');
      };
    

      $("#message").keyup(function(){        
        if($("#message").val().length > 0){
          chatwebsocket.send("starttyping__{{user.pk}}__groupchat_{{roomdata.pk}}");
        }
        else{
          chatwebsocket.send("stoptyping__{{user.pk}}__groupchat_{{roomdata.pk}}");                      
        }

      })

        sending = true;
      function sendNewMessage()
      {
        if($("#message").val().length > 0 && sending)
        {
          sending = false;
          $.ajax(
          {
              type: "GET",
              url: "{% url 'chat:chat-ajax' %}",
              data : {
                action : "addnewmessage",
                new_chat_userid : userownid,
                message : $("#message").val(),
                room : {{roomdata.pk}}
              },
              success: function( data ) 
              { 
                $("#message").val("");
                
                chatwebsocket.send("load__{{user.pk}}__groupchat_{{roomdata.pk}}");
                chatwebsocket.send("stoptyping__{{user.pk}}__groupchat_{{roomdata.pk}}");
                
                sending = true;
              }              
            });
        }
      }

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        if($("#message").val().length > 0 && sending){
          sendNewMessage();
        }
    }
});

function deleteOwnMessage(id){

  $.ajax(
  {
      type: "GET",
      url: "{% url 'chat:chat-ajax' %}",
      data : {
        action : "delmessage",
        messageid : id
      },
      success: function( data ) 
      { 
        chatwebsocket.send("delmessage__" + id + "__groupchat_{{roomdata.pk}}");
      }
   });
}
    </script>


{% if user in roomdata.chatmembers_admin.all or user == roomdata.creator %}
<div class="modal fade" id="confirm-delete_{{roomdata.pk}}" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Chatraum löschen</h5>
            </div>
            <div class="modal-body">
                Möchten Sie wirklich den Chatraum {{roomdata.roomname}} löschen? Alle Nachrichten werden entfernt!
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="dodel_{{roomdata.pk}}" >Löschen</button>
                <button type="button" class="btn" data-dismiss="modal">Abbrechen</button>
                
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

  $("#dodel_{{roomdata.pk}}").click(function(){
    $.ajax(
        {
          type: "GET",
          url: "{% url 'chat:chat-ajax' %}",
          data:{
            action : "remove_chatroom",
            groupchatid: {{roomdata.pk}},
          },
          success: function( data ) 
          {  
            location.href = location.href;
          }
       });    
});
</script>
{% endif %}