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

{% block title %}Dossiers Clients
{% endblock %}

{% block content %}
	<div
		class="container-fluid py-4">
		{# SECTION EN-TÊTE #}
		<div class="d-flex justify-content-between align-items-center mb-4">
			<div>
				<h3 class="page-header page-header-top mb-0">Portefeuilles Clients</h3>
				<p class="text-muted small mb-0">
					<i class="fas fa-users me-1 text-primary"></i>
					Historique et suivi opérationnel des dossiers.
					<span class="badge bg-light text-muted border fw-normal ms-1">Page
						{{ souscriptions.currentPageNumber }}</span>
				</p>
			</div>
			<div class="d-flex gap-2">
				<button id="exportExcel" class="btn btn-outline-success shadow-sm px-3 d-flex align-items-center">
					<i class="fas fa-file-excel me-2"></i>
					<span>Exporter la page</span>
				</button>
			</div>
		</div>

		{# STATISTIQUES RAPIDES #}
		<div class="row mb-4">
			<div class="col-md-4">
				<div class="card border-0 shadow-sm p-3 border-start border-primary border-4 h-100">
					<div class="text-muted small text-uppercase fw-bold">Total Portefeuille</div>
					<div class="h4 fw-bold mb-0 text-dark">{{ souscriptions.getTotalItemCount }}
						Dossier(s)</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card border-0 shadow-sm p-3 border-start border-success border-4 h-100">
					<div class="text-muted small text-uppercase fw-bold">Dossiers filtrés</div>
					<div class="h4 fw-bold mb-0 text-success">{{ souscriptions|length }}
						sur cette page</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card border-0 shadow-sm p-3 border-start border-info border-4 h-100">
					<div class="text-muted small text-uppercase fw-bold">Recherche active</div>
					<div class="small text-info">
						{% if app.request.query.get('q') %}
							Mot-clé : "{{ app.request.query.get('q') }}"
						{% else %}
							Aucun filtre textuel
						{% endif %}
					</div>
				</div>
			</div>
		</div>

		{# BARRE DE RECHERCHE & FILTRES #}
		<div class="card shadow-sm border-0 mb-4">
			<form method="get" action="{{ path('app_client_index') }}" class="card-body py-3">
				<div class="row g-3 align-items-center">
					<div class="col-lg-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="q" class="form-control border-start-0 ps-0 shadow-none" placeholder="Nom, projet ou numéro de lot..." value="{{ app.request.query.get('q') }}">
						</div>
					</div>

					<div class="col-lg-6">
						<div class="btn-group w-100 shadow-sm">
							{% set currentStatus = app.request.query.get('status', 'ALL') %}

							<input type="radio" class="btn-check" name="status" id="filterAll" value="ALL" {{ currentStatus == 'ALL' ? 'checked' : '' }} onchange="this.form.submit()">
							<label class="btn btn-outline-secondary border-light-subtle" for="filterAll">Tous</label>

							<input type="radio" class="btn-check" name="status" id="filterBrouillon" value="BROUILLON" {{ currentStatus == 'BROUILLON' ? 'checked' : '' }} onchange="this.form.submit()">
							<label class="btn btn-outline-secondary border-light-subtle" for="filterBrouillon">Brouillons</label>

							<input type="radio" class="btn-check" name="status" id="filterAttente" value="EN_ATTENTE" {{ currentStatus == 'EN_ATTENTE' ? 'checked' : '' }} onchange="this.form.submit()">
							<label class="btn btn-outline-secondary border-light-subtle" for="filterAttente">En cours</label>

							<input type="radio" class="btn-check" name="status" id="filterValide" value="VALIDE" {{ currentStatus == 'VALIDE' ? 'checked' : '' }} onchange="this.form.submit()">
							<label class="btn btn-outline-secondary border-light-subtle" for="filterValide">Validés</label>
						</div>
					</div>

					<div class="col-lg-2 d-flex gap-2">
						<button type="submit" class="btn btn-primary flex-grow-1 shadow-sm">
							<i class="fas fa-filter"></i>
						</button>
						<a href="{{ path('app_client_index') }}" class="btn btn-outline-light border text-muted shadow-sm" title="Réinitialiser">
							<i class="fas fa-undo"></i>
						</a>
					</div>
				</div>
			</form>
		</div>

		{# TABLEAU AVEC ACCORDÉON #}
		<div class="card shadow-sm border-0">
			<div class="table-responsive">
				<table class="table table-hover align-middle mb-0" id="portefeuilleTable">
					<thead class="bg-light text-muted small text-uppercase fw-bold">
						<tr>
							<th class="text-center" style="width: 50px;"></th>
							<th class="ps-3">Client</th>
							<th>Bien / Lot</th>
							<th>Recouvrement</th>
							<th>Chantier</th>
							<th>Statut</th>
							<th class="pe-4 text-end">Date</th>
						</tr>
					</thead>
					<tbody id="accordionPortefeuille">
						{% for s in souscriptions %}
							{% set isEnAttente = (s.statutDossier.value == 'EN_ATTENTE') %}
							{% set lot = s.lot %}

							{# LIGNE PRINCIPALE #}
							<tr class="client-row clickable-row pointer {{ isEnAttente ? 'row-locked' : '' }}" data-bs-toggle="collapse" data-bs-target="#detailSous{{ s.id }}" aria-expanded="false" style="cursor: pointer;">

								<td class="text-center">
									<i class="fas fa-chevron-right text-muted transition-icon"></i>
								</td>
								<td class="ps-3">
									<div class="d-flex align-items-center">
										{% if s.client.photo %}
											<img src="{{ asset('uploads/users/photo/' ~ s.client.photo) }}" class="rounded-circle me-2 object-fit-cover shadow-sm border" style="width: 38px; height: 38px;">
										{% else %}
											<div class="avatar-circle-sm bg-primary text-white rounded-circle me-2 d-flex align-items-center justify-content-center fw-bold shadow-sm" style="width: 38px; height: 38px; font-size: 0.85rem; text-transform: uppercase;">
												{{ s.client.nom|slice(0, 1) }}{{ s.client.prenoms|slice(0, 1) }}
											</div>
										{% endif %}
										<div>
											<div class="fw-bold text-dark export-nom">{{ s.client.nom }}
												{{ s.client.prenoms }}</div>
											<div class="small text-muted export-tel">{{ s.client.telephone }}</div>
										</div>
									</div>
								</td>
								<td>
									<div class="small fw-bold text-dark export-projet">{{ lot.projet.nom }}</div>
									<div class="text-muted small export-lot">{{ lot.nomBien }}</div>
								</td>
								<td style="min-width: 140px;">
									{% set pctPaye = s.pourcentagePaiement|default(0) %}
									<div class="d-flex align-items-center gap-2">
										<div class="progress flex-grow-1" style="height: 6px;">
											<div class="progress-bar bg-success" role="progressbar" style="width: {{ pctPaye }}%"></div>
										</div>
										<span class="small fw-bold export-paye">{{ pctPaye|round }}%</span>
									</div>
									<div class="text-muted" style="font-size: 0.7rem;">Sur
										{{ s.montantTotalDu|number_format(0, ',', ' ') }}
										F</div>
								</td>
								<td style="min-width: 140px;">
									{% set pctChantier = s.evolutionChantier|default(0) %}
									<div class="d-flex align-items-center gap-2">
										<div class="progress flex-grow-1" style="height: 6px;">
											<div class="progress-bar bg-info" role="progressbar" style="width: {{ pctChantier }}%"></div>
										</div>
										<span class="small fw-bold export-chantier">{{ pctChantier }}%</span>
									</div>
									<div class="text-muted" style="font-size: 0.7rem;">Avancement travaux</div>
								</td>
								<td>
									<span class="badge bg-soft-{{ s.statutDossier.getColor|default('secondary') }} text-dark border-{{ s.statutDossier.getColor|default('secondary') }} border p-2 py-1 fw-bold export-statut">
										{% if isEnAttente %}
											<i class="fas fa-lock me-1 small opacity-50"></i>
										{% endif %}
										{{ s.statutDossier.getLabel|default('Inconnu') }}
									</span>
								</td>
								<td class="small text-muted export-date pe-4 text-end">
									{{ s.dateSouscription|date('d/m/Y') }}
								</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="detailSous{{ s.id }}" data-bs-parent="#accordionPortefeuille">
										<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{{ s.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{{ s.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{{ s.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{{ s.id }}">
														<i class="fas fa-credit-card me-1"></i>
														{% if s.modeFinancement and s.modeFinancement.value == 'ECHEANCIER' %}
															Echéancier de paiement
														{% else %}
															Paiement
														{% endif %}
													</button>
												</li>
												<li class="nav-item">
													<button class="nav-link" data-bs-toggle="tab" data-bs-target="#travaux{{ s.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{{ s.id }}">
													<div class="row">
														{{ include('_shared/lot/show.html.twig', {'lot': s.lot}) }}
													</div>

												</div>

												{# 2. Client #}
												<div class="tab-pane fade" id="acq{{ s.id }}">
													<div class="row">
														{{ include('_shared/user/show_client.html.twig', {'user': s.client}) }}
													</div>
												</div>

												{# 3. Commercial #}
												<div class="tab-pane fade" id="comm{{ s.id }}">
													<div class="d-flex justify-content-between align-items-center mb-3">
														<h6 class="fw-bold mb-0">Responsable commercial du dossier</h6>


														<button type="button" class="btn btn-primary btn-sm px-3 shadow-sm fw-bold" data-bs-toggle="modal" data-bs-target="#modalAffecter{{ s.id }}">
															<i class="fas {{ s.agent ? 'fa-exchange-alt' : 'fa-user-plus' }} me-1"></i>
															{{ s.agent ? 'Changer de commercial' : 'Assigner un commercial' }}
														</button>

														{# Modal d'affectation #}
														<div class="modal fade" id="modalAffecter{{ s.id }}" tabindex="-1" aria-hidden="true">
															<div class="modal-dialog modal-dialog-centered">
																<div class="modal-content border-0 shadow">
																	<div class="modal-header bg-light">
																		<h5 class="modal-title fw-bold">Assigner un commercial</h5>
																		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
																	</div>
																	{# L'action utilise la route d'assignation #}
																	<form action="{{ path('app_admin_client_assigner', {id: s.id}) }}" method="POST">
																		<div class="modal-body py-4">
																			<p class="text-muted small">Sélectionnez le commercial qui prendra en charge le dossier de
																				<strong>{{ s.client.nom }}
																					{{ s.client.prenoms }}</strong>.</p>

																			{# ID de la souscription caché pour le traitement (sécurité supplémentaire) #}
																			<input type="hidden" name="souscription_id" value="{{ s.id }}">

																			<div class="form-group">
																				<label class="form-label fw-bold">Agent Commercial</label>
																				{# Utilisation de commercial_id comme dans votre logique controller #}
																				<select name="commercial_id" class="form-select" required>
																					<option value="" selected disabled>Choisir parmi les commerciaux...</option>
																					{% for commercial in commerciaux %}
																						<option value="{{ commercial.id }}">{{ commercial.nom }}
																							{{ commercial.prenoms }}</option>
																					{% endfor %}
																				</select>
																			</div>
																		</div>
																		<div class="modal-footer bg-light border-0">
																			<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
																			<button type="submit" class="btn btn-primary btn-sm px-4 shadow-sm">Confirmer l'affectation</button>
																		</div>
																	</form>
																</div>
															</div>
														</div>


													</div>
													{% if s.agent %}
														<div class="row">
															{{ include('_shared/user/show.html.twig', {'user': s.agent}) }}
														</div>
													{% else %}
														<div class="text-center py-3 text-muted">
															<i class="fas fa-user-slash me-2"></i>Aucun agent assigné.
														</div>
													{% endif %}
												</div>

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

														{% if s.modeFinancement and s.modeFinancement.value == 'ECHEANCIER' %}
															{{ include('_shared/paiement/_list_echeancier.html.twig', {
																'echeanciers': s.echeanciers,
																'souscription': s
															}) }}
														{% else %}
															{{ include('_shared/paiement/_list_simple.html.twig', {'souscription': s, 'paiements': s.paiements  }) }}
														{% endif %}
													</div>
												</div>

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

												</div>
											</div>
										</div>
									</div>
								</td>
							</tr>
							{% else %}

						{% endfor %}
					</tbody>
				</table>
			</div>

			{# PAGINATION #}
			<div class="card-footer bg-white border-top py-3">
				<div class="d-flex justify-content-between align-items-center">
					<div class="small text-muted">
						Affichage de
						<b>{{ souscriptions|length }}</b>
						sur
						<b>{{ souscriptions.getTotalItemCount }}</b>
						dossiers
					</div>
					<div class="navigation">
						{{ knp_pagination_render(souscriptions) }}
					</div>
				</div>
			</div>
		</div>
	</div>

	<style>
		/* SOFT COLORS POUR BADGES */
		.bg-soft-primary {
			background-color: rgba(13, 110, 253, 0.12);
		}
		.bg-soft-success {
			background-color: rgba(25, 135, 84, 0.12);
		}
		.bg-soft-info {
			background-color: rgba(13, 202, 240, 0.12);
		}
		.bg-soft-warning {
			background-color: rgba(255, 193, 7, 0.12);
		}
		.bg-soft-secondary {
			background-color: #f3f4f6;
			color: #4b5563;
		}

		/* ETAT DE LA LIGNE */
		.pointer {
			cursor: pointer;
		}
		.row-locked {
			background-color: #fcfcfc !important;
			opacity: 0.9;
		}
		.transition-icon {
			transition: transform 0.2s ease-in-out;
		}

		/* STYLE QUAND OUVERT */
		.clickable-row[aria-expanded="true"] {
			background-color: #f8f9fa !important;
		}
		.clickable-row[aria-expanded="true"] td {
			color: #084298 !important;
		}
		.clickable-row[aria-expanded="true"] .transition-icon {
			transform: rotate(90deg);
			color: #0d6efd !important;
		}

		/* TABS PERSONNALISÉS */
		.nav-tabs-custom .nav-link {
			border: none;
			padding: 1rem 1.2rem;
			color: #6c757d;
			border-bottom: 3px solid transparent;
			transition: all 0.3s ease;
			font-weight: 500;
		}
		.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;
		}

		.progress {
			background-color: #e9ecef;
			border-radius: 10px;
			overflow: hidden;
		}
		.object-fit-cover {
			object-fit: cover;
		}
		.shadow-inner {
			box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
		}
	</style>

	<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
	<script>
		document.getElementById('exportExcel').addEventListener('click', function () {
const data = [[
"CLIENT",
"TELEPHONE",
"PROJET",
"LOT",
"RECOUVREMENT %",
"CHANTIER %",
"STATUT",
"DATE"
]];
document.querySelectorAll('.client-row').forEach(row => {
data.push([
row.querySelector('.export-nom').textContent.trim(),
row.querySelector('.export-tel').textContent.trim(),
row.querySelector('.export-projet').textContent.trim(),
row.querySelector('.export-lot').textContent.trim(),
row.querySelector('.export-paye').textContent.trim(),
row.querySelector('.export-chantier').textContent.trim(),
row.querySelector('.export-statut').textContent.trim(),
row.querySelector('.export-date').textContent.trim()
]);
});
const ws = XLSX.utils.aoa_to_sheet(data);
const wb = XLSX.utils.book_new();
const dateStr = new Date().toLocaleDateString('fr-FR').replace(/\//g, '_');
XLSX.utils.book_append_sheet(wb, ws, "Portefeuille");
XLSX.writeFile(wb, `Portefeuille_Commercial_${dateStr}.xlsx`);
});
	</script>
{% endblock %}