{% load counter_tag %}
<div class="col-9">
<button type="button" class="btn btn-primary" onclick="javascript:addGroup()" data-toggle="tooltip" data-placement="top" title="Neue Gruppe erstellen, Namen und Rechte vergeben und anschließend Mitglieder hinzufügen."><i class="fas fa-plus"></i>&nbsp;Gruppe</button>

<!-- GROUPS -->
<!-- COUNTER USER IN GROUPS -->
<div id="allGroups">
  <div id="groupAccordion" class="mt-3">
{% for aggroup in agencygroups %}
  {% setvar 0 %}
    {% for user in usersofagency %}   
        {% for group in user.groups.all %}          
          {% if group.name == aggroup.group.name %}               
            {% incvar %}            
          {% endif %}                      
        {% endfor %}      
    {% endfor %}
  {% getvar as varcounter %}
  <div class="card mb-2">
    <div class="card-header" id="agroup_{{aggroup.pk}}" style="float: left">      
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#agroup_{{aggroup.pk}}_card" aria-expanded="false" aria-controls="agroup_{{aggroup.pk}}_card"><small><i class="fas fa-chevron-down"></i></small></button>&nbsp;&nbsp;&nbsp;
        <button class="btn btn-link" data-toggle="collapse" data-target="#agroup_{{aggroup.pk}}_card" aria-expanded="false" aria-controls="agroup_{{aggroup.pk}}_card">
          <span id="groupname_{{aggroup.pk}}" >Gruppe <b>{{aggroup.agencygroupname}}&nbsp;</b></span><small>(<span  id="groupcounter_{{aggroup.pk}}">{{varcounter}}</span>)</small>
        </button>      
        {% if not aggroup.savefordel %}
        <button style="float: right" type="button" class="btn btn-secondary btn-sm " onclick="javascript:delGroup({{aggroup.pk}})" data-toggle="tooltip" data-placement="top" title="Gruppe löschen. Nur möglich, bei selbst erstellten Gruppen."><i class="fas fa-trash"></i></button>
        {% endif %}
        {% if not aggroup.savefordel %}  
        <button type="button" style="float: right" class="btn btn-secondary btn-sm mr-1" onclick="javascript:changeGroupName({{aggroup.pk}})" data-toggle="tooltip" data-placement="top" title="Gruppennamen andern"><small><i class="fas fa-pen"></i></small></button>        
        {% endif %}
      </h5>
    </div>
    
    <div id="agroup_{{aggroup.pk}}_card" class="collapse" aria-labelledby="agroup_{{aggroup.pk}}" data-parent="#groupAccordion">
      <div class="card-body">
        <h5>Gruppenrechte{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Gruppenrechte beeinflussen die Möglichkeiten der Mitarbeiter in einer Gruppe, z.B. dürfen nur Mitarbeiter in einer Gruppe mit dem Recht News entsprechend News erstellen, veröffentlichen und bearbeiten." class="far fa-question-circle"></i></small>{% endif %}</h5>
        {% if aggroup.agencygroupname != "Notfallordner" %}
          <div class="row">
            <div class="col-4">
          {% for perm in perms %}        
            {% if perm.help_text != "Notfallordner verwalten" %}
            {% if forloop.counter|divisibleby:8 %} 
              </div>
              <div class="col-4">
              <div class="custom-control custom-checkbox mb-2 {{perm.name}}">              
                <input type="checkbox" class="custom-control-input" name="{{aggroup.pk}}_{{perm.name}}" id="{{aggroup.pk}}_{{perm.name}}" onchange="javascript:changePerm(this.id)" {% if aggroup.is_admin %} disabled="true" {% endif %}>
              <label class="custom-control-label" for="{{aggroup.pk}}_{{perm.name}}" >{{perm.help_text}}</label>
              </div>
           {% else %} 
             <div class="custom-control custom-checkbox mb-2 {{perm.name}}">
              <input type="checkbox" class="custom-control-input" name="{{aggroup.pk}}_{{perm.name}}" id="{{aggroup.pk}}_{{perm.name}}" onchange="javascript:changePerm(this.id)" {% if aggroup.is_admin %} disabled="true" {% endif %}>
              <label class="custom-control-label" for="{{aggroup.pk}}_{{perm.name}}" >{{perm.help_text}}</label>
            </div>             
           {% endif %}
           {% endif %}
       {% endfor %}        
           </div>            
        </div><!-- END ROW RIGHT -->
        <hr>
        {% else %}
      Der Notfallordner ist für keine weiteren Rechte konfigurierbar.
      <hr>
      {% endif %}
        <div col="10">
          <h6>Mitarbeiter zur Gruppe <b>{{aggroup.agencygroupname}}</b> hinzufügen</h6>
        <div class="input-group mb-3 col-5">
          <input class="form-control searchuserfields" list="usersfree_{{aggroup.pk}}"  id="searchusers_{{aggroup.pk}}" type="text" onkeyup="javascript:checkSearchUser({{aggroup.pk}})">
          <div class="input-group-append">            
            <button type="button" onclick="javascript:clearSearchfield({{aggroup.pk}})" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
          </div>
            <datalist id="usersfree_{{aggroup.pk}}">
              {% for user in usersofagency %}                   
                {% if not user|has_group:aggroup.group.name %}                      
                  <option id="{{user.pk}}_{{aggroup.pk}}" value="{{user.first_name}} {{user.last_name}}">
                {% endif %}
            {% endfor %}
            </datalist>
          </datalist>
        </div>
      <hr>
          <h6>Gruppenmitglieder in <b>{{aggroup.agencygroupname}}</b></h6>
          {% if varcounter > 0 %}
            <span id="nogroupmember_{{aggroup.pk}}" style="display: none">Diese Gruppe hat noch keine Mitglieder.</span>
          {% else %}
            <span id="nogroupmember_{{aggroup.pk}}">Diese Gruppe hat noch keine Mitglieder.</span>
          {% endif %}
          <div id="added_users_button_{{aggroup.pk}}">
        {% for user in usersofagency %}   
          {% for group in user.groups.all %}  
            {% if group.name == aggroup.group.name %}                             
            {% if request.user == user and aggroup.is_admin %}
            <span class="badge badge-pill badge-primary mr-2 mt-2"><button class="btn btn-primary" disabled="true">{{ user.first_name }} {{ user.last_name }}</button></span>
            {% else %}
              <span id="span_btn_{{user.pk}}_{{aggroup.pk}}" class="badge badge-pill badge-primary mr-2 mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromGroup({{ user.pk }}, {{aggroup.pk}})">{{ user.first_name }} {{ user.last_name }}&nbsp;&nbsp;<i class="fas fa-times"></i></a >       
              </span>
              {% endif %}
            {% endif %}                      
          {% endfor %}      
      {% endfor %}
      </div>
    </div>

   </div>
</div>
</div>

{% if request.user.profile.agency.module_recoverdir %}
  {% if forloop.counter == 3 %}
    <hr>
  {% endif %}

  {% else %}

  {% if forloop.counter == 2 %}
    <hr>
  {% endif %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
<!-- ADDING GROUP PERMS -->
{% for aggroup in agencygroups %}
  {% for p in aggroup.group.permissions.all %}
    {% for perm in perms %}       
        {% if p.codename == perm.name %}
          <script>$("#{{aggroup.pk}}_{{perm.name}}").prop('checked', true);</script>
        {% endif %}
    {% endfor %}
  {% endfor %}
{% endfor %}
<script>

/* CHECK FOR ACTIVATED MODULS */
module_news = '{{request.user.profile.agency.module_news}}'
module_organizer = '{{request.user.profile.agency.module_organizer}}'
//module_files = '{{request.user.profile.agency.module_files}}'
//module_organigramm = '{{request.user.profile.agency.module_organigramm}}'

if(module_organizer == "False"){
  $(".moduleorganizer").remove();
}

if(module_news == "False"){
  $(".modulenews").remove();
}


var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident/.test(ua);
if ( isIE ) {
  //IE specific code goes here
    setInterval(function()
  {
    alluserfields = $(".searchuserfields").each(function(key, value){
      specific_userfield_id = value['id'].split("_")[1];
      checkSearchUser(specific_userfield_id);
    });     
  },400);
}

//returns the params of url GET
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}
//Show Save-Toast while reload side by new group
$(document).ready(function(){ 
  if( getUrlVars()["showtoast"]){
    $('#notchange_done').toast('show');
  }
  if(getUrlVars()["groupdel"]){
    $("#toast_savecontent").html("Gruppe erfolgreich gelöscht!");
  }
})

/*
    MANAGE GROUP FUNCTIONS
*/
groupaction = 0;
groupupdate_id = false;
tempid_useraddgroup = 0;
function clearSearchfield(groupid){
  $("#searchusers_" + groupid).val("");
}

function checkSearchUser(groupid){
  var g = $('#searchusers_' + groupid).val();
      var id = $('#usersfree_' + groupid).find('option[value="' + g + '"]').attr('id');
      if(id != undefined && id.length > 0){  
        tempid_useraddgroup = id.split("_")[0];
        $.ajax(
        {
            type: "GET",
            url: "/dasettings/ajax",
            data:{
              action : "add_user_to_group",
              groupid : groupid,
              userid: tempid_useraddgroup,
            },
            success: function( data ) 
            {       
              if(data['success']){   
                groupid = data['data']['groupid'];
                userid = data['data']['userid'];
                user_fname = data['data']['user_fname'];
                user_lname = data['data']['user_lname'];
                $('#notchange_done').toast('show');                     
                $("#" + userid + "_" + groupid).remove();
                $("#toast_savecontent").html("Mitarbeiter erfolgreich hinzugefügt!");               
                $("#added_users_button_" + groupid).append('<span id="span_btn_'+userid+'_'+groupid+'" class="badge badge-pill badge-primary mr-2 mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromGroup('+userid+', '+groupid+')">'+user_fname+' '+user_lname+'&nbsp;&nbsp;<i class="fas fa-times"></i></a >');
                clearSearchfield(groupid);
                newgroupcounter = parseInt($("#groupcounter_" + groupid).html())+1;
                $("#groupcounter_" + groupid).html(newgroupcounter);
                if(newgroupcounter > 0){
                  $("#nogroupmember_" + groupid).hide();
                }
              }
              else{             
                $('#notchange_err').toast('show');
                $("#toast_errcontent").html("Mitarbeiter konnte nicht hinzugefügt werden!");
              }
            }
         });
      }
}

function removeUserFromGroup(userid, groupid){
  $.ajax(
    {
        type: "GET",
        url: "/dasettings/ajax",
        data:{
          action : "remove_user_from_group",
          groupid : groupid,
          userid: userid
        },
        success: function( data ) 
        {           
          if(data['success']){   
            groupid = data['data']['groupid'];
            userid = data['data']['userid'];
            user_fname = data['data']['user_fname'];
            user_lname = data['data']['user_lname'];      
            $('#notchange_done').toast('show');     
            $("#toast_savecontent").html("Mitarbeiter erfolgreich entfernt!");
            $("#span_btn_" + userid + "_" + groupid).remove();
            newgroupcounter = parseInt($("#groupcounter_" + groupid).html())-1;
            $("#groupcounter_" + groupid).html(newgroupcounter);
            if(newgroupcounter == 0){
              $("#nogroupmember_" + groupid).show();
            }
            $("#usersfree_" + groupid).append('<option id="'+userid+'_'+groupid+'" value="'+ user_fname +' '+ user_lname +'">');
          }
          else{             
            $('#notchange_err').toast('show');
            $("#toast_errcontent").html("Mitarbeiter konnte nicht entfernt werden!");
          }
        }
     });
}

function changePerm(tosplitid){
  var splitted = tosplitid.split("_");
  perm_groupid = splitted[0];
  perm_name = splitted[1];
  perm_value = $("#"+tosplitid).is(":checked"); 
  
  $.ajax(
    {
        type: "GET",
        url: "/dasettings/ajax",
        data:{
          action : "change_perm_group",
          id : perm_groupid,
          perm: perm_name,
          val : perm_value
        },
        success: function( data ) 
        {               
          
          if(data['success']){         
            $('#notchange_done').toast('show');     
            $("#toast_savecontent").html("Gruppenrechte gespeichert!");
          }
          else{             
            $('#notchange_err').toast('show');
            $("#toast_errcontent").html("Gruppenrechte nicht gespeichert!");
          }
        }
     });
}

function delGroup(groupid){
  groupupdate_id = groupid;
  $("#delAgencyGroup").modal("toggle");
  $.ajax(
    {
        type: "GET",
        url: "/dasettings/ajax",
        data:{
          action : "get_groupname",
          id : groupid
        },
        success: function( data ) 
        { 
          $("#delGroupBody").html("Soll Gruppe <b>" + data["data"]["groupname"] + "</b> glöscht werden? Mitarbeiter in dieser Gruppe <u>werden nicht gelöscht</u>.")
        }
     });
}

function doDelGroup(){
  $("#delAgencyGroup").modal("toggle");
  $.ajax(
    {
        type: "GET",
        url: "/dasettings/ajax",
        data:{
          action : "delete_group",
          id : groupupdate_id
        },
        success: function( data ) 
        {               
          
          if(data['success']){              
            window.location.href = window.location.href + "?showtoast=true&groupdel=true";                  
          }
          else{             
            $("#newGroup").modal("toggle");
            $('#notchange_err').toast('show');
            $("#toast_errcontent").html("Gruppe konnte nicht gelöscht werden!");
          }
        }
     });
}

function changeGroupName(groupid){  
  addGroup();
  $.ajax(
    {
        type: "GET",
        url: "/dasettings/ajax",
        data:{
          action : "get_groupname",
          id : groupid
        },
        success: function( data ) 
        { 
          $("#newgroupname").val(data['data']['groupname']);
          $("#modTitle").html("Gruppenname ändern");
      $("#saveNewGroup").prop("disabled", false); 
      groupupdate_id = groupid;
      groupaction = 1;  
        }
     });
}




//SHOW ADD GROUP MODAL
function addGroup(){
  groupaction = 0;
  $("#newGroup").modal("toggle");
  $("#newgroupname").val("");
  $("#groupnameerr").hide();  
  $("#saveNewGroup").prop("disabled", true);
  $("#modTitle").html("Gruppe erstellen");
}

//CREATE NEW GROUP
function updateGroupName(){
  namevalue = $("#newgroupname").val(); 
  //ADD GROUP
  if(groupaction == 0){
    $.ajax(
        {
            type: "GET",
            url: "/dasettings/ajax",
            data:{
              action : "add_group",
              newvalue : namevalue
            },
            success: function( data ) 
            {               
              
            if(data['success']){              
              window.location.href = window.location.href + "?showtoast=true";      
            }
            else{             
              $("#newGroup").modal("toggle");
              $('#notchange_err').toast('show');
              $("#toast_errcontent").html("Der Gruppenname ist in der Agentur bereits vorhanden!");
            }
            }
         });
  }
  //CHANGE GROUP
  else if(groupaction == 1){
    $.ajax(
        {
            type: "GET",
            url: "/dasettings/ajax",
            data:{
              action : "update_groupname",
              id : groupupdate_id,
              newvalue : namevalue
            },
            success: function( data ) 
            {               
            if(data['success']){
              $("#newGroup").modal("toggle");
              $('#notchange_done').toast('show');               
                  $("#groupname_" + groupupdate_id).html("Gruppe <b>"+data['data']['newvalue']+"&nbsp;</b>"); 
            }
            else{
              $('#notchange_err').toast('show');
              $("#toast_errcontent").html("Der Gruppenname ist in der Agentur bereits vorhanden!");
            }
            }
         });
  }
}

//VALIDATE FOR CORRECT INPUT IN GROUP
function validateGroupName(groupname){
  var letters = /^[A-Za-zßäöüÄÖÜ_\-0-9 ]+$/;  
  if(groupname.length > 0){   
    if(!groupname.match(letters))
    {
      $("#groupnameerr").show();
      $("#saveNewGroup").prop("disabled", true);
    }
    else{
      $("#groupnameerr").hide();  
      $("#saveNewGroup").prop("disabled", false);
    } 
  }
  else{   
    $("#groupnameerr").hide();  
    $("#saveNewGroup").prop("disabled", true);
  }
  
}

</script>

<!-- MODEAL NEW GROUP  -->
<div class="modal fade" id="newGroup" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modTitle"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input class="form-control" id="newgroupname" type="text" value="" placeholder="Gruppenname" onkeyup="javascript:validateGroupName(this.value)">
       <div id="groupnameerr" class="alert alert-danger mt-3" style="display: none">Falsche Eingabe! Keine Sonderzeichen!</div>
      </div>
      <div class="modal-footer">
        <button id="saveNewGroup" type="button" class="btn btn-primary" data-dismiss="modal" onclick="javascript:updateGroupName()" disabled="true">Speichern</button>
        &nbsp;
        <button type="button" class="btn" data-dismiss="modal">Abbrechen</button>
      </div>
    </div>
  </div>
</div>

<!-- CONFIRMA DELETE GROUP -->
<div class="modal fade" id="delAgencyGroup" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="groupDelFunction" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Gruppe löschen</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="delGroupBody">        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="javascript:doDelGroup()">Gruppe löschen</button>&nbsp;&nbsp;
        <button type="button" class="btn" data-dismiss="modal">Abbrechen</button>
      </div>
    </div>
  </div>
</div>