<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <body>
        <center>
            <ui:composition template="./template/Principal.xhtml">

                <ui:define name="top">
                    SISTEMA DE INVENTARIO
                </ui:define>

                <ui:define name="left">

                </ui:define>

                <ui:define name="right">

                </ui:define>

                <ui:define name="content">
                    <f:view>


                        <h:form>
                            <p:growl id="growl" showDetail="true" for="MensajeUsuario"/>

                            <h1><h:outputText value="#{demoBeanUsuario.titulo}"/></h1>
                            <h:panelGrid columns="3">

                                <p:outputLabel value="Nombre:" for="nombre" />
                                <p:inputText id="nombre" value="#{demoBeanUsuario.TUsuario.nombre}" 
                                             title="Nombre"
                                             required="true"
                                             requiredMessage="El campo nombre es obligatorio"
                                             validatorMessage="El campo nombre no debe incluir números, debe incluir mínimo 3 letras y máximo 15 letras">
                                    <f:validateRegex pattern="[a-zA-Z ]+" />
                                    <f:validateLength minimum="3" maximum="15" />
                                </p:inputText>
                                <p:message for="nombre" />

                                <p:outputLabel value="Sexo" for="sexo" />
                                <p:inputText id="sexo" value="#{demoBeanUsuario.TUsuario.sexo}" 
                                             title="Sexo"
                                             required="true"
                                             requiredMessage="El campo nombre es obligatorio"
                                             validatorMessage="M o F">
                                    
                                    
                                </p:inputText>
                                <p:message for="sexo" />

                                <p:outputLabel value="Telefono:" for="telefono" />                                
                                <p:inputText id="telefono" value="#{demoBeanUsuario.TUsuario.telefono}"
                                             title="Telefono" 
                                             required="true"
                                             requiredMessage="El campo teléfono es obligatorio"
                                             validatorMessage="El teléfono no es válido">
                                    <f:validateRequired />
                                    <f:validateRegex pattern="\d{10}" />
                                </p:inputText>
                                <p:message for="telefono" />

                                <p:outputLabel value="Correo:" for="correo" />
                                <p:inputText id="correo" value="#{demoBeanUsuario.TUsuario.correo}" 
                                             title="Correo" 
                                             required="true"
                                             requiredMessage="El campo correo es obligatorio"
                                             validatorMessage="El correo no es válido">

                                    <f:validateRegex pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" />
                                    <f:validateLength maximum="100" />
                                </p:inputText>
                                <p:message for="correo" />

                                <p:outputLabel value="Direccion:" for="direccion" />
                                <p:inputText id="direccion" value="#{demoBeanUsuario.TUsuario.direccion}"
                                             title="Direccion" 
                                             required="true"
                                             requiredMessage="El campo dirección es obligatorio "
                                             validatorMessage="La dirección no es válida">
                                    <f:validateLength minimum="5" maximum="30" />
                                    <f:validateRegex pattern="[a-zA-Z0-9,.# ]*" />
                                </p:inputText>
                                <p:message for="direccion" />

                                <p:outputLabel value="Username:" for="username" />
                                <p:inputText id="username" value="#{demoBeanUsuario.TUsuario.username}" 
                                             title="Username"
                                             required="true"
                                             requiredMessage="El campo nombre es obligatorio"
                                             validatorMessage="El campo nombre no debe incluir números, debe incluir mínimo 3 letras y máximo 15 letras">
                                    <f:validateRegex pattern="[a-zA-Z0-9 ]+" />
                                    <f:validateLength minimum="3" maximum="15" />
                                </p:inputText>
                                <p:message for="username" />
                                
                                <p:outputLabel value="Password:" for="password" />
                                <p:inputText id="password" value="#{demoBeanUsuario.TUsuario.npila}" 
                                             title="Password"
                                             required="true"
                                             requiredMessage="El campo nombre es obligatorio"
                                             validatorMessage="El campo nombre no debe incluir números, debe incluir mínimo 3 letras y máximo 15 letras">
                                    <f:validateRegex pattern="[a-zA-Z0-9 ]+" />
                                    <f:validateLength minimum="3" maximum="15" />
                                </p:inputText>
                                <p:message for="password" />

                                <p:outputLabel value="Estado:" for="estadoId"/>
                                <p:selectOneMenu id="estadoId" value="#{demoBeanUsuario.TUsuario.estadoIdestado}" converter="selectOneMenuConverter" 
                                                 required="true" requiredMessage="Este campo es requerido">
                                    <f:selectItems value="#{demoBeanEstado.estados}" var="item" itemLabel="#{item.nombre}"  itemValue="#{item}"/>
                                </p:selectOneMenu>
                                <p:message for="estadoId"/>

                                <p:outputLabel value="Pais:" for="paisId"/>
                                <p:selectOneMenu id="paisId" value="#{demoBeanUsuario.TUsuario.paisId}" converter="selectOneMenuConverter" 
                                                 required="true" requiredMessage="Este campo es requerido">
                                    <f:selectItems value="#{demoBeanPais.paises}" var="item" itemLabel="#{item.nombre}"  itemValue="#{item}"/>
                                </p:selectOneMenu>
                                <p:message for="paisId"/>
                                
                                <p:outputLabel value="Rol:" for="rolId"/>
                                <p:selectOneMenu id="rolId" value="#{demoBeanUsuario.TUsuario.rolIdrol}" converter="selectOneMenuConverter" 
                                                 required="true" requiredMessage="Este campo es requerido">
                                    <f:selectItems value="#{demoBeanRol.rols}" var="item" itemLabel="#{item.nombre}"  itemValue="#{item}"/>
                                </p:selectOneMenu>
                                <p:message for="rolId"/>

                            </h:panelGrid>
                            <p:commandButton action="#{demoBeanUsuario.agregarUsuario()}" 
                                             icon="pi pi-fw pi-check"
                                             style="padding: 2px 8px; font-size: 13px; font-weight: bold; color: #3366FF; background-color: #fff; border: 2px solid #3366FF; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease ; margin-right: 6px;"

                                             rendered="#{demoBeanUsuario.nuevo}"
                                             value="Agregar" 
                                             update="growl"
                                             ajax="false"/>

                            <p:commandButton action="Usuario.xhtml" 
                                             actionListener="#{demoBeanUsuario.editarUsuario()}"
                                             icon="pi pi-fw pi-pencil"
                                             style="padding: 2px 8px; font-size: 13px; font-weight: bold; color: #3366FF; background-color: #fff; border: 2px solid #3366FF; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease ; margin-right: 6px;"

                                             rendered="#{!demoBeanUsuario.nuevo}"
                                             value="Editar"
                                             update="growl"
                                             ajax="false"/>

                            <p:commandButton action="Usuario.xhtml" icon="pi pi-fw pi-times"
                                             value="Cancelar"
                                             style=" padding: 2px 8px; font-size: 13px; font-weight: bold; color: #990000; background-color: #fff; border: 2px solid #FF0000; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; margin-right: 6px;"

                                             immediate="true"
                                             ajax="false"/>
                        </h:form>
                    </f:view>

                </ui:define>

                <ui:define name="bottom">

                </ui:define>

            </ui:composition>
        </center>
    </body>
</html>