{% 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  ;
	}


.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_filter">
				<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 %}; 

 jQuery.each(dimension_filters, function() 
 {
 	 var select_identifier = this;
 	// console.log('PARAM_FILTERS',)
	$('#'+this+'_{{view_name}}{{name}}_query').select2({
		//minimumInputLength: 3,
		placeholder: 'Select a '+this,
		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}}{{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
				}
				// 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 };
			}
		},

		formatResult: function(results) 
		{ 
			return "<div class='select2-user-result'>" + results.text + "</div>"; 
		},
		formatSelection: function(results) 
		{ 
			$('#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"
	});
});

$.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_
</script>


