<%@ include file="/jsp/init.jsp" %>

<%@ include file="/jsp/admin/includes/menu-lateral-principal.jspf" %>

<%
	//obtem o horario padrao das preferencias (configuracao) do portlet, caso nao encontre, retorna o valor definido no portlet.properties.
	pageContext.setAttribute("horarioPadrao", renderRequest
												.getPreferences()
														.getValue("horarioPadrao", 
																PortletProps.get("configuracao.valor-padrao.horario")));
%>

<div class="span10 context-pane">
	<%@ include file="/jsp/admin/includes/carregar-dados-wizard.jspf" %>
	
	<aui:model-context bean="<%= mensagem %>" model="<%= Mensagem.class %>" />
	
	<div class="formulario-mensagem-agendamento">
		<liferay-ui:header title="mensagem.header.agendamento"/>
		
		<liferay-portlet:renderURL var="paginaAnteriorURL">
			<liferay-portlet:param name="mvcPath" value="/jsp/admin/mensagem/pre-visualizar.jsp"/>
			<liferay-portlet:param name="wizard" value="true"/>
			<liferay-portlet:param name="passoAtual" value="3"/>
			<liferay-portlet:param name="rascunho" value="${param.rascunho}"/>
		</liferay-portlet:renderURL>
		
		<liferay-portlet:renderURL var="proximaPaginaURL">
			<liferay-portlet:param name="mvcPath" value="/jsp/admin/template/listagem.jsp"/>
			<liferay-portlet:param name="wizard" value="true"/>
			<liferay-portlet:param name="passoAtual" value="1"/>
			<liferay-portlet:param name="rascunho" value="${param.rascunho}"/>
		</liferay-portlet:renderURL>		
		
		<liferay-portlet:actionURL var="processarPassoURL">
			<liferay-portlet:param name="<%= ActionRequest.ACTION_NAME %>" value='WizardMensagemAgendamento'/>
			<liferay-portlet:param name="mvcPath" value="/jsp/admin/mensagem/agendamento.jsp"/>
			<liferay-portlet:param name="rascunho" value="${param.rascunho}"/>
		</liferay-portlet:actionURL>
				
		<aui:form name="fmWizard" action="${processarPassoURL}" method="post">
			<aui:input name="redirect" value="${proximaPaginaURL}" type="hidden"/>
			<aui:input name="datasCalendario" value="" type="hidden"/>
			<aui:input name="gravarWorkflow" value="" type="hidden"/>
			<aui:input name="edicao" value='<%=edicao%>' type="hidden"/>
			
			<div>
					<liferay-ui:message key="mensagem.agendamento.instrucao.2"/>
					<liferay-ui:message key="mensagem.agendamento.instrucao.3"/>
					<liferay-ui:message key="mensagem.agendamento.instrucao.4"/>
					<liferay-ui:message key="mensagem.agendamento.instrucao.5"/>					
			</div>
			

			<aui:field-wrapper label="">
				<aui:input name="tipoEnvio" 
							value="0" 
							type="radio" 
							required="true" 
							label="mensagem.agendamento.tipo-envio.imediato"
							inlineField="true"
							checked="${mensagem.tipoEnvio eq 0}"/>
							
				<aui:input name="tipoEnvio" 
							value="1" 
							type="radio" 
							required="true" 
							label="mensagem.agendamento.tipo-envio.agendamento"
							inlineField="true"
							checked="${mensagem.tipoEnvio eq 1}"/>			
			</aui:field-wrapper>
			
				
			<aui:field-wrapper name="tipoEnvioAgendamento" cssClass="tipo-envio-agendamento-wrapper" label="">
				
				<aui:field-wrapper label="mensagem.agendamento.escolha.dia" cssClass="mini-calendar-container">		
					<div id="<portlet:namespace/>miniCalendarContainer"></div>
				</aui:field-wrapper>
				
				<aui:field-wrapper label="mensagem.agendamento.escolha.horario" cssClass="datas-horarios-wrapper">
					<div class="alert alert-error data-obrigatoria">
						<liferay-ui:message key="mensagem.validacao.erro.agendamento.data"/>
					</div>	
					
					<div class="alert alert-error data-invalida" style="display:none;">
						<liferay-ui:message key="mensagem.validacao.erro.agendamento.data.invalida"/>
					</div>	
					
					<aui:select name="datas" label="mensagem.agendamento.data">
						<option value=""></option>
					</aui:select>
					
					<aui:field-wrapper label="mensagem.agendamento.horario" name="horariosWrapper" cssClass="horarios-wrapper">				
						<div class="alert alert-error horario-obrigatorio">
							<liferay-ui:message key="mensagem.validacao.erro.agendamento.hora"/>
						</div>
						<div class="horario-wrapper template">
							<aui:input name="horario__timestamp_" type="text" label="" cssClass="horario"/>
							<aui:button icon="icon-minus" cssClass="btn-horario del oculto" onClick="removerHorario(this)"/>
							<aui:button icon="icon-plus" cssClass="btn-horario add" onClick="adicionarHorario(getTimestampAncestor(this))"/>
						</div>
						<div id="horariosData">	
							<!-- processar as datas existentes no agendamento da mensagem, ao carregar a pagina -->
							<c:forEach var="calendario" items="${mensagem.datasCalendario}">
								<!-- definir variavel somente com as datas para serem utilizadas posteriormente no script
								que inicializa o calendario e o select -->
								<c:set var="scriptDatasLoad" value="${scriptDatasLoad}${calendario.key},"/>
								
								<!-- processar os horarios (agendamento) de cada data -->
								<c:forEach var="hora" items="${calendario.value}">
									<c:set var="agenda" value="${hora.value}"/>
									
									<div class="horario-wrapper ${agenda.situacaoEnvio gt 0 ? 'processado' : ''}"
											style="display:none;"
											data-timestamp="${calendario.key}">
										<aui:input name="horario_${calendario.key}" 
													type="text" 
													label="" 
													cssClass="horario" 
													value="${hora.key}"
													disabled="${agenda.situacaoEnvio gt 0 ? true : false}"/>
										<aui:button icon="icon-minus" cssClass="btn-horario del oculto" onClick="removerHorario(this)"/>
										<aui:button icon="icon-plus" cssClass="btn-horario add" onClick="adicionarHorario(getTimestampAncestor(this))"/>
									</div>
								</c:forEach>
							</c:forEach>							
						</div>
					</aui:field-wrapper>
					<div class="clearfix"></div>
				</aui:field-wrapper>
				
				<div class="clearfix"></div>			
			</aui:field-wrapper>
		</aui:form>
		
		<div class="botoes-acao-wizard-wrapper clearfix">
			<div class="botao-wizard-wrapper lado-esquerdo">
				<a href="javascript:" id="<portlet:namespace/>btAnterior" class="botao-wizard anterior">
					<i class="icon-circle-arrow-left"></i>
					<liferay-ui:message key="wizard.navegacao.botao.mensagem.pre-visualizar"/>
				</a>
			</div>		
			
			<% if (mensagem.getStatusWorkflow() != StatusWorkflowEnum.APROVADO.getStatus()) {%>
			<div class="botao-wizard-wrapper lado-direito">
				<a href="javascript:" id="<portlet:namespace/>btProximo" class="botao-wizard proximo">
					<liferay-ui:message key="wizard.navegacao.botao.mensagem.enviar-aprovacao"/>
					<i class="icon-circle-arrow-right"></i>
				</a>
			</div>
			<% }%>
			
			<% if (mensagem.getStatusWorkflow() == StatusWorkflowEnum.APROVADO.getStatus()) {%>
			<div class="botao-wizard-wrapper lado-direito">
				<a href="javascript:" id="<portlet:namespace/>btProximo" class="botao-wizard proximo">
					<liferay-ui:message key="wizard.navegacao.botao.mensagem.enviar"/>
					<i class="icon-circle-arrow-right"></i>
				</a>
			</div>
			<% }%>
			
		</div>			
	</div>
</div>

<aui:script use="aui-base,aui-datatype,calendar,date" position="bottom"> 
	//atributo adicional para definir o timestamp (data) que o horario pertecente.
	var attrTimestamp = "data-timestamp";
	//select contendo as datas selecionadas no calendario
	var campoDatasHorarios = A.one("#<portlet:namespace/>datas");
	//div contendo os campos, servindo de template para adicionar novos campos de horario
	var templateHorarios = A.one(".horario-wrapper.template");
	//elemento container onde os novos horarios serao adicionados
	var containerHorarios = A.one("#horariosData");
	//placeholder que sera utilizado para definir a data que o campo de hora pertence
	var placeholderTimestamp = "_timestamp_";	
	//expressao regular para validar os campos de hora.
	var regexpHora = /^([0-1]?[0-9]|2[0-3])(:[0-5][0-9])?$/;
	//expressao regular para substituir todos os placeholders do html de template
	var regexpPlaceholder = new RegExp(placeholderTimestamp, 'g');
	//componente contendo os campos para agendamento
	var containerAgendamento = A.one(".tipo-envio-agendamento-wrapper");
	//nome da regra do Calendar para desabilitar as datas automaticamente.
	var nomeRegraCalendario = 'regra-data-minima';	
	//hidden com as datas selecionadas no calendario
	var datasCalendario = A.one('#<portlet:namespace/>datasCalendario');
	
	//objeto com formato da data do select, a ser utilizado pela API de data do Alloy.
	var objFormatoData = {
		format: '%d/%m/%Y'
	};
		
	A.one("#<portlet:namespace/>btProximo").on('click', function() {
		gravarAgendamento('${proximaPaginaURL}', true);
	});
	
	A.one("#<portlet:namespace/>btAnterior").on('click', function() {
		//gravarAgendamento('${paginaAnteriorURL}');
		voltarParaAnterior('${paginaAnteriorURL}');
	});	

	A.all("input[name='<portlet:namespace/>tipoEnvio']").on('click', function(e){
		var tipo = e.target.val();
		exibirContainerAgendamento(tipo);
	});

	campoDatasHorarios.on("change", function(e){
		if (e.target.val() == "") {
			A.all("#horariosData .horario-wrapper").setStyle("display", "none");
			return;
		}	
		exibirHorarios(e.target.val());
	});

	Liferay.provide(
		window,
		'aplicarMascaraHorarios',
		function(seletor) {
			var seletorTemp = (seletor == undefined) ? "#horariosData input.horario" : seletor;
			$(seletorTemp).mask("99:99", {completed: function() {
				var hora = this.val();
				if (!regexpHora.test(hora)) {
					//limpar o campo, e forcar o plugin de mascara a renderizar novamente
					//evitando problemas ao digitar neste vampo novamente.
					this.val("");
					this.select();
					this.blur();
					this.focus();
				};
			}});
		}
	);

	Liferay.provide(
		window,
		'getTimestampAncestor',
		function(elemento) {
			//funcao acionada atraves do click do botao
			//utilizando javascript convencional,
			//para obter o elemento pai do que foi informado no argumento da funcao
			if (elemento != undefined) {
				return elemento.parentNode.getAttribute(attrTimestamp);
			}
		}
	);

	Liferay.provide(
		window,
		'adicionarHorario',
		function(timestamp, primeiro) {
			var novoHorario = AUI().Node.create(templateHorarios.outerHTML());
			//remover a classe CSS que indica que é um template
			novoHorario.removeClass("template")
			
			//definir qual data o novo horario pertence
			novoHorario.attr(attrTimestamp, timestamp);

			if (primeiro != undefined && primeiro == true) {
				//define que eh o primeiro horario da data
				novoHorario.addClass("primeiro unico");
			}

			//adiciona o campo, substituindo o placeholder pelo timestamp da data selecionada
			containerHorarios.append(novoHorario.outerHTML().replace(regexpPlaceholder, timestamp));	

			//reaplicar a mascara para os novos campos do timestamp atual
			aplicarMascaraHorarios(getSeletorHorarios(timestamp) + " input.horario");
			
			reclassificarHorarios(timestamp);
		}
	);	

	Liferay.provide(
		window,
		'removerHorario',
		function(elemento) {
			var wrapperHorarioBotao = elemento.parentNode;
			var wrapperPrincipal = wrapperHorarioBotao.parentNode;
			var timestamp = getTimestampAncestor(elemento);
			
			wrapperPrincipal.removeChild(wrapperHorarioBotao);
			
			reclassificarHorarios(timestamp);
		}
	);	
	
	Liferay.provide(
		window,
		'exibirHorarios',
		function(timestamp) {
			if (timestamp == '' || parseInt(timestamp, 10) == 0) return;
			
			//ocultar todos os campos
			A.all("#horariosData .horario-wrapper").setStyle("display", "none");

			//reexibir somente os campos do timestamp atual.
			var horarios = A.all(getSeletorHorarios(timestamp));
			
			horarios.setStyle("display", "block");

			//adicionar horario padrao
			if (horarios.size() == 0) {
				adicionarHorario(timestamp, true);
			}
		}
	);	

	Liferay.provide(
		window,
		'getSeletorHorarios',
		function(timestamp) {
			//reexibir somente os campos do timestamp atual.
			return "#horariosData .horario-wrapper[" + attrTimestamp + "='" + timestamp + "']";
		}
	);	

	Liferay.provide(
			window,
		'sincHorariosSelecionados',
		function() {
			//funcao para manter os campos de horarios apenas das datas selecionadas.
			//obtem todos os campos de horarios adicionados
			containerHorarios.all(".horario-wrapper").each(function(){
				var obj = this;
				//obtem o timestamp do atributo extra
				var timestamp = obj.attr(attrTimestamp);
				//verificar se existe option com o timestamp
				var option = campoDatasHorarios.one("option[value='" + timestamp + "']");
				//caso nao encontre o option, remove o horario da pagina
				if (option == null) {
					obj.remove();
					exibirAlertaHorarioObrigatorio(false);
				}
			});
		}
	);	

	Liferay.provide(
		window,
		'reclassificarHorarios',
		function(timestamp) {
			if (timestamp == undefined) return;
			
			//reexibir somente os campos do timestamp atual.
			var horarios = A.all(getSeletorHorarios(timestamp));	
			var definirPrimeiro = horarios.size() > 0;
			var horaInicio = definirPrimeiro ? horarios.item(0) : null;
			
			if (horarios.size() > 1) {
				//redefinir o primeiro item se eh unico ou nao
				horarios.removeClass("unico");
			}
			else if (horarios.size() == 1) {
				if (!horaInicio.hasClass("unico")) {
					horaInicio.addClass("unico");
				}
			}
			
			if (horaInicio != null) {
				if (!horaInicio.hasClass("primeiro")) {
					horaInicio.addClass("primeiro");
				}
			}

			//definir horario padrao para o primeiro, caso esteja em branco
			var primeiroHorario = A.one(getSeletorHorarios(timestamp) + ".primeiro input.horario");
			if (primeiroHorario != null && primeiroHorario.val() == "") {
				primeiroHorario.val('${horarioPadrao}');
			}			
		}
	);

	Liferay.provide(
		window,
		'validarDatas',
		function(timestamp) {
			exibirAlertaHorarioObrigatorio(false);
			exibirAlertaDataObrigatoria(false);
			
			var datasSel = A.one("#<portlet:namespace/>datas");
			
			//obter um array com todos os valores dos options do select
			var valOptions = datasSel.all("option").val();

			if (valOptions.length == undefined 
					|| valOptions.length == 0
					|| (valOptions.size != undefined && valOptions.size() == 0)) {
				exibirAlertaDataObrigatoria(true);
				return false;
			}
			
			for (var j = 0; j < valOptions.length; j++) {
				//obtem o timestamp do option
				var timestamp = valOptions[j];
				
				//obtem o valor de todos os inputs do timestamp
				var horarios = A.all(getSeletorHorarios(timestamp) + " input.horario").val();
				
				var preencheu = false;
				//verifica se preencheu algum campo
				for (var i = 0; i < horarios.length; i++) {
					if (horarios[i] != '') {
						preencheu = true;
						break;
					}
				}
				
				if (!preencheu) {
					datasSel.val(timestamp);
					exibirHorarios(timestamp);
					exibirAlertaHorarioObrigatorio(true);
					return false;
				}
			};

			return true;
		}
	);

	function exibirContainerAgendamento(tipo) {
		containerAgendamento.setStyle("display", tipo == '0' ? "none" : "block");
	}
	
	//adiciona as datas selecionadas no calendario, no select para os horarios
	//datas = array de Date obtido do calendario
	function adicionarDatasSelect(datas) {

		var aoMenosUmaDataInvalida = 0;
		//obter o campo selecionado atualmente, para redefini-lo posteriormente
		var optionSel = campoDatasHorarios.one("option:selected");
		optionSel = (optionSel == null) ? '' : optionSel.val();
		//limpar o combo
		campoDatasHorarios.all("option").remove();
		//
		campoDatasHorarios.append('<option value=""></option>');
		for (var i = 0; i < datas.length; i++) {
			var data = datas[i];
			var dataSemHora = datas[i] ;
			dataSemhora = dataSemHora.setHours(0,0,0,0);
			var dataAtualSemHora = new Date();
			dataAtualSemHora.setHours(0,0,0,0);
			
			if(dataSemHora.getTime() >= dataAtualSemHora.getTime()){
				data.setHours(1,1,1,1);
				campoDatasHorarios.append("<option value='" + data.getTime() + "'>" + A.Date.format(data, objFormatoData) + "</option>");
			} else {
				aoMenosUmaDataInvalida = 1;				
			}
		}

		//remarcar o option selecionado antes da limpeza
		campoDatasHorarios.val(optionSel);

		if (aoMenosUmaDataInvalida == 1){
			exibirAlertaDataInvalida(true);	
		}else {
			exibirAlertaDataInvalida(false);
		}

		sincHorariosSelecionados();

		exibirAlertaDataObrigatoria(datas.length == 0);

		document.getElementById('<portlet:namespace/>datas').selectedIndex = 1;
		var a = document.getElementById("<portlet:namespace/>datas").value;

		if (a == ""){
			A.all("#horariosData .horario-wrapper").setStyle("display", "none");
		} else {
			exibirHorarios(a);
		}
	
	}	

	function exibirAlertaHorarioObrigatorio(exibir) {
		exibirAlerta(exibir, A.one(".alert.horario-obrigatorio"));
	}

	function exibirAlertaDataObrigatoria(exibir) {
		exibirAlerta(exibir, A.one(".alert.data-obrigatoria"));
	}

	function exibirAlertaDataInvalida(exibir) {
		exibirAlerta(exibir, A.one(".alert.data-invalida"));
	}

	function exibirAlerta(exibir, elemento) {
		elemento.setStyle("display", exibir ? "block" : "none");
	}

	function voltarParaAnterior(urlRedirect){
		window.location= urlRedirect;
	}

	function gravarAgendamento(urlRedirect, gravarWorkflow) {
		//atualizar o hidden com as datas selecionadas no calendario, com base na lista do option
		//sera utilizado para auxiliar no processamento do agendamento
		var datas = campoDatasHorarios.all("option");
		if (datas.size() == 0) {
			datasCalendario.val("");
		}
		else {
			for (var i = 0; i < datas.size(); i++) {
				datasCalendario.val(datasCalendario.val() + datas.item(i).val() + ",");
			}
		}

		if (!validarAgendamento()) return;
		
		A.one('#<portlet:namespace/>redirect').val(urlRedirect);

		if (gravarWorkflow != undefined && gravarWorkflow == true) {
			A.one('#<portlet:namespace/>gravarWorkflow').val('true');
		}

		submitForm(document.<portlet:namespace/>fmWizard);		
	}	

	function validarAgendamento() {
		var tipoEnvio = A.one("input[name='<portlet:namespace/>tipoEnvio']:checked").val();
		
		exibirAlertaDataObrigatoria(false);
		
		if (tipoEnvio == "1" && datasCalendario.val() == "") {
			exibirAlertaDataObrigatoria(true);
			return false;
		}
		return true;
	}

	function preencherCalendarioSelectLoad(data) {
		//preenche os componentes com as datas durante o carregamento da pagina.
		window.<portlet:namespace />miniCalendar.selectDates(data);
		data.setHours(1,1,1,1);
		campoDatasHorarios.append("<option value='" + data.getTime() + "'>" + A.Date.format(data, objFormatoData) + "</option>");
	}	
	
	function regraDataMinimaCalendario() {
		//definir regras para nao permitir selecinar datas inferiores a data atual
		
		//http://yuilibrary.com/yui/docs/calendar/#custom-rendering
		//http://stackoverflow.com/questions/10856844/how-do-i-disable-dates-previous-to-yui3-calendar-minimumdate
		
		var anoInicial = '2000-';
		
		var date = new Date();
		
		var year = date.getFullYear(), 
        month = date.getMonth(), 
        daybefore = date.getDate() - 1,
        r = {};

		//calcula o mes e ano anterior, para desabilitar todas as datas possiveis
		var monthBefore = (month - 1) < 0 ? 11 : (month - 1);
        var yearBefore = (month - 1) < 0 ? year - 1 : year;

        if (daybefore < 1) {
            if (monthBefore == 0 || monthBefore == 2 || monthBefore == 4 || monthBefore == 6 || monthBefore == 7 || monthBefore == 9
                    || monthBefore == 11) {
            	daybefore = 31;
            } else if (monthBefore == 1) {
            	daybefore = 28;
            } else {
            	daybefore = 30;
            }
        }
        
        //definen regras especificas para o ano/mes atual, para desabilitar ate o dia atual apenas
	    r[anoInicial + year] = {};
	    r[anoInicial + year][month] = {};
	    r[anoInicial + year][month]['1-' + daybefore] = nomeRegraCalendario;
	    //define a regra para ano/mes anteriores ao atual, para desabilitar todos os dias
	    r[anoInicial + yearBefore] = {};
	    r[anoInicial + yearBefore]['0-' + (monthBefore)] = {};
	    r[anoInicial + yearBefore]['0-' + (monthBefore)]['all'] = nomeRegraCalendario;
	    return r;		
	}
	
	//instanciar o componente de calendario, e deixar a variavel disponivel para uso por outras funcoes
	//externas ao sandbox aui:script.
	window.<portlet:namespace />miniCalendar = new A.Calendar(
		{
			after: {
				dateClick: function(event) {
					adicionarDatasSelect(<portlet:namespace />miniCalendar.get("selectedDates"))
				}
			},
			selectionMode: 'multiple-sticky',
			date: new Date(<%= ParamUtil.getLong(request, "date", System.currentTimeMillis()) %>),
			locale: 'pt',
			disabledDatesRule: nomeRegraCalendario,
			customRenderer: {
				rules: regraDataMinimaCalendario()
			},
			trigger: 'miniCalendar'
		}
	).render('#<portlet:namespace />miniCalendarContainer');

	//iniciar alguns metodos
	getTimestampAncestor();

	<c:if test='${not empty scriptDatasLoad}'>
		A.on("domready", function(event){
			//preencher os componentes de data e select ao carregar a pagina
			var arrayTimestamp = '${scriptDatasLoad}'.split(',');
			for (var idxCal = 0; idxCal < arrayTimestamp.length; idxCal++) {
				var timestamp = arrayTimestamp[idxCal];
				if (timestamp != '') {
					timestamp = parseInt(timestamp, 10);
					preencherCalendarioSelectLoad(new Date(timestamp));
					window.reclassificarHorarios(timestamp);	
					//bypassar um bug que ocorre ao executar a funcao na primeira vez
					//pois não está recuperando os objetos corretamente na primeira chamada da função
					if (idxCal == 0) {
						window.reclassificarHorarios(timestamp);
					}				
				}
			}
			campoDatasHorarios.attr('selectedIndex', '1'); 
			exibirHorarios(campoDatasHorarios.val());
			
		});
	</c:if>

	//inicializar plugin jQuery
	$(document).ready(function(){
		$.mask.definitions['~']='[+-]';
		//aplicar mascara nos campos ja existentes ao carregar a pagina.
		aplicarMascaraHorarios();

	});	

    <c:if test="${not empty mensagem.tipoEnvio}">
	    exibirContainerAgendamento(${mensagem.tipoEnvio});
	</c:if>

	
</aui:script>


