{% extends "users/base.html" %}
{% block content %}
{% if request.user.profile.agency.module_chat %}
<style type="text/css">
.roundimg {
  border-radius: 50%;  
  z-index: 999;
    height: 100%;
  width: 100%;
  border-radius: 50%;
}
.icon-container {
  width: 50px;
  height: 50px;
  position: relative;
  float: left;
}

.status-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;    
  bottom: 0;
  right: 0;
  position: absolute;
}

.chatmessageele_breaker
{
  float: right; 
}
.chatmessageele_me
{
  padding: 5px;
  border-radius: 15px;
  background-color: #cfe6f4;
  float: right; 
  text-align: right;
}

.chatmessageele_other
{
  padding: 5px;
  border-radius: 15px;
  background-color: #f8f9fc;
  float: left; 
  text-align: left;
  color: #000000;
}

.scroll {
    max-height: 600px;
    min-height: 600px;
    overflow-y: auto;
}
</style>
<div class="content-section col-12">
  <h3>Chat&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Verwalten Sie hier Ihre Chatverläufe und starten Sie neue Unterhaltungen mit Mitarbeitern und anderen Agenturen. Alle Nachrichten werden verschlüsselt übertragen und in der Datenbank ebenfalls verschlüsselt gespeichert." class="far fa-question-circle"></i></small>
    <button class="btn btn-primary btn-sm" style="float: right; " data-toggle="tooltip" data-placement="top" title="Erstellen Sie einen Gruppenchat." onclick="window.location.href='{% url 'chat:chat-addgroup' %}'"><i class="fas fa-plus"></i>&nbsp;Chatraum</button>


  </h3>  
  <hr>
</div>

<div class="row">

  <div class="col-3" style="margin-top: -25px; margin-left: -8px;">  
      <div class="card-body">
        {% for user in usersofagency %}
        <div class="card hoverchatcard" id="userchat_{{user.pk}}" style="">
          <div class="card-body " style="" >
            <div style="float: left;" class="col-12 ">
              <div class='icon-container mr-2'>
                <img class="img-profile roundimg" src="{{ user.profile.get_photo_url }}">
                <div class='status-circle' id="userstatus_circle_{{user.pk}}" style="background-color: {% if user in onlineusers %} 
                      {% if user.profile.onlinestatus == 0 %}
                        green
                      {% elif user.profile.onlinestatus == 1 %}
                        red
                      {% elif user.profile.onlinestatus == 2 %}
                        orange
                      {% elif user.profile.onlinestatus == 3 %}
                        grey
                      {% endif %}
                  {% else %} grey {% endif %};">
                </div>       
              </div>
              <h5 class="mt-3">{{user.first_name}} {{user.last_name}}</h5>      
            </div> 
          </div>
        </div>
      {% endfor %} 

    {% for chatroom in chatrooms %}
        {% if user in chatroom.chatmembers.all or user in chatroom.chatmembers_admin.all or user == chatroom.creator and chatroom.chatroomtype == 1 %}
        <div class="card hoverchatcard" id="groupchat_{{chatroom.pk}}">
          <div class="card-body" style="">
            <div style="float: left;" class="col-12 ">              
              <h5 class="mt-3">{{chatroom.roomname}}                                
              </h5>                    
              <small style="font-size: 10pt;">{% for member in chatroom.chatmembers.all %}
                  {{member.first_name}} {{member.last_name}}{% if forloop.counter < chatroom.chatmembers.all|length %}, {% endif %}
                {% endfor %}                
              </small>
            </div> 
          </div>
        </div>
        {% endif %}
      {% endfor %}
  


  </div></div>
<div class="col-9" style="float: left; position: relative; margin-left: -30px" id="mainchatcontent"></div><!-- END CHATAREA -->
</div>
</div>
<!-- LOADER OVERLAY -->
<div id="overlay" style="display: none;">
  <div class="loader"></div>
</div>
<style>
.loader {
  position: relative;
  border: 7px solid #d3d3d3;
  border-radius: 50%;
  border-top: 7px solid red;
  width: 70px;
  height: 70px;
  left:50%;
  top:35%;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
}
#overlay{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background: black;
    opacity: .4;
}
.container{
    position:relative;
    height: 300px;
    width: 200px;
    border:1px solid red;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<script type="text/javascript">

  creator_id = false;
  chatmember_id = false;

  $(".hoverchatcard").hover(function(){
    var $this = $(this);
    $this.data('bgcolor', $this.css('background-color')).css('background-color', '#f8f9fc');
  }, function(){
    var $this = $(this);
    $this.data('bgcolor', $this.css('background-color')).css('background-color', '#FFFFFF');
  }
  )

  $(".hoverchatcard").click(function(){
    clickedroomtype = $(this)[0]["id"].split("_")[0];
    clickedroomid = $(this)[0]["id"].split("_")[1];
    
    if (clickedroomtype == "userchat"){
        $.ajax(
        {
          type: "GET",
          url: "{% url 'chat:chat-ajax' %}",
          data : {
            action : "startnewchat_user_user",
            new_chat_userid : $(this)[0]["id"].split("_")[1],
            is_basechat : 0
          },
         beforeSend: function(request) {
            $("#overlay").fadeIn();
          },
          success: function( data ) 
          { 
               $("#overlay").fadeOut();
            if(creator_id != false && chatmember_id != false){
              chatwebsocket.close();
            }
            $("#mainchatcontent").html(data);
          }
       });
    }
    //Open Groupchat
    else{
      $.ajax(
        {
          type: "GET",
          url: "{% url 'chat:chat-ajax' %}",
          data : {
            action : "startnewchat_groupchat",
            groupchatid : clickedroomid,
            is_basechat : 0
          },
          beforeSend: function(request) {
            $("#overlay").fadeIn();
          },
          success: function( data ) 
          { 
               $("#overlay").fadeOut();
            if(creator_id != false && chatmember_id != false){
              chatwebsocket.close();
            }
            $("#mainchatcontent").html(data);
          }
       });
    }
  });

  function updatePresenceLive() {                                
    $.ajax(
    {
      type: "GET",
      url: "{% url 'chat:chtaajax-getloggedusers-data' %}",
      data : {
        action : "getloggedusers"
      },
      success: function( data ) 
      {           
          counter = 0;
          $( ".status-circle" ).each(function( index ) {            
            if(data["user_online_final"].indexOf($(this)[0]["id"].split("_")[2]) !== -1){
                $("#" + $(this)[0]["id"]).css("background-color", "green");
            }
            else if(data["user_besch_final"].indexOf($(this)[0]["id"].split("_")[2]) !== -1){
                $("#" + $(this)[0]["id"]).css("background-color", "red");
            }
            else if(data["user_abw_final"].indexOf($(this)[0]["id"].split("_")[2]) !== -1){
                $("#" + $(this)[0]["id"]).css("background-color", "orange");
            }
            else{
              $("#" + $(this)[0]["id"]).css("background-color", "grey"); 
            }            
          });          
      }
   });
  };
</script>


{% else %}
<h3>Das Module Chat wurde in ihrer Agentur deaktiviert.</h3>
{% endif %}
{% endblock content %}