{# templates/_shared/paiement/_modal_form_commercial.html.twig #}

<div class="modal-header bg-success text-white">
	<h5 class="modal-title">
		<i class="fas fa-money-bill-wave me-2"></i>Nouveau Paiement
	</h5>
	<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

{{ form_start(form) }}
<div class="modal-body">
	<div class="alert alert-info py-2 mb-3">
		<i class="fas fa-info-circle me-1"></i>
		<small>
			<strong>Projet :</strong>
			{{ souscription.lot.Projet.nom }}
			<span class="mx-1">|</span>
			<strong>Lot :</strong>
			{{ souscription.lot.nomBien }}
			<span class="mx-1">|</span>
			<strong>Client :</strong>
			{{ souscription.client.fullName }}
		</small>
	</div>

	{# Bloc Échéancier #}
	{% if form.echeancier is defined %}
		<div class="row mb-3">
			<div class="col-12">
				<div class="p-2 border border-primary rounded bg-light">
					{{ form_row(form.echeancier) }}

				</div>
			</div>
		</div>
	{% endif %}

	<div class="row">
		<div class="col-md-6 mb-3">
			{{ form_row(form.montant) }}
		</div>
		<div class="col-md-6 mb-3">
			{{ form_row(form.moyenPaiement) }}
		</div>
	</div>

	<div class="row">
		<div class="col-md-6 mb-3">
			{{ form_row(form.datePaiement) }}
		</div>
		<div class="col-md-6 mb-3">
			{{ form_row(form.referenceTransaction) }}
		</div>
	</div>

	<div class="mb-0">
		{{ form_row(form.preuveFile) }}
		<div id="help-preuve" class="form-text mt-0" style="font-size: 0.75rem;">
			Format : PDF, JPG ou PNG (Max 2Mo).
		</div>
	</div>
</div>

<div class="modal-footer bg-light">
	<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Annuler</button>
	<button type="submit" class="btn btn-sm btn-success px-4">
		<i class="fas fa-check me-1"></i>
		Enregistrer le paiement
	</button>
</div>
{{ form_end(form) }}


<script>
	$(document).ready(function () { // On cible le champ écheancier et le champ montant
const $echeancierSelect = $('.select2-modal-js'); // ou $('select[name*="echeancier"]')
const $montantInput = $('.format-montant-js');

$echeancierSelect.on('change', function () { // Récupérer le texte de l'option sélectionnée (ex: "Echéance 1 (Reste : 500 000 F CFA)")
const selectedText = $(this).find('option:selected').text();

if (selectedText && selectedText.includes('Reste :')) {
// Extraire les chiffres entre "Reste :" et "F CFA"
// On enlève les espaces pour avoir un nombre pur
let montant = selectedText.match(/Reste\s?:\s?([\d\s]+)/);

if (montant && montant[1]) { // Nettoyage des espaces pour le formatage numérique final
let valeurPure = montant[1].replace(/\s/g, '');

// Mettre à jour le champ montant
$montantInput.val(valeurPure);

// Si vous avez un script de formatage (ex: AutoNumeric ou cleave.js),
// il faut parfois déclencher un événement pour qu'il se mette à jour graphiquement
$montantInput.trigger('input').trigger('change');
}
} else { // Optionnel : vider le montant si l'utilisateur choisit le placeholder
$montantInput.val('');
}
});
});
</script>