<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/layout/template.xhtml">
    <f:metadata>
        <f:viewParam name="user1" value="#{formUserBean.user1}" />
        <f:viewParam name="canEdit" value="#{formUserBean.modifier}" />
    </f:metadata>
    <ui:define name="title">
        #{msg['distribution.page.user']}
    </ui:define>

    <ui:define name="content">
        #{formUserBean.init()}
        <h:form>
            <div class="card">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">

                    <div style="width: 150px;">
                        <p:commandButton value="#{msg['distribution.page.etatVGlobal.retour']}" icon="pi pi-arrow-left"
                                         action="#{formUserBean.voirUser()}" ajax="false"
                                         styleClass="ui-button-primary" />
                    </div>

                    <div style=" text-align: right; display: flex; gap: 5px;">
                        <p:commandButton value="#{msg['distribution.page.enregistrer']}" icon="pi pi-save"
                                         rendered="#{formUserBean.canEdit}"
                                         action="#{formUserBean.saveUser()}"
                                         update="@form"
                                         styleClass="ui-button-success" />

                        <p:commandButton value="#{msg['distribution.page.modifier']}" icon="pi pi-pencil"
                                         rendered="#{!formUserBean.canEdit}"
                                         action="#{formUserBean.editUser()}"
                                         styleClass="ui-button-primary" />
                    </div>


                </div>
                <div style="width: 100%; height: 100%; display: flex; margin-bottom: 1px;" >
                    <p:card id="card" style="width: 35%; height: 750px; text-align: center; max-height: 100%" rendered="#{!formUserBean.canEdit}">
                        <div style="flex-grow: 1; text-align: center; font-size: 1.3rem; font-weight: bold; color: #3F51B5;">
                            <h:outputText value="#{formUserBean.userSelected.userid}" />
                        </div>

                        <p:panelGrid columns="2" style="margin-top: 30px; text-align:left">
                            <p:column>
                                <i class="pi pi-user" style="margin-right: 5px"></i>
                                <p:outputLabel value="#{msg['distribution.page.user.nom']}" style="color: #3F51B5; font-weight: bold" />
                            </p:column>
                            <p:column>
                                <p:outputLabel id="id" value="#{formUserBean.userSelected.nom}" />
                            </p:column>

                            <p:column>
                                <i class="pi pi-users" style="margin-right: 5px"></i>
                                <p:outputLabel value="#{msg['distribution.page.user.prenom']}" style="color: #3F51B5; font-weight: bold" />
                            </p:column>
                            <p:column>
                                <p:outputLabel id="nom" value="#{formUserBean.userSelected.prenom}" />
                            </p:column>

                            <p:column>
                                <i class="pi pi-phone" style="margin-right: 5px"></i>
                                <p:outputLabel value="#{msg['stock.page.fournisseur.Telephone']}" style="color: #3F51B5; font-weight: bold" />
                            </p:column>
                            <p:column>
                                <p:outputLabel id="code" value="#{formUserBean.userSelected.telephone}" />
                            </p:column>

                            <p:column>
                                <i class="pi pi-envelope" style="margin-right: 5px"></i>
                                <p:outputLabel value="#{msg['stock.page.fournisseur.mail']}" style="color: #3F51B5; font-weight: bold" />
                            </p:column>
                            <p:column>
                                <p:outputLabel id="mail" value="#{formUserBean.userSelected.mail}" />
                            </p:column>
                        </p:panelGrid>

                        <p:divider />

                        <p:panelGrid columns="2" style="margin-top: 30px; text-align:left">
                            <p:column>
                                <i class="pi pi-check-circle" style="margin-right: 5px; color: green;"></i>
                                <p:outputLabel value="#{msg['distribution.page.client.actif']}" style="color: #3F51B5; font-weight: bold" />
                            </p:column>
                            <p:column>
                                <h:outputText value="#{formUserBean.userSelected.actif ? 'Oui' : 'Non'}" />
                            </p:column>
                        </p:panelGrid>

                        <p:divider />

                        <p:panelGrid columns="2" style="margin-top: 30px; text-align:left">

                            <p:column>
                                <i class="pi pi-users" style="margin-right: 5px"></i>
                                <p:outputLabel value="#{msg['distribution.page.user.groupe']}" style="color: #3F51B5; font-weight: bold" />
                            </p:column>
                            <p:column>
                                <p:outputLabel id="group" value="#{formUserBean.member.fkGroupe.nomGroupe}" />
                            </p:column>
                        </p:panelGrid>
                    </p:card>
                    <div style="width: 75%; height: 100%; margin-left: 1%;">
                        <p:card style=" width: 100%; min-height: 750px; top: 160px; height: 100% " rendered="#{!formUserBean.canEdit}" >
                            <p:tabView scrollable="true">
                                <p:tab  title="#{msg['distribution.page.user.historique.connexion']}" >
                                    <p:dataTable id="dataTable" var="histCnx"
                                                 rows="30" paginator="true" draggableColumns="true"
                                                 value="#{formUserBean.listeHistCnx}" 
                                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                                 rowsPerPageTemplate="20,30,40,60,80,100"
                                                 emptyMessage="#{msg['distribution.page.produit.liste.historique.non'] }"
                                                 selectionMode="single"
                                                 rowKey="#{histCnx.id}">  

                                        <p:column style=" text-align: center;" headerText="#{msg['stock.page.achat.date']}"  filterBy="#{histCnx.date}" filterMatchMode="contains" sortBy="#{histCnx.date}"  >  
                                            <h:outputText value="#{histCnx.date}" />  
                                        </p:column>

                                        <p:column style=" text-align: center;"  headerText="#{msg['stock.page.achat.heur']}"   filterBy="#{histCnx.heur}" filterMatchMode="contains" sortBy="#{histCnx.heur}"  >  
                                            <h:outputText value="#{histCnx.heur}" />  
                                        </p:column>

                                        <p:column style=" text-align: center;"  headerText="#{msg['stock.page.imprimante.adresseIp']}"   filterBy="#{histCnx.adresseIp}" filterMatchMode="contains" sortBy="#{histCnx.adresseIp}"  >  
                                            <h:outputText value="#{histCnx.adresseIp}" />  
                                        </p:column>

                                    </p:dataTable> 
                                </p:tab>
                                <p:tab  title="#{msg['distribution.page.consulter.historiqueManip']}" >
                                    <p:dataTable id="dataTable2" var="histManip"
                                                 rows="30" paginator="true" draggableColumns="true"
                                                 value="#{formUserBean.listehistManipulation}" 
                                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                                 rowsPerPageTemplate="20,30,40,60,80,100"
                                                 emptyMessage="#{msg['distribution.page.produit.liste.historique.non'] }"
                                                 selectionMode="single"
                                                 rowKey="#{histManip.id}">  

                                        <p:column style=" text-align: center;" headerText="#{msg['distribution.page.nomTable']}"  filterBy="#{histManip.nomTable}" filterMatchMode="contains" sortBy="#{histManip.nomTable}"  >  
                                            <h:outputText value="#{histManip.nomTable}" />  
                                        </p:column>

                                        <p:column style=" text-align: center;"  headerText="#{msg['distribution.page.idLigne']}"   filterBy="#{histManip.idLigne}" filterMatchMode="contains" sortBy="#{histManip.idLigne}"  >  
                                            <h:outputText value="#{histManip.idLigne}" />  
                                        </p:column>

                                        <p:column style=" text-align: center;"  headerText="#{msg['distribution.page.type.historiqueManip']}"   filterBy="#{histManip.typeManipumation}" filterMatchMode="contains" sortBy="#{histManip.typeManipumation}"  >  
                                            <h:outputText value="#{histManip.typeManipumation}" />  
                                        </p:column>

                                        <p:column style=" text-align: center;" headerText="#{msg['distribution.page.dateManip']}"  filterBy="#{histManip.dateManipulation}" filterMatchMode="contains" sortBy="#{histManip.dateManipulation}"  >  
                                            <h:outputText value="#{histManip.dateManipulation}" />  
                                        </p:column>

                                        <p:column style=" text-align: center;"  headerText="#{msg['distribution.page.oldValeur']}"   filterBy="#{histManip.oldValeur}" filterMatchMode="contains" sortBy="#{histManip.oldValeur}"  >  
                                            <h:outputText value="#{histManip.oldValeur}" />  
                                        </p:column>

                                        <p:column style=" text-align: center;"  headerText="#{msg['distribution.page.newValeur']}"   filterBy="#{histManip.newValeur}" filterMatchMode="contains" sortBy="#{histManip.newValeur}"  >  
                                            <h:outputText value="#{histManip.newValeur}" />  
                                        </p:column>

                                    </p:dataTable> 
                                </p:tab>
                            </p:tabView>
                        </p:card>
                    </div>
                </div>
                <div style="width: 100%; height: 100%; display: flex; margin-bottom: 1px;" >
                    <p:card id="cardModif" style="width: 100%; height: 100%;" rendered="#{formUserBean.canEdit}">
                        <p:tabView>
                            <p:tab title="#{msg['distribution.page.etablissement.information']}">
                                <p:panelGrid columns="2" style="width: 100%; height: 100%" >
                                    <p:column style="width: 50%">
                                        <p:panelGrid columns="2" style="margin-top: 30px; text-align:left">
                                            <p:column>
                                                <i class="pi pi-user" style="margin-right: 5px"></i>
                                                <p:outputLabel value="#{msg['distribution.authentification.user']}" style="color: #3F51B5; font-weight: bold" />
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="user" value="#{formUserBean.userSelected.userid}" style="width: 300px"/>
                                            </p:column>

                                            <p:column>
                                                <i class="pi pi-lock" style="margin-right: 5px"></i>
                                                <p:outputLabel value="#{msg['distribution.page.user.password']}" style="color: #3F51B5; font-weight: bold" />
                                            </p:column>
                                            <p:column>
                                                <p:password id="pw" value="#{formUserBean.userSelected.userpw}" style="width: 300px"
                                                            toggleMask="true" redisplay="true"/>
                                            </p:column>

                                            <p:column>
                                                <i class="pi pi-user-edit" style="margin-right: 5px"></i>
                                                <p:outputLabel value="#{msg['distribution.page.user.nom']}" style="color: #3F51B5; font-weight: bold" />
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="nom" value="#{formUserBean.userSelected.nom}" style="width: 300px"/>
                                            </p:column>

                                            <p:column>
                                                <i class="pi pi-user-plus" style="margin-right: 5px"></i>
                                                <p:outputLabel value="#{msg['distribution.page.user.prenom']}" style="color: #3F51B5; font-weight: bold" />
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="code" value="#{formUserBean.userSelected.prenom}" style="width: 300px"/>
                                            </p:column>

                                            <p:column>
                                                <i class="pi pi-phone" style="margin-right: 5px"></i>
                                                <p:outputLabel value="#{msg['stock.page.fournisseur.Telephone']}" style="color: #3F51B5; font-weight: bold" />
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="adresse" value="#{formUserBean.userSelected.telephone}" style="width: 300px"/>
                                            </p:column>

                                            <p:column>
                                                <i class="pi pi-envelope" style="margin-right: 5px"></i>
                                                <p:outputLabel value="#{msg['stock.page.fournisseur.mail']}" style="color: #3F51B5; font-weight: bold" />
                                            </p:column>
                                            <p:column>
                                                <p:inputText id="mail" value="#{formUserBean.userSelected.mail}" style="width: 300px"/>
                                            </p:column>

                                            <p:column>
                                                <i class="pi pi-check-circle" style="margin-right: 5px; color: green;"></i>
                                                <p:outputLabel value="#{msg['distribution.page.client.actif']}" style="color: #3F51B5; font-weight: bold" />
                                            </p:column>
                                            <p:column>
                                                <p:selectOneMenu value="#{formUserBean.userSelected.actif}" style="width: 300px">
                                                    <f:selectItem itemLabel="Oui" itemValue="true" />
                                                    <f:selectItem itemLabel="Non" itemValue="false" />
                                                </p:selectOneMenu>
                                            </p:column>

                                            <p:column>
                                                <i class="pi pi-users" style="margin-right: 5px"></i>
                                                <p:outputLabel value="#{msg['distribution.page.user.groupe']}" style="color: #3F51B5; font-weight: bold" />
                                            </p:column>
                                            <p:column>
                                                <p:selectOneMenu id="groupe" style="width: 310px;" 
                                                                 converter="groupeConverter" 
                                                                 value="#{formUserBean.member.fkGroupe}">
                                                    <f:converter binding="#{groupeConverter}" />
                                                    <f:selectItem itemLabel="#{msg['distribution.select']}" noSelectionOption="true" />
                                                    <f:selectItems value="#{formUserBean.listeGroups}" var="groupe" 
                                                                   itemLabel="#{groupe.nomGroupe}" itemValue="#{groupe}" />
                                                </p:selectOneMenu>
                                            </p:column>
                                        </p:panelGrid>
                                    </p:column>
                                </p:panelGrid>
                            </p:tab>
                        </p:tabView>
                    </p:card>
                </div>
            </div>
        </h:form>
    </ui:define>
</ui:composition>