{% load i18n l10n swstags %}

{% get_current_language as LANGUAGE_CODE %}

<style>
.filter2{
	/*margin: 5px;*/
/*	border: 1px solid green;*/
	/*width:260px;*/
}
.filter2ind_date{
/*	border: 2px solid blue;*/
	margin: 0px 0px 0px 0px;
	float: right;
	font-size: 8px;

}

.filter2ind{
/*	border: 2px solid red;*/
	margin: 0px 0px 0px 0px;
	float:left;
}
.input_filter2{
	border: 1px solid white;
	float: left;
	width:139px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 4px;
	text-align: center;
	padding: 2px 2px 2px 2px;
	margin: 2px 8px 2px 2px;
}

.label_filter2{
	/*border:1px solid white;*/
	float: left;
	margin: 5px 1px 1px 1px;
	width: 30px;
	padding: 2px 2px 2px 8px;
}

.p_label_input_filter {
	height: 18px !important;
	float:right  ;
	}

.p_label_input_clear
{
	height:18px !important;
	float: right;
	font-size: 0.9em;
	padding:1px;
	margin: 0 6px 0 0;
/*	border: 1px solid red;*/
}


.filter2ind_date{
	float: right ;
}

.select2-choice{
	height: 18px!important;
}

.select2-container .select2-choice {
    line-height: 19px !important;
}

.select2-container {
    float: left;
    width: 200px;
    height: 8px !important;
}

.label_filter_h{
	font-size:  8px !important;
	margin-top: 0px !important;
	min-width: 70px !important;
	float: left;
}

.box_filter{
/*	border: 10px solid pink;*/
	width:auto;

}
.date_clear
{
	float:left;
}


</style>

<div id='{{view_name}}{{name}}_filter2' class='filter2'>
	<form id="{{view_name}}{{name}}_filters_form" method="GET" action=""> 
		<div id= "{{view_name}}{{name}}_div_date_clear" class='date_clear'>
			<p id="{{view_name}}{{name}}_p_search_clear_btn" class="p_label_input_clear">
				<label class="label_filter_btn">&nbsp;</label>
				<input type="button"  id="{{view_name}}{{name}}_filter_clear_btn" value="{% trans 'Clear' %} ">
			</p>
			<div id="{{view_name}}{{name}}_div_date_input" class="filter2ind_date">
					<!-- Create the  date filters -->
					{% for key, value in dimension_filters.items %}
						{% if key == 'Date' %}
							<label id ='{{view_name}}_label_filter2'  class="label_filter2" id="{{view_name}}{{name}}_label_{{key}}" for="{{view_name}}{{name}}_datepicker_from_{{key}}">{% trans "From" %}</label>
							<input class="input_filter2" type="text" id="{{view_name}}{{name}}_datepicker_from_calldate" name="from_{{key}}" value='{{value.values.0|unlocalize}}'/>
							{% if vertical == 'true' %} <p class="clear-fix"> </p> {% endif %}
							<label id ='{{view_name}}_label_filter2' class="label_filter2" id="{{view_name}}{{name}}_label_{{key}}" for="{{view_name}}{{name}}_datepicker_to_{{key}}">{% trans "To" %}</label>
							<input class="input_filter2" type="text" id="{{view_name}}{{name}}_datepicker_to_calldate" name="to_{{key}}" value='{{value.values.1|unlocalize}}'/>
						{% endif %}
					{% endfor %}
					<!-- <p class="clear-fix"></p> -->
			</div>
		</div>

			{% if shortcuts != 'false' %}
				{% tag_shortcuts view_name shortcuts %}
			{% endif %}
			 <p class="clear-fix"> </p> 

			<div id="{{view_name}}{{name}}_div_select_filters" class="box_filter">
				<div id="{{view_name}}{{name}}_div_select_filters_content" class="">
				{% for k,v in dimension_filters.items %}
					{% if k != 'Date' %}

						<div id ='{{view_name}}{{name}}_filter2_ind' class='filter2ind'>
							<p id ='{{view_name}}_label_input_filter' class="p_label_input_filter">
								<label id ='{{view_name}}_label_filter2' class="label_filter_h"> {% trans k %} </label> 
								<input  id='{{v}}_{{view_name}}{{name}}_query' name='{{v}}' type='hidden' class="select2_filter" />
							</p>
						</div>
						{% if vertical == 'true' %} <p class="clear-fix"> </p> {% endif %}

					{%endif%}	
				{% endfor%}
			</div><!-- / -->	
			<p class="clear-fix"></p>
		</div><!-- / -->
		<p class="clear-fix"></p>
	</form>	

</div>

<script type="text/javascript" lang="text/javascript">
var now = new Date();
// var timenow_from = new Date()-{{day_from}}*24*60*60*1000
// var timenow_to = new Date()

var timenow_from = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0);
var timenow_to = new Date(now.getFullYear(),now.getMonth(),now.getDate(),23,59,59);

from_date = dateFormat(timenow_from, "yyyy-mm-dd HH:MM")
to_date = dateFormat(timenow_to, "yyyy-mm-dd HH:MM")

// console.log('FROM_DATE',from_date)
// console.log('TO_DATE',to_date)

$('#{{view_name}}{{name}}_datepicker_from_calldate').val(from_date);
$('#{{view_name}}{{name}}_datepicker_to_calldate').val(to_date);
$('#{{view_name}}{{name}}_p_search_clear_btn input').button();

if($('#{{view_name}}{{name}}_datepicker_from_calldate').length > 0)
	if($('#{{view_name}}{{name}}_datepicker_from_calldate').val().length>14)
	{	
		datetimePickerFromTo('{{view_name}}{{name}}');
	}
	else
	{	
		datePickerFromTo('{{view_name}}{{name}}');
	}	


$("#{{view_name}}{{name}}_datepicker_from_calldate").click(function(){
		$("#{{view_name}}{{name}}_datepicker_from_calldate").addClass('ui-state-active');	
		$("#{{view_name}}{{name}}_datepicker_to_calldate").addClass('ui-state-active');	
		$("#{{view_name}}{{name}}_div_shortcuts_radio label").removeClass('ui-state-active');
});

// $('#{{view_name}}{{name}}_datepicker_from_calldate').change(function(){
// 	{{view_name}}{{name}}_callback('filter_select');
// });
// $('#{{view_name}}{{name}}_datepicker_to_calldate').change(function(){
// 	{{view_name}}{{name}}_callback('filter_select');
// });

function dateCallback(view)
{
	{{view_name}}_callback('filter_select{{name}}');
}


dimension_filters = {% autoescape off %} {{dimension_filters}} {% endautoescape %}; 

 filters = new Array();
 filters_control = new Array();


 jQuery.each(dimension_filters, function() 
 {
 	var select_identifier = this;
 	filters[select_identifier]=''
	query_data = ''
	filters_control.push(select_identifier)


	$('#'+this+'_{{view_name}}{{name}}_query').select2({
		//minimumInputLength: 3,
		placeholder: 'Select a '+this,
		query:function(options){
			if (filters[select_identifier] == '' )
			{
				query_data = $.ajax({
								url: '{{URL_FILTERS_CUVE}}',
								method: 'GET',
								dataType: 'json',
								async:false,
								data:prepareParam(select_identifier),
								error: function(jqXHR, textStatus, errorThrown){
									console.log('ERROR :'+errorThrown);
									console.log('textStatus :'+textStatus);
									console.log('jqXHR :'+jqXHR);
									// $('#'+form_id).unblock();
								},
								complete: function(data, page ) 
								{
									//query_data = data
									// return query_data;
								}
							});
				data_json = $.parseJSON(query_data.responseText)
				filters[select_identifier] = data_json
			}
			else
			{
				name_search = options.term 

				if (name_search !='')
				{
					new_json = []
					for (i=0; i<filters[select_identifier].results.length; i++)
					{

						name_search = String(name_search)
						name = String(filters[select_identifier].results[i].text)

						if (name.search(name_search)<0)
						{
							filters[select_identifier].results.splice(i,1)
						}

					}
				}

				if(filters[select_identifier].results.length==0)
				{
					console.log('dentro')
				}	
				
			}

			options.callback(filters[select_identifier])
		},


		formatResult: function(object,container,query) 
		{ 
			// console.log('FORMATRESULT-->',object)
			return "<div class='select2-user-result'>" + object.text + "</div>"; 
		},
		formatSelection: function(results) 
		{ 


			for(i=0; i < filters_control.length;i++)
			{
				name=filters_control[i]
				filters[name]=''
			}

			$('#s2id_'+select_identifier+'_{{view_name}}{{name}}_query').children("a")[0].text=results.text;
			{{view_name}}_callback('filter_select{{name}}',results.id);

			return results.term; 
		},
		dropdownCssClass: "bigdrop"
	});
});


function prepareParam(select_identifier)
{

		result = {
			types:select_identifier,
			limit: -1,
			term: '',
			page:1,
		}

		param_filters = $('#{{view_name}}_filters_form').serialize();

	 	data_filters = param_filters.split('&')
	 	for (i=0;i<data_filters.length;i++)
		{	

			d = data_filters[i].split('=')

			data_encode = d[1]
			data_encode = data_encode.replace('+',' ');
			data_encode = data_encode.replace('%3A',':');
			d[1]=data_encode
			data_filters[i]= d
		}

		for (i=0;i<data_filters.length;i++)
		{
			result[data_filters[i][0]]=data_filters[i][1]
		}

	return result;
}

$.each(
    $("#{{view_name}}{{name}}_div_select_filters_content input[class='input_filter2']"),
    function(){
    	name_filters = this.id;
		$('#'+name_filters).val('NULL');  
    }
);

$('#{{view_name}}{{name}}_filter_clear_btn').click(function(){
	$.each(
	    $("#{{view_name}}{{name}}_div_select_filters_content input[class='input_filter2']"),
	    function(){
	    	name_filters = this.id;
	    	//console.log(name_filters)
			$('#'+name_filters).val('NULL');
			$('#s2id_'+name_filters).children("a")[0].text='Select a '+name_filters.replace('_query',''); 
	    }
	);
	{{view_name}}_callback('b_clear');
});
//s2id_


		// ajax: 
		// {
		// 	url: '{{URL_FILTERS_CUVE}}',
		// 	dataType: 'json',
		// 	quietMillis: 100,
		// 	data: function(term, page,context,callback) 
		// 	{
		// 		result = {
		// 			types:select_identifier,
		// 			limit: -1,
		// 			term: term,
		// 			page:1,
		// 		}
		// 		param_filters = $('#{{view_name}}_filters_form').serialize();
		// 		 	// console.log('NAMEEEE: ','#{{view_name}}{{name}}_filters_form')
		// 	 	data_filters = param_filters.split('&')
		// 	 	for (i=0;i<data_filters.length;i++)
		// 		{	

		// 			d = data_filters[i].split('=')

		// 			data_encode = d[1]
		// 			data_encode = data_encode.replace('+',' ');
		// 			data_encode = data_encode.replace('%3A',':');
		// 			d[1]=data_encode
		// 			data_filters[i]= d
		// 		}
		// 		// console.log('datafitest',data_filters)

		// 		for (i=0;i<data_filters.length;i++)
		// 		{
		// 			result[data_filters[i][0]]=data_filters[i][1]
		// 		}
		// 		return result
		// 	},
		// 	results: function(data, page ) 
		// 	{
		// 		return { results: data.results };
		// 	}
		// },

</script>


