{# templates/commercial/portefeuille/index.html.twig #}
{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Dossiers Clients en Attente d'Approbation
{% 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">Dossiers en Attente d'Approbation</h3>
				<p class="text-muted small mb-0">
					<i class="fas fa-file-signature me-1 text-primary"></i>
					Liste des souscriptions soumises à la validation administrative.
				</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>Financement</th>
							<th>Chantier</th>
							<th>Statut</th>
							<th class="pe-4">Date Soumission</th>
						</tr>
					</thead>
					<tbody>
						{% for s in souscriptions %}
							<tr class="client-row clickable-row" onclick="window.location='{{ path('app_admin_portefeuille_show', {id: s.id}) }}'" style="cursor: pointer;" title="Cliquez pour voir la fiche du dossier">

								<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 pctPaye = s.pourcentagePaiement|default(0) %}
									<div class="d-flex align-items-center">
										<div class="progress flex-grow-1" style="height: 6px;">
											<div class="progress-bar bg-success" style="width: {{ pctPaye }}%"></div>
										</div>
										<span class="ms-2 small fw-bold export-paye">{{ pctPaye }}%</span>
									</div>
									<div class="text-muted" style="font-size: 0.7rem;">Apport initial enregistré</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>
									<div class="text-muted" style="font-size: 0.7rem;">État actuel du lot</div>
								</td>

								<td>
									<span class="badge bg-soft-warning text-warning border border-warning p-2 py-1 fw-bold export-statut">
										<i class="fas fa-clock me-1 small"></i>
										EN ATTENTE
									</span>
								</td>

								<td class="small text-muted export-date pe-4">{{ s.dateSouscription|date('d/m/Y') }}</td>
							</tr>
						{% else %}
							<tr>
								<td colspan="6" class="text-center py-5 text-muted">
									<i class="fas fa-clipboard-check fa-3x mb-3 opacity-20"></i>
									<p>Aucun dossier en attente de validation.</p>
								</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.1);
			color: #856404 !important;
		}
		.pagination {
			margin-bottom: 0;
			gap: 5px;
		}
		.page-item .page-link {
			border: none;
			border-radius: 8px !important;
			color: #6c757d;
			padding: 8px 14px;
		}
		.page-item.active .page-link {
			background-color: #0d6efd;
			color: white;
		}

		.object-fit-cover {
			object-fit: cover;
		}

		/* Animation au survol pour indiquer le clic possible */
		.clickable-row {
			transition: background-color 0.15s ease-in-out;
		}
		.clickable-row:hover {
			background-color: rgba(13, 110, 253, 0.04) !important;
		}

		.progress {
			background-color: #e9ecef;
			border-radius: 10px;
		}
	</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",
"FINANCEMENT %",
"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, "Attente_Approbation");
XLSX.writeFile(wb, `Dossiers_En_Attente_${dateStr}.xlsx`);
});
	</script>
{% endblock %}