<?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:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <body>

        <ui:composition template="./template/templatePlantilla.xhtml">

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

            <ui:define name="content">
                <div class="card crud-demo">
                <h:form id="form">
                    <p:growl id="messages" showDetail="true" />

                    <p:toolbar>
                        <p:toolbarGroup>
                            <p:commandButton value="Nuevo Proveedor 🚚" icon="pi pi-plus" actionListener="#{proveedorBean.prepararNuevo()}"
                                    update=":dialogs:manage-product-content" oncomplete="PF('manageProductDialog').show()"
                               styleClass="ui-button-raised ui-button-flat"  style="margin-right: 0.5rem">
                                <p:resetInput target=":dialogs:manage-product-content" />
                            </p:commandButton>
                        </p:toolbarGroup>
                    </p:toolbar>


                    <p:dataTable id="dt-proveedor" widgetVar="dtproveedor" var="proveedor" value="#{proveedorBean.proveedores}"
                        reflow="true" styleClass="products-table"
                        rowKey="#{proveedorBean.proveedor.idProovedor}" paginator="true" rows="10" rowSelectMode="add" paginatorPosition="bottom">

                         <f:facet name="header">
                            <div class="products-table-header">
                                <span style="font-weight: bold">Proovedores</span>
                                <span class="filter-container ui-input-icon-left"> <i class="pi pi-search"></i>
                                    <p:inputText id="globalFilter" onkeyup="PF('dtproveedor').filter()" placeholder="Search" />
                                </span>
                            </div>
                        </f:facet>

                        <p:column headerText="Nombre" sortBy="#{proveedor.proovedor}" filterBy="#{proveedor.proovedor}">
                            <h:outputText value="#{proveedor.proovedor}" />
                        </p:column>
                       

                        <p:column headerText="Telefono" sortBy="#{proveedor.telefono }" filterBy="#{proveedor.telefono}">
                            <h:outputText value="#{proveedor.telefono} " />
                        </p:column>
                        <p:column headerText="Direccion" sortBy="#{proveedor.direccion}" filterBy="#{proveedor.direccion}">
                            <h:outputText value="#{proveedor.direccion}" />
                        </p:column>

                        <p:column headerText="Pais" sortBy="#{proveedor.pais}" filterBy="#{proveedor.pais}">
                            <h:outputText value="#{proveedor.pais}" />
                        </p:column>
                        <p:column headerText="Ciudad" sortBy="#{proveedor.ciudad}" filterBy="#{proveedor.ciudad}">
                            <h:outputText value="#{proveedor.ciudad}" />
                        </p:column>
                        <p:column headerText="C.P" sortBy="#{proveedor.codigoPostal}" filterBy="#{proveedor.codigoPostal}">
                            <h:outputText value="#{proveedor.codigoPostal}" />
                        </p:column>
                        
                        
                       
                        

                        <p:column headerText="Acciones">
                            <p:commandButton icon="pi pi-pencil" update=":dialogs:manage-product-content"
                                oncomplete="PF('manageProductDialog').show()"
                                styleClass="rounded-button ui-button-info" process="@this"
                                actionListener="#{proveedorBean.prepararEditar(proveedor)}">
                                <p:resetInput target=":dialogs:manage-product-content" />
                            </p:commandButton>

                            <p:commandButton styleClass="rounded-button ui-button-danger" icon="pi pi-trash"
                                process="@this"
                                actionListener="#{proveedorBean.preparaEliminar(proveedor)}"
                                oncomplete="PF('deleteProductDialog').show()">
                            </p:commandButton>
                        </p:column>

                    </p:dataTable>
                </h:form>

                <h:form id="dialogs">
                    <p:dialog header="Detalles de proovedor" showEffect="fade" modal="true" widgetVar="manageProductDialog"
                        responsive="true">
                        <p:outputPanel id="manage-product-content" styleClass="ui-fluid">
                            <p:outputPanel>
                               <h:panelGrid columns="2">
                            
                            <p:outputLabel value="Nombre:" for="proveedor" />
                            <p:inputText id="proveedor" value="#{proveedorBean.proveedor.proovedor}" title="Proveedor" required="true" requiredMessage="El nombre es requerido." validatorMessage="Solo se pueden introducir letras">
                                 <f:validateRegex pattern="[A-Za-z\s]+" for="nombre"></f:validateRegex>
                            </p:inputText>
                            <p:outputLabel value="Telefono:" for="telefono" />
                            <p:inputMask id="telefono" value="#{proveedorBean.proveedor.telefono}" mask="(999) 999-9999" validateMask="true"  required="true" requiredMessage="El telefono es requerido."  >             
                              </p:inputMask> 
                            <p:outputLabel value="Direccion:" for="direccion" />
                            <p:inputText id="direccion" value="#{proveedorBean.proveedor.direccion}" title="Direccion" required="true" requiredMessage="La dirección es requerida." validatorMessage="Solo se pueden introducir letras">
                                 <f:validateRegex pattern="^[A-Za-z0-9\s#\-]+$" for="direccion"></f:validateRegex>
                            </p:inputText>
                            <p:outputLabel value="Pias" for="pais" />
                            <p:inputText id="pais" value="#{proveedorBean.proveedor.pais}" title="Pais" required="true" requiredMessage="El país es requerido." validatorMessage="Solo se pueden introducir letras">
                                 <f:validateRegex pattern="[\p{L}\s]+" for="pais"></f:validateRegex>
                            </p:inputText>
                            <p:outputLabel value="Ciudad" for="ciudad" />
                            <p:inputText id="ciudad" value="#{proveedorBean.proveedor.ciudad}" title="Ciudad" required="true" requiredMessage="La ciudad es requerida." validatorMessage="Solo se pueden introducir letras">
                                 <f:validateRegex pattern="[A-Za-z\s]+" for="ciudad"></f:validateRegex>
                            </p:inputText>
                            <p:outputLabel value="C.P" for="codigoPostal" />
                            <p:inputText id="codigoPostal" value="#{proveedorBean.proveedor.codigoPostal}" title="Codigo Postal" required="true" requiredMessage="El codigo postal es requerdido." validatorMessage="El codigo postal no es valido">
                                
                                
                            </p:inputText>
                        </h:panelGrid>
                            </p:outputPanel>
                        </p:outputPanel>

                        <f:facet name="footer">
                            <div style="text-align: center;">
                                <p:commandButton value="Guardar" icon="pi pi-save"
                                                 styleClass="ui-button-raised ui-button-flat" actionListener="#{proveedorBean.agregarProveedor()}"
                                    update="manage-product-content" process="manage-product-content @this" />
                            </div>
                        </f:facet>
                    </p:dialog>

                    <p:confirmDialog widgetVar="deleteProductDialog" showEffect="fade" width="300"
                        message="¿Deseas eliminar este elemento?" header="Eliminar" severity="warn">
                        <div style="display: flex; justify-content: space-between;">
                            <p:commandButton value="Eliminar" icon="pi pi-trash"
                                styleClass="ui-button-raised ui-button-danger ui-button-flat"
                                actionListener="#{proveedorBean.eliminaProveedor()}" process="@this"
                                oncomplete="PF('deleteProductDialog').hide()" />
                            <p:commandButton value="Cancelar" type="button"
                                styleClass="ui-button-raised ui-button-danger-success  ui-button-flat" icon="pi pi-times"
                                onclick="PF('deleteProductDialog').hide()" />
                        </div>
                    </p:confirmDialog>
                </h:form>
            </div>
            </ui:define>

        </ui:composition>

    </body>
</html>