<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="groupe" value="#{formGroupBean.groupe}" />
        <f:viewParam name="canEdit" value="#{formGroupBean.modifier}" />
    </f:metadata>
    <ui:define name="title">
        #{msg['distribution.page.etablissement']}
    </ui:define>

    <ui:define name="content">
        #{formGroupBean.init()}
        <h:form id="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="#{formGroupBean.voirGroupe()}" ajax="false"
                                         styleClass="ui-button-primary" />
                    </div>
                    <div style="flex-grow: 1; text-align: center; font-size: 1.3rem; font-weight: bold; color: #333;">
                        <h:outputText value="Groupe : #{formGroupBean.groupeSelected.nomGroupe}" />
                    </div>
                    <div style=" text-align: right; display: flex; gap: 5px;">


                        <p:commandButton value="#{msg['distribution.page.supprimer']}" icon="pi pi-trash"
                                         rendered="#{ formGroupBean.canEdit and !formGroupBean.isNew}"
                                         action="#{formGroupBean.supprimeGroupe()}"  ajax="false"
                                         styleClass="ui-button-danger" />

                        <p:commandButton value="#{msg['distribution.page.enregistrer']}" icon="pi pi-save"
                                         rendered="#{ formGroupBean.canEdit}"
                                         action="#{formGroupBean.saveGroupe()}"
                                         styleClass="ui-button-success" />

                        <p:commandButton value="#{msg['distribution.page.modifier']}" icon="pi pi-pencil"
                                         rendered="#{ !formGroupBean.canEdit}"
                                         action="#{formGroupBean.editGroupe()}"
                                         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="#{!formGroupBean.canEdit}">
                        <div style="flex-grow: 1; text-align: center; font-size: 1.3rem; font-weight: bold; color: #333; color: #3F51B5;">
                            <h:outputText value="#{formGroupBean.groupeSelected.nomGroupe}" />
                        </div>
                        <p:panelGrid columns="2" style="margin-top: 30px; text-align:left">
                            <p:column>
                                <i class="pi pi-id-card" style="margin-right: 5px"></i>
                                <p:outputLabel value="#{msg['distribution.page.groupe.nom']}" style="color: #3F51B5; font-weight: bold" />
                            </p:column>
                            <p:column>
                                <p:outputLabel id="id" value="#{formGroupBean.groupeSelected.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="#{!formGroupBean.canEdit}" >
                            <p:tabView scrollable="true">
                                <p:tab  title="#{msg['distribution.page.groupe.listeDeFonctionaliteGroupe']}" >
                                    <p:dataTable id="dataTable" var="fonctionGroup"
                                                 rows="30" paginator="true" draggableColumns="true"
                                                 value="#{formGroupBean.listeFonctionnalite}" 
                                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                                 rowsPerPageTemplate="20,30,40,60,80,100"
                                                 selectionMode="single"
                                                 rowKey="#{fonctionGroup.id}">  

                                        <p:column style=" text-align: center;" headerText="#{msg['distribution.page.fonctionalite.nom']}"
                                                  sortBy="#{fonctionGroup.fkFonction.fonction}"  >                         
                                            <h:outputText value="#{fonctionGroup.fkFonction.nom}" />                        
                                        </p:column>

                                        <p:column style=" text-align: center;" headerText="#{msg['distribution.page.fonctionGroup.add']}"
                                                  >  
                                            <h:outputText value="#{fonctionGroup.canCreate=='true'? 'Oui' : 'Non'}" rendered="#{!formGroupBean.canEdit}"/>                           
                                        </p:column>
                                        <p:column style=" text-align: center;" headerText="#{msg['distribution.page.fonctionGroup.modifier']}"
                                                  >   
                                            <h:outputText value="#{fonctionGroup.canUpdate=='true'? 'Oui' : 'Non'}" rendered="#{!formGroupBean.canEdit}"/>                          
                                        </p:column>

                                        <p:column style=" text-align: center;" headerText="#{msg['distribution.page.fonctionGroup.canChangePrice']}"
                                                  > 
                                            <h:outputText value="#{fonctionGroup.canDelete=='true'? 'Oui' : 'Non'}" rendered="#{!formGroupBean.canEdit}"/>                       
                                        </p:column>
                                        <p:column style=" text-align: center;" headerText="#{msg['distribution.page.fonctionGroup.canChangeDate']}"
                                                  > 
                                            <h:outputText value="#{fonctionGroup.canUpdateDate=='true'? 'Oui' : 'Non'}" rendered="#{!formGroupBean.canEdit}"/>                       
                                        </p:column>

                                    </p:dataTable> 
                                </p:tab>
                            </p:tabView>
                        </p:card>
                    </div>
                </div>
                <div style="width: 100%; display: flex; flex-direction: column; margin-bottom: 1px; border: none; box-shadow: none;">
                    <p:card id="cardModif" style="width: 100%; border: none; box-shadow: none;" rendered="#{formGroupBean.canEdit}">
                        <p:panelGrid columns="2" style="margin-bottom: 30px; text-align: left;" columnClasses="ui-grid-col-3,ui-grid-col-9">
                            <p:outputLabel for="idMod" styleClass="ui-outputlabel" 
                                           style="font-weight: bold; font-size: 1.3rem;">
                                #{msg['distribution.page.groupe.nom']}
                            </p:outputLabel>
                            <p:inputText id="idMod" 
                                         value="#{formGroupBean.groupeSelected.nomGroupe}" 
                                         required="true"
                                         requiredMessage="Le nom du groupe est obligatoire." />
                        </p:panelGrid>

                        <p:divider/>

                        <p:tabView>
                            <p:tab title="#{msg['distribution.page.groupe.listeDeFonctionaliteGroupe']}">
                                <p:dataTable id="dataTable"
                                             var="fonctionGroup"
                                             value="#{formGroupBean.listeFonctionnalite}"
                                             selection="#{formGroupBean.fonctionSelected}"
                                             rowKey="#{fonctionGroup.id}"
                                             selectionMode="single"
                                             styleClass="ui-datatable-striped">
                                    <f:facet name="header">
                                        <div class="flex justify-content-between align-items-center">
                                            <div>
                                            </div>
                                            <div>
                                                <p:commandButton title="#{msg['service.page.Service.ajouter.fonction']}" icon="pi pi-plus" styleClass="ui-button-success mr-2" oncomplete="PF('dlg2').show()"  />
                                            </div>
                                        </div>
                                    </f:facet>

                                    <p:column style="text-align: center; width: 30px;">
                                        <p:commandButton class="ui-button-warning rounded-button" icon="pi pi-trash"
                                                         process="@this"
                                                         oncomplete="PF('deleteProductDialog').show()">
                                            <f:setPropertyActionListener value="#{fonctionGroup}" target="#{formGroupBean.fonctionSelected}" />
                                        </p:commandButton>
                                    </p:column>

                                    <p:column headerText="#{msg['distribution.page.fonctionalite.nom']}" sortBy="#{fonctionGroup.fkFonction.fonction}" style="text-align: center;">
                                        <h:outputText value="#{fonctionGroup.fkFonction.nom}" />
                                    </p:column>

                                    <p:column headerText="#{msg['distribution.page.fonctionGroup.add']}" style="text-align: center;">
                                        <p:selectBooleanCheckbox value="#{fonctionGroup.canCreate}" rendered="#{formGroupBean.canEdit}">
                                            <p:ajax />
                                        </p:selectBooleanCheckbox>
                                    </p:column>

                                    <p:column headerText="#{msg['distribution.page.fonctionGroup.modifier']}" style="text-align: center;">
                                        <p:selectBooleanCheckbox value="#{fonctionGroup.canUpdate}" rendered="#{formGroupBean.canEdit}">
                                            <p:ajax />
                                        </p:selectBooleanCheckbox>
                                    </p:column>

                                    <p:column headerText="#{msg['distribution.page.supprimer']}" style="text-align: center;">
                                        <p:selectBooleanCheckbox value="#{fonctionGroup.canDelete}" rendered="#{formGroupBean.canEdit}">
                                            <p:ajax />
                                        </p:selectBooleanCheckbox>
                                    </p:column>

                                    <p:column headerText="#{msg['distribution.page.fonctionGroup.canChangeDate']}" style="text-align: center;">
                                        <p:selectBooleanCheckbox value="#{fonctionGroup.canUpdateDate}" rendered="#{formGroupBean.canEdit}">
                                            <p:ajax />
                                        </p:selectBooleanCheckbox>
                                    </p:column>
                                </p:dataTable>
                            </p:tab>
                        </p:tabView>
                    </p:card>
                </div>
            </div>
            <p:confirmDialog widgetVar="deleteProductDialog" showEffect="fade" width="400"
                             message="#{msg['distribution.page.supprimer.confirmation']}" header="Confirm" severity="warn">
                <p:commandButton value="#{msg['distribution.page.oui']}" icon="pi pi-check" actionListener="#{formGroupBean.deletefonction}"
                                 process="@this" update=":form:cardModif"
                                 oncomplete="PF('deleteProductDialog').hide()" />
                <p:commandButton value="#{msg['distribution.page.non']}" type="button" styleClass="ui-button-secondary" icon="pi pi-times"
                                 onclick="PF('deleteProductDialog').hide()" />
            </p:confirmDialog>
            <p:dialog header="Ajouter des fonctionnalité" widgetVar="dlg2" position="center,top" width="1100" height="550"  >
                <p:dataTable id="dataTableNonVisite" var="fonction"
                             value="#{formGroupBean.source}" 
                             selection="#{formGroupBean.target}"
                             emptyMessage="#{msg['service.page.Fonction.liste.message.non']}"
                             paginator="true" rows="20"
                             rowKey="#{fonction.id}">  
                    <f:facet name="header">
                        <div class="flex justify-content-between align-items-center">
                            <div>
                            </div>
                            <div>
                                <p:commandButton value="#{msg['distribution.page.inventaire.facture.ajouter']}" 
                                                 icon="pi pi-check"
                                                 action="#{formGroupBean.ajouterFonctionnalitesAuGroupe}"
                                                 process="@form"
                                                 update=":form:cardModif"
                                                 oncomplete="PF('dlg2').hide()" />
                            </div>
                        </div>
                    </f:facet>
                    <p:column selectionMode="multiple" style="text-align:center;width: 16px;"/>

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

                </p:dataTable> 
            </p:dialog>
        </h:form>
    </ui:define>
</ui:composition>
