<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:cc="http://java.sun.com/jsf/composite"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                xmlns:p="http://primefaces.org/ui">

    <!-- INTERFACE -->
    <cc:interface>
        <cc:attribute name="dialogId"                 required="true"  type="java.lang.String"  shortDescription="Identificação do componente (o valor fornecido será utilizado na propriedade 'widgetVar' do dialog)."/>
        <cc:attribute name="titulo"                   required="true"  type="java.lang.String"  shortDescription="Título do dialog."/>
        <cc:attribute name="descricao"                required="true"  type="java.lang.String"  shortDescription="Descrição da tela, a qual será apresentada na parte superior."/>
        <cc:attribute name="labelVencimento"          required="false" type="java.lang.String"  shortDescription="Label do campo de vencimento do boleto"/>
        <cc:attribute name="pripriedadeVencimento"    required="false" type="java.lang.Object"  shortDescription="Propriedade do Managed Bean que será relacionado ao vencimento"/>
        <cc:attribute name="podeSelecionarVencimento" required="false" type="java.lang.Boolean" shortDescription="Se a data de vencimento poderá ou não ser informada pelo usuário."/>
        <cc:attribute name="dataMinimaVencimento"     required="false" type="java.util.Date"    shortDescription="Data mínima de vencimento que o usuário poderá fornecer"/>
        <cc:attribute name="dataMaximaVencimento"     required="false" type="java.util.Date"    shortDescription="Data máxima de vencimento que o usuário poderá fornecer"/>
        <cc:attribute name="tooltipVencimento"        required="false" type="java.lang.String"  shortDescription="Tooltip do campo data de vencimento do dialog."/>
        <cc:attribute name="labelConvenio"            required="true"  type="java.lang.String"  shortDescription="Label do campo de seleção de convênio."/>
        <cc:attribute name="value"                    required="true"  type="java.lang.Object"  shortDescription="Propriedade do Managed Bean que será relacionado ao convênio"/>
        <cc:attribute name="listagemConvenios"        required="true"  type="java.util.List"    shortDescription="Listagem de convênios apresentada no combobox."/>
        <cc:attribute name="action"                   required="false" method-signature="java.lang.String action()" />
        <cc:attribute name="actionListener"           required="false" method-signature="void actionListener()"     />
        <cc:attribute name="onOKClick"                required="false" type="java.lang.String"  shortDescription="Javascript a ser executado no evento onclick do botão OK"/>
        <cc:attribute name="ajaxOK"                   required="false" type="java.lang.String"  shortDescription="Valor do atributo AJAX do botão OK"/>
        <cc:attribute name="atualizarValores"         required="false" type="java.lang.Boolean" default="false"/>
        <cc:attribute name="visualizarAtualizarValores"         required="false" type="java.lang.Boolean" default="false"/>
        <cc:attribute name="pagarCartao"         required="false" type="java.lang.Boolean" default="false"/>
        <cc:attribute name="linhaDigitavel"         required="false"/>
        <cc:attribute name="onGerarTituloClick"         required="false" method-signature="void actionListener()"/>
        <cc:attribute name="onPagarCartaoClick"         required="false" method-signature="void actionListener()"/>
        <cc:attribute name="onOpenDialog"         required="false" method-signature="void actionListener()"/>
        <cc:attribute name="onImprimirParcelaClick"         required="false" method-signature="java.lang.String action()"/>
        <cc:attribute name="dataVencDisabled"               required="false" type="java.lang.Boolean" default="false"/>
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation >
        <h:outputScript library="js" name="util.js"/>
        <p:dialog onShow="#{cc.attrs.podeSelecionarVencimento?'setCalendarMask()' :''}" id="#{cc.attrs.dialogId}" widgetVar="#{cc.attrs.dialogId}" header="#{cc.attrs.titulo}"
                  draggable="false" maximizable="false" minimizable="false" styleClass="customizado" resizable="false" width="550"  modal="true" appendTo="@(body)">

            <h:form id="#{cc.attrs.dialogId}Form">
                <p:messages id="#{cc.attrs.dialogId}Messages" for="#{cc.attrs.dialogId}Messages" showDetail="true" showSummary="false"/>
                <h:outputText value="#{cc.attrs.descricao}" rendered="#{cc.attrs.podeSelecionarVencimento or (not empty cc.attrs.listagemConvenios and fn:length(cc.attrs.listagemConvenios) > 1)}"/>

                <h:outputText value="Clique em OK para confirmar a emissão." rendered="#{empty cc.attrs.listagemConvenios}"/>


                <h:panelGrid columns="3">
                    <p:outputLabel for="#{cc.attrs.dialogId}Calendar" value="#{cc.attrs.labelVencimento}" rendered="#{cc.attrs.podeSelecionarVencimento}"/>
                    <p:calendar id="#{cc.attrs.dialogId}Calendar" widgetVar="#{cc.attrs.dialogId}Calendar"
                                value    ="#{cc.attrs.pripriedadeVencimento}"
                                pattern  ="dd/MM/yyyy" locale="pt_BR"
                                mindate  ="#{cc.attrs.dataMinimaVencimento}"
                                maxdate  ="#{cc.attrs.dataMaximaVencimento}"
                                title    ="#{cc.attrs.tooltipVencimento}"
                                rendered="#{cc.attrs.podeSelecionarVencimento}"
                                readonlyInput="true"
                                required="true" requiredMessage="Selecione uma data valida"
                                disabled="#{cc.attrs.dataVencDisabled}"
                                />
                    <p:message id="#{cc.attrs.dialogId}CalendarMessage" for="#{cc.attrs.dialogId}Calendar" rendered="#{cc.attrs.podeSelecionarVencimento}"/>
                    <h:outputLabel value="#{cc.attrs.labelConvenio}" rendered="#{not empty cc.attrs.listagemConvenios and fn:length(cc.attrs.listagemConvenios) > 1}"/>
                    <p:selectOneMenu  id="#{cc.attrs.dialogId}Select"
                                      value="#{cc.attrs.value}"
                                      required="true"
                                      style="width: 220px; vertical-align: middle;"
                                      converter="fiConvenioConverter"
                                      rendered="#{not empty cc.attrs.listagemConvenios and fn:length(cc.attrs.listagemConvenios) > 1}">

                                        <f:selectItems value="#{cc.attrs.listagemConvenios}"
                                        var="fiConvenio"
                                        itemValue="#{fiConvenio}"
                                        itemLabel="#{fiConvenio.descrCnv}"/>
                    </p:selectOneMenu>
                    <p:message for="#{cc.attrs.dialogId}Select" />
                    <p:outputLabel value="Atualizar Valores: " rendered="#{cc.attrs.visualizarAtualizarValores}"/>
                    <p:selectBooleanButton value="#{cc.attrs.atualizarValores}" rendered="#{cc.attrs.visualizarAtualizarValores}"
                                           onIcon="confirmar" offIcon="cancelar"
                                           offLabel="#{msg_geral['geral.botoes.nao']}"
                                           onLabel="#{msg_geral['geral.botoes.sim']}"/>
                </h:panelGrid>

                <h:panelGroup layout="block" styleClass="alinhar_direita" rendered="#{cc.attrs.pagarCartao and empty cc.attrs.linhaDigitavel}">
                    <p:commandButton value="Gerar" icon="gerar" actionListener="#{cc.attrs.onGerarTituloClick}" update="@form"/>
                    <p:commandButton value="#{msg_geral['geral.botoes.cancelar']}" onclick="#{cc.attrs.dialogId}.hide();" type="button" icon="cancelar"/>
                </h:panelGroup>

                <h:panelGroup layout="block" styleClass="alinhar_direita" rendered="#{not empty cc.attrs.linhaDigitavel}">
                    <div style="border: 1px solid #d6d8db; background-color: #e2e3e5; width: 100%; margin: 10px 0; text-align: center;">
                        <p style="margin-bottom: 10px; font-weight: bold;">Utilize o número do código de barras abaixo para realizar o pagamento do boleto</p>
                        <span style="font-size: 16px; padding: 10px;">#{cc.attrs.linhaDigitavel}</span>
                    </div>

                    <p:commandButton type="button" value="Copiar Código de Barras" icon="barcode" onclick="copyToClipboard('#{cc.attrs.linhaDigitavel}')"/>

                    <p:commandButton value="Pagar com Cartão" icon="cartao" actionListener="#{cc.attrs.onPagarCartaoClick}"
                                     oncomplete="pagarCartaoCallbackHandler(xhr, status, args)" rendered="#{cc.attrs.pagarCartao}"/>

                    <p:commandButton id="btnImprimirParcela" value="Imprimir" icon="imprimir" rendered="#{cc.attrs.onImprimirParcelaClick ne null}"
                                     action="#{cc.attrs.onImprimirParcelaClick}" ajax="#{cc.attrs.ajaxOK}" onclick="#{cc.attrs.onOKClick}"/>

                    <p:commandButton value="#{msg_geral['geral.botoes.cancelar']}" onclick="#{cc.attrs.dialogId}.hide();" type="button" icon="cancelar"/>
                </h:panelGroup>

                <h:panelGroup layout="block" styleClass="alinhar_direita" rendered="#{not cc.attrs.pagarCartao and empty cc.attrs.linhaDigitavel}">
                    <p:commandButton id="#{cc.attrs.dialogId}ConfirmAction"         value="#{msg_geral['geral.botoes.confirmar']}" icon="confirmar" rendered="#{cc.attrs.action ne null}"                                    action="#{cc.attrs.action}"                  ajax="#{cc.attrs.ajaxOK}" onclick="#{cc.attrs.onOKClick}" onstart="return checkCalendarDate(true);" update="#{cc.attrs.dialogId}Messages" onsuccess="if(checkCalendarDate()){#{cc.attrs.dialogId}.hide();}"  />
                    <p:commandButton id="#{cc.attrs.dialogId}ConfirmActionListener" value="#{msg_geral['geral.botoes.confirmar']}" icon="confirmar" rendered="#{cc.attrs.actionListener ne null}"                            actionListener="#{cc.attrs.actionListener}"  ajax="#{cc.attrs.ajaxOK}" onclick="#{cc.attrs.onOKClick}" onstart="statusDialog.show();return checkCalendarDate(true);" update="#{cc.attrs.dialogId}Messages" onsuccess="statusDialog.hide();#{cc.attrs.dialogId}.hide();" />
                    <p:commandButton id="#{cc.attrs.dialogId}Confirm"               value="#{msg_geral['geral.botoes.confirmar']}" icon="confirmar" rendered="#{cc.attrs.actionListener eq null and cc.attrs.action eq null}"                                             ajax="#{cc.attrs.ajaxOK}" onclick="#{cc.attrs.onOKClick}" onstart="return checkCalendarDate(true);" update="#{cc.attrs.dialogId}Messages" onsuccess="if(checkCalendarDate()){#{cc.attrs.dialogId}.hide();}" />
                    <p:commandButton value="#{msg_geral['geral.botoes.cancelar']}" onclick="this.form.target='_self'; #{cc.attrs.dialogId}.hide();" type="button" icon="cancelar"/>
                </h:panelGroup>
            </h:form>
        </p:dialog>

        <script type="text/javascript">
            var calendarId = "#{cc.attrs.dialogId}Calendar";
            var calendarMessageId = calendarId + "Message";
            var confirmButtonId = "#{cc.attrs.dialogId}#{(cc.attrs.actionListener eq null and cc.attrs.action eq null?'Confirm':(cc.attrs.actionListener eq null ?'ConfirmAction':'ConfirmActionListener'))}";
            //<![CDATA[
            function setCalendarMask() {
                eval(calendarId + ".input.mask('99/99/9999',{placeholder:  ' ', completed:function(){  if(checkCalendarDate(false)){" + calendarId + ".input.datepicker( 'hide' ); $('button[id*='+confirmButtonId+']').focus();} }});");
            }
            function checkCalendarDate(checkEmpty) {
                var dt = new Date();
                var cal;
                eval("cal = " + calendarId);
                messagesControl.message.clear(calendarMessageId);
                try {
                    if (cal.input.val() === '  /  /    ') {
                        return false;
                    }
                    if (!checkEmpty || cal.input.val().length > 0) {
                        dt = getDate(cal.input.val());
                        if (dt > getDate(cal.cfg.maxDate)) {
                            messagesControl.message.addError(#{msg_public['financeiro.consultarConvenio.erro.dataMenorQue']} + cal.cfg.maxDate, calendarMessageId);
                            return false;
                        } else {
                            if (dt < getDate(cal.cfg.minDate)) {
                                messagesControl.message.addError(#{msg_public['financeiro.consultarConvenio.erro.dataMaiorQue']} + cal.cfg.minDate, calendarMessageId);
                                return false;
                            }
                        }
                    } else {
                        messagesControl.message.addError(#{msg_public['financeiro.consultarConvenio.erro.campoObrigatorio']}, calendarMessageId);
                        return false;
                    }
                    return true;
                } catch (ex) {
                    messagesControl.message.addError(#{msg_public['financeiro.consultarConvenio.erro.dataInvalida']}, calendarMessageId);
                    return false;
                }
            }
            function getDate(dateAsString) {
                var values = dateAsString.split('/');
                var day = parseInt(values[0], 10);
                var month = parseInt(values[1], 10);
                if ((day === 0) || (day > 31) || (month > 12) || (month === 0)) {
                    throw #{msg_public['financeiro.consultarConvenio.erro.dataInvalida']};
                }
                return new Date(parseInt(values[2], 10), month - 1, day);
            }
            // ]]>
        </script>
    </cc:implementation>

</ui:composition>