@csrf
<div class="row g-3">

    <div class="col-md-12 col-lg-12 col-sm-12 col-xl-12">

        <div class="card">
            <div class="pt-3">
   
                <div class="row">
                    <div class="col-md-4 col-lg-4 col-sm-4 col-xl-4">
                    <p class="text-center">Reférence : <span style="font-weight:bold" class="text-warning" id="refReglementL"></span></p>
                    </div>
                    <div class="col-md-4 col-lg-4 col-sm-4 col-xl-4">
                    <p class="text-center">Montant : <span style="font-weight:bold" class="text-success" id="MontantReglementL"></span></p>
                    </div>
                     <div class="col-md-4 col-lg-4 col-sm-4 col-xl-4">
                     <p class="text-center" >Solde : <span style="font-weight:bold" class="text-secondary" id="SoldeReglementL"></span></p>
                     </div>
                </div>
            </div>


        </div>
    </div>

<div class="col-md-12 col-lg-12 col-sm-12 col-xl-12">
    <label class="FormLabel">Facture à régler</label>
    <select class="form-select ListFactureSelect" id="ListFactureSelect" name="ListFactureSelect" required>
        <option selected disabled value="">Choisir...</option>
    </select>
    <div class="invalid-feedback">
        Facture obligatoire
    </div>
</div>

<div class="col-md-12 col-lg-12 col-sm-12 col-xl-12">
     <input type="hidden"  class="form-control IDReglementInputHidden" name="IDReglementInputHidden">
     <input type="hidden"  class="form-control IDLocataireInputHidden" name="IDLocataire">

     <input type="hidden"  class="form-control IDFactureLigneInputHidden" value="0" name="IDFactureLigneInputHidden">
     <input type="hidden"  class="form-control MontantForModificationInputHidden">
</div>

     <input type="hidden"  class="form-control IDReglementLigneUpdateHidden" value="0" name="IDReglementLigneUpdateHidden">

<div class="col-md-12 col-lg-3 col-sm-3 col-xl-3">
   <p class="text-center">Ref. facture : <span style="font-weight:bold" id="RefFactSelectionner">---</span></p>
</div>

<div class="col-md-12 col-lg-3 col-sm-3 col-xl-3">
   <p class="text-center">Mont. facture : <span style="font-weight:bold"  id="MontantFactSelectionner">---</span></p>
</div>

<div class="col-md-12 col-lg-3 col-sm-3 col-xl-3">
   <p class="text-center">Mont. réglé : <span style="font-weight:bold"  id="MontantRegleFac">---</span></p>
</div>

<div class="col-md-12 col-lg-3 col-sm-3 col-xl-3">
<p class="text-center">Mont. restant : <span style="font-weight:bold"  id="MontantRestantFactSelectionner">---</span></p>  
</div>

<div class="col-md-8 col-lg-8 col-sm-8 col-xl-8">
    <label class="FormLabel">Montant règlement</label>
    <input type="text" class="form-control montantReglementLigne"  id="montantReglementLigne" name="montantReglementLigne" required>
    <div class="invalid-feedback">
        Montant obligatoire
    </div>
    <small class="FormLabel text-danger montantEleve"></small>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xl-2">
     <label class="FormLabel">Date de règlement</label>
    <input value="04/10/2026" class="form-control datetimepicker dateReglementLigne" name="dateReglementLigne"
        id="datepicker" type="text" placeholder="dd/mm/yyyy"
        data-options='{"disableMobile":true,"dateFormat":"d/m/Y"}' required="required" />
    <div class="invalid-dateDeb">
    </div>
</div>

<div class="col-md-2 col-lg-2 col-sm-2 col-xl-2">
    <div class="d-grid gap-2 mt-4">
      <button type="submit" id="btn-validerReglementLigne" class="btn btn-success">Valider</button>
    </div>
</div>

</div>