{# templates/_header.html.twig #}

{% set currentRoute = app.request.attributes.get('_route') %}

<nav class="navbar navbar-dark navbar-express">
	<div class="container-fluid d-flex align-items-center justify-content-between">

		<div
			class="d-flex align-items-center h-100">
			{# BOUTON BURGER (Mobile) - Déclenche la sidebar #}
			<button class="navbar-toggler d-lg-none me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarOffcanvas">
				<i class="fas fa-bars"></i>
			</button>

			<a class="navbar-brand-express d-flex align-items-center me-2" href="{{ path('app_admin_dashboard') }}">
				{% if ma_societe and ma_societe.logo %}
					<img src="{{ asset('uploads/entreprise/' ~ ma_societe.logo) }}" alt="{{ ma_societe.nom }}" class="logo-responsive" style="max-height: 40px; width: auto; max-width: 150px"/>
				{% else %}
					{# Logo par défaut si aucun logo n'est configuré #}
					<img src="{{ asset('images/logo.png') }}" alt="LUXIM GPIM" class="logo-responsive" style="max-height: 40px; width:130px"/>
				{% endif %}
			</a>
			{#
																																										{% if is_granted('ROLE_SUPERVISEUR') %}
																																											<div class="dropdown h-100 border-start border-white-15 ps-2 ms-1 d-flex align-items-center">
																																												<a class="nav-widget-link dropdown-toggle nav-add-button" href="#" data-bs-toggle="dropdown">
																																													<i class="fas fa-plus-circle"></i>
																																													<span class="ms-1 d-none d-sm-inline">Action Rapide</span>
																																												</a>
																																												<ul class="dropdown-menu dropdown-menu-start dropdown-menu-sidebar-style">
																																													<li>
																																														<a class="dropdown-item-sidebar" href="{{ path('app_admin_projet_index') }}">
																																															<i class="fas fa-city text-primary"></i>
																																															<span>Nouveau Programme</span>
																																														</a>
																																													</li>
																																													<div class="dropdown-divider m-0"></div>
																																													<li>
																																														<a class="dropdown-item-sidebar" href="#">
																																															<i class="fas fa-file-signature text-warning"></i>
																																															<span>Nouvelle Souscription</span>
																																														</a>
																																													</li>
																																													<div class="dropdown-divider m-0"></div>
																																													<li>
																																														<a class="dropdown-item-sidebar" href="#">
																																															<i class="fas fa-user-plus text-success"></i>
																																															<span>Nouveau Client</span>
																																														</a>
																																													</li>
																																													<div class="dropdown-divider m-0"></div>
																																													<li>
																																														<a class="dropdown-item-sidebar" href="#">
																																															<i class="fas fa-hand-holding-usd text-info"></i>
																																															<span>Encaisser Paiement</span>
																																														</a>
																																													</li>
																																												</ul>
																																											</div>
																																										{% endif %}
																																										#}
		</div>

		{# WIDGETS DE DROITE #}
		<div
			class="d-flex align-items-center h-100">

			{# 1. RECHERCHE GLOBALE #}
			<div class="d-none d-md-flex align-items-center h-100 me-3">
				<div class="input-group input-group-sm">
					<input type="text" class="form-control search-input-express" placeholder="Lot, Client, Projet...">
					<button class="btn btn-outline-light border-0" style="background: rgba(255,255,255,0.1);" type="button">
						<i class="fas fa-search"></i>
					</button>
				</div>
			</div>

			{# 2. NOTIFICATIONS #}
			<div class="dropdown h-100 ms-2">
				<a class="nav-widget-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
					<i class="fas fa-bell"></i>
					<span class="badge bg-danger ms-1">0</span>
				</a>
				<ul class="dropdown-menu dropdown-menu-end dropdown-menu-sidebar-style" style="min-width: 280px;">
					<li class="dropdown-header-sidebar">Notifications</li>
					{# <li>
																																																																		<a class="dropdown-item-sidebar" href="#">
																																																																			<i class="fas fa-dollar-sign text-warning"></i>
																																																																			<div class="ms-2">
																																																																				<div class="fw-bold">Retard de paiement</div>
																																																																				<div class="text-muted small">Client: Kouassi (Lot B20)</div>
																																																																			</div>
																																																																		</a>
																																																																	</li>
																																																																	#}
				</ul>
			</div>

			{# 3. PROFIL UTILISATEUR #}
			<div class="dropdown h-100 ms-2">
				<a class="nav-widget-link dropdown-toggle user-profile-link" href="#" data-bs-toggle="dropdown">


					<div class="img-profile rounded-circle border shadow-sm d-flex align-items-center justify-content-center bg-primary text-white font-weight-bold" style="width: 20px; height: 20px; font-size: 0.5rem; text-transform: uppercase;margin-right:5px">
						{{ app.user.nom|slice(0, 1) }}{{ app.user.prenoms|slice(0, 1) }}
					</div>
					<span class="d-none d-md-inline">{{ app.user.prenoms }}</span>
				</a>
				<ul class="dropdown-menu dropdown-menu-end dropdown-menu-sidebar-style">
					<li class="p-3 text-center border-bottom">
						<div class="position-relative d-inline-block mb-3">
							{% if app.user.photo %}
								<img class="img-profile rounded-circle border shadow-sm" src="{{ asset('uploads/users/photo/' ~ app.user.photo) }}" style="width: 60px; height: 60px; object-fit: cover; background: #f8f9fc;">
							{% else %}
								{# Génération d'un avatar avec initiales #}
								<div class="img-profile rounded-circle border shadow-sm d-flex align-items-center justify-content-center bg-primary text-white font-weight-bold" style="width: 60px; height: 60px; font-size: 1.5rem; text-transform: uppercase;">
									{{ app.user.nom|slice(0, 1) }}{{ app.user.prenoms|slice(0, 1) }}
								</div>
							{% endif %}

						</div>


						<div class="fw-bold">{{ app.user.nom }}
							{{ app.user.prenoms }}</div>
						<div
							class="text-muted x-small text-uppercase">
							{# Affiche le rôle principal sans le préfixe ROLE_ #}
							{{ app.user.roles[0]|replace({'ROLE_': ''}) }}
						</div>
					</li>
					<li>
						<a class="dropdown-item-sidebar" href="{{ path('app_user_profil') }}">
							<i class="fas fa-user-cog"></i>
							<span>Mon Profil</span>
						</a>
					</li>
					<div class="dropdown-divider m-0"></div>
					<li>
						<a class="dropdown-item-sidebar text-danger" href="{{ path('app_logout') }}">
							<i class="fas fa-power-off"></i>
							<span>Déconnexion</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>