{% load i18n l10n swstags %}

{% get_current_language as LANGUAGE_CODE %}

<style>

.ui-button .ui-button-text
{
	line-height: 1;
}

.filters_date{
	/*border:1px solid red;*/
	float:left;
	display: inline-block;
	height: 22px;
	margin:1px 1px 1px 1px;
}

.filters_from_to{
	display: inline-block;
	float:left;
	margin: 1px 3px 0px 0px ;
}
.input_filters_date{
	float:left;
	display:inline-block;
	text-align: center;
	width: 130px;	
	height: 12px;

	margin:1px 1px 1px 1px;

	border:1px solid white;
	border-radius: 5px;
}
.label_filters_date{
	float:left;
	display: inline-block;
	min-width: 30px;
	text-align: right;
	font-size: 11px;
	margin: 2px 3px 0px 0px;
}


.date_shortcuts{
	display: inline-block;
	float: left;
	border:1px solid white;
	border-radius:5px;
	min-height:15px;
	min-width: 20px;
	width: auto;
}

.date_shortcuts_input{
	display: inline-block;
	float: left;
	border: 1px  solid green;
}

.shortcuts_label{
	display: inline-block;
	float:left;
	border: 1px solid pink;
}


</style>

<div id='{{view_name}}{{name}}_filters_date' class='filters_date'>
	<form id="{{view_name}}{{name}}_filters_date_form" method="GET" action=""> 
		<div id = '{{view_name}}{{name}}_filters_from_to' class= 'filters_from_to'>
			{% for k,v in filters_date %}
				<label id ='{{view_name}}{{name}}_label_{{k}}'  class="label_filters_date" for="{{view_name}}{{name}}_datepicker_s{{k}}">{% trans k %}</label>
				<input id="{{view_name}}_datepicker_{{k}}_calldate" class="input_filters_date" type="text"  name="{{k}}" value='{{v|unlocalize}}'/>
			{% endfor %}

		</div>

		{% if shortcuts != 'false' %}
			<div id="{{view_name}}_div_shortcuts_radio" class="date_shortcuts">
				{% for s in shortcuts %}
					{% if s == shortcuts_select %}
						<input id="{{view_name}}_date_radio{{s}}" class="date_shortcuts_input" type="radio" name="{{view_name}}_date_shortcut" value="{{s}}" checked="checked"/>

					{% else %}
						<input id="{{view_name}}_date_radio{{s}}" class="date_shortcuts_input" type="radio"  name="{{view_name}}_date_shortcut" value="{{s}}"/>
					{% endif %}
					<label class="shortcuts_label" id ="{{view_name}}_date_label{{s}}" for="{{view_name}}_date_radio{{s}}">{% trans s %}</label>
				{% endfor %}
				<p class="clear-fix"></p>
			</div><!-- /Shortcuts -->
		{% endif %}

	</form>	
</div>

<script type="text/javascript" lang="text/javascript">
	

	if ('{{shortcuts_select}}'=='False')
	{
		{% for k,v in filters_date %}
			$("#{{view_name}}_datepicker_{{k}}_calldate").addClass('ui-state-active');
		{% endfor %}
	}

	window['{{view_name}}_selection_shortcuts']  = '{{shortcuts_select}}'


	$("#{{view_name}}_div_shortcuts_radio label").removeClass('ui-state-active');
	$("#{{view_name}}_date_radio{{shortcuts_select}}").addClass('ui-state-active');	

	$('#'+'{{view_name}}'+'_div_shortcuts_radio').buttonset();

	{% for k1,v in filters_date %}
		$("#{{view_name}}_datepicker_{{k1}}_calldate").click(function(){
			{% for k,v in filters_date %}
				$('#{{view_name}}_datepicker_{{k}}_calldate').addClass('ui-state-active');	
			{% endfor %}	
				$("#{{view_name}}_div_shortcuts_radio label").removeClass('ui-state-active');

		});
	{% endfor %}


	$('#{{view_name}}_div_shortcuts_radio input').click(function(){

		// controlBlock('{{view}}_control_panel','block');
		window['{{view_name}}_selection_shortcuts']  =  $(this).val()
		selection_shortcuts = $(this).val()
		{{view_name}}_shortcuts_select = selection_shortcuts
		{% for k,v in filters_date %}
			$('#{{view_name}}_datepicker_{{k}}_calldate').removeClass('ui-state-active');	
		{% endfor %}	
		shortcutsDateFilter('{{view_name}}');
		refreshDatetimeTo('{{view_name}}');
		refreshDatetimeFrom('{{view_name}}');
		if (STP[STP['VIEWS']['{{view_name}}']]['switch_auto'].actualValue == 'ON'){
			dateCallback('{{view_name}}');
			{{view_name}}_callback('filtersDate');
		}
		else{
			{{view_name}}_callback('waiting');
			STP[STP['VIEWS']['{{view_name}}']]['buttons_clup'].highlight('update')
		}

	});

{% for k,v in filters_date|slice:":1" %}
	if($('#{{view_name}}_datepicker_{{k}}_calldate').length > 0)
		if($('#{{view_name}}_datepicker_{{k}}_calldate').val().length>14)
		{	
			{% if filters_date|length == 1 %}
				datetimePickerSingle('{{view_name}}');
			{% else %}
				datetimePickerFromTo('{{view_name}}');
			{% endif %}
		}
		else
		{	
			{% if filters_date|length == 1 %}
				datePickerSingle('{{view_name}}');
			{% else %}
				datePickerFromTo('{{view_name}}');
			{% endif %}
		}
	refreshDatetimeTo('{{view_name}}');
	refreshDatetimeFrom('{{view_name}}');
{% endfor %}

function getValuesDateTime(view){
	values = []
	{% for k,v in filters_date %}
		values.push($('#'+view+'_datepicker_{{k}}_calldate').val())
	{% endfor %}
	return values
}

function getNamesDateTime(){
	names = []
	{% for k,v in filters_date %}
		names.push('{{k}}')
	{% endfor %}
	return names
}

function refreshDatetimeTo(view)
{
	values = getValuesDateTime(view)
	names = getNamesDateTime()
	$("input[id*='"+view+"_datepicker_to_']").datetimepicker('option', 'minDate', values[0] );
	$('#'+view+'_datepicker_' + names[1] + '_calldate').val(values[1]);
	
}

function refreshDatetimeFrom(view)
{
	values = getValuesDateTime(view)
	names = getNamesDateTime()
	$("input[id*='"+view+"_datepicker_from_']").datetimepicker('option', 'maxDate', values[1] );
	$('#'+view+'_datepicker_' + names[0] + '_calldate').val(values[0]);
}


function {{view_name}}updateShortcuts(shortcuts_select)
{
	$("#{{view_name}}_div_shortcuts_radio label").removeClass('ui-state-active');
	$("#{{view_name}}_date_label"+shortcuts_select).addClass('ui-state-active');
	{% for k,v in filters_date %}
		$("#{{view_name}}_datepicker_{{k}}_calldate").removeClass('ui-state-active');	
	{% endfor %}

	window['{{view_name}}_selection_shortcuts']  =  shortcuts_select
	shortcutsDateFilter('{{view_name}}');

	refreshDatetimeTo('{{view_name}}');
	refreshDatetimeFrom('{{view_name}}');
}



// $('#ui-datepicker-div').on('click', function () {
//        {{view_name}}_callback('filtersDate');
//     });




// 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);


function datePickerSingle(view) {
	var view = view;
	$("input[id*='"+view+"_datepicker_']").datepicker({
		defaultDate: "",
		dateFormat:"yy-mm-dd",
		changeMonth: true,
		numberOfMonths: 1,
		onClose: function(dateText, inst) {
			if (STP[STP['VIEWS'][view]]['switch_auto'].actualValue == 'ON'){
				dateCallback(view);
			}
			else{
				{{view_name}}_callback('waiting');
				STP[STP['VIEWS'][view]]['buttons_clup'].highlight('update')
			}
		},
		firstDay: 1,
	});
}


function datetimePickerSingle(view) {
	var view = view;
	$("input[id*='"+view+"_datepicker_']").datetimepicker({
		altFormat:'YYYY-MM-DD', 
		dateFormat:'yy-mm-dd', 
		timeFormat:'HH:mm:ss', 
		showAnim: 'blind', 
		hourGrid: 4, 
		minuteGrid: 10, 
		onClose: function(dateText, inst) {
			if (STP[STP['VIEWS'][view]]['switch_auto'].actualValue == 'ON'){
				dateCallback(view);
			
			}
			else{
				{{view_name}}_callback('waiting');
				STP[STP['VIEWS'][view]]['buttons_clup'].highlight('update')
			}
			refreshDatetimeTo(view)
		},
		firstDay: 1,
	});
}	





</script>


