{% load i18n l10n swstags %}

{% get_current_language as LANGUAGE_CODE %}

<style>

#ui-datepicker-div
{
	 z-index: 9999 !important;
}

.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:99px;
	-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: 57px;
	padding: 2px 2px 2px 8px;
}

.label_filter2_from_to
{
	float: left;
	margin: 5px 1px 1px 1px;
	width: 40px;
	padding: 2px 2px 2px 8px;
}


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

.button_update_clear
{
	float:right;
/*	border:1px solid blue;*/
	height:36px;
	width:40px;


}


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

.filter2ind_date{
	float: left ;
}

/*.select2-choice{
	height: 18px!important;
}
*/
.select2-container .select2-choice {
    /*line-height: 19px !important;*/
/*    font-size: 12px!important;*/
/*	color: red !important;
  	background-color: blue!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;
}

.select2_filter{

}

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

}
.date_clear
{
	float:left;
}
.clear_update
{
	float:right;
	width: auto;
}

.select2-drop 
{
	width: 220px !important;
}

</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'>
			<div id='{{view_name}}_clear_update' class='clear_update'>
				<p id="{{view_name}}{{name}}_filter_clear_btn" class="p_label_input_clear"></p>
				<p id="{{view_name}}{{name}}_filter_update_btn" class="p_label_input_update"></p>
			</div>	
					
			<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_from_to'  class="label_filter2_from_to" 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_from_to' class="label_filter2_from_to" 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">

	//			{#<label class="label_filter_btn">&nbsp;</label>
	//			<input type="button"  id="{{view_name}}{{name}}_filter_clear_btn" value="{% trans 'Clear' %} ">#}



from_to_date = shortcutsDateFilterFromTo('traffic_report','{{shortcuts_default}}')


from_date = dateFormat(from_to_date['from_date'],'{{format_date}}')
to_date = dateFormat(from_to_date['to_date'], '{{format_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();


$('#{{view_name}}{{name}}_filter_clear_btn').button({icons: {primary: "ui-icon-arrowreturnthick-1-w"}});

$('#{{view_name}}{{name}}_filter_update_btn').button({icons: {primary: "ui-icon-refresh"}});



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)
// {
// 	var view = $('#main_tabs_ul .ui-state-active').children().attr('title');

// 	{{view_name}} = view


// 	{{view_name}}_callback('filter_select');
// }


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

 {{view_name}}{{name}}filters_sel2 = new Array();
// filters_seg = $.merge([],filters)
// filters_seg = clone(filters)
// filters_seg=$.extend(true, [], filters);

 filters_control = new Array();


 jQuery.each(dimension_filters, function() 
 {
 	var select_identifier = this;
 	{{view_name}}{{name}}filters_sel2[select_identifier] = ''
 	// filters_seg[select_identifier] = ''
	query_data = ''
	filters_control.push(select_identifier)


	$('#'+this+'_{{view_name}}{{name}}_query').select2({
		//minimumInputLength: 3,
		// placeholder: 'Select a '+this,

		placeholder: '----',
		query:function(options){ 
			if ({{view_name}}{{name}}filters_sel2[select_identifier]=='')
			{	
				$.ajax({
								url: '{{URL_FILTERS_CUVE}}',
								method: 'GET',
								dataType: 'json',
								async:false,
								data:{{view_name}}{{name}}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;
								}
							});
				{{view_name}}{{name}}filters_sel2[select_identifier] = $.parseJSON(query_data.responseText)

			}
			
			else
			{

				name_search = options.term 

				var actual = {{view_name}}{{name}}filters_sel2[select_identifier]
				

				if (name_search !='')
				{
					{{view_name}}{{name}}filters_sel2[select_identifier] = $.parseJSON(query_data.responseText)
					for (i=0; i<{{view_name}}{{name}}filters_sel2[select_identifier].results.length; i++)
					{
						name_search = String(name_search)
						name = String({{view_name}}{{name}}filters_sel2[select_identifier].results[i].text)
						
						name_search = name_search.toUpperCase();
						name = name.toUpperCase();

						if (name.search(name_search)<0)
						{
							{{view_name}}{{name}}filters_sel2[select_identifier].results.splice(i,1);
							i=0;
						}
					}
					{{view_name}}{{name}}filters_sel2[select_identifier].results.splice(0,1);
				}

				if({{view_name}}{{name}}filters_sel2[select_identifier].results.length==0)
				{
					{{view_name}}{{name}}filters_sel2[select_identifier] = $.parseJSON(query_data.responseText)
				}	
			}


			options.callback({{view_name}}{{name}}filters_sel2[select_identifier])
		},


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

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


			$('#s2id_'+select_identifier+'_{{view_name}}{{name}}_query').children("a").children("span").text(results.text)

			{{view_name}}_callback('filters{{name}}',results.id);

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

function clone(from) 
{
	if(from == null || typeof from != 'object')
		return from;

	if(from.constructor != Object && from.constructor != Array)
		return from;

	if(from.constructor == Date || from.constructor == RegExp ||from.constructor == Function ||from.constructor == String || from.constructor == Number ||from.constructor == Boolean)
		return new from.constructor(from);

	var to = {};
	to = to || new from.constructor();
	for (var name in from) 
	{
		to[name] = typeof to[name] == 'undefined' ?
		this.clone(from[name]) :
		to[name];
	}	
	return to;
}



function {{view_name}}{{name}}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',':');
			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='select2_filter']"),
    function(){
    	name_filters_{{view_name}} = this.id;
		$('#'+name_filters_{{view_name}}).val('NULL');  
    }
);

$('#{{view_name}}{{name}}_filter_clear_btn').click(function(){
	$('#{{view_name}}_div_select_filters').unblock();
	
	{{view_name}}{{name}}clearFilterSelect2();

	{{view_name}}_callback('b_clear');
});


$('#{{view_name}}{{name}}_filter_update_btn').click(function(){
	$('#{{view_name}}_div_select_filters').unblock();	


	{{view_name}}{{name}}updateFiltersSelect2()

	{{view_name}}_callback('filters');
});


function {{view_name}}{{name}}updateFiltersSelect2()
{
	$.each(
	    $("#"+view_actual+"{{name}}_div_select_filters_content input[class='select2_filter']"),
	    function(){
	    	name_filters_{{view_name}} = this.id;

	    	name_clear = name_filters_{{view_name}}.replace('{{view_name}}','')
	    	name_clear = name_clear.replace('__query','')

	    	if ($('#'+name_filters_{{view_name}}).val() == 'NULL')
	    	{
	    		name_filters_{{view_name}} = this.id;
				{{view_name}}{{name}}filters_sel2[name_clear] = '';

				$('#'+name_filters_{{view_name}}).val('NULL');
				$('#s2id_'+name_filters_{{view_name}}).children("a").children("span").text('-----');
	    	}
	    }
	);
}


function {{view_name}}{{name}}clearFilterSelect2()
{
	$.each(
	    $("#"+view_actual+"{{name}}_div_select_filters_content input[class='select2_filter']"),
	    function(){
	    	name_filters_{{view_name}} = this.id;
	    	
	    	name_clear = name_filters_{{view_name}}.replace('{{view_name}}','')
	    	name_clear = name_clear.replace('__query','')
			{{view_name}}{{name}}filters_sel2[name_clear] = '';

			$('#'+name_filters_{{view_name}}).val('NULL');
			$('#s2id_'+name_filters_{{view_name}}).children("a").children("span").text('-----'); 
			// $('#s2id_'+name_filters).children("a")[0].text='Select a '+name_filters.replace('_query',''); 
	    }
	);
}


</script>