{% extends "users/base.html" %}
{% load static %}
{% block content %}
<link href="{% static 'users/css/custom.css' %}" rel="stylesheet">
<div class="content-section">
  <h3>{{request.user.profile.agency.name}}</h3>
  <hr>
  <h4>Organigramm</h4>  
  {% if invisible_users > 0%}
      <div class="alert alert-danger" role="alert">
        Achtung! {{invisible_users}} Mitarbeiter sind anderen Mitarbeitern untergeordnet, die nicht im Organigramm sichtbar sein sollen. Bitte prüfen sie die Zuordnung der übergeordneten Mitarbeiter!
      </div>
    {% endif %}
  <div class="d-flex justify-content-center">    
    <div id="diagram" class="diagram_class"></div>     
  </div>  
</div>

<style type="text/css">
  div.diagram_class {
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

<script type="text/javascript">



var data = [
    { 'id' : '{{request.user.profile.agency.pk}}', 'parent' : "", 'role': "", 'name': '{{request.user.profile.agency.name}}', 'color': '#71AF17', "imageUrl": "", 'children' : []},    
    {% for u in agencyuser %}
      {% if u.profile.parent == u %}
        { 'id': '{{u.pk}}' , 'name': "{{u.first_name}} {{u.last_name}}",'role': '<b>{% if u.profile.func != None %} {{u.profile.func}} {% endif %}</b></br >{{u.profile.compfunc}}', 'parent': "{{request.user.profile.agency.pk}}", 'color': '#1859B7', "imageUrl": "{{u.profile.get_photo_url}}", 'userid' : '{{u.pk}}', 'children' : [] },
      {% else %}
      { 'id': '{{u.pk}}', 'name': "{{u.first_name}} {{u.last_name}}", 'role': '<b>{% if u.profile.func != None %} {{u.profile.func}} {% endif %}</b></br >{{u.profile.compfunc}}', 'parent': '{{u.profile.parent.pk}}', 'color': '#1859B7', "imageUrl": "{{u.profile.get_photo_url }}",  'userid' : '{{u.pk}}', 'children' : []},
        {% endif %}
    {% endfor %}
];


//Check for Agency and User-IDs - dont touch the userid for URLs!
for(i = 0; i < data.length; i++){
  for(k = 0; k < data.length; k++){
    if(k != i){
      if(data[i]['id'] == data[k]['id']){
        data[k]['id'] = data[k]['id']*10;
        //If double found, change parents of that id!
        for(m = 0; m < data.length; m++){
          if(data[m]['parent'] == data[k]['id']*10){
            data[m]['parent'] = data[m]['parent']*10;
          }
        }
      }
    }
  }
}

//Creates nested array from data
function unflatten(arr) {
      var tree = [],
          mappedArr = {},
          arrElem,
          mappedElem;

      // First map the nodes of the array to an object -> create a hash table.
      for(var i = 0, len = arr.length; i < len; i++) {
        arrElem = arr[i];
        mappedArr[arrElem.id] = arrElem;
        mappedArr[arrElem.id]['children'] = [];
      }

      for (var id in mappedArr) {
        if (mappedArr.hasOwnProperty(id)) {
          mappedElem = mappedArr[id];          
          // If the element is not at the root level, add it to its parent array of children.
          if (mappedElem.parent) {
            mappedArr[mappedElem['parent']]['children'].push(mappedElem);
          }
          // If the element is at the root level, add it to first level elements array.
          else {            
            tree.push(mappedElem);
          }
        }
      }
      return tree;
    }

var html = ['<ul class="tree"  >'];

//Create UL-LI-List for tree
function createList(arr) {
    html.push('<ul>');       
    $.each(arr, function(i, val) {            
        if(val.parent == ""){
          html.push('<li><a href="#"><h4>' + val.name + "</h4></a>");
        }
        else {
          html.push('<li><a href="#/" onclick="goToUser('+ val.userid +')"><img src="'+val.imageUrl+'" width="125px"><h5>' + val.name + "</h5></ br><small>"+val.role+"</small></a>");
        }        
        if (val.children) {          
            createList(val.children)            
        }
        html.push('</li>');      
    });
    html.push('</ul>');
}

createList(unflatten(data));

//Remove double ul/ul-Elements at the End
for(i = 0; i < html.length; i++){
  if(html[i+1] != undefined){
    if(html[i] == "<ul>" && html[i+1] == "</ul>"){
      html.splice(i,2);
    }
  }
}
function goToUser(id){
    window.location.href = "/orga/single/"+id;     
}

$('#diagram').append(html.join(''));


</script>
{% endblock content %}