{# nav.html.twig #}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">


<style>

	nav {
		color: white !important;
	}
</style>
{% set cart = app.session.get('cart', null) %}
{% set cart_technician = app.session.get('cart_technician', null) %}


<div class=" p-0">
	<nav class="navbar navbar-dark bg-dark  navbar-expand-lg  px-3 " role="navigation" aria-label="Menu principal">
		<div class="container-fluid">
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse " id="navbarNav">
				<ul class="navbar-nav me-auto mb-2 mb-lg-0 d-flex justify-content-around w-100">
					{% if is_granted('ROLE_USER') %}
						<li class="nav-item">
							<a class="nav-link text-light " href="{{ path('app_vente') }}">Accueil</a>
						</li>
						<li class="nav-item">
							<a class="nav-link text-light" href="{{ path('app_user_show', {'id': app.user.id}) }}">Profil</a>
						</li>
						{# <li class="nav-item">
																															<a class="nav-link text-light" href="#">Commandes</a>
																														</li> #}
						<li class="nav-item">
							<a class="nav-link text-light" href="{{ path('app_contact_index') }}">Contacts</a>
						</li>

						{% if is_granted('ROLE_TECHNICIAN') %}
							<li class="nav-item">
								<a class="nav-link text-light" href="{{ path('app_home') }}">Accueil tech</a>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-link text-light dropdown-toggle" href="#" id="logistiqueDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
									Logistique
								</a>
								<ul class="dropdown-menu" aria-labelledby="logistiqueDropdown">
									<li class="nav-item">
										<a class="dropdown-item" href="{{ path('app_home') }}">Accueil tech</a>
									</li>
									<li>
										<a class="dropdown-item" href="{{ path('app_intervention_team_index') }}">Interventions</a>
									</li>
									<li>
										<a class="dropdown-item" href="{{ path('app_product_index') }}">Stock</a>
									</li>
									<li>
										<a class="dropdown-item" href="{{ path('app_cart') }}">Préparations</a>
									</li>
									<li>
										<a class="dropdown-item" href="{{ path('app_event_index') }}">Événements</a>
									</li>
									<li>
										<a class="dropdown-item" href="{{ path('app_site_event_index') }}">Sites</a>
									</li>
								</ul>
							</li>
						{% endif %}

						{% if is_granted('ROLE_ADMIN') %}
							<li class="nav-item dropdown">
								<a class="nav-link text-light dropdown-toggle" href="#" id="adminDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
									Administration
								</a>
								<ul class="dropdown-menu" aria-labelledby="adminDropdown">
									<li>
										<a class="dropdown-item" href="{{ path('app_technician_index') }}">Techniciens</a>
									</li>
									<li>
										<a class="dropdown-item" href="{{ path('app_absence_index') }}">Absences</a>
									</li>
									<li>
										<a class="dropdown-item" href="{{ path('app_event_detail_index') }}">Commandes internes</a>
									</li>
									<li>
										<a class="dropdown-item" href="/admin">Dashboard</a>
									</li>
									<li>
										<a class="dropdown-item" href="{{ path('app_user_index') }}">Utilisateurs</a>
									</li>
									<li>
										<a class="dropdown-item" href="{{ path('app_register') }}">Créer un compte</a>
									</li>
									<li class="nav-item">
										<a class="nav-link text-light" href="{{ path('app_galery_picture_index') }}">Photos</a>
									</li>
								</ul>
							</li>
						{% endif %}


						<li class="nav-item">
							<a class="nav-link text-light" href="{{ path('app_logout') }}">Déconnexion</a>
						</li>
					{% else %}
						<li class="nav-item">
							<a class="nav-link text-light" href="{{ path('app_login') }}">Connexion</a>
						</li>
						<li class="nav-item">
							<a class="nav-link text-light{% if app.request.get('_route') == 'app_home' %} active{% endif %}" href="{{ path('app_vente') }}">Accueil</a>
						</li>


					{% endif %}
					{# ---------------- panier------------------------ #}

					<li class="nav-item dropdown">
						<a class="nav-link position-relative" href="#" id="cartDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
							<i class="fas fa-shopping-cart"></i>
							<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" id="cart-count">0</span>
						</a>
						<div class="dropdown-menu dropdown-menu-end p-3" style="min-width: 300px;" aria-labelledby="cartDropdown" id="cart-menu">
							<h6 class="dropdown-header">Panier</h6>
							<div id="stock-error-message" class="alert alert-danger alert-dismissible fade show d-none" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 9999;">
								<span id="stock-error-text"></span>
								<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
							</div>

							<div id="cart-items">
								<p class="text-muted">Votre panier est vide</p>
							</div>
							<hr>
							<div class="d-flex justify-content-between">
								<strong>Total :</strong>
								<strong id="cart-total">0 €</strong>
							</div>
							<a href="{{ path('order_checkout') }}" class="btn btn-primary mt-2 w-100">Valider la commande</a>

						</div>
					</li>
{% if is_granted('ROLE_TECHNICIEN') or is_granted('ROLE_ADMIN') %}
	<li class="nav-item dropdown">
		<a class="nav-link position-relative" href="#" id="techCartDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
			<i class="fas fa-toolbox"></i>
			<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" id="tech-cart-count">
				{{ cart_technician.products is defined ? cart_technician.products|length : 0 }}
			</span>
		</a>
		<div class="dropdown-menu dropdown-menu-end p-3" style="min-width: 320px;" aria-labelledby="techCartDropdown">
			{% if app.user %}
				<h6 class="dropdown-header">Sélection de {{ app.user.firstName }}</h6>
			{% else %}
				<h6 class="dropdown-header text-muted">Non connecté</h6>
			{% endif %}
			<div id="tech-cart-details">
				{# Le contenu du panier technicien sera injecté dynamiquement en AJAX #}
			</div>
		</div>
	</li>
{% endif %}

				</ul>
			</div>
		</div>
	</nav>
</div>

<script>
	const cart = [];
	{% if cart is defined and cart.idProduct is defined %}
		{% for i in 0..(cart.idProduct|length - 1) %}
			cart.push({
				name: "{{ cart.nameProduct[i] }}",
				price: {{ cart.priceProduct[i] ?? 0 }},
				quantity: {{ cart.quantity[i] }}
			});
		{% endfor %}
	{% endif %}
	document.addEventListener("DOMContentLoaded", updateCartDisplay);

	function updateCartDisplay() {
		const cartItemsContainer = document.getElementById('cart-items');
		const cartCount = document.getElementById('cart-count');
		const cartTotal = document.getElementById('cart-total');
		
		cartItemsContainer.innerHTML = '';
		let total = 0;
		if (cart.length === 0) {
			cartItemsContainer.innerHTML = '<p class="text-muted">Votre panier est vide</p>';
		} else {
			cart.forEach(item => {
				const itemTotal = item.quantity * item.price;
				total += itemTotal;
				const row = document.createElement('div');
				row.classList.add('mb-2');
				row.innerHTML = `
					<strong>${item.name}</strong><br>
					<span>${item.quantity} x ${item.price} €</span><br>
					<small>Sous-total : ${itemTotal.toFixed(2)} €</small>
				`;
				cartItemsContainer.appendChild(row);
			});
		}
		cartCount.textContent = cart.reduce((acc, item) => acc + item.quantity, 0);
		cartTotal.textContent = total.toFixed(2) + ' €';
	}
	document.addEventListener("DOMContentLoaded", function () {
	const detailDiv = document.getElementById('tech-cart-details');

	if (detailDiv) {
		fetch('{{ path("app_technician_cart_dropdown") }}', {
			headers: { 'X-Requested-With': 'XMLHttpRequest' }
		})
		.then(response => response.text())
		.then(html => {
			detailDiv.innerHTML = html;
		})
		.catch(error => {
			console.error('Erreur chargement panier technicien :', error);
		});
	}
});

</script>