<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>
        <ui:insert name="title">GBCM - Global Business Consulting and Management</ui:insert>
    </title>
    
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="GBCM - Services de conseil en management et développement professionnel"/>
    <meta name="author" content="GBCM LLC"/>
    
    <!-- Freya Theme CSS -->
    <h:outputStylesheet name="primefaces-freya/theme.css"/>
    
    <!-- Custom CSS -->
    <h:outputStylesheet name="css/gbcm-custom.css"/>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="#{request.contextPath}/resources/images/favicon.ico"/>
</h:head>

<h:body>
    <div class="layout-wrapper">
        
        <!-- Top Bar -->
        <div class="layout-topbar">
            <div class="layout-topbar-wrapper">
                <div class="layout-topbar-left">
                    <h:link outcome="/index" styleClass="layout-topbar-logo">
                        <h:graphicImage name="images/gbcm-logo.png" alt="GBCM Logo" height="40"/>
                        <span class="layout-topbar-logo-text">GBCM</span>
                    </h:link>
                </div>
                
                <div class="layout-topbar-right">
                    <ul class="layout-topbar-actions">
                        <li>
                            <p:commandButton icon="pi pi-user" styleClass="p-button-text p-button-plain"
                                           onclick="PF('userMenuDialog').show()"/>
                        </li>
                        <li>
                            <p:commandButton icon="pi pi-bell" styleClass="p-button-text p-button-plain"
                                           onclick="PF('notificationDialog').show()"/>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Sidebar Menu -->
        <div class="layout-sidebar">
            <div class="layout-menu">
                <p:menu model="#{menuBean.menuModel}" styleClass="layout-menu-items"/>
            </div>
        </div>

        <!-- Main Content -->
        <div class="layout-main">
            <div class="layout-main-content">
                
                <!-- Breadcrumb -->
                <div class="content-section">
                    <p:breadCrumb model="#{breadcrumbBean.breadcrumbModel}" styleClass="custom-breadcrumb"/>
                </div>

                <!-- Page Content -->
                <div class="content-section">
                    <ui:insert name="content">
                        <p:panel header="Contenu par défaut">
                            <p>Aucun contenu spécifique défini pour cette page.</p>
                        </p:panel>
                    </ui:insert>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="layout-footer">
            <div class="layout-footer-wrapper">
                <span>© 2024 GBCM LLC - Global Business Consulting and Management</span>
                <div class="layout-footer-right">
                    <span>Version 1.0.0</span>
                </div>
            </div>
        </div>
    </div>

    <!-- User Menu Dialog -->
    <p:dialog header="Profil Utilisateur" widgetVar="userMenuDialog" modal="true" 
              width="400" height="300" resizable="false">
        <div class="user-profile-content">
            <p:outputLabel value="#{authBean.currentUser.fullName}" styleClass="user-name"/>
            <p:outputLabel value="#{authBean.currentUser.email}" styleClass="user-email"/>
            
            <div class="user-actions">
                <p:commandButton value="Mon Profil" icon="pi pi-user" 
                               action="#{authBean.goToProfile}" styleClass="p-button-outlined"/>
                <p:commandButton value="Paramètres" icon="pi pi-cog" 
                               action="#{authBean.goToSettings}" styleClass="p-button-outlined"/>
                <p:commandButton value="Déconnexion" icon="pi pi-sign-out" 
                               action="#{authBean.logout}" styleClass="p-button-danger"/>
            </div>
        </div>
    </p:dialog>

    <!-- Notification Dialog -->
    <p:dialog header="Notifications" widgetVar="notificationDialog" modal="true" 
              width="500" height="400" resizable="false">
        <p:dataTable value="#{notificationBean.notifications}" var="notification"
                     emptyMessage="Aucune notification">
            <p:column headerText="Message">
                <h:outputText value="#{notification.message}"/>
            </p:column>
            <p:column headerText="Date">
                <h:outputText value="#{notification.createdAt}">
                    <f:convertDateTime pattern="dd/MM/yyyy HH:mm"/>
                </h:outputText>
            </p:column>
        </p:dataTable>
    </p:dialog>

    <!-- Global Messages -->
    <p:growl id="globalMessages" showDetail="true" life="5000"/>

    <!-- Custom JavaScript -->
    <h:outputScript name="js/gbcm-custom.js"/>
    
</h:body>
</html>
