{% extends "users/base.html" %}
{% load counter_tag %}
{% load static %}
{% block content %}
<script src="{% static 'users/js/jsLists.js' %}"></script>
  <link href="{% static 'users/css/jsLists.css' %}" rel="stylesheet">

<div class="content-section">
  <h3>Bereiche und Tätigkeiten von {{user_first_name}} {{user_last_name}}<span style="float: right">
    {% if user|usergperm:"usermanager" %} 
    <button type="button" id="activatechangingorder" style="float: right" class="btn btn-secondary btn-sm" onclick="javascript:activateChangeTaskOrder()" data-toggle="tooltip" data-placement="top" title="Reihenfolge der Tätigkeiten anpassen"><small><i class="fas fa-pen"></i></small></button>
    <button type="button" id="changingorder" style="float: right; display: none" class="btn  btn-primary btn-sm" onclick="javascript:activateChangeTaskOrder()" data-toggle="tooltip" data-placement="top" title="Reihenfolge der Tätigkeiten anpassen"><small><i class="fas fa-check"></i></small></button>

    <span style="float: right;">
      {% if request.user.profile.agency.dynamicprofile %}
        <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle btn-sm mr-1" type="button" id="changeViewDynamic" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span id="view_info_drop_1" style="">Ausführender</span>
          <span id="view_info_drop_2" style="display: none;">Vertreter</span>
          <span id="view_info_drop_0" style="display: none;">Verantwortlicher</span>
        </button>
        <div class="dropdown-menu" aria-labelledby="changeViewDynamic">
          <a class="dropdown-item" href="#\" onclick="javascript:changeView(1)">Ausführender</a>
          <a class="dropdown-item" href="#\" onclick="javascript:changeView(2)">Vertreter</a>
          <a class="dropdown-item" href="#\" onclick="javascript:changeView(0)">Verantwortlicher</a>          
        </div>
      </div>
      {% endif %}
    </span>

    {% endif %}
  </span></h3>
  <hr>
  <div class="media">
  <img class="img-profile" width="12%"  src="{{ imageurl }}" >
    <div class="media-body">              
        <div class="row  ml-2">
            <div class="col-3">
                <h6><b>Name</b></h6>
                <p>
                    {{ user_first_name }} {{ user_last_name }}
                </p>
                <h6><b>Agenturfunktion</b></h6>
                <p>
                    {{ userfunc }}
                </p>
                 <h6><b>E-Mail</b></h6>
                <p>
                    <a href="mailto:{{ mail }}">{{ mail }}</a>
                </p>
            </div>  
            <div class="col-md-3">
                <h6><b>Tätigkeit</b></h6>
                <p>
                    {{ compfunc }}
                </p>
                <h6><b>Festnetz</b></h6>
                <p>
                    {{ phoneland }}
                </p>
                <h6><b>Mobil</b></h6>
                <p>
                    {{ phonemobile }}
                </p>                            
            </div> 
            </div>               
       </div>
    </div>
    <hr>
    <h4 class="ml-4">{{ user_first_name }} {{ user_last_name }}

    {% if request.user.profile.agency.dynamicprofile %}
     <span id="view_info_0" style="display: none;">verantwortet:</span>
     <span id="view_info_1" style="display: none;">führt aus:</span>
     <span id="view_info_2" style="display: none;">vertritt:</span>
     {% endif %}
    </h4>
    <table class="table" id="orgasingle">
    <thead>
    <tr >  
        {% for area in areas %}            
          <td class="text-center" style="width: 20%; background-color: rgba({{area.color.0}},{{area.color.1}},{{area.color.2}}, 0.3);"><h5 style="color: rgba(0,0,0, 1);"><b ><a style=" color: #000000;"href="{% url 'standard-area' area.pk %}">{{area.name}}</a></b></h5></td>
        {% endfor %}            
    </tr>
  </thead>
  <tbody>  
    <tr>
        {% for area in areas %}  
          <td class="text-center"  style="background-color: rgba({{area.color.0}},{{area.color.1}},{{area.color.2}}, 0.3)">
            <div class="areaCollapseContent" id="sortarea_{{area.pk}}">
            {% if request.user.profile.agency.dynamicprofile %}
              
            {% for task in tasks %}
                {% isUserInAuth task area user_id as checkIsUserAuth %}
                {% if task.area.pk == area.pk and task.visible and checkIsUserAuth %}
                <div style="display: none; background-color: rgba({{area.color.0}},{{area.color.1}},{{area.color.2}}, 1)" class="mb-2 pt-3 pb-1 view_0" id="ele_{{task.pk}}">
                 <span ><h6 ><a style=" color: #FFFFFF;"href="{% url 'standard-task' task.pk %}"><span class="arrows_area_{{area.pk}} ml-4" style="display:none; float: left;"><i class="fas fa-sort"></i></span>{{task.name}}</a></h6></span>                 
                </div>
                {% endif %}

                {% isUserInEx task area user_id as checkIsUserEx %}
                {% if task.area.pk == area.pk and task.visible and checkIsUserEx %}
                <div style="display: none; background-color: rgba({{area.color.0}},{{area.color.1}},{{area.color.2}}, 1)" class="mb-2 pt-3 pb-1 view_1" id="ele_{{task.pk}}">
                 <span ><h6 ><a style=" color: #FFFFFF;"href="{% url 'standard-task' task.pk %}"><span class="arrows_area_{{area.pk}} ml-4" style="display:none; float: left;"><i class="fas fa-sort"></i></span>{{task.name}}</a></h6></span>
                </div>
                {% endif %}

                {% isUserInRep task area user_id as checkIsUserRep %}
                {% if task.area.pk == area.pk and task.visible and checkIsUserRep %}
                <div style="display: none; background-color: rgba({{area.color.0}},{{area.color.1}},{{area.color.2}}, 1)" class="mb-2 pt-3 pb-1 view_2" id="ele_{{task.pk}}">
                 <span ><h6 ><a style=" color: #FFFFFF;"href="{% url 'standard-task' task.pk %}"><span class="arrows_area_{{area.pk}} ml-4" style="display:none; float: left;"><i class="fas fa-sort"></i></span>{{task.name}}</a></h6></span>
                </div>
                {% endif %}

            {% endfor %}
            {% else %}

           {% for prio in prios %}                                    
              {% if prio.task.area.pk == area.pk and prio.task.visible %}
              <div style="background-color: rgba({{area.color.0}},{{area.color.1}},{{area.color.2}}, 1)" class="mb-2 pt-3 pb-1 " id="ele_{{prio.task.pk}}">
               <span ><h6 ><a style=" color: #FFFFFF;"href="{% url 'standard-task' prio.task.pk %}"><span class="arrows_area_{{area.pk}} ml-4" style="display:none; float: left;"><i class="fas fa-sort"></i></span>{{prio.task.name}}</a></h6></span>
              </div>
              {% endif %}
            {% endfor %}
          </div>
          </td>        
        {% endif %}
        {% endfor %}
    </tr>
  </tbody>
</table>
<style>
#orgasingle {
  border-collapse: separate;
  border-spacing: 25px 0px;
}
</style>
</div>

<script type="text/javascript">
var sortstatus = false;
var sortablearea_ids = [{% for area in areas %} {{area.pk}},{% endfor %}];  
{% if user|usergperm:"usermanager" %} 

  {% for area in areas %}
      //Initial function for draggable areas
      $( function() {
          $( "#sortarea_{{area.pk}}" ).sortable
          ({
            axis:"y",
            update: function( event, ui ) 
            {
              datatoserver = [];
              var rows = $( "#sortarea_{{area.pk}}" ).sortable( "widget" )[0]['children'];
              for(i = 0; i < rows.length; i++){
                tempid = rows[i]['id'].split("_")[1];
                datatoserver.push({"id" : tempid, "neworder" : i});
              }
              $.ajax(
              {
                  type: "GET",
                  url: "/areas/updateorder",
                  data:{
                    action: "newtaskorder",
                    finalod : JSON.stringify(datatoserver),
                    userid : {{user_id}}
                  },
                  success: function( data ){}
               });        
               
          }
        });
      });

  {% endfor %}
  function activateChangeTaskOrder(){
    //Initial function for draggable areas
    if(sortstatus == false){
      sortstatus = true;
      for(i = 0; i < sortablearea_ids.length; i++){
        $("#changingorder").show();
        $("#activatechangingorder").hide();
        $(".arrows_area_" + sortablearea_ids[i]).show();
        $( "#sortarea_" + sortablearea_ids[i] ).sortable("enable");        
      }
    }
    else{      
      sortstatus = false;      
      for(i = 0; i < sortablearea_ids.length; i++){
        $("#changingorder").hide();
        $("#activatechangingorder").show();
        $(".arrows_area_" + sortablearea_ids[i]).hide();
        $( "#sortarea_" +  sortablearea_ids[i]).sortable("disable");
      }
    }

  }

{% endif %}

$( document ).ready(function() {
    for(i = 0; i < sortablearea_ids.length; i++){      
        $(".arrows_area_" + sortablearea_ids[i]).hide();
        $( "#sortarea_" +  sortablearea_ids[i]).sortable("disable");
      }


      $(document).find(".view_1").show();
      $(document).find("#view_info_1").show();
    
});

function changeView(newview){
  
  $(document).find(".view_0").hide();
  $(document).find(".view_1").hide();
  $(document).find(".view_2").hide();
  $(document).find(".view_" + newview).show();

  $(document).find("#view_info_0").hide();
  $(document).find("#view_info_1").hide();
  $(document).find("#view_info_2").hide();

  $(document).find("#view_info_drop_0").hide();
  $(document).find("#view_info_drop_1").hide();
  $(document).find("#view_info_drop_2").hide();
  $(document).find("#view_info_drop_" + newview).show();
  

  $(document).find("#view_info_" + newview).show();
}

</script>

{% endblock content %}