{extends file=$element.methods->getTemplatePath('general')}

{block name=input append}
	<input type="text"
		{if $element.style.CSSClass}
			class="{$element.style.CSSClass} date"
		{/if}

		id="{$element.id}_date"
		value="{$element.displayValue.date}"

		{if $element.disabled}
			disabled="disabled"
		{/if}

		{if !$element.disabled && $element.settings.events.onChange}
			onChange="setTimeout(function(){ var element = $('{$element.id}'); {$element.settings.events.onChange|join:';'}}, 1);"
		{/if}

		{if $element.placeholder}
			placeholder="{$element.placeholder}"
		{/if}
	/>

	{if $element.disabled}
		<img src="{$smarty.const.SMARTY_BLANKGIF}" alt="" class="imgIcon icon-calendar-disabled"
			id="{$element.id}_calendarButton"
		/>
	{else}
		<img src="{$smarty.const.SMARTY_BLANKGIF}" alt="" class="imgIcon icon-calendar"
			id="{$element.id}_calendarButton"
		/>
	{/if}

	<input type="text"
		{if $element.style.CSSClass}
			class="{$element.style.CSSClass} time"
		{/if}

		id="{$element.id}_time"
		value="{$element.displayValue.time}"

		{if $element.disabled}
			disabled="disabled"
		{/if}

		{if !$element.disabled && $element.settings.events.onChange}
			onChange="setTimeout(function(){ var element = $('{$element.id}'); {$element.settings.events.onChange|join:';'}}, 1);"
		{/if}
	/>

    {if !$element.disabled}
        <input type="hidden"
            id="{$element.id}"
            name="{$element.name}"
            value="{if $element.value.date}{$element.value.date} {$element.value.time|default:'00:00:00'}{/if}"
        />
    {/if}
{/block}

<script type="text/javascript">
{block name=script}
	{if !$element.disabled}
		MVC.scheduleOnLoad(function(){
			Calendar.setup({
				inputField:"{$element.id}",
				button:"{$element.id}_calendarButton",
				ifFormat:"%Y-%m-%d %H:%M:%S",
				daFormat:"%Y-%m-%d %H:%M:%S",
				showsTime:false,
				timeFormat:"24",

				onUpdate: function(calendar){
					$('{$element.id}_date').value = calendar.date.dateFormat("{$element.shortDateFormat}");
					if (!$F('{$element.id}_time')) {
						$('{$element.id}_time').value = "00:00";
					}
 					$('{$element.id}').value = calendar.date.dateFormat("Y-m-d") + " " + $('{$element.id}_time').value + ":00";
					_events.simulate('blur', '{$element.id}');
				}

				{if $element.value}, 'date':"{$element.displayValue.date} {$element.displayValue.time}"{/if}

				{if $element.validatorParams.minValue || $element.validatorParams.maxValue}
					, disableFunc:function(dt){
						var disable = false;
						{if $element.validatorParams.maxValue}
							if(dt.dateFormat("Y-m-d")>'{$element.validatorParams.maxValue}') {
								disable = true;
							}
						{/if}

						{if $element.validatorParams.minValue}
							if(dt.dateFormat("Y-m-d")<'{$element.validatorParams.minValue}') {
								disable = true;
							}
						{/if}

						return disable;
					}
				{/if}
			});

			window['datetime_formFieldsInput_{$element.id}'] = function(value, validator) {
				var date = _inputValidator.parseDate($F('{$element.id}_date'), validator.dateFormats);
				var time = _inputValidator.parseTime($F('{$element.id}_time'), validator.timeFormats);

				if (date) {
					$('{$element.id}').value = date.dateFormat("Y-m-d") + (time?time.dateFormat(" H:i:s"):" 00:00:00");
				}
				else {
					$('{$element.id}').value = '';
				}

				// trigger validation on the hidden datetime field
				_inputValidator.triggerRegisteredValidatorsForElement('{$element.id}');
			};

			_inputValidator.createOnLoad('{$element.id}_date', 'date', {$element.validatorParams|@json_encode}, {
				onBlur: window['datetime_formFieldsInput_{$element.id}']
			});

			_inputValidator.createOnLoad('{$element.id}_time', 'time', { mandatory: {$element.validatorParams.mandatory+0}}, {
				onBlur: window['datetime_formFieldsInput_{$element.id}']
			});

			// validator for the hidden full datetime value
			{if $element.validatorParams.minDatetimeValue}
				_inputValidator.createOnLoad('{$element.id}', 'string', {
					mandatory: {$element.validatorParams.mandatory|default:0},
					customValidator: function(valid, performedChecks, currentValue, rules) {
						// we already have a message attached or scheduled to be attached, we should avoid rendering another one
						if (this.getMessages().tooltips.length || this.getMessages().scheduledMessages) {
							return true;
						}

						var fullValue = currentValue;

						var minValue = {$element.validatorParams.minDatetimeValue|@json_encode};
						var maxValue = {$element.validatorParams.maxDateTimeValue|@json_encode};

						if (!(minValue || maxValue)) {
							return true;
						}

						var currentDt = Date.parseDate(fullValue, 'Y-m-d H:i:s');
						if (!currentDt) {
							return true; // syntax handled by date/time validators
						}

						var invalid = false;

						if (!invalid && minValue) {
							var minStr = String(minValue);
							if (minStr.length == 10) {
								minStr = minStr + ' 00:00:00';
							}
							var minDt = Date.parseDate(minStr, 'Y-m-d H:i:s');
							if (minDt && currentDt < minDt) {
								invalid = true;
								this.scheduleMessages_add('minValue', minStr);
								this.mark('input-invalid');
							}
						}

						if (!invalid && maxValue) {
							var maxStr = String(maxValue);
							if (maxStr.length == 10) {
								maxStr = maxStr + ' 23:59:59';
							}
							var maxDt = Date.parseDate(maxStr, 'Y-m-d H:i:s');
							if (maxDt && currentDt > maxDt) {
								invalid = true;
								this.scheduleMessages_add('maxValue', maxStr);
								this.mark('input-invalid');
							}
						}

						return !invalid;
					}
				},
				{
					onBlur: function(value, validator){}
				});
			{/if}
		});
	{/if}
{/block}
</script>