{# templates/admin/portefeuille/affectation.html.twig #}
{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Affectations en attente
{% endblock %}

{% block content %}
	<div
		class="container-fluid py-4">
		{# 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">Affectations en attente</h3>
				<p class="text-muted small mb-0">
					<i class="fas fa-user-clock me-1 text-warning"></i>
					Dossiers sans agent commercial assigné.
				</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 liste</span>
				</button>
			</div>
		</div>

		{# Tableau #}
		<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">
						<tr>
							<th class="ps-4">Client</th>
							<th>Bien / Lot</th>
							<th>Chantier</th>
							<th>Statut</th>
							<th>Date</th>
							<th class="pe-4 text-end">Actions</th>
						</tr>
					</thead>
					<tbody>
						{% for s in souscriptions %}
							<tr class="client-row">
								<td class="ps-4">
									<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">{{ s.lot.projet.nom }}</div>
									<div class="text-muted small export-lot">{{ s.lot.nomBien }}</div>
								</td>

								<td style="min-width: 140px;">
									{% set pctChantier = s.evolutionChantier|default(0) %}
									<div class="d-flex align-items-center">
										<div class="progress flex-grow-1" style="height: 6px;">
											<div class="progress-bar bg-info" style="width: {{ pctChantier }}%"></div>
										</div>
										<span class="ms-2 small fw-bold export-chantier">{{ pctChantier }}%</span>
									</div>
								</td>

								<td>
									<span class="badge bg-soft-warning text-dark border border-warning p-2 py-1 fw-bold export-statut">
										À ASSIGNER
									</span>
								</td>

								<td class="small text-muted export-date">{{ s.dateSouscription|date('d/m/Y') }}</td>

								<td class="pe-4 text-end">
									<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 fa-user-check me-1"></i>
										Affecter
									</button>
								</td>
							</tr>

							{# 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_portefeuille_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>

						{% else %}
							<tr>
								<td colspan="6" class="text-center py-5 text-muted">
									<i class="fas fa-check-circle fa-3x mb-3 opacity-20"></i>
									<p>Tous les dossiers ont été assignés.</p>
									<a href="{{ path('app_admin_portefeuille_index') }}" class="btn btn-sm btn-primary">Voir les dossiers en attente d'Approbations</a>
								</td>
							</tr>
						{% 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>
		.bg-soft-warning {
			background-color: rgba(255, 193, 7, 0.12);
		}
		.pagination {
			margin-bottom: 0;
			gap: 5px;
		}
		.page-item .page-link {
			border: none;
			border-radius: 8px !important;
			color: #6c757d;
		}
		.page-item.active .page-link {
			background-color: #0d6efd;
			color: white;
		}
		.object-fit-cover {
			object-fit: cover;
		}
		.progress {
			background-color: #e9ecef;
			border-radius: 10px;
		}
		.modal-content {
			border-radius: 12px;
		}
		.form-select:focus {
			border-color: #0d6efd;
			box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
		}
	</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",
"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-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, "Affectations_En_Attente");
XLSX.writeFile(wb, `Affectations_Attente_${dateStr}.xlsx`);
});
	</script>
{% endblock %}