{% extends 'templates/callluge/site_layout.html' %}
{% block content %}
<!-- <form name="form1" method="POST" action=""> -->
{%csrf_token%}
<a href="" id="add" style="margin-left: 350px">Add</a>
<a href="" id="remove" style="margin-left: 200px">Remove</a>
<div>
<div style="float:left;margin-left: 100px">
From: &nbsp;&nbsp;&nbsp;<select id="from_agency" class = "agency" OnChange="GetClients(this.value,'from')" name="from_agency">
<option>Select Agency</option>
{% for agency in agencies %}
	<option value="{{agency.id}}">{{agency.name}}</option>
{% endfor %}
</select><br>
<select id="from_clients" name="from_clients" multiple="multiple" size="15" style="z-index: 100; width: 20em">
</select>
</div>
<div style="float: left;margin-left: 200px">
To:&nbsp;&nbsp;&nbsp; <select id="to_agency" class="agency" OnChange="GetClients(this.value,'to')" name="to_agency">
<option>Select Agency</option>
{% for agency in agencies %}
	<option value="{{agency.id}}">{{agency.name}}</option>
{% endfor %}
</select><br>
<select id="to_clients" name="to_clients" multiple="multiple" size="15" style="z-index: 100; width: 20em">
</select>
</div>
<input type="submit" name="submit" value="submit" id="submit">
</div>
<script type="text/javascript">

$( document ).ready(function() {
    console.log( "ready!" );
    //selectAll();
    $('#submit').click(function() {
		selectAll();
/*	    $('#from_clients option').prop('selected', true);
	    $('#to_clients option').prop('selected', true);*/
	});

});

function selectAll() 
{ 
	console.log('reached');
	var from_agency = $("#from_agency").val()
	var to_agency = $("#to_agency").val()
	var from_clients = []
	var to_clients =[]

	var i = 0;
	$("#from_clients option").each(function() { 
	   var client = $(this).val()
	   from_clients[i] = client
	   i = i+1;
	});
	
	var i = 0;
	var to_clients =[]
	$("#to_clients option").each(function() { 
	   var client = $(this).val()
	   to_clients[i] = client
	   i = i+1;
	});

	var from_clients_json = JSON.stringify(from_clients)
	var to_clients_json = JSON.stringify(to_clients)
	//console.log(to)
    $.post("/userauth/update-clients/",
    	{
    		from_agency: from_agency,
    		to_agency: to_agency,
    		from_clients: from_clients_json,
    		to_clients: to_clients_json, 
    		csrfmiddlewaretoken: '{{ csrf_token }}' 
    	},
    	function(result){
			console.log(result)
    });	


/*    selectBox = document.getElementById("from_clients");
    console.log('length',selectBox.options.length)
    for (var i = 0; i < selectBox.options.length; i++) 
    { 
         selectBox.options[i].selected = true; 
    } */
}

function GetClients(agency_id,who)
{
/*	console.log(agency_id)
	console.log(who)*/

    $.post("/userauth/get-clients/", {agency_id: agency_id, csrfmiddlewaretoken: '{{ csrf_token }}' },
    	function(result){
			/*console.log(result)*/
			$("#"+who+"_clients").html(result)
    });

    //selectAll();
}

(function () {
    $('#add').click(function (e) {
        var selectedOpts = $('#from_clients option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#to_clients').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });

    $('#remove').click(function (e) {
        var selectedOpts = $('#to_clients option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#from_clients').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });
}(jQuery));	

</script>
{% endblock %}