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

{# Petit style pour l'astérisque rouge dynamique #}
{% block stylesheets %}
	{{ parent() }}
	<style>
		.required-asterisk label::after {
			content: " *";
			color: red;
		}
	</style>
{% endblock %}

{% block content %}
	<div class="container py-4">
		<div class="card shadow">
			<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
				<h5 class="mb-0">Nouveau Paiement</h5>
				<a href="{{ path('app_admin_paiement_index') }}" class="btn btn-sm btn-light">Retour</a>
			</div>
			<div class="card-body">
				{{ form_start(form, {'attr': {'id': 'form-paiement'}}) }}

				<div class="row">
					<div class="col-md-6">{{ form_row(form.client) }}</div>
					<div class="col-md-6">{{ form_row(form.souscription) }}</div>
				</div>

				<div id="section-echeancier" style="display:none;" class="p-3 mb-3 mt-3 bg-light border rounded">
					<div class="row">
						<div class="col-md-6">{{ form_row(form.echeancier) }}</div>
						<div class="col-md-6">
							<label class="fw-bold">Montant suggéré (Reste dû)</label>
							<div class="input-group">
								<input type="text" id="montant-suggere" class="form-control bg-white" readonly>
								<span class="input-group-text">FCFA</span>
							</div>
						</div>
					</div>
				</div>

				<div class="row mt-3">
					<div class="col-md-4 p-2 bg-light">{{ form_row(form.datePaiement) }}</div>
					<div class="col-md-4 p-2 bg-warning">{{ form_row(form.montant) }}</div>
					<div class="col-md-4 p-2 bg-light">{{ form_row(form.moyenPaiement) }}</div>
				</div>

				<div
					class="row mt-3" id="row-reference-preuve">
					{# On ajoute une classe pour gérer l'affichage de l'astérisque via CSS #}
					<div class="col-md-6" id="col-reference">{{ form_row(form.referenceTransaction) }}</div>
					<div class="col-md-6">{{ form_row(form.preuveFile) }}</div>
				</div>

				<div class="mt-4">
					<button type="submit" class="btn btn-success w-100 shadow-sm">
						<i class="fas fa-check-circle me-2"></i>Enregistrer l'encaissement
					</button>
				</div>
				{{ form_end(form) }}
			</div>
		</div>
	</div>

	<script>
		document.addEventListener('DOMContentLoaded', function () {
const form = document.querySelector('#form-paiement');
const clientSelect = document.querySelector('#paiement_client');
const souscriptionSelect = document.querySelector('#paiement_souscription');
const echeancierSelect = document.querySelector('#paiement_echeancier');
const montantInput = document.querySelector('#paiement_montant');
const moyenPaiementSelect = document.querySelector('#paiement_moyenPaiement');
const sectionEch = document.querySelector('#section-echeancier');
const rowRefPreuve = document.querySelector('#row-reference-preuve');
const referenceInput = document.querySelector('#paiement_referenceTransaction');
const colReference = document.querySelector('#col-reference');
const montantSuggere = document.querySelector('#montant-suggere');

// --- GESTION DE L'OBLIGATION DYNAMIQUE ---
const toggleReferenceFields = () => {
const isEspeces = moyenPaiementSelect.value === 'ESPECES';

if (isEspeces) {
rowRefPreuve.style.display = 'none';
referenceInput.required = false;
colReference.classList.remove('required-asterisk');
} else {
rowRefPreuve.style.display = 'flex';
referenceInput.required = true;
colReference.classList.add('required-asterisk');
}
};

moyenPaiementSelect.addEventListener('change', toggleReferenceFields);
toggleReferenceFields();

// --- FORMATAGE ET SOUMISSION ---
const formatNumber = (val) => {
let n = val.toString().replace(/\D/g, '');
return n !== "" ? new Intl.NumberFormat('fr-FR').format(n) : "";
};

montantInput.addEventListener('input', function () {
this.value = formatNumber(this.value);
});

form.addEventListener('submit', function (e) { // 1. Validation de sécurité pour la référence
if (moyenPaiementSelect.value !== 'ESPECES' && ! referenceInput.value.trim()) {
e.preventDefault();
alert("La référence de transaction est obligatoire pour ce mode de paiement.");
referenceInput.focus();
return;
}

// 2. Nettoyage du montant pour Symfony
montantInput.value = montantInput.value.replace(/\s/g, '');
});

// --- LOGIQUE API CLIENT / SOUSCRIPTION ---
clientSelect.addEventListener('change', function () {
const clientId = this.value;
if (! clientId) 
return;


fetch (`/admin/paiement/api/client/${clientId}/souscriptions`).then(res => res.json()).then(data => {
souscriptionSelect.innerHTML = '<option value="">Choisir un projet/lot...</option>';
data.forEach(s => {
let option = new Option(s.projet, s.id);
option.dataset.mode = s.mode;
souscriptionSelect.add(option);
});
});
});

souscriptionSelect.addEventListener('change', function () {
const selectedOption = this.options[this.selectedIndex];
const mode = selectedOption ? selectedOption.dataset.mode : null;

if (mode === 'ECHEANCIER') {
sectionEch.style.display = 'block';
fetch (`/admin/paiement/api/souscription/${
this.value
}/echeanciers`).then(res => res.json()).then(data => {
echeancierSelect.innerHTML = '<option value="">Choisir l\'échéance...</option>';
data.forEach(e => {
let option = new Option(e.libelle, e.id);
option.dataset.reste = e.reste;
echeancierSelect.add(option);
});
});
} else {
sectionEch.style.display = 'none';
montantSuggere.value = '';
echeancierSelect.innerHTML = '<option value=""></option>';
}
});

echeancierSelect.addEventListener('change', function () {
const option = this.options[this.selectedIndex];
if (option && option.dataset.reste) {
const reste = option.dataset.reste;
montantSuggere.value = formatNumber(reste);
montantInput.value = formatNumber(reste);
}
});
});
	</script>
{% endblock %}