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

{% block title %}Mon Portefeuille Clients
{% 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">Mon Portefeuille Clients</h3>
				<p class="text-muted small mb-0">
					<i class="fas fa-users me-1 text-primary"></i>
					Historique et suivi
					<span class="badge bg-light text-muted border fw-normal ms-1">Page
						{{ souscriptions.currentPageNumber }}</span>
				</p>
			</div>
			<div
				class="d-flex gap-2">
				{# --- BOUTON EXPORT --- #}
				<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>

				{# --- BOUTON ACTION PRINCIPALE --- #}
				<button class="btn btn-login shadow-sm px-3 d-flex align-items-center btn-ajax-modal" data-url="{{ path('shared_souscription_new_modal') }}">
					<i class="fas fa-plus-circle me-2"></i>
					<span>Nouvelle souscription</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 d'outils : Recherche & Filtres #}
		<div class="card shadow-sm border-0 mb-4">
			<form method="get" action="{{ path('app_commercial_portefeuille_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" 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>

							{# Corrigé ici : value="EN_ATTENTE" au lieu de "ATTENTE" #}
							<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_commercial_portefeuille_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 #}
		<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>Recouvrement</th>
							<th>Chantier</th>
							<th>Statut</th>
							<th class="pe-4">Date</th>
						</tr>
					</thead>
					<tbody>
						{% for s in souscriptions %}
							{% set isEnAttente = (s.statutDossier.value == 'EN_ATTENTE') %}

							<tr class="client-row {{ isEnAttente ? 'row-locked' : 'clickable-row' }}" {% if not isEnAttente %} onclick="window.location='{{ path('app_commercial_portefeuille_show', {id: s.id}) }}'" style="cursor: pointer;" {% else %} style="cursor: not-allowed;" title="Dossier en attente de validation (non modifiable)" {% endif %}>

								<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 %}
									<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;">Payé sur
										{{ s.montantTotalDu|number_format(0, ',', ' ') }}
										F</div>
								</td>
								<td style="min-width: 140px;">
									{% set pctChantier = s.evolutionChantier %}
									<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;">Travaux effectués</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">{{ s.dateSouscription|date('d/m/Y') }}</td>
							</tr>
						{% else %}
							<tr>
								<td colspan="6" class="text-center py-5 text-muted">
									<i class="fas fa-folder-open fa-3x mb-3 opacity-20"></i>
									<p>Aucun dossier trouvé pour cette recherche.</p>
									<a href="{{ path('app_commercial_portefeuille_index') }}" class="btn btn-sm btn-link">Effacer les filtres</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-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);
		}

		.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;
			box-shadow: 0 4px 6px rgba(13, 110, 253, 0.2);
		}

		.object-fit-cover {
			object-fit: cover;
		}
		.clickable-row:hover {
			background-color: rgba(13, 110, 253, 0.03) !important;
			transition: 0.2s;
		}

		/* Style pour les dossiers verrouillés */
		.row-locked {
			background-color: #fcfcfc !important;
			opacity: 0.85;
		}
		.row-locked:hover {
			background-color: #f8f9fa !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",
"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_Complet_${dateStr}.xlsx`);
});
	</script>


{% endblock %}