{% extends "users/base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section col-6" onmouseup="javascript:checkValue()">
  <h3>Bereich aktualisieren</h3>
  <hr>  
  <form method="POST">
	  	{% csrf_token %}	  	
	  	{{ form|crispy }}	
	   <div class="form-group mb-2 mb-3">		    
	    <span>Farbe</span><input type="color" id="color-picker" name="areacolor " />
	  </div>  			  		  
	  <h6>Mitarbeiter hinzufügen</h6>
	  <div class="input-group mb-3">
		  <input class="form-control" list="usersfree" name="searchusers" id="searchusers" type="text" onkeyup="javascript:checkValue()" onchange="javascript:checkValue()" >
		  <div class="input-group-append">
		  	<button type="button" id="addusertoareabtn" onclick="javascript:addUserToArea()" class="btn btn-success" disabled>Mitarbeiter hinzufügen</button>
		  	<button type="button" onclick="javascript:clearSearchfield()" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
		  </div>
			  <datalist id="usersfree">
			  	{% for us in possible_users %}
			    	<option id="{{us.pk}}" value="{{us.first_name}} {{us.last_name}}"></option>			    
			    {% endfor %}
			  </datalist>
			</datalist>
		</div>
	<hr>
	<h6>Zugewiesene Mitarbeiter</h6>
	<div id="added_users_button">
		{% if added_users|length > 0 %}
		<p id="no_user_in_area" style="display: none">Noch kein Mitarbeiter zugewiesen.</p>
		  {% for us in added_users %}	  	
		  	<span id="span_btn_{{us.pk}}" class="badge badge-pill badge-primary mr-2 mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromArea('{{ us.pk }}')">{{ us.first_name }} {{ us.last_name }}&nbsp;&nbsp;<i class="fas fa-times"></i></a >	  		
		  	</span>
		  {% endfor %}
		 {% else %}
		 	<p id="no_user_in_area">Diesem Bereich ist noch kein Mitarbeiter zugewiesen.</p>
		 {% endif %}
	 </div>
	  <hr>

  	<button type="submit" class="btn btn-success">Bereich aktualisieren</button>&nbsp;
  	<a class="btn" href="{% url 'areas-management' %} ">Abbrechen</a>
  </form>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"/> <!-- 'classic' theme -->

<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	$("#div_id_color").hide();
})

const pickr1 = new Pickr({
  el: '#color-picker',
  default: "{{object.color}}",  
  components: {
    preview: false,
    hue: true
  }
});


pickr1.on('changestop', function(){
	var col = pickr1.getColor().toHEXA().toString();
	pickr1.setColor(col);
	$("#id_color").val(col);
});

var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident/.test(ua);
if ( isIE ) {
  //IE specific code goes here
  	setInterval(function()
	{
	    checkValue();
	},250);
}




	var tempid = null;
	var tempcounter = 0;
	function addUserToArea(){
		$.ajax(
	    {
	        type: "GET",
	        url: "/areas/areaajax",
	        data:{
	                 userid: tempid,
	                 action : 'adduser',
	                 objectid : {{objectid}}
	        },
	        success: function( data ) 
	        {	
	        	clearSearchfield();	  
	        	//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:removeUserFromArea('+data['userid']+')">'+data['username_clean']+'&nbsp;&nbsp;<i class="fas fa-times"></i></a ></span>');

	        	$("#usersfree").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'];
	        		$("#usersfree").append('<option id="'+id+'" value="'+name+'"></option>');
		        }
		        if(data['remaining_users_counter'] == 0){
		        	$("#no_user_in_area").show();	        
		        }
		        else {
		        	$("#no_user_in_area").hide();	
		        }
		    }
	     });		
	}

	//Remove individual User from area, appened to the datalist!
	function removeUserFromArea(user_id){
		$.ajax(
	    {
	        type: "GET",
	        url: "/areas/areaajax",
	        data:{
	                 userid: user_id,
	                 action : 'remuser',
	                 objectid : {{objectid}}
	        },
	        success: function( data ) 
	        {
	        	//Remove User-Button  	       
	        	$("#span_btn_"+data['userid']).remove();
	        	//Rebuilding the Datalist
	        	$("#usersfree").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'];
	        		$("#usersfree").append('<option id="'+id+'" value="'+name+'"></option>');
		        }
		        if(data['remaining_users_counter'] == 0){
		        	$("#no_user_in_area").show();	        
		        }
		        else {
		        	$("#no_user_in_area").hide();	
		        }
		    }
	     });
	}

	//Clearing searchfield and set AddUser to false
	function clearSearchfield(){
		$("#searchusers").val("");
		$("#addusertoareabtn").prop('disabled', true);
	}

	
	//Check for valid input on inputfield
	function checkValue(){			
		var g = $('#searchusers').val();
    	var id = $('#usersfree').find('option[value="' + g + '"]').attr('id');
    	if(id != undefined && id.length > 0){    		
    		tempid = id;
    		$("#addusertoareabtn").prop('disabled', false);	
    	}
    	else{
    		tempid = null;
    		$("#addusertoareabtn").prop("disabled", true);
    	}    	
	}
</script>
{% endblock content %}