{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Inventaire Global des Lots
{% endblock %}

{% block content %}
	<div
		class="container-fluid p-4">

		{# SECTION EN-TÊTE : TITRE ET ACTIONS #}
		<div class="d-flex justify-content-between align-items-center mb-4">
			<div>
				<h3 class="page-header page-header-top mb-0">Inventaire des Lots</h3>
				<p class="text-muted small mb-0">Vue d'ensemble du parc immobilier et suivi opérationnel des unités.</p>
			</div>
			<div class="d-flex gap-2">
				<button class="btn btn-outline-secondary shadow-sm" onclick="window.print()">
					<i class="fas fa-print me-2"></i>Exporter
				</button>

			</div>
		</div>

		{# SECTION FILTRES : ÉPURÉE #}
		<div class="card border-0 shadow-sm mb-4">
			<div class="card-body p-3">
				<form method="get" class="row g-3 align-items-center">
					<div class="col-md-4">
						<div class="input-group">
							<span class="input-group-text bg-white border-end-0">
								<i class="fas fa-search text-muted"></i>
							</span>
							<input type="text" name="search" class="form-control border-start-0 shadow-none" placeholder="Référence, client, numéro de lot..." value="{{ searchTerm|default('') }}">
						</div>
					</div>

					<div class="col-md-3">
						<select name="projet" class="form-select shadow-none" onchange="this.form.submit()">
							<option value="">Tous les programmes</option>
							{% for p in projets %}
								<option value="{{ p.id }}" {{ currentProjet == p.id ? 'selected' : '' }}>{{ p.nom }}</option>
							{% endfor %}
						</select>
					</div>

					<div class="col-md-3">
						<select name="statut" class="form-select shadow-none" onchange="this.form.submit()">
							<option value="">Tous les statuts (Dispo, Vendu...)</option>
							{% for s in statutsEnum %}
								<option value="{{ s.value }}" {{ currentStatut == s.value ? 'selected' : '' }}>
									{{ s.getLabel }}
								</option>
							{% endfor %}
						</select>
					</div>

					<div class="col-md-2 d-flex gap-2">
						<button type="submit" class="btn btn-primary w-100">
							Filtrer
						</button>
						<a href="{{ path('app_admin_lot_index') }}" class="btn btn-light border" title="Réinitialiser">
							<i class="fas fa-sync-alt"></i>
						</a>
					</div>
				</form>
			</div>
		</div>


		{# TABLEAU DES LOTS #}
		<div class="card border-0 shadow-sm">
			<div class="table-responsive">
				<table class="table table-hover align-middle mb-0">
					<thead class="bg-light">
						<tr class="small text-uppercase fw-bold text-secondary">
							<th class="text-center" style="width: 50px;"></th>
							<th>Désignation</th>
							<th>Projet</th>
							<th>Statut</th>
							<th>Avancement Chantier</th>
							<th>Recouvrement</th>
							<th class="text-end pe-4">Prix Standard</th>
						</tr>
					</thead>
					<tbody id="accordionLots">
						{% for lot in lots %}
							{% set statutValue = lot.statut.value|default(lot.statut) %}
							{% set badgeClass = {
                            'DISPONIBLE': 'bg-success-soft',
                            'VENDU': 'bg-danger-soft',
                            'RESERVE': 'bg-warning-soft'
                        } %}

							{# LIGNE PRINCIPALE #}
							<tr class="clickable-row pointer" data-bs-toggle="collapse" data-bs-target="#detailLot{{ lot.id }}" aria-expanded="false">
								<td class="text-center">
									<i class="fas fa-chevron-right text-muted transition-icon"></i>
								</td>
								<td>
									<div class="fw-bold text-dark">{{ lot.nomBien }}</div>
									<div class="text-muted x-small">{{ lot.typeBien ? lot.typeBien.libelle : 'Type non défini' }}</div>
								</td>
								<td>
									<span class="badge bg-primary-soft text-primary border border-primary-subtle">
										<i class="fas fa-project-diagram me-1"></i>
										{{ lot.projet.nom }}
									</span>
								</td>
								<td>
									<span class="badge rounded-pill border {{ badgeClass[statutValue]|default('bg-secondary-soft') }}">
										<i class="fas fa-circle me-1 small"></i>
										{{ statutValue }}
									</span>
								</td>
								<td>
									{% set avancementChantier = lot.avancement|default(0) %}
									<div class="d-flex align-items-center gap-2">
										<div class="progress flex-grow-1" style="height: 6px; min-width: 80px;">
											<div class="progress-bar {{ avancementChantier >= 100 ? 'bg-success' : 'bg-success' }}" role="progressbar" style="width: {{ avancementChantier }}%"></div>
										</div>
										<span class="small fw-bold {{ avancementChantier >= 100 ? 'text-success' : 'text-muted' }}">
											{{ avancementChantier }}%
										</span>
									</div>
								</td>
								<td>
									{% set percentPaiement = 0 %}
									{% if lot.souscription is defined and lot.souscription is not null %}
										{% set percentPaiement = lot.souscription.pourcentagePaiement|default(0) %}
									{% endif %}
									<div class="d-flex align-items-center gap-2">
										<div class="progress flex-grow-1" style="height: 6px; min-width: 80px;">
											<div class="progress-bar {{ percentPaiement >= 100 ? 'bg-success' : 'bg-success' }}" role="progressbar" style="width: {{ percentPaiement }}%"></div>
										</div>
										<span class="small fw-bold {{ percentPaiement >= 100 ? 'text-success' : 'text-muted' }}">
											{{ percentPaiement|round }}%
										</span>
									</div>
								</td>
								<td class="fw-bold text-dark text-end pe-4">
									{{ lot.prixStandard|number_format(0, '.', ' ') }}
									<small class="text-muted">FCFA</small>
								</td>
							</tr>

							{# LIGNE DE DÉTAIL DÉROULANTE #}
							<tr class="collapse-row">
								<td colspan="7" class="p-0 border-0">
									<div class="collapse bg-light-subtle shadow-inner border-start border-4 border-primary" id="detailLot{{ lot.id }}" data-bs-parent="#accordionLots">
										<div
											class="p-4">

											{# --- NAVIGATION DES 5 ONGLETS --- #}
											<ul class="nav nav-tabs-custom mb-3" role="tablist">
												<li class="nav-item">
													<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#carac{{ lot.id }}">
														<i class="fas fa-info-circle me-1"></i>
														Fiche Technique
													</button>
												</li>
												<li class="nav-item">
													<button class="nav-link" data-bs-toggle="tab" data-bs-target="#acq{{ lot.id }}">
														<i class="fas fa-user me-1"></i>
														Client
													</button>
												</li>
												<li class="nav-item">
													<button class="nav-link" data-bs-toggle="tab" data-bs-target="#comm{{ lot.id }}">
														<i class="fas fa-handshake me-1"></i>
														Commercial
													</button>
												</li>
												<li class="nav-item">
													<button class="nav-link" data-bs-toggle="tab" data-bs-target="#paiement{{ lot.id }}">
														<i class="fas fa-credit-card me-1"></i>
														Paiement
													</button>
												</li>
												<li class="nav-item">
													<button class="nav-link" data-bs-toggle="tab" data-bs-target="#travaux{{ lot.id }}">
														<i class="fas fa-tools me-1"></i>
														Travaux
													</button>
												</li>
											</ul>

											<div
												class="tab-content bg-white rounded shadow-sm p-4 border">
												{# 1. Fiche Technique #}
												<div class="tab-pane fade show active" id="carac{{ lot.id }}">
													<div class="row">
														{{ include('_shared/lot/show.html.twig', {'lot': lot}) }}
													</div>
												</div>

												{# 2. Client #}
												<div class="tab-pane fade" id="acq{{ lot.id }}">
													{% if lot.souscription and lot.souscription.client %}
														<div class="row">
															{{ include('_shared/user/show.html.twig', {'user': lot.souscription.client}) }}
														</div>
													{% else %}
														<div class="row justify-content-center">
															<center>
																<i class="fas fa-user-slash me-2"></i>Aucun acquéreur assigné.</center>
														</div>
													{% endif %}
												</div>

												{# 3. Commercial #}
												<div class="tab-pane fade" id="comm{{ lot.id }}">
													{% if lot.souscription and lot.souscription.agent %}
														<div class="row">
															{{ include('_shared/user/show.html.twig', {'user': lot.souscription.agent}) }}
														</div>
													{% else %}
														<div class="row align-items-center" style="text-align:center">
															<center>
																<i class="fas fa-user-slash me-2"></i>Aucun(e) commercial(e) assigné(e).</center>
														</div>
													{% endif %}
												</div>

												{# 4. Paiement #}
												<div class="tab-pane fade" id="paiement{{ lot.id }}">

													{% if lot.souscription and lot.souscription.id %}
														<div class="row">

															{% if lot.souscription.modeFinancement and lot.souscription.modeFinancement.value == 'ECHEANCIER' %}
																{{ include('_shared/paiement/_list_echeancier.html.twig', {
																'echeanciers': lot.souscription.echeanciers,
																'souscription': lot.souscription
															}) }}
															{% else %}
																{{ include('_shared/paiement/_list_simple.html.twig', {'souscription': lot.souscription, 'paiements': lot.souscription.paiements  }) }}
															{% endif %}
														</div>
													{% else %}
														<div class="row align-items-center" style="text-align:center">
															<center>
																<i class="fas fa-credit-card-slash me-2"></i>Aucun paiement enregistré.</center>
														</div>
													{% endif %}
												</div>

												{# 5. Travaux #}
												<div class="tab-pane fade" id="travaux{{ lot.id }}">
													{{ render(controller('App\\Controller\\Shared\\LotSharedController::etapesFragment', {'id': lot.id})) }}
												</div>

											</div>
										</div>
									</div>
								</td>
							</tr>

						{% else %}
							<tr>
								<td colspan="7" class="text-center py-5 text-muted">
									<i class="fas fa-search fa-3x mb-3 opacity-25"></i>
									<p class="mb-0">Aucun lot trouvé.</p>
								</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
			<div class="card-footer bg-white border-0 py-3">
				<div class="d-flex justify-content-center">
					{{ knp_pagination_render(lots) }}
				</div>
			</div>
		</div>
	</div>

	<style>
		/* Styles conservés de votre version */
		.bg-success-soft {
			background-color: #e6f6ec !important;
			color: #0d9448 !important;
			border-color: #bcf0da !important;
		}
		.bg-danger-soft {
			background-color: #fdf2f2 !important;
			color: #e02424 !important;
			border-color: #f8d7da !important;
		}
		.bg-warning-soft {
			background-color: #fffaf0 !important;
			color: #b45309 !important;
			border-color: #ffeeba !important;
		}
		.bg-secondary-soft {
			background-color: #f3f4f6 !important;
			color: #4b5563 !important;
			border-color: #e5e7eb !important;
		}
		.bg-primary-soft {
			background-color: #eef2ff !important;
			color: #4338ca !important;
			border-color: #c7d2fe !important;
		}

		.x-small {
			font-size: 10px;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			font-weight: 800;
		}
		.pointer {
			cursor: pointer;
		}
		.transition-icon {
			transition: transform 0.2s ease-in-out;
		}
		.clickable-row[aria-expanded="true"] .transition-icon {
			transform: rotate(90deg);
			color: #0d6efd !important;
		}

		.nav-tabs-custom .nav-link {
			border: none;
			padding: 1.2rem 1.5rem;
			color: #6c757d;
			border-bottom: 3px solid transparent;
			transition: all 0.3s ease;
		}
		.nav-tabs-custom .nav-link.active {
			color: #0d6efd;
			background: transparent;
			border-bottom-color: #0d6efd;
		}
		.nav-tabs-custom .nav-link:hover:not(.active) {
			border-bottom-color: #dee2e6;
		}
		.avatar-circle {
			width: 40px;
			height: 40px;
			background: #6366f1;
			color: #fff;
			border-radius: 50%;
			display: flex;
			align-ite ms: center;
			justify-content: center;
			font-weight: bold;
		}


		/* Cibler les cellules (td) de la ligne quand elle est ouverte */
		.clickable-row[aria-expanded="true"] td {
			background-color: #f3f3f3 !important;
			color: #084298 !important; /* Force le texte en bleu foncé pour la lisibilité */
			transition: all 0.3s ease;
		}

		/* On change aussi l'icône et les sous-titres pour qu'ils soient lisibles */
		.clickable-row[aria-expanded="true"] .text-muted,
		.clickable-row[aria-expanded="true"] .transition-icon {
			color: #084298 !important;
			opacity: 0.8;
		}
	</style>
{% endblock %}