{% load crispy_forms_tags %}
{% load static %}
<button type="button" class="btn btn-primary" onclick="javascript:showAgencyJob()" data-toggle="tooltip" data-placement="top" title="Fügen Sie hier weitere Standard-Agenturfunktionen zu oder bearbeiten bestehende.">Agenturfunktionen verwalten</button>
<hr>
<script src="{% static 'users/js/cropper.min.js' %}"></script>
<script src="{% static 'users/js/jquery-cropper.js' %}"></script>
<div class="col-12">
  <!-- Für das Speichern der Bilder enctype -->      
  <form method="POST" enctype="multipart/form-data">
    <input type="hidden" name="form_type" value="agencyform">
    <input type="hidden" name="settings_area" value="agency">
    {% csrf_token %}
    <fieldset class="form-group">          
      <!-- FORMS LADEN -->      
      <div class="row">
      <div class="col-3">
      {% for formfield in agencyform %}
        {% if forloop.counter|divisibleby:5 %}
        </div>
        <div class="col-3">           
           {{formfield|as_crispy_field}}                    
        {% else %}          
           {{formfield|as_crispy_field}}
        {% endif %}
    {% endfor %}
    </div>
      
    </div>
    </fieldset>    
    <hr>
    <div class="form-group">
      <button type="submit" class="btn btn-success">Agenturdaten Aktualisieren</button>&nbsp;          
    </div>
  </form>    
</div>
  <!-- MODAL TO CROP THE IMAGE -->
<div class="modal fade " id="modalCrop" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Bereich bestimmen</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="clearImgField()">
          <span aria-hidden="true">&times;</span>
        </button>        
      </div>
      <div class="modal-body" id="imgmodbody">
        <img src="" id="imagemod" style="max-width: 100%; max-height: 100%;">
      </div>
      <div class="modal-footer">
        <div class="btn-group pull-left" role="group">
          <button type="button" class="btn btn-default js-zoom-in">        
            <i class="fas fa-search-plus"></i>    
          </button>
          <button type="button" class="btn btn-default js-zoom-out">
            <i class="fas fa-search-minus"></i>
          </button>          
          <button type="button" class="btn btn-default js-rot-left">
              <i class="fas fa-undo-alt"></i>           
          </button>
          <button type="button" class="btn btn-default js-rot-right">
              <i class="fas fa-redo-alt"></i>           
          </button>         
        </div>
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearImgField()">Abbrechen</button>
        <button type="button" class="btn btn-primary js-crop-and-upload">Ausschneiden</button>
      </div>
    </div>
  </div>
</div>
<script>
/* CROPPER */
    $("#id_x").val(0);
    $("#id_y").val(0);
    $("#id_width").val(0);
    $("#id_height").val(0);
    $("#id_rotation").val(0);

    function clearImgField(){      
      $("#id_agencypic").val("");
    }
    
      
      /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
      $("#id_agencypic").change(function () {        
        if (this.files && this.files[0]) {          
          var reader = new FileReader();
          reader.onload = function (e) {
            $("#imagemod").attr("src", e.target.result);     
            $("#modalCrop").modal("show");
          }
          reader.readAsDataURL(this.files[0]);
        }
      });

      var cropBoxData;
      var canvasData;
      var $image = $("#imagemod");
      $("#modalCrop").on("shown.bs.modal", function () {  
        $image.cropper({
          viewMode: 0,                    
          strict: false,
          cropBoxMovable: true,
          cropBoxResizable: true, 
          ready: function () {
            $image.cropper("setCanvasData", canvasData);
            $image.cropper("setCropBoxData", cropBoxData);            
          }
        });
        $("#imgmodbody").css({
          "maxWidth": 465
        });

      }).on("hidden.bs.modal", function () {
        cropBoxData = $image.cropper("getCropBoxData");
        canvasData = $image.cropper("getCanvasData");
        $image.cropper("destroy");
      });

      $(".js-zoom-in").click(function () {
        $image.cropper("zoom", 0.1);
      });

      $(".js-zoom-out").click(function () {
        $image.cropper("zoom", -0.1);
      });

      $(".js-rot-right").click(function () {
        $image.cropper("rotate", 90);
      });

      $(".js-rot-left").click(function () {
        $image.cropper("rotate", -90);
      });
      /* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
      $(".js-crop-and-upload").click(function () {        
        var cropData = $image.cropper("getData");                        
        $("#id_x").val(cropData["x"]);
        $("#id_y").val(cropData["y"]);
        $("#id_height").val(cropData["height"]);
        $("#id_width").val(cropData["width"]);
        $("#id_rotation").val(cropData["rotate"]);  
        $("#id_agencypic").attr("src", $image);                 
        $("#modalCrop").modal('toggle');
      });

/*

    AGENCY JOB FUNCTIONS

*/
function showAgencyJob(){
  $("#agencyJobs").modal("toggle");
}

function addAgencyJob(){
  $.ajax(
    {
        type: "GET",
        url: "/dasettings/ajax",
        data:{
          action : "add_agencyfunc"
        },
        success: function( data ) 
        { 
          new_id = data["data"]["new_id"];
          $('#allagencyjobs > tbody:last-child').append('<tr id="agencyjob_'+new_id+'"><td><input class="form-control" type="text" value="" placeholder="Neue Funktion" onkeyup="javascript:updateFunc('+new_id+', this.value)"></td><td><button type="button" class="btn btn-danger" onclick="javascript:funcDel('+new_id+')" data-toggle="tooltip" data-placement="top" title="Agenturfunktion löschen"><i class="fas fa-trash-alt"></i></button></td></tr>');   
        }
     });
}

var todelid = 0;

function funcDel(id){
  todelid = id;
  $("#agencyJobs").modal("toggle");
  $("#delAgencyJob").modal("toggle");
  $.ajax(
    {
        type: "GET",
        url: "/dasettings/ajax",
        data:{
          action : "get_agencyfunc",
          id : id
        },
        success: function( data ) 
        { 
          $("#delFuncBody").html("Achtung! Die Funktion <b>" + data['data']['funcname'] + "</b> wird gelöscht. Alle Mitarbeiter mit dieser Funktion erhalten eine leere Funktionsbeschreibung. Fortfahren?");            
        }
     });
  
}

function doDelAgencyJob(){
  $.ajax(
    {
        type: "GET",
        url: "/dasettings/ajax",
        data:{
          action : "delete_agencyfunc",
          id : todelid
        },
        success: function( data ) 
        { 
          $("#agencyJobs").modal("toggle");
          $("#delAgencyJob").modal("toggle"); 
          $('#agencyjob_' + todelid).remove();
          todelid = 0;
        }
     });
}


timeout = null;
function updateFunc(id, funcname){
  var letters = /^[A-Za-zßäöüÄÖÜ_0-9 ]+$/;
  if(funcname.match(letters))
  {
    //SAVE ONLY EVERY SECOND
    $("#erroninput").hide(); 
    $("#savebreak").show();
    clearTimeout(timeout);
    timeout = setTimeout(function () {    
      if(funcname.match(letters))
      {
        $.ajax(
        {
            type: "GET",
            url: "/dasettings/ajax",
            data:{
              action : "update_agencyfunc",
              id : id,
              newvalue : funcname
            },
            success: function( data ) 
            { 
              if(data["success"]){
                $("#savebreak").hide();                
                $("#funcupdate").fadeTo(2000, 500).slideUp(500, function(){
                  $("#funcupdate").fadeOut(500);
              });
              }
              else{
                $("#erroninput").show(); 
              }            
            }
         });
      }
      else{
        $("#erroninput").show(); 
         $("#savebreak").hide();
         $("#funcupdate").hide();
       }
    }, 1000);    
  }
  else{
   $("#erroninput").show(); 
   $("#savebreak").hide();
   $("#funcupdate").hide();
  }
}   
</script>

<!-- MODAL FOR AGENCYJOBS  -->
<!-- Modal -->
<div class="modal fade" id="agencyJobs" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="agencyFunction" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Agenturfunktionen bearbeiten</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">
        <table class="table table-hover" id="allagencyjobs">          
          <tbody>
            {% for ele in agencyjobs %}
              <tr id="agencyjob_{{ele.pk}}">
                <td>
                  <input class="form-control" type="text" value="{{ele.name}}" onkeyup="javascript:updateFunc({{ele.pk}}, this.value)">
                </td>
                <td>
                  <button type="button" class="btn btn-danger" onclick="javascript:funcDel({{ele.pk}})" data-toggle="tooltip" data-placement="top" title="Agenturfunktion löschen"><i class="fas fa-trash-alt"></i></button>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
        <div id="erroninput" class="alert alert-danger" style="display: none">Falsche Eingabe! Es wird nichts gespeichert.</div>
        <div id="savebreak" class="alert alert-success" style="display: none">Speichern pausiert...</div>
        <div id="funcupdate" class="alert alert-success" style="display: none">Agenturfunktionen aktualisiert.</div>
        <button type="button" class="btn btn-primary" title="Neue Funktion hinzufügen" onclick="javascript:addAgencyJob()" data-toggle="tooltip" data-placement="top" title="Dialog für eine neue Agenturfunktion öffnen"><i class="fas fa-plus"></i>&nbsp;Funktion</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>

<!-- CONFIRMA DELETE DIALOG -->
<div class="modal fade" id="delAgencyJob" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="agencyDelFunction" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Agenturfunktion 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="delFuncBody">   
        {% for ele in agencyjobs %}
              <tr id="agencyjob_{{ele.pk}}">
                <td>
                  <input class="form-control" type="text" value="{{ele.name}}" onkeyup="javascript:updateFunc({{ele.pk}}, this.value)">
                </td>
                <td>
                  <button type="button" class="btn btn-danger" onclick="javascript:funcDel({{ele.pk}})" data-toggle="tooltip" data-placement="top" title="Agenturfunktion löschen"><i class="fas fa-trash-alt"></i></button>
                </td>
              </tr>
            {% endfor %}     
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="javascript:doDelAgencyJob()">Agenturfunktion löschen</button>&nbsp;&nbsp;
        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="javascript:$('#agencyJobs').modal('toggle')">Abbrechen</button>
      </div>
    </div>
  </div>
</div>