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

    <body>

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

            <ui:define name="top">
                   <center><h2>P R O D U C T O</h2></center>
            </ui:define>

                 <ui:define name="left" >  
             
             <h:form >
                    <p:menu style="border-color: gray; margin: 1px; width: 163px; height: 600px;">

                        <p:menuitem action="ProductoLista.xhtml" value="Productos" ajax="false"  icon="pi pi-shopping-bag" iconPos="left" style="background-color: lightgray" styleClass="botonMenu" />
                        <p:menuitem action="proveedorLista.xhtml" value="Proveedores" ajax="false" icon="pi pi-id-card" iconPos="left" style="background-color: white " styleClass="botonMenu"/>
                        <p:menuitem action="marcaLista.xhtml" value="Marcas" ajax="false" icon="pi pi-tag" iconPos="left" style="background-color: lightgray" styleClass="botonMenu" />                   
                        <p:menuitem action="categoriaLista.xhtml" value="Categorias" ajax="false" icon="pi pi-star" iconPos="left" style="background-color: white" styleClass="botonMenu" />          
                        <p:menuitem action="UbicacionAlmacenLista.xhtml" value="Almacen" ajax="false" icon="pi pi-map-marker" iconPos="left" style="background-color: lightgray" styleClass="botonMenu"/>
                        <p:menuitem action="usuariosLista.xhtml" value="Usuarios" ajax="false" icon="pi pi-users" iconPos="left" style="background-color: white" styleClass="botonMenu" />
                    </p:menu>
                </h:form>
            </ui:define>

            <ui:define name="content">
                
                  <f:view>
                  
                    <h:form style="height: 600px;" class="form-container">
                        <center>
                        <h1><h:outputText value="DETALLES DE PRODUCTO"/></h1>
                         
                     
                                              <div style="max-height: 550px; overflow-y: auto;">
                        <p:panelGrid id="grid" columns="4" style="width: 100%" >
                            
                            <h:outputText style="font-weight:bolder; width: 80;height: 70px" value="Nombre:"/>
                            <h:outputText value="#{demoBeanProductos.producto.nombre}" title="Nombre"/>
                            <h:outputText style="font-weight:bolder" value="Codigo:"/>
                            <h:outputText value="#{demoBeanProductos.producto.codigo}" title="Codigo"/>
                            <h:outputText style="font-weight:bolder" value="Precio:"/>
                            <h:outputText value="#{demoBeanProductos.producto.precio}" title="Precio"/>
                            <h:outputText style="font-weight:bolder" value="Descripcion:"/>
                            <h:outputText value="#{demoBeanProductos.producto.descripcion}" title="Descripcion"/>
                            <h:outputText style="font-weight:bolder" value="Stock:"/>
                            <h:outputText value="#{demoBeanProductos.producto.stock}" title="Stock"/>
                            <h:outputText style="font-weight:bolder" value="Fecha de dquisicion:"/>
                            <h:outputText value="#{demoBeanProductos.producto.fechaadquisicion}" title="Fechaadquisicion">
                                <f:convertDateTime pattern="MM/dd/yyyy" />
                            </h:outputText>
                            <h:outputText style="font-weight:bolder" value="Estado del producto:"/>
                            <h:outputText  value="#{demoBeanProductos.producto.estadoproducto}" title="Estadoproducto"/>
                            <h:outputText style="font-weight:bolder" value="Submarca:"/>
                            <h:outputText value="#{demoBeanProductos.producto.submarca}" title="Submarca"/>
                        
                            <h:outputText style="font-weight:bolder" value="Categoria:"/>
                            <h:outputText value="#{demoBeanProductos.producto.categoriaId.nombre}"   title="CategoriaId"/>
                            <h:outputText style="font-weight:bolder" value="Marca:"/>
                            <h:outputText value="#{demoBeanProductos.producto.marcaId.nombre}" title="MarcaId"/>
                            <h:outputText style="font-weight:bolder" value="Proveedor:"/>
                            <h:outputText value="#{demoBeanProductos.producto.proveedorId.nombre}" title="ProveedorId"/>
                            <h:outputText style="font-weight:bolder" value="Ubicacion en el almacen:"/>
                            <h:outputText value="Bodega: #{demoBeanProductos.producto.ubicacionalmacenId.bodega} , Pasillo: #{demoBeanProductos.producto.ubicacionalmacenId.pasillo} , Estante #{demoBeanProductos.producto.ubicacionalmacenId.estante} , Sección:#{demoBeanProductos.producto.ubicacionalmacenId.seccion}" title="UbicacionalmacenId" />
                        </p:panelGrid>
                        </div>
                    
                        <p:commandButton action="ProductoLista.xhtml"  icon="pi pi-arrow-left" style=" width:100px;margin-right: 1150px; margin-top: 20px " ajax="false"/>
                    
 </center>
                    </h:form>
                           
                </f:view>
                
            </ui:define>

        </ui:composition>

    </body>
</html>