<?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>

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

            <ui:define name="top">

            </ui:define>

            <ui:define name="content">
                <f:view>
                    
                    <f:metadata>
                        <f:viewParam name="rol" value="#{demoBeanLogin.rol}" />
                        <f:event type="preRenderView" listener="#{demoBeanLogin.verificarAcceso('admin,almacenista,auxiliar', 'ubicacionLista')}" />
                    </f:metadata>
                    <div>
                        <h:form>
                            <p:menubar>

                                <p:menuitem value="Productos" action="productoLista.xhtml" ajax="false"/>
                                <p:menuitem value="Marcas" action="marcaLista.xhtml"  ajax="false"/>
                                <p:menuitem value="Proveedores" action="proveedorLista.xhtml" ajax="false"/>
                                <p:menuitem value="Ubicaciones" action="ubicacionLista.xhtml" disabled="true" ajax="false"/>
                                <p:menuitem value="Usuarios" action="usuariosLista.xhtml" ajax="false"/>

                                <p:submenu label="Opciones" icon="pi pi-fw pi-list">

                                   


                                    <p:menuitem value="Paises" 
                                                icon="pi pi-globe" 
                                                oncomplete="PF('pais').show()" 
                                                update="paisDialog"
                                                actionListener="#{demoBeanPaises.prepararNuevo()}"
                                                rendered="#{demoBeanLogin.agregaciones == true}"/>

                                    <p:menuitem value="Estados" 
                                                icon="pi pi-map" 
                                                oncomplete="PF('estado').show()" 
                                                update="estadosDialog" 
                                                actionListener="#{demoBeanEstados.prepararNuevo()}"
                                                rendered="#{demoBeanLogin.agregaciones == true}"/>

                                    <p:menuitem value="Tipos" 
                                                icon="pi pi-tags" 
                                                oncomplete="PF('tipo').show()" 
                                                update=":tip" 
                                                actionListener="#{demoBeanTipo.prepararNuevo()}"
                                                rendered="#{demoBeanLogin.agregaciones == true}"/>
                                    <!--                                    <p:divider />-->
                                </p:submenu>


                            </p:menubar>
                        </h:form>

                        <p:dialog id="rolD" widgetVar="rol" header="#{demoBeanRoles.titulo}" responsive="true" showEffect="fade" modal="true"  resizable="false">
                            <ui:include src="roles.xhtml"/>
                        </p:dialog>


                        <p:dialog id="tip" widgetVar="tipo"  responsive="true" showEffect="fade" modal="true"  resizable="false">
                            <ui:include src="tipos.xhtml"/>
                        </p:dialog>

                        <p:dialog id="paisDialog" widgetVar="pais" responsive="true" 
                                  showEffect="fade" modal="true" resizable="false" style="height: auto">
                            <ui:include src="paises.xhtml"/>
                        </p:dialog>

                        <p:dialog id="estadosDialog" widgetVar="estado" responsive="true" 
                                  showEffect="fade" modal="true" resizable="false" style="height: auto">
                            <ui:include src="estados.xhtml"/>
                        </p:dialog>


                    </div>
                    <!--id para el formulario -->
                    <h:form id="ubicacionTabla" >

                        <p:growl id="messages" showDetail="true" />

                        <!-- agregar accionador de dialogo("oncomplete") y actualizar el mismo dialogo ("update") -->



                        <p:dataTable id="table" value="#{demoBeanUbicacion.ubicacion}" 
                                     var="item" 
                                     filteredValue="#{demoBeanUbicacion.ubicacionFilter}"
                                     globalFilterFunction="#{demoBeanUbicacion.globalFilterFunction}"
                                     widgetVar="filter"
                                     paginator="true"
                                     resizableColumns="true"
                                     showGridlines="true"

                                     paginatorPosition="bottom"

                                     rows="10" 
                                     rowSelectMode="add" >




                            <f:facet name="header">

                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="flex: 1;">
                                        <p:commandButton  style="margin-top: 5px;" 
                                                          actionListener="#{demoBeanUbicacion.prepararnuevo()}" 
                                                          oncomplete="PF('mar').show()" 
                                                          value="Nuevo"
                                                          update=":dialogForm" 
                                                          icon="pi pi-plus" 
                                                          ajax="true"
                                                          disabled="#{!demoBeanLogin.permisos}"/>
                                    </div>
                                    <div style="flex: 1; text-align: center;"> <!-- Div para el texto centrado -->
                                        <header style="display: flex; justify-content: center; font-size: 30px;"><strong>Ubicacion</strong></header>
                                    </div>


                                    <div style="flex: 1; text-align: right;">

                                        <div class="flex justify-content-end">
                                            <div class="ui-input-icon-left mr-2" >
                                                <i class="pi pi-fw pi-search" />
                                            <p:inputText id="globalFilter" 
                                                         onkeyup="PF('filter').filter()" 
                                                         
                                                         placeholder="Buscar ubicacion" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </f:facet>

                            <p:column responsivePriority="3" style="text-align: center;">
                                <f:facet name="header">
                                    <h:outputText value="Bloque"/>
                                </f:facet>
                                <h:outputText value="#{item.bloque}"/>
                            </p:column>
                            
                            <p:column style="text-align: center;">
                                <f:facet name="header">
                                    <h:outputText value="Anaquel"/>
                                </f:facet>
                                <h:outputText value="#{item.anaquel}"/>
                            </p:column>
                            
                            <p:column responsivePriority="3" style="text-align: center;">
                                <f:facet name="header">
                                    <h:outputText value="Estatus"/>
                                </f:facet>
                                <h:outputText value="#{item.estado == 2 ? 'Activo':'Inactivo'}"/>
                            </p:column>

                            <p:column style="text-align: center;">
                                <f:facet name="header">
                                    <h:outputText value="Opciones"/>

                                </f:facet>
                                <p:column>
                                    <div style="text-align: center">
                                        <p:commandButton actionListener="#{demoBeanUbicacion.prepararEditar(item)}"
                                                         oncomplete="PF('mar').show()" 
                                                         update=":dialogForm" 
                                                         icon="pi pi-fw pi-pencil" 
                                                         styleClass="ui-button-secondary" ajax="true"
                                                         disabled="#{!demoBeanLogin.permisos}"
                                                         />
                                        <p:commandButton actionListener="#{demoBeanUbicacion.prepararEliminar(item)}" 
                                                         ajax="true"
                                                         oncomplete="PF('deleteUbicacion').show()" 
                                                         update=":dialogForm1" 
                                                         icon="pi pi-trash"
                                                         style="margin-left: 5px"
                                                         styleClass="ui-button-danger"
                                                         disabled="#{!demoBeanLogin.permisos}"/>
                                    </div>
                                </p:column>
                            </p:column>
                        </p:dataTable>
                    </h:form>

                    <!-- agregar dialog modal -->
                    <p:dialog id="dialogForm" 
                              header="#{demoBeanUbicacion.titulo}" 
                              widgetVar="mar"
                              responsive="true" 
                              showEffect="fade" 
                              modal="true" 
                              resizable="true" 
                              width="auto"
                              height="120">
                        <h:form>

                            <p:growl id="messages" showDetail="true" for="mensajeUbicacion"/>

                            <h:panelGrid columns="3" cellpadding="7">
                                <p:outputLabel value="Bloque" for="bloque" />
                                <p:inputText id="bloque" 
                                             value="#{demoBeanUbicacion.ubi.bloque}" 
                                             title="Bloque" 
                                             required="true" 
                                             requiredMessage="El campo no debe estar vacio"
                                             validatorMessage="AsignaciĆ³n no valida" >


                                    <f:validateRegex pattern="^[A-Z]$" 
                                                     for="bloque"/>


                                </p:inputText>

                                <p:message id="block" for="bloque"/> 



                                <p:outputLabel value="Anaquel:" for="anaquel" />
                                <p:inputText id="anaquel" 
                                             value="#{demoBeanUbicacion.ubi.anaquel}" 
                                             title="Anaquel" 
                                             required="true"
                                             requiredMessage="AsignaciĆ³n no valida"
                                             >

                                </p:inputText>

                                <p:message id="y" for="bloque"/>   


                            </h:panelGrid>

                            <!-- botones en ajax true (excepto el cancelar) y updates referenciando a ids del dialog
                              (sobretodo a los id de los inputTxt) y tabla para actualizarla. continua en el bean -->
                            <p:commandButton action="#{demoBeanUbicacion.agregar()}"  
                                             update="messages, ubicacionTabla:table, bloque,block" 
                                             rendered="#{demoBeanUbicacion.nuevo}" 
                                             styleClass="ui-button-success"  
                                             style="width: 50px;" 
                                             icon="pi pi-save" 
                                             ajax="true"
                                             />

                            <p:commandButton  action="#{demoBeanUbicacion.editarU()}" 
                                              update="messages, ubicacionTabla:table, bloque,block"  
                                              rendered="#{!demoBeanUbicacion.nuevo}" 
                                              icon="pi pi-save"
                                              styleClass="ui-button-success"
                                              style="width: 50px;"
                                              ajax="true"/>

                            <p:commandButton action="ubicacionLista.xhtml" immediate="true" 
                                             style="margin-left: 5px; width: 50px; " 
                                             icon="pi pi-times" styleClass="ui-button-danger"
                                             ajax="false"/>



                        </h:form>


                    </p:dialog>

                    <p:dialog id="dialogForm1" 
                              header="#{demoBeanUbicacion.titulo}" 
                              widgetVar="deleteUbicacion" 
                              responsive="true" 
                              showEffect="fade" 
                              modal="true" 
                              resizable="true" 
                              width="auto"
                              height="auto">

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

                            <h:panelGrid columns="2">

                                <h:outputText value="Bloque:"/>
                                <h:outputText value="#{demoBeanUbicacion.ubi.bloque}" title="Bloque"/>
                                <h:outputText value="Anaquel:"/>
                                <h:outputText value="#{demoBeanUbicacion.ubi.anaquel}" title="Anaquel"/>
                                <h:outputText value="Estado:"/>
                                <h:outputText value="#{demoBeanUbicacion.ubi.estado}" title="Estado"/>
                            </h:panelGrid>
                            <p:commandButton action="#{demoBeanUbicacion.eliminarUbicacion()}"  
                                             update="ubicacionTabla:table,messages"
                                             icon="pi pi-trash"
                                             style=" width: 50px; "
                                             styleClass="ui-button-warning" ajax="true"/>

                            <p:commandButton action="ubicacionLista.xhtml"  icon="pi pi-times"
                                             styleClass="ui-button-danger"
                                             style="margin-left: 5px; width: 50px;"
                                             immediate="true" ajax="false"/>
                        </h:form>



                    </p:dialog>


                </f:view>

            </ui:define>

        </ui:composition>
        <script>

               </script>
    </body>
</html>