{% extends "users/base.html" %}
{% load crispy_forms_tags %}
{% load counter_tag %}
{% block content %}
<div class="content-section col-12">
  <h3>Neuen Standard anlegen{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Legen Sie hier einen neuen Standard an." class="far fa-question-circle"></i></small>{% endif %}</h3>
  <hr>  
  <form method="POST" id="addstandardform">
	  	{% csrf_token %}	  	
      <div class="row"><div class="col-8">
      {% for field in normalForm %}
      {% if field.is_hidden == False %}
        {% if forloop.counter|divisibleby:6 %}
        </div><div class="col-3">
          {% if field.name != 'freefield_content' and field.name != 'freefield_title' %}
            {{field|as_crispy_field }}    
          {% endif %}      
        {% else %}
          {% if field.name != 'freefield_content' and field.name != 'freefield_title' %}
            {{field|as_crispy_field }}
          {% endif %}
        {% endif %}
      {% endif %}
      {% endfor %}

      {% for field in normalForm %}
        {% if field.is_hidden %}
          {{field}}
        {% endif %}
      {% endfor %}  
      
      <!-- COLLAPSE AREA FOR GROUPS FILES AND LINKED STANDARDS -->
      <div class="accordion"  id="additionalStandardInfos">

           <div class="card">
        <div class="card-header" id="st_freefield">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#freefield_content" aria-expanded="false" aria-controls="freefield_content">
              <i class="fas fa-file-alt"></i>&nbsp;Freitextfeld{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Vergeben Sie für ein freies Textfeld einen Titel und einen entsprechenden Inhalt." class="far fa-question-circle"></i></small>{% endif %}
            </button>
          </h5>
        </div>        
        <div id="freefield_content" class="collapse" aria-labelledby="st_freefield" data-parent="#additionalStandardInfos">
          <div class="card-body">
            {{ normalForm.freefield_title|as_crispy_field }}
            {{ normalForm.freefield_content|as_crispy_field }}
          </div>
        </div>
      </div>



      <div class="card">
        <div class="card-header" id="st_useraut">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#useraut_content" aria-expanded="false" aria-controls="useraut_content">
              <i class="fas fa-user"></i>&nbsp;Mitarbeiterzuweisung{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Weisen Sie dem Standard verantwortliche, ausführende und vertretende Mitarbeiter zu." class="far fa-question-circle"></i></small>{% endif %}
            </button>
          </h5>
        </div>        
        <div id="useraut_content" class="collapse" aria-labelledby="st_useraut" data-parent="#additionalStandardInfos">
          <div class="card-body">
            <button type="button" class="btn btn-primary mb-2" onclick="javascript:changeAddedUsers()">Mitarbeiter zuweisen</button>
          </div>
        </div>
      </div>













      <div class="card">
        <div class="card-header" id="st_groups">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#stgroups_content" aria-expanded="false" aria-controls="stgroups_content">
              <i class="fas fa-lock"></i>&nbsp;Zugriffsbeschränkung{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Legen Sie fest, welche Gruppe diesen Standard sehen kann. Ist keine ausgewählt, ist der Standard für alle sichtbar." class="far fa-question-circle"></i></small>{% endif %}
            </button>
          </h5>
        </div>

        <div id="stgroups_content" class="collapse" aria-labelledby="st_groups" data-parent="#additionalStandardInfos">
          <div class="card-body">
            {% for g in agencygroups %}            
            <div class="custom-control custom-checkbox mb-2">                        
              <input type="checkbox" class="custom-control-input groupclass" onclick="javascript:groupsChange({{g.pk}}, this.checked)"  name="group_{{g.pk}}" id="group_{{g.pk}}">
            <label class="custom-control-label" for="group_{{g.pk}}" >{{g.agencygroupname}}</label>
            </div>            
          {% endfor %}
          </div>
        </div>
      </div>
      {% if request.user.profile.agency.module_files %}
      <div class="card">
        <div class="card-header" id="st_files">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#st_files_content" aria-expanded="false" aria-controls="st_files_content">
              <i class="fas fa-file"></i>&nbsp;Dateien{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Fügen Sie ihren Standards Dateien zu. Diese liegen entweder bereits unter Dateien oder können iher direkt hochgeladen werden. Neu hochgeladene Dateien werden im Uploadordner für Standards gespeichert." class="far fa-question-circle"></i></small>{% endif %}
            </button>
          </h5>
        </div>
        <div id="st_files_content" class="collapse" aria-labelledby="st_files" data-parent="#additionalStandardInfos">
          <div class="card-body">
            <div class="input-group mb-3">
            <input class="form-control searchuserfieldstask" list="possfiles" id="searchfiles" type="text" onkeyup="javascript:updateLinkedFiles()" >
            <div class="input-group-append">            
              <button type="button" onclick="javascript:clearSearchfieldAddFile()" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
            </div>
              <datalist id="possfiles">
                {% for f in files %}            
                <option id="file_{{f.pk}}" value="{{f.name}}">{{f.name}}</option>            
                {% endfor %}
              </datalist>        
          </div>
          Verlinkte Dateien:
          <table id="linkedfiles" class="table table-hover table-sm">
          </table>                
          
          <input type="file" id="uploadedfile" name="uploadedfile" style="display:none">
           {% if user|usergperm:"filesmanager" %} 
          <div class="alert alert-secondary text-center mt-5" id="directdiv" role="alert" style="line-height: 17px; text-align: center;">
          <button type="button" class="btn btn-primary btn-sm" id="uploadButton" onclick="javascript:uploadButtonPush()"><i class="fas fa-plus"></i></button>&nbsp;&nbsp;<small>klicken/hineinziehen<p class="mt-2">Dateien werden im <b>Uploadordner für Standards</b> gespeichert.
          </small></p>
          </div>
          {% endif %}
        
          </div>
        </div>
      </div>      
      {% endif %}
      <div class="card">
        <div class="card-header" id="st_linked">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#st_linked_content" aria-expanded="false" aria-controls="st_linked_content">
              <i class="fas fa-fw fa-lightbulb"></i>&nbsp;Standards{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Verlinken Sie hier andere Standards, die etwas mit diesem Standard zutun haben." class="far fa-question-circle"></i></small>{% endif %}
            </button>
          </h5>
        </div>
        <div id="st_linked_content" class="collapse" aria-labelledby="st_linked" data-parent="#additionalStandardInfos">
          <div class="card-body">
            <div class="input-group mb-3">
            <input class="form-control" list="possstandards" id="searchstandards" type="text" onkeyup="javascript:updateLinkedStandards()" >
            <div class="input-group-append">            
              <button type="button" onclick="javascript:clearSearchfieldAddStandard()" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
            </div>
              <datalist id="possstandards">
                {% for s in standards %}            
                <option id="standard_{{s.pk}}" value="{{s.name|truncatechars:30}}">{{s.name|truncatechars:30}}</option>            
                {% endfor %}
              </datalist>        
          </div>
          Verlinkte Standards:
          <table id="linkedstandards" class="table table-hover table-sm">
          </table>
          </div>
        </div>
      </div>
    </div>

          <div class="card">
        <div class="card-header" id="st_agencynetwork">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#agnetwork_content" aria-expanded="false" aria-controls="agnetwork_content">
              <i class="fas fa-users"></i>&nbsp;Agenturverbund{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Wählen Sie hier aus, in welchen Agenturverbund dieser Standard geteilt werden soll." class="far fa-question-circle"></i></small>{% endif %}
            </button>
          </h5>
        </div>        
        <div id="agnetwork_content" class="collapse" aria-labelledby="st_agencynetwork" data-parent="#additionalStandardInfos">
          <div class="card-body">
            Das Zuweisen zu einem Agenturverbund ist erst nach dem Anlegen eines neuen Standards möglich.
          </div>
        </div>
      </div>

    </div></div>
	  	<p>Wenn ein Standard erstellt wurde, kann er nur von einer Person mit dem Recht <i>Standards bearbeiten und freischalten</i> veröffentlicht werden.</p>
	  <hr>	  	
	  	<button type="submit" class="btn btn-success">Standard anlegen</button>&nbsp;
	  	<a class="btn" href="{% url 'standards' %} ">Abbrechen</a>
    </form>
</div>

<!-- FILE FORBIDDEN DELETE FILE -->
<div class="modal fade" id="forbiddenFileType" 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">Datei nicht erlaubt</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">        
        Diesen Dateitypen dürfen Sie nicht hochladen.
      </div>
      <div class="modal-footer">        
        <button type="button" class="btn btn-success" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>

<!-- FILE FORBIDDEN DELETE FILE -->
<div class="modal fade" id="forbiddenFileType" 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">Datei nicht erlaubt</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">        
        Diesen Dateitypen dürfen Sie nicht hochladen.
      </div>
      <div class="modal-footer">        
        <button type="button" class="btn btn-success" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>


<!-- Add Users to Standard -->
<div class="modal fade" id="addUsersToStandard" tabindex="-1" 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="exampleModalLongTitle">Mitarbeiter zuweisen</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">     
        
      <!-- 
        Verantwortlicher
        Ausführender
        Vertreter
      -->  
      <h6>Verantwortlicher:</h6>
      <div class="input-group mb-3">
          <input class="form-control searchuserfieldstask" list="possusers_verant" id="searchuser_verant" type="text" onkeyup="javascript:checkUserVerant()" >
          <div class="input-group-append">            
            <button type="button" onclick="javascript:clearUserSearchFields('verant')" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
          </div>
            <datalist id="possusers_verant">
              {% for us in usersofagency %}
                <option id="{{us.pk}}_verant" value="{{us.first_name}} {{us.last_name}}"></option>
              {% endfor %}
            </datalist>        
        </div>
       
       <!--<h6>Verantwortliche Mitarbeiter:</h6>-->
      <div id="added_users_verant_buttons"></div>

      <hr>
      <!--         
        Ausführender
        Vertreter
      -->  
      <h6>Ausführender:</h6>
      <div class="input-group mb-3">
          <input class="form-control searchuserfieldstask" list="possusers_ex" id="searchuser_ex" type="text" onkeyup="javascript:checkUserEx()" >
          <div class="input-group-append">            
            <button type="button" onclick="javascript:clearUserSearchFields('ex')" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
          </div>
            <datalist id="possusers_ex">
              {% for us in usersofagency %}
                <option id="{{us.pk}}_ex" value="{{us.first_name}} {{us.last_name}}"></option>
              {% endfor %}
            </datalist>        
        </div>
       
       <!--<h6>Ausführende Mitarbeiter:</h6>-->
      <div id="added_users_ex_buttons"></div>


      <hr>
      <!--         
        Vertreter
      -->  
      <h6>Vertreter:</h6>
      <div class="input-group mb-3">
          <input class="form-control searchuserfieldstask" list="possusers_ver" id="searchuser_ver" type="text" onkeyup="javascript:checkUserVer()" >
          <div class="input-group-append">            
            <button type="button" onclick="javascript:clearUserSearchFields('ver')" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
          </div>
            <datalist id="possusers_ver">
              {% for us in usersofagency %}
                <option id="{{us.pk}}_ver" value="{{us.first_name}} {{us.last_name}}"></option>
              {% endfor %}              
            </datalist>        
        </div>
       
       <!--<h6>Vertretende Mitarbeiter:</h6>-->
      <div id="added_users_ver_buttons"></div>



       </div>
      <div class="modal-footer">       
        <button type="button" class="btn btn-success" data-dismiss="modal">Fertig</button>
      </div>
    </div>
  </div>
</div>

<!-- UPLOADING PROCESS -->
<div class="modal fade" id="uploadModalProgress" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Hochladen</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <i class="fas fa-spinner fa-spin"></i> Datei wird hochgeladen...  
        <div class="progress">
          <div class="progress-bar" id="uploadprocessbar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>      
    </div>
  </div>
</div>

<!-- CONFIRMA DOUBLE FILE -->
<div class="modal fade" id="doubleFileChoiceModal" 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">Datei bereits vorhanden</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">        
        Die Datei <b><span id="doublefile_name"></span></b> ist bereits vorhanden. Soll die Datei ersetzt oder beide behalten werden?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="javascript:replaceFileDirectChoice(filetodo_ex, 1)">Alte Datei ersetzen</button>&nbsp;&nbsp;
        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="javascript:replaceFileDirectChoice(filetodo_ex, 0)">Beide behalten</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident/.test(ua);
if ( isIE ) {
  //IE specific code goes here
    setInterval(function()
  {
    alluserfields = $(".searchuserfieldstask").each(function(key, value){
      specific_userfield_id = value['id'].split("_")[1];
      updateLinkedStandards();
      updateLinkedFiles();
      checkUserVerant();
      checkUserEx();
      checkUserVer();
    });     
  },400);
}

//USERSTOSTANDARDS
//Verantwortlicher
act_verant = [];
function checkUserVerant(){
  var g = $('#searchuser_verant').val();
  var id = $('#possusers_verant').find('option[value="' + g + '"]').attr('id');
  if(id != undefined && id.length > 0){  
      tempid = id.split("_")[0];
      clearUserSearchFields("verant");                          
      $("#added_users_verant_buttons").append('<span id="span_btn_verant_'+tempid+'" class="badge badge-pill badge-primary mr-2  mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromVeran('+tempid+', \''+g+'\')">'+g+'&nbsp;&nbsp;<i class="fas fa-times"></i></a ></span>');
      $("#" + tempid + "_verant").remove();  
      act_verant.push(tempid);    
      $("#id_us_verant").val(act_verant);  
  }
  
}

function removeUserFromVeran(id, name){
  index_to_rem = act_verant.indexOf(id.toString());
  act_verant.splice(index_to_rem,1);
  $('#possusers_verant').append('<option id="'+id+'_verant" value="'+ name +'">'+ name +'</option>');  
  $("#id_us_verant").val(act_verant);
  $("#span_btn_verant_" + id).remove();
  
}


//Ausführender
act_ex = [];
function checkUserEx(){
  var g = $('#searchuser_ex').val();
  var id = $('#possusers_ex').find('option[value="' + g + '"]').attr('id');
  if(id != undefined && id.length > 0){  
      tempid = id.split("_")[0];      
      clearUserSearchFields("ex");    
      $("#added_users_ex_buttons").append('<span id="span_btn_ex_'+tempid+'" class="badge badge-pill badge-primary mr-2  mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromEx('+tempid+', \''+g+'\')">'+g+'&nbsp;&nbsp;<i class="fas fa-times"></i></a ></span>');
      $("#" + tempid + "_ex").remove();    
      act_ex.push(tempid);   
      $("#id_us_ex").val(act_ex);
  }
  
}

function removeUserFromEx(id, name){
  index_to_rem = act_ex.indexOf(id.toString());
  act_ex.splice(index_to_rem,1);
  $('#possusers_ex').append('<option id="'+id+'_ex" value="'+ name +'">'+ name +'</option>');  
  $("#id_us_ex").val(act_ex);
  $("#span_btn_ex_" + id).remove();
  
}

//Vertreter
act_ver = [];
function checkUserVer(){
  var g = $('#searchuser_ver').val();
  var id = $('#possusers_ver').find('option[value="' + g + '"]').attr('id');
  if(id != undefined && id.length > 0){  
      tempid = id.split("_")[0];      
      clearUserSearchFields("ver");    
      $("#added_users_ver_buttons").append('<span id="span_btn_ver_'+tempid+'" class="badge badge-pill badge-primary mr-2  mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromVer('+tempid+', \''+g+'\')">'+g+'&nbsp;&nbsp;<i class="fas fa-times"></i></a ></span>');
       $("#" + tempid + "_ver").remove();     
       act_ver.push(tempid);  
       $("#id_us_ver").val(act_ver); 
  }
  
}

function removeUserFromVer(id, name){
  index_to_rem = act_ver.indexOf(id.toString());
  act_ver.splice(index_to_rem,1);
  $('#possusers_ver').append('<option id="'+id+'_ver" value="'+ name +'">'+ name +'</option>');  
  $("#id_us_ver").val(act_ver);
  $("#span_btn_ver_" + id).remove();
  
}


//Clear user search fields
function clearUserSearchFields(opt){
  $("#searchuser_" + opt).val("");
}


//STANDARDS
actualStandards = [];

function changeAddedUsers(){
  $("#addUsersToStandard").modal("toggle");
}


function clearSearchfieldAddStandard(){
  $("#searchstandards").val("");
}

function updateLinkedStandards(){
  var g = $('#searchstandards').val();
  var id = $('#possstandards').find('option[value="' + g + '"]').attr('id');
  if(id != undefined && id.length > 0){  
    tempid_standard = id.split("_")[1];
    actualStandards.push(tempid_standard);  
    clearSearchfieldAddStandard();    
    $("#" + id).remove();     
    $("#linkedstandards").append('<tr id="standardadded_'+tempid_standard+'"><td>' + g + '</td><td><button type="button" class="btn btn-danger btn-sm" onclick="javascript:remStandard('+tempid_standard+', \''+g+'\')"><i class="fas fa-trash"></i></button></td></tr>');
  }

  $("#id_added_standards").val(actualStandards);  
}

function remStandard(id, name){
  index_to_rem = actualStandards.indexOf(id);
  actualStandards.splice(index_to_rem,1);
  $('#possstandards').append('<option id="standard_'+id+'" value="'+ name +'">'+ name +'</option>');
  $("#standardadded_" + id).remove();
  $("#id_added_standards").val(actualStandards);

}

//FILES
// preventing page from redirecting
 $("html").on("dragover", function(e) {
    e.preventDefault();
    e.stopPropagation();
 });
  $("html").on("drop", function(e) { e.preventDefault(); e.stopPropagation(); });

   $( "#directdiv" ).on('dragenter', function (e) {
        e.stopPropagation();
        e.preventDefault();
        currentid = e["currentTarget"]['id'];
        $("#directdiv").addClass('bg-secondary');         
    });


$('#directdiv').on('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();
        $("#directdiv").removeClass('bg-secondary');                   
        uploadAction(e.originalEvent.dataTransfer.files[0], e["currentTarget"]['id'].split("_")[0]);        
    });

$('#directdiv').on('dragleave', function (e) {
        e.stopPropagation();
        e.preventDefault();        
        currentid = e["currentTarget"]['id'];                
        $("#directdiv").removeClass('bg-secondary');         
    });    

allowedtypes = ['doc','docx','odt','ods','xls','xlsx','xlsm','ppt','pptx','mov','avi','svg','png','jpg','jpeg','mp3', 'wav', 'zip', 'rar', 'mp4', 'mwv', 'flv', 'eps', 'txt', 'pdf']


function uploadButtonPush(){
  $("#uploadedfile").click();
}

$('#uploadedfile').on('change', function() {  
    uploadAction($("#uploadedfile")[0]['files'][0], {{parentid}}); 
});

function hideUpload(){
  $("#uploadModalProgress").modal("hide");
}

function replaceFileDirectChoice(filetodo, choice){

  $("#doubleFileChoiceModal").modal("toggle");
  doUploadAction(filetodo_ex, choice);
}

function uploadAction(filetodo){

  filetodo_ex = filetodo;  

   $.ajax(
      {
        type: "GET",
        url: "{% url 'cloud-adddir' parentid %}",
        data:{
          action : "check_doublefile",
          name : filetodo.name
        },
        success: function( data ) 
        {    

            if(data["data"]["found"]){
              $("#doubleFileChoiceModal").modal("toggle");
              $("#doublefile_name").html(filetodo.name);
            }
            else{
              doUploadAction(filetodo, 0);
            }
        }
     });
  
}

function getFileExtension1(filename) {
  return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename)[0] : undefined;
}

function doUploadAction(filetodo, replacestat){
  var formData = new FormData();
  formData.append("uploadedfile", filetodo); 
  formData.append("uploadsource", "standards"); 
  formData.append("replace", replacestat);

    var c = false; 
  for (i = 0; i < allowedtypes.length; i++) {
    if (allowedtypes[i].localeCompare(getFileExtension1(filetodo.name)) == 0)
    { 
      c = true;
    }
  } 

  if(c && filetodo.type.length > 0){
    $.ajax({
        url: "{% url 'cloud-adddir' parentid %}",
        headers: {
                      "X-CSRFTOKEN": "{{ csrf_token }}"
              },
        data: formData,
        type: 'POST',
        cache: false,
        processData: false,
        contentType: false,
        beforeSend: function(){          
            $("#uploadModalProgress").modal("toggle");          
          },
           xhr: function() {
              var xhr = new window.XMLHttpRequest();
              xhr.upload.addEventListener("progress", function(evt) {
                  if (evt.lengthComputable) {
                      var percentComplete = (evt.loaded / evt.total) * 100;
                      $("#uploadprocessbar").css("width", percentComplete + "%");                      
                  }
             }, false);
             return xhr;
          },
        success: function(data) {
          if(data["success"] == true){
            setTimeout(function(){
              hideUpload();   
              actualFiles.push(String(data["data"]["savedobj_id"]));  
              $("#id_added_files").val(actualFiles);
              $("#linkedfiles")   .append('<tr id="fileadded_'+data["data"]["savedobj_id"]+'"><td>' + data["data"]["savedobj_name"] + '</td><td><button type="button" class="btn btn-danger btn-sm" onclick="javascript:remFile('+data["data"]["savedobj_id"]+', \''+data["data"]["savedobj_name"]+'\')"><i class="fas fa-trash"></i></button></td></tr>');
            }, 1000);      
          }          
          else{
            $("#forbiddenFileType").modal("toggle")                 
          }          
        }
     });  
  }
  else{
    $("#forbiddenFileType").modal("toggle")
  }
}

actualFiles = [];

function clearSearchfieldAddFile(){
  $("#searchfiles").val("");
}


function updateLinkedFiles(){  
  var g = $('#searchfiles').val();
  var id = $('#possfiles').find('option[value="' + g + '"]').attr('id');
  if(id != undefined && id.length > 0){  
    tempid_file = id.split("_")[1];
    actualFiles.push(tempid_file);  
    $("#id_added_files").val(actualFiles)
    clearSearchfieldAddFile();    
    $("#" + id).remove();     
    $("#linkedfiles")   .append('<tr id="fileadded_'+tempid_file+'"><td>' + g + '</td><td><button type="button" class="btn btn-danger btn-sm" onclick="javascript:remFile('+tempid_file+', \''+g+'\')"><i class="fas fa-trash"></i></button></td></tr>');
  }
}

function remFile(id, name){
  index_to_rem = actualFiles.indexOf(id);
  actualFiles.splice(index_to_rem,1);
  $('#possfiles').append('<option id="file_'+id+'" value="'+ name +'">'+ name +'</option>');
  $("#fileadded_" + id).remove();
  $("#id_added_files").val(actualFiles);
}

//GROUPS
actualGroups = [];

function groupsChange(groupid, value){
  if(value){
      actualGroups.push(groupid);  
  }      
  else {
      index_to_rem = actualGroups.indexOf(groupid)
      actualGroups.splice(index_to_rem,1);
  }  
  $("#id_checked_groups").val(actualGroups);
}

  /* 
    Ajax-Request zum nachladen der Aufgaben nach Auswahl der Bereiche
  */
$("#id_area").change(function () {
      var areaid = $(this).val(); 
      $.ajax({                      
        url: "/standards/ajax/loadtasks/",                    
        data: {
          'areaid': areaid      
        },
        success: function (data) {   
          $("#id_task").html(data);  
        }
      });
    });

$(document).ready(function() {
 
  $('#id_content').summernote({
      height: 400,
      lang: "de-DE",
      disableDragAndDrop: true
    });
});

</script>

{% if not perms.users.standard_management %}

<script type="text/javascript">
  $("#div_id_public").hide();
</script>

{% endif %}

{% endblock content %}