<?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">
                    Sistemas de Inventario
                </ui:define>

                <ui:define name="left">
                    <div class="card">
                        <h:form>
                            <p:growl id="messages"/>

                            <p:menubar>
                                <p:menuitem value="Agregar" icon="pi pi-fw pi-plus" 
                                            action="ProductoCrear.xhtml"
                                            actionListener="#{demoBeanProducto.prepararNuevo()}"/>

                                <p:menuitem value="Departamento" icon="pi pi-fw pi-building " action="Departamento.xhtml"/>
                                <p:menuitem value="Marca" icon="pi pi-fw pi-tag" action="Marca.xhtml"/>
                                <p:menuitem value="Producto" icon="pi pi-fw pi-shopping-bag" disabled="true" action="Producto.xhtml"/>
                                <p:menuitem value="Proveedor" icon="pi pi-fw pi-truck" action="Provedor.xhtml"/>
                               <!-- <p:menuitem value="Registro" icon="pi pi-fw pi-book " disabled="true" action="Registro.xhtml"/>-->
                                <p:menuitem value="Tipo" icon="pi pi-fw pi-table" action="Tipo.xhtml"/>
                                <p:menuitem value="Usuario" icon="pi pi-fw pi-user" action="Usuario.xhtml"/>
                                <p:menuitem value="Inicio" icon="pi pi-fw pi-home" action="Menu.xhtml"/>
                                <p:divider layout="vertical"/>
                            </p:menubar>
                        </h:form> 
                    </div>
                </ui:define>

                <ui:define name="right">

                </ui:define>

                <ui:define name="content">
                     <h:form style="text-align: center; margin-top: 20px;">
                         </h:form>
                    <f:view>


                        <h:form>

                            <h3><h:outputText value="Productos"/></h3>

                            <p:dataTable value="#{demoBeanProducto.productos}" var="item"
                                         widgetVar="productos"
                                         emptyMessage="No coincide con ningun registro"
                                         filteredValue="#{demoBeanProducto.filteredCustomers3}"
                                         globalFilterFunction="#{demoBeanProducto.globalFilterFunction}">
                                <f:facet name="header">
                                    <div class="flex justify-content-end" style="position: absolute; right: 40px; top: 190px; ">
                                        <p:inputText id="globalFilter" onkeyup="PF('productos').filter()" style="width:300px"
                                                     placeholder="Buscar" />
                                    </div>
                                </f:facet>
                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText value="Id"/>
                                        </f:facet>
                                        <h:outputText value="#{item.id}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText value="Cantidad"/>
                                        </f:facet>
                                        <h:outputText value="#{item.cantidad}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText value="Nombre"/>
                                        </f:facet>
                                        <h:outputText value="#{item.nombre}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText value="Precio"/>
                                        </f:facet>
                                        <h:outputText value="#{item.precio}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText value="CodigoBarras"/>
                                        </f:facet>
                                        <h:outputText value="#{item.codigoBarras}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText value="Medida"/>
                                        </f:facet>
                                        <h:outputText value="#{item.medida}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText value="Lote"/>
                                        </f:facet>
                                        <h:outputText value="#{item.lote}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText value="Status"/>
                                        </f:facet>
                                        <h:outputText value="#{item.status}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText value="TipoId"/>
                                        </f:facet>
                                        <h:outputText value="#{item.tipoId.nombre}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText value="DepartamentoId"/>
                                        </f:facet>
                                        <h:outputText value="#{item.departamentoId.nombre}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText value="MarcasId"/>
                                        </f:facet>
                                        <h:outputText value="#{item.marcasId.nombre}"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText value="ProvedoresId"/>
                                        </f:facet>
                                        <h:outputText value="#{item.provedoresId.nombre}||#{item.provedoresId.correo}"/>
                                    </p:column>

                                    <p:column>
                                        <f:facet name="header">
                                            <h:outputText value="Opcioones"/>
                                        </f:facet>
                                        <p:commandButton action="ProductoCrear.xhtml" icon="pi pi-fw pi-pencil"
                                                         actionListener="#{demoBeanProducto.prepararEditar(item)}" 
                                                         value="Editar" 
                                                         style="padding: 2px 8px; font-size: 11px; 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;"
                                                         ajax="false"/>
                                        <p:commandButton action="ProductoEliminar.xhtml" icon="pi pi-fw pi-trash"
                                                         actionListener="#{demoBeanProducto.prepararEliminar(item)}" 
                                                         value="Eliminar"
                                                         style=" padding: 2px 8px; font-size: 11px; 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;"
                                                         ajax="false"/>
                                    </p:column>
                            </p:dataTable>
                        </h:form>
                    </f:view>
                </ui:define>
                                <ui:define name="bottom">
                 
                </ui:define>
            </ui:composition>
        </center>
    </body>
</html>