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

{% block title %}Journal des Encaissements
{% endblock %}

{% block content %}
	<div class="container-fluid py-4">
		<div class="d-flex justify-content-between align-items-center mb-4">
			<div>
				<h3 class="page-header page-header-top mb-0">Journal des Paiements</h3>
				<p class="text-muted small">Suivi chronologique des encaissements et validations de bons</p>
			</div>

			<div class="d-flex gap-2">
				<a href="{{ path('app_admin_paiement_new') }}" class="btn btn-primary shadow-sm px-3">
					<i class="fas fa-plus-circle me-2"></i>Nouveau Paiement
				</a>
				<button id="exportExcel" class="btn btn-success shadow-sm px-3">
					<i class="fas fa-file-excel me-2"></i>Exporter Excel
				</button>
			</div>
		</div>

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

					<div class="col-md-3">
						<select name="mode" class="form-select">
							<option value="">Tous les modes</option>
							<option value="ESPECES" {{ mode == 'ESPECES' ? 'selected' }}>Espèces</option>
							<option value="CHEQUE" {{ mode == 'CHEQUE' ? 'selected' }}>Chèque</option>
							<option value="VIREMENT" {{ mode == 'VIREMENT' ? 'selected' }}>Virement</option>
							<option value="MOBILE_MONEY" {{ mode == 'MOBILE_MONEY' ? 'selected' }}>Mobile Money</option>
						</select>
					</div>

					<div class="col-md-3">
						<input type="date" name="dateDebut" class="form-control" value="{{ dateDebut }}">
					</div>
					<div class="col-md-3">
						<input type="date" name="dateFin" class="form-control" value="{{ dateFin }}">
					</div>
				</div>
				<div class="row g-3 align-items-center">
					<div class="col-lg-10">
						<div class="btn-group w-100 shadow-sm filter-btn-group">
							{% set currentStatus = app.request.query.get('status', 'ALL') %}

							{# TOUS #}
							<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 py-2" for="filterAll" title="Tous les paiements">
								TOUS
							</label>

							{# VALIDÉ (Encaissements terminés) #}
							<input type="radio" class="btn-check" name="status" id="filterBrouillon" value="VALIDE" {{ currentStatus == 'VALIDE' ? 'checked' : '' }} onchange="this.form.submit()">
							<label class="btn btn-outline-secondary border-light-subtle py-2" for="filterBrouillon" title="Paiements validés / Encaissés">
								VALIDÉ
							</label>

							{# A VALIDER (En attente de caisse) #}
							<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 py-2" for="filterAttente" title="En attente de validation">
								A VALIDER
							</label>

							{# BON DE CAISSE (Spécifique Espèces/Bons) #}
							<input type="radio" class="btn-check" name="status" id="filterValide" value="BON" {{ currentStatus == 'BON' ? 'checked' : '' }} onchange="this.form.submit()">
							<label class="btn btn-outline-secondary border-light-subtle py-2" for="filterValide" title="Bons de caisse uniquement">
								BON DE CAISSE
							</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_admin_paiement_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>


		<div class="card shadow-sm border-0">
			<div class="table-responsive">
				<table class="table table-hover align-middle mb-0" id="journalTable">
					<thead class="bg-light text-muted small text-uppercase">
						<tr>
							<th class="ps-4">Date / Heure</th>
							<th>Client</th>
							<th>Bien / Projet</th>
							<th>Référence / Émetteur</th>
							<th>Mode</th>
							<th class="text-end">Montant</th>
							<th class="text-center">Statut</th>
							<th class="text-center pe-4">Actions</th>
						</tr>
					</thead>
					<tbody>
						{% for p in paiements %}
							<tr {% if not p.estValide %} class="bg-light-warning" {% endif %}>
								<td class="ps-4">
									<div class="fw-bold">{{ p.datePaiement|date('d/m/Y') }}</div>
									<div class="small text-muted">{{ p.datePaiement|date('H:i') }}</div>
								</td>
								<td>
									<div class="text-dark">{{ p.souscription.client.fullName }}</div>
									<div class="small text-muted">
										<i class="fas fa-phone me-1"></i>
										{{ p.souscription.client.telephone }}</div>
								</td>
								<td>
									<div class="small text-muted text-dark text-uppercase">{{ p.souscription.lot.projet.nom }}</div>
									<div class="text-muted small">Lot
										{{ p.souscription.lot.numeroLot }}</div>
								</td>
								<td>
									{# Affichage de la Référence (Transaction ou Bon) #}
									<div class="badge bg-light text-dark border mb-1">
										{% if p.estValide %}
											{{ p.referenceTransaction ?: 'SANS RÉF.' }}
										{% elseif p.bon %}
											{{ p.bon.referenceBon }}
										{% else %}
											{{ p.referenceTransaction ?: 'EN ATTENTE' }}
										{% endif %}
									</div>

									{# Affichage de l'Agent responsable #}
									<div class="small text-muted">
										{% if p.estValide %}
											<span class="text-success">
												<i class="fas fa-check-circle"></i>
												Encaissé par :<br/></span>
											{{ p.user.fullName|default('Système') }}
										{% elseif p.bon %}
											<span class="text-primary">
												<i class="fas fa-file-invoice"></i>
												Émis par :<br/></span>
											{{ p.bon.user.fullName|default('Système') }}
										{% else %}
											<span class="text-warning">
												<i class="fas fa-clock"></i>
												Initié par :<br/></span>
											{{ p.user.fullName|default('Système') }}
										{% endif %}
									</div>
								</td>
								<td>
									{% set modeColor = {
                                        'ESPECES': 'success',
                                        'CHEQUE': 'warning',
                                        'VIREMENT': 'primary',
                                        'MOBILE_MONEY': 'dark'
                                    }[p.moyenPaiement.value] | default('secondary') %}
									<span class="badge bg-{{ modeColor }} opacity-75">{{ p.moyenPaiement.value }}</span>
								</td>
								<td class="text-end fw-bold {{ p.estValide ? 'text-success' : 'text-warning' }}" nowrap="nowrap">
									{{ p.montant|number_format(0, ',', ' ') }}
								</td>
								<td class="text-center">
									{% if p.estValide %}
										<span class="badge bg-success rounded-pill p-2">Validé</span>
									{% else %}
										<span class="badge bg-warning text-dark rounded-pill p-2">En attente</span>
									{% endif %}
								</td>
								<td class="text-center pe-4">
									<div
										class="btn-group">


										{# Section des actions dans votre boucle for p in paiements #}
										<div class="btn-group">
											{% if p.estValide %}
												{# 1. Cas : Paiement validé -> Facture finale #}
												<a href="{{ path('app_admin_paiement_show', {'id': p.id}) }}" class="btn btn-sm btn-outline-success" title="Voir la facture">
													<i class="fas fa-file-invoice"></i>
												</a>
											{% elseif p.bon %}
												{# 2. Cas : Non validé mais avec un Bon de caisse #}
												<a href="{{ path('app_admin_paiement_from_bon', {'id': p.bon.id}) }}" class="btn btn-sm btn-outline-primary" title="Afficher le détail du bon de caisse">
													<i class="fas fa-receipt"></i>
												</a>
											{% else %}
												{# 3. Cas : En attente simple #}
												<a href="{{ path('app_admin_paiement_attente_validation', {'id': p.id}) }}" class="btn btn-sm btn-outline-secondary" title="Aperçu avant validation">
													<i class="fas fa-check-circle"></i>
												</a>
											{% endif %}
											{% if is_granted('ROLE_ADMIN') %}
												<form method="post" action="{{ path('app_admin_paiement_delete', {'id': p.id}) }}" onsubmit="return confirm('Annuler ce paiement ?');" class="d-inline">
													<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ p.id) }}">
													<button class="btn btn-outline-danger btn-sm">
														<i class="fas fa-trash"></i>
													</button>
												</form>
											{% endif %}
										</div>


									</div>
								</td>
							</tr>
						{% else %}
							<tr>
								<td colspan="8" class="text-center py-5 text-muted">
									<i class="fas fa-cash-register fa-3x mb-3 opacity-20"></i><br>
									Aucun paiement trouvé pour cette sélection.
								</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
			<div class="card-footer bg-white border-top py-3">
				<div class="d-flex justify-content-between align-items-center">
					<span class="small text-muted">Total :
						{{ paiements.getTotalItemCount }}
						paiement(s)</span>
					{{ knp_pagination_render(paiements) }}
				</div>
			</div>
		</div>
	</div>

	<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
	<script>
		document.getElementById('exportExcel').addEventListener('click', function () {
const data = [[
"DATE",
"HEURE",
"CLIENT",
"PROJET",
"LOT",
"REFERENCE",
"MODE",
"MONTANT",
"STATUT"
]];{% for p in paiements %}data.push([
"{{ p.datePaiement|date('d/m/Y') }}",
"{{ p.datePaiement|date('H:i') }}",
"{{ p.souscription.client.fullName }}",
"{{ p.souscription.lot.projet.nom }}",
"{{ p.souscription.lot.numeroLot }}",
"{{ p.bon ? p.bon.referenceBon : (p.referenceTransaction ?: 'N/A') }}",
"{{ p.moyenPaiement.value }}",
{{ p.montant|default(0) }},
"{{ p.estValide ? 'VALIDÉ' : 'EN ATTENTE' }}"
]);{% endfor %}const ws = XLSX.utils.aoa_to_sheet(data);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Journal");
XLSX.writeFile(wb, `Journal_Encaissements_${
new Date().toISOString().split('T')[0]
}.xlsx`);
});
	</script>

	<style>
		.bg-light-warning {
			background-color: rgba(255, 193, 7, 0.05) !important;
		}
		.table-hover tbody tr:hover {
			background-color: rgba(0, 0, 0, 0.03);
		}

		/* Style pour le groupe de filtres */
		.filter-btn-group {
			border-radius: 10px;
			overflow: hidden; /* Pour que les bords arrondis s'appliquent aux boutons internes */
			border: 1px solid #e0e6ed;
		}

		.filter-btn-group .btn {
			border: none !important; /* On gère la séparation manuellement */
			background-color: #ffffff;
			padding-top: 10px;
			padding-bottom: 10px;
			transition: all 0.3s ease;
			border-right: 1px solid #f0f2f5 !important;
		}

		.filter-btn-group .btn:last-child {
			border-right: none !important;
		}

		/* État au survol (Hover) */
		.filter-btn-group .btn:hover {
			background-color: #f8f9fa;
			transform: translateY(-1px);
		}

		/* État sélectionné (Checked) */
		.filter-btn-group .btn-check:checked + .btn {
			background-color: #f0f4f8 !important; /* Bleu très léger */
			color: #000 !important;
			box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
			position: relative;
		}

		/* Barre d'accentuation sous le bouton actif */
		.filter-btn-group .btn-check:checked + .btn::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 20%;
			right: 20%;
			height: 3px;
			background-color: #4e73df; /* Couleur primaire */
			border-radius: 3px 3px 0 0;
		}

		/* Animation des icônes au clic */
		.filter-btn-group .btn-check:checked + .btn i {
			transform: scale(1.2);
			transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		/* Ajustement spécifique pour les icônes de couleur */
		.filter-btn-group .btn i {
			opacity: 0.7;
			transition: opacity 0.3s;
		}

		.filter-btn-group .btn-check:checked + .btn i {
			opacity: 1;
		}
	</style>
{% endblock %}