{% load static %}
{% load counter_tag %}

<script src="{% static 'users/js/jquery-cropper.js' %}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="{% static 'users/js/colorPick.js' %}"></script>
<link rel="stylesheet" href="{% static 'users/css/colorPick.css' %}">
<style>
	.colorPickSelector {
  border-radius: 5px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  -webkit-transition: all linear .2s;
  -moz-transition: all linear .2s;
  -ms-transition: all linear .2s;
  -o-transition: all linear .2s;
  transition: all linear .2s;
}
noclickeffect:active { border-style: outset !important;}

.colorPickSelector:hover { transform: scale(1.1); }
</style>
<div class="col-6">
<button type="button" class="btn btn-primary" onclick="javascript:addArea(false)" data-toggle="tooltip" data-placement="top" title="Neuen Bereich erstellen."><i class="fas fa-plus"></i>&nbsp;Bereich</button>
</div>

<div id="allAreas" class="mt-3 col-8">
  <div class="areaCollapseContent" id="sortableAreas" class="mt-3">
{%for area in agencyareas%}
	<div class="card mb-2" id="maincard_{{area.pk}}">
	    <div class="card-header" id="area_{{area.pk}}" style="background-color: {{area.color}};opacity:0.8;">
	      <h5 class="mb-0"  style="opacity:1.0;">
	      	
	      	<small><span style="color: #FFFFFF;"><i class="fas fa-sort"></i>&nbsp;&nbsp;&nbsp;&nbsp;</span></small>
	      	<button class="btn noclickeffect" data-toggle="collapse" data-target="#area_content_{{area.pk}}" aria-expanded="false" aria-controls="area_content_{{area.pk}}"><small><span style="color: #FFFFFF;"><i class="fas fa-chevron-down"></i></span></small></button>
	        <button class="btn noclickeffect" data-toggle="collapse" data-target="#area_content_{{area.pk}}" aria-expanded="false" aria-controls="area_content_{{area.pk}}">
	          <span id="areaname_{{area.pk}}" style="color: #ffffff">Bereich <b>{{area.name}}&nbsp;</b></span>
	        </button>        
	        <button type="button" style="float: right" class="btn btn-light btn-sm" onclick="javascript:addArea({{area.pk}})" data-toggle="tooltip" data-placement="top" title="Bereichsnamen und -farbe ändern"><small><i class="fas fa-pen"></i></small></button>  
	        <button style="float: right" type="button" class="btn btn-light btn-sm mr-1" onclick="javascript:delArea({{area.pk}})" data-toggle="tooltip" data-placement="top" title="Bereich löschen"><i class="fas fa-trash-alt"></i></button>
	      </h5>
	    </div>
	    <div id="area_content_{{area.pk}}" class="collapse"  data-labelledby="area_{{area.pk}}" data-parent="#sortableAreas">
	      <div class="card-body">
	       	<button class="btn btn-primary mb-4" onclick="javascript:addTask({{area.pk}})"  data-toggle="tooltip" data-placement="top" title="Neue Tätigkeit hinzufügen."><i class="fas fa-plus"></i>&nbsp;Tätigkeit</button>	       	
	       	<table class="table hover" id="areatask_{{area.pk}}_table">
		          <thead>
		          <tr>
		            <th scope="col">Name</th>
		            <th scope="col">Bereich</th>
		            <th scope="col">Erstellt von</th>            
		            <th scope="col">Erstellt am</th>
		            <th scope="col">&nbsp;</th>
		          </tr>
		        </thead>
		        <tbody id="areatask_{{area.pk}}">
		        {% for task in alltasks %}
		        	{% if task.area.pk == area.pk %}
		          <tr id="task_{{task.id}}" name="{{task.name}}">
		              <td><a href="{% url 'standard-task' task.pk %}" id="taskname_td_area_{{task.pk}}">{{task.name }}</a></td>
		              <td>{{ task.area.name }}</td>
		              <td>{{ task.created_area_by.first_name }} {{ task.created_area_by.last_name }}</td>
		              <td>{{ task.created_area_date }}</td>
		              <td>
		                <button style="float: right" class="btn btn-primary btn-sm" onclick="javascript:updateTaskComplete({{task.pk}})" data-toggle="tooltip" data-placement="top" title="Tätigkeit bearbeiten"><small><i class="fas fa-pen"></i></small></button>  
	        			<button style="float: right" type="button" class="btn btn-danger btn-sm mr-1" onclick="javascript:delTask({{task.pk}})" data-toggle="tooltip" data-placement="top" title="Tätigkeit löschen"><i class="fas fa-trash-alt"></i></button>
		              </td>              
		          </tr>
		          {% endif %}
		        {% endfor %}   
		        </tbody>  
		      </table>
	      </div>
	    </div>
	</div>

{% endfor %}
</div>
</div>

<!-- MODEAL NEW CHANGE AREA  -->
<div class="modal fade" id="mainmodalArea" 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="mainmodalArea_title"></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">
      	<div class="form-group">
		    <label for="exampleInputPassword1">Bereichsname:</label>
		    <input class="form-control" id="newareaname" type="text" value="" placeholder="Bereichsname" onkeyup="javascript:validateAreaName(this.value)">
		  </div>
		 <div class="form-group">
		    <label for="exampleInputPassword1">Bereichsfarbe:</label>
		    <div id="areacolor" class="colorPickSelector"></div>
		  </div>
       <div id="newareaname_err" class="alert alert-danger mt-3" style="display: none">Falsche Eingabe! Keine Sonderzeichen!</div>
      </div>
      <div class="modal-footer">      	
        <button type="button" class="btn btn-danger" data-dismiss="modal">Abbrechen</button>&nbsp;
        <button id="doActionAreaModal" type="button" class="btn btn-success" data-dismiss="modal" onclick="javascript:mainmodalAreaSave()" disabled="true">Speichern</button>
      </div>
    </div>
  </div>
</div>


<!-- CONFIRMA DELETE Area -->
<div class="modal fade" id="delArea" 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">Bereich 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">     
      Möchten Sie den Bereich <b><span id="areaName"></span></b> wirklich löschen? Alle darin enthaltenen Tätigkeiten <u>und Standards</u> werden ebenfalls entfernt!   
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="javascript:doDelArea()">Bereich löschen</button>&nbsp;&nbsp;
        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="javascript:$('#delArea').modal('toggle')">Abbrechen</button>
      </div>
    </div>
  </div>
</div>



<!-- MODEAL ADD TASK  -->
<div class="modal fade" id="mainmodalTasks" 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="mainmodalArea_title">Neue Tätigkeit</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">
      	<div class="form-group">
		    <label for="exampleInputPassword1">Tätigkeitsname:</label>
		    <input class="form-control" id="newtaskname" type="text" value="" placeholder="Bereichsname" onkeyup="javascript:validateTaskName(this.value, 0)">
		  </div>		 
		Nach dem Erstellen der Tätigkeit können Mitarbeiter zugewiesen werden.
       <div id="newtaskname_err" class="alert alert-danger mt-3" style="display: none">Falsche Eingabe! Keine Sonderzeichen!</div>
      </div>
      <div class="modal-footer">      	
        <button type="button" class="btn btn-danger" data-dismiss="modal">Abbrechen</button>&nbsp;
        <button id="doActionTaskModal" type="button" class="btn btn-success" data-dismiss="modal" onclick="javascript:mainmodalTaskSave()" disabled="true">Speichern</button>
      </div>
    </div>
  </div>
</div>

<!-- UPDATE TASK MODAL -->
<div class="modal fade" id="updateTask" 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">Tätigkeit <b><span id="tasknametoupdate"></span></b> 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">     
        <div class="form-group">
		    <label for="exampleInputPassword1">Tätigkeitsname:</label>
		    <input class="form-control" id="updateTaskName" type="text" value="" placeholder="Bereichsname" onkeyup="javascript:validateTaskName(this.value, 1)">
		  </div>

		  <h6>Bereich:&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Wird der Bereich verändert, werden auch alle Standards in den neuen Bereich verschoben." class="far fa-question-circle"></i></small></h6>
		  <div class="input-group mb-3">			 
			  <select class="custom-select" id="taskAreaSelected">
				{%for area in agencyareas%}	    
			    <option value="{{area.pk}}">{{area.name}}</option>
				{% endfor %}
			  </select>
			</div>

		  <div id="updateTaskName_err" class="alert alert-danger mt-3" style="display: none">Falsche Eingabe! Keine Sonderzeichen!</div>
  		  <div class="custom-control custom-checkbox mb-2 mt-2">              
		      <input type="checkbox" class="custom-control-input" id="visibleTask" onchange="javascript:changeVisibleTask()">
		    <label class="custom-control-label" for="visibleTask" >Im Organigramm sichtbar</label>
		    </div>
			<h6>Mitarbeiter hinzufügen:</h6>
			<div class="input-group mb-3">
				  <input class="form-control searchuserfieldstask" list="possusers" id="searchusertotask" type="text" onkeyup="javascript:checkUserToTask()" >
				  <div class="input-group-append">				  	
				  	<button type="button" onclick="javascript:clearSearchfieldAddToTask()" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
				  </div>
					  <datalist id="possusers"></datalist>				
				</div>
		   
		   <h6>Zugewiesene Mitarbeiter:</h6>
		  <div id="added_users_button"></div>

  	   </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="javascript:updateTask()" id="doActionUpdateTask">Tätigkeit aktualisieren</button>&nbsp;&nbsp;
        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="javascript:$('#updateTask').modal('toggle')">Schließen</button>
      </div>
    </div>
  </div>
</div>

<!-- CONFIRMA STRUCTURE CHANGE RELOAD -->
<div class="modal fade" id="structureChangeReload" 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">Struktur verändert</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">     
      Achtung! Die grundlegende Struktur der Tätigkeiten wurde verändert. Die Seite wird einmal neu geladen, sobald Sie dieses Fenster schließen. 
      </div>
      <div class="modal-footer">        
        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="javascript:window.location=window.location">Schließen</button>
      </div>
    </div>
  </div>
</div>

<!-- CONFIRMA DELETE Task -->
<div class="modal fade" id="delTask" 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">Tätigkeit 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">     
      Möchten Sie den Bereich <b><span id="taskName"></span></b> wirklich löschen? Alle darin enthaltenen <u>Standards</u> werden ebenfalls entfernt!   
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="javascript:doDelTask()">Tätigkeit löschen</button>&nbsp;&nbsp;
        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="javascript:$('#delTask').modal('toggle')">Abbrechen</button>
      </div>
    </div>
  </div>
</div>

<style>
  /* DATATABLES */
.paginate_button {
  padding: 0px !important;
  border: 0px !important;
}
  </style>

<script>
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];
			checkUserToTask();
		});	    
	},400);
}

function checkUserToTask(){
	var g = $('#searchusertotask').val();
	var id = $('#possusers').find('option[value="' + g + '"]').attr('id');
	if(id != undefined && id.length > 0){  
		tempid_useraddtask = id.split("_")[0];
		
		$.ajax(
	    {
	        type: "GET",
	        url: "/tasks/areaajax",
	        data:{
	                 userid: tempid_useraddtask,
	                 action : 'adduser',
	                 objectid : workingTaskId
	        },
	        success: function( data ) 
	        {	
	        	clearSearchfieldAddToTask();	  
	        	//Add User-Button  	        	
	        	$("#added_users_button").append('<span id="span_btn_'+data['userid']+'" class="badge badge-pill badge-primary mr-2  mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromTask('+data['userid']+')">'+data['username_clean']+'&nbsp;&nbsp;<i class="fas fa-times"></i></a ></span>');

	        	$("#possusers").empty();
	        	for (var i in data['remaining_users']) {
	        		id = data['remaining_users'][i]['id'];
	        		name = data['remaining_users'][i]['first_name'] + " " + data['remaining_users'][i]['last_name'];
	        		$("#possusers").append('<option id="'+id+'" value="'+name+'"></option>');
		        }
		    }
	     });

	}
}


//Initial function for draggable areas
$( function() {
    $( "#sortableAreas" ).sortable
    ({
    	axis:"y",
  		update: function( event, ui ) 
  		{
    		datatoserver = [];
    		var rows = $( "#sortableAreas" ).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: "newareaorder",
		          finalod : JSON.stringify(datatoserver)
		        },
		        success: function( data ) 
		        {
		          $('#notchange_done').toast('show');
		      }
		     });		    
		}
	});
});
    
$( "#sortableAreas" ).disableSelection();

taskaddtoarea = false;


function clearSearchfieldAddToTask(){
	$("#searchusertotask").val("");
}

function addTask(areaid){
	taskaddtoarea = areaid;
	$("#mainmodalTasks").modal("toggle");
	$("#newtaskname").val("");
	$("#doActionTaskModal").prop("disabled", true);
	$("#newtaskname_err").hide();	
}


function mainmodalTaskSave(){
	$.ajax(
        {
            type: "GET",
            url: "/dasettings/ajax",
            data:{
              action : "add_task",
              newvalue : $("#newtaskname").val(),
              areaid : taskaddtoarea
            },
            success: function( data ) 
            {             
	        	if(data['success']){	      
	        		newtaskid = data['data']['newtaskid'];
	        		newtaskname = data['data']['name'];
	        		newtaskareaname = data['data']['areaname'];
	        		taskcreatedby = data['data']['taskcreator_fullname'];
	        		taskcreateddate =  data['data']['createdate'];
	        		$("#areatask_" + taskaddtoarea).prepend('<tr id="task_'+newtaskid+'"><td><a href="/standards/standard/'+newtaskid+'/task"  id="taskname_td_area_'+newtaskid+'">'+newtaskname+'</a></td><td>'+newtaskareaname+'</td><td>'+taskcreatedby+'</td><td>'+taskcreateddate+'</td><td><button style="float: right" class="btn btn-primary btn-sm" onclick="javascript:updateTaskComplete('+newtaskid+')" data-toggle="tooltip" data-placement="top" title="Tätigkeit bearbeiten"><small><i class="fas fa-pen"></i></small></button><button style="float: right" type="button" class="btn btn-danger btn-sm mr-1" onclick="javascript:delTask('+newtaskid+')" data-toggle="tooltip" data-placement="top" title="Tätigkeit löschen"><i class="fas fa-trash-alt"></i></button></td> ></tr>');
	        	}

	        	else{	        		
	        		$("#mainmodalArea").modal('toggle');
	        		$('#notchange_err').toast('show');
	        		$("#toast_errcontent").html("Fehler beim Erstellen des Bereichs!");
	        	}
            }
         });
}

function updateTask(){
	namevalue = $("#updateTaskName").val();	
	$.ajax(
    {
        type: "GET",
        url: "/dasettings/ajax",
        data:{
          action : "change_taskname",
          newvalue : namevalue,
          newareaid : $("#taskAreaSelected").val(),
          id : workingTaskId
        },
        success: function( data ) 
        {        
        	$("a#taskname_td_area_" + workingTaskId).text(data["data"]["newvalue"]); 
        	$("#updateTask").modal("toggle");
        	$('#updateTask').on('hidden.bs.modal', function (e) {
        		console.log(data)
				  if(data["data"]["smoved"]){
	        		$("#structureChangeReload").modal("toggle");
	        	}
			});

        	
        	       	
        	
        }
     });
}

function removeUserFromTask(userid){
	$.ajax(
	    {
	        type: "GET",
	        url: "/tasks/areaajax",
	        data:{
                 userid: userid,
                 action : 'remuser',
                 objectid : workingTaskId
	        },
	        success: function( data ) 
	        {
	        	//Remove User-Button  	       
	        	$("#span_btn_"+data['userid']).remove();
	        	$("#possusers").empty();	        	
	        	for (var i in data['remaining_users']) {
	        		id = data['remaining_users'][i]['id'];
	        		name = data['remaining_users'][i]['first_name'] + " " + data['remaining_users'][i]['last_name'];
	        		$("#possusers").append('<option id="'+id+'" value="'+name+'" class="addusertotask_remclass"></option>');
		        }
		    }
	     });
}

function updateTaskComplete(id){
	workingTaskId = id;
	$.ajax(
    {
        type: "GET",
        url: "/dasettings/ajax",
        data:{
          action : "get_taskname",
          id : workingTaskId
        },
        success: function( data ) 
        { 
        	$("#added_users_button").html("");        	
        	$("#possusers").empty();
        	$("#taskAreaSelected").val(data["data"]["taskarea"]);
        	$("#updateTask").modal("toggle");
        	$("#updateTaskName").val(data['data']['taskname']);
        	$("#tasknametoupdate").html(data['data']['taskname']);	
        	if(data['data']['visible'] == true){
        		$("#visibleTask").prop("checked", true);
        	}
        	else{
        		$("#visibleTask").prop("checked", false);
        	}
        	//ADDED USERS
        	for(i = 0; i < data["data"]["addedl"]; i++){
        		$("#added_users_button").append('<span id="span_btn_'+data["data"]["added_users"][i]['userid']+'" class="badge badge-pill badge-primary mr-2 mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromTask('+data["data"]["added_users"][i]['userid']+')">'+data["data"]["added_users"][i]['fullname']+'&nbsp;&nbsp;<i class="fas fa-times"></i></a ></span>')
        	}        	
        	//POSSIBLE USERS
        	for(i = 0; i < data["data"]["possl"]; i++){        		
        		$("#possusers").append('<option id="'+data["data"]["possible_users"][i]['userid']+'" value="'+ data["data"]["possible_users"][i]['fullname']+'" class="addusertotask_remclass">');
        	}	
        }
     });
}

function changeVisibleTask(){
	$.ajax(
    {
        type: "GET",
        url: "/dasettings/ajax",
        data:{
          action : "update_visible_taskname",
          id : workingTaskId
        },
        success: function( data ) 
        {}
     });
}

//Validate new Area-Name
function validateTaskName(newtaskname, updateornew){
	// NEW TASK
	var letters = /^[A-Za-zßäöüÄÖÜ_\-0-9 ]+$/;
	if(updateornew == 0)
	{

		if(newtaskname.length > 0){		
			if(!newtaskname.match(letters))
			{
				$("#newtaskname_err").show();
				$("#doActionTaskModal").prop("disabled", true);
			}
			else{
				$("#newtaskname_err").hide();	
				$("#doActionTaskModal").prop("disabled", false);
			}	
		}
		else{		
			$("#newtaskname_err").hide();	
			$("#doActionTaskModal").prop("disabled", true);
		}

	}
	//UPDATE TASK
	else{
		if(newtaskname.length > 0){		
			if(!newtaskname.match(letters))
			{
				$("#updateTaskName_err").show();
				$("#doActionUpdateTask").prop("disabled", true);
			}
			else{
				$("#updateTaskName_err").hide();	
				$("#doActionUpdateTask").prop("disabled", false);
			}	
		}
		else{		
			$("#updateTaskName_err").hide();	
			$("#doActionUpdateTask").prop("disabled", true);
		}
	}
}

workingTaskId = false;

function delTask(taskid){
	workingTaskId = taskid;		
	$("#delTask").modal("toggle");
	$.ajax(
    {
        type: "GET",
        url: "/dasettings/ajax",
        data:{
          action : "get_taskname",
          id : workingTaskId
        },
        success: function( data ) 
        { 
        	$("#taskName").html(data['data']['taskname']);	
        }
     });
}

function doDelTask(){
	$.ajax(
        {
            type: "GET",
            url: "/dasettings/ajax",
            data:{
              action : "remove_task",
              id : workingTaskId
            },
            success: function( data ) 
            {             
	        	if(data['success']){	        		
	        		$('#notchange_done').toast('show');
	        		$("#task_"+workingTaskId).remove();
	        	}
	        	else{	        		
	        		$("#delArea").modal('toggle');
	        		$('#notchange_err').toast('show');
	        		$("#toast_errcontent").html("Fehler beim Erstellen des Bereichs!");
	        	}
            }
         });
}
function doDelArea(){
	$.ajax(
        {
            type: "GET",
            url: "/dasettings/ajax",
            data:{
              action : "remove_area",
              id : workingAreaId
            },
            success: function( data ) 
            {             
	        	if(data['success']){	        		
	        		window.location.href = window.location.href + "?showtoast=true";  		
	        	}
	        	else{	        		
	        		$("#delArea").modal('toggle');
	        		$('#notchange_err').toast('show');
	        		$("#toast_errcontent").html("Fehler beim Erstellen des Bereichs!");
	        	}
            }
         });
}


function delArea(areaid){
	workingAreaId = areaid;
	$("#delArea").modal("toggle");
	$.ajax(
    {
        type: "GET",
        url: "/dasettings/ajax",
        data:{
          action : "get_areaname",
          id : areaid
        },
        success: function( data ) 
        { 
        	$("#areaName").html(data['data']['areaname']);	
        }
     });
}


/*
	0 = DEFAULT
	1 = NEW AREA
	2 = CHANGE AREA
*/
modalarea_action = 0;
areaupdateid = false;
default_colorpickerinit = "#3498db";
newareacolor= "#ffffff";
//Prepare addArea-Modal and show
function addArea(workingAreaId)
{	
	if(workingAreaId == false)
	{
		$("#mainmodalArea_title").html("Neuen Bereich anlegen");		
		$("#mainmodalArea").modal('toggle');
		$("#newareaname").val("");
		default_colorpickerinit = "#3498db";
		modalarea_action = 1;	
	}	
	else {			
		areaupdateid = workingAreaId;
		modalarea_action = 2;	
		$.ajax(
	    {
	        type: "GET",
	        url: "/dasettings/ajax",
	        data:{
	          action : "get_areaname",
	          id : workingAreaId
	        },
	        success: function( data ) 
	        { 
	        	$("#mainmodalArea_title").html("Bereich bearbeiten");	
	        	$("#mainmodalArea").modal('toggle');
	        	$("#newareaname").val(data['data']['areaname']);
	        	$("#doActionAreaModal").prop("disabled", false);	
	        	default_colorpickerinit = data['data']['areacolor'];
	        }
	     });				
	}		
}

$('#mainmodalArea').on('shown.bs.modal', function() {
  $(".colorPickSelector").colorPick(
  {
	  'initialColor': default_colorpickerinit,
	  'allowRecent': true,
	  'recentMax': 5,
	  'allowCustomColor': false,
	  'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1", "#bdc3c7", "#95a5a6", "#7f8c8d"],
	  'onColorSelected': function() {
	    this.element.css({'backgroundColor': this.color, 'color': this.color});
	    newareacolor = this.color;
  }
});
});

//Validate new Area-Name
function validateAreaName(newareaname){
	var letters = /^[A-Za-zßäöüÄÖÜ_\-0-9 ]+$/;	
	if(newareaname.length > 0){		
		if(!newareaname.match(letters))
		{
			$("#newareaname_err").show();
			$("#doActionAreaModal").prop("disabled", true);
		}
		else{
			$("#newareaname_err").hide();	
			$("#doActionAreaModal").prop("disabled", false);
		}	
	}
	else{		
		$("#newareaname_err").hide();	
		$("#doActionAreaModal").prop("disabled", true);
	}
}

//Final save-Area
function mainmodalAreaSave(){
	namevalue = $("#newareaname").val();	
	//ADD AREA
	if(modalarea_action == 1){
		$.ajax(
        {
            type: "GET",
            url: "/dasettings/ajax",
            data:{
              action : "add_area",
              newvalue : namevalue,
              color : newareacolor
            },
            success: function( data ) 
            {             
	        	if(data['success']){	        		
	        		window.location.href = window.location.href + "?showtoast=true";  		
	        	}
	        	else{	        		
	        		$("#mainmodalArea").modal('toggle');
	        		$('#notchange_err').toast('show');
	        		$("#toast_errcontent").html("Fehler beim Erstellen des Bereichs!");
	        	}
            }
         });
	}
	//CHANGE AREA
	else if(modalarea_action == 2){
		console.log(newareacolor);
		$.ajax(
        {
            type: "GET",
            url: "/dasettings/ajax",
            data:{
              action : "update_areaname",
              id : areaupdateid,
              newvalue : namevalue,
              color : newareacolor
            },
            success: function( data ) 
            {             	
	        	if(data['success']){
	        		$("#mainmodalArea").modal('toggle');
	        		$('#notchange_done').toast('show');		        		
              		$("#areaname_" + areaupdateid).html("Bereich <b>"+data['data']['newvalue']+"&nbsp;</b>"); 
              		$("#area_" + areaupdateid).css("background-color", data['data']['color']);
	        	}
	        	else{
	        		$('#notchange_err').toast('show');
	        		$("#toast_errcontent").html("Fehler beim Erstellen des Bereichs!");
	        	}
            }
         });
	}
}


$(document).ready(function(){
  
  {% for area in agencyareas %}
  $('#areatask_{{area.pk}}_table').DataTable({
      "language": {
        "search" : "Suche",
        "info": "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
        "lengthMenu":     "Zeige _MENU_ Einträge",
        "zeroRecords": "Nichts gefunden",
        "infoEmpty": "Keine Einträge",
        "paginate": {
            "first":      "Erste",
            "last":       "Letzte",
            "next":       "Nächste",
            "previous":   "Zurück"
        },
      },
      "buttons" : {
        "className" : "btn-danger"
      }
    });
  	{% endfor %}
});


</script>