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

    <div class="col-md-4 col-lg-4 col-sm-4 col-xl-4">
        <label class="FormLabel">Reférence Automatique</label>
        <input class="form-control  ReferenceReglement" id="ReferenceReglement" name="ReferenceReglement" type="text" readonly />
        <input  class="form-control ReferenceReglementNumerique" id="ReferenceReglementNumerique" name="ReferenceReglementNumerique" type="hidden" readonly />
    </div>

    <div class="col-md-4 col-lg-4 col-sm-4 col-xl-4">
        <label class="FormLabel">Reférence Externe</label>
        <input  class="form-control ReferenceReglementExterne" id="ReferenceReglementExterne" name="ReferenceReglementExterne" type="text" />
           
    </div>

    <div class="col-md-4 col-lg-4 col-sm-4 col-xl-4">
        <label class="FormLabel">Date de règlement</label>
        <input value="04/10/2026" class="form-control datetimepicker dateReglement" name="dateReglement"
            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-4 col-lg-4 col-sm-4 col-xl-4">
        <label class="FormLabel">Locataire</label>
        <select class="form-select LocataireSelect Pselect2X" id="LocataireSelect" name="locataire" required>
            <option selected disabled value="">Choisir...</option>
        </select>
        <div class="invalid-feedback">
            Locataire obligatoire
        </div>
    </div>

    <div class="col-md-4 col-lg-4 col-sm-4 col-xl-4">
        <label class="FormLabel">Mode de règlement</label>
        <select class="form-select ModeReglementSelect ModeReglementSelects" id="ModeReglementSelect" name="ModeReglement" required>
            <option selected disabled value="">Choisir...</option>
        </select>
        <input type="hidden" class="form-control VerifyChequeChoose" id="VerifyChequeChoose" name="VerifyChequeChoose">
        <div class="invalid-feedback">
            Mode de règlementre obligatoire
        </div>
    </div>

        <div class="col-md-4 col-lg-4 col-sm-4 col-xl-4">
        <label class="FormLabel">Montant règlement</label>
        <input type="text" min="0" class="form-control montantReglementLocataire" id="montantReglementLocataire" name="montantReglement" required>
        <div class="invalid-feedback">
            Montant obligatoire
        </div>
    </div>

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

        <div id="chequeComposant" class="chequeComposant" style="display:none">
            <div class="row g-3">
            
                <div class="col-md-12 col-sm-6 col-lg-6 col-xl-6">
                        <label class="FormLabel">Numéro de chèque</label>
                        <input type="text" id="NumeroCheque" name="NumeroCheque" class="form-control NumeroCheque">
                </div>

                <div class="col-md-12 col-sm-6 col-lg-6 col-xl-6">
                        <label class="FormLabel">Banque</label>
                        <select class="form-select NomBanque" id="NomBanque" name="NomBanque" >
                            <option selected disabled value="">Choisir...</option>
                        </select>
                </div>
            </div>
        </div>

    <div class="">
        <label for="" class="FormLabel">Observation</label>
        <textarea class="form-control ObservationReglement" id="ObservationReglement" name="ObservationReglement" id="" rows="3"></textarea>
    </div>


        <div class="row g-3">
            <div class="col-md-3">
                <label for="iban" class="FormLabel">Type document</label>
                <select class="form-select TypeDocumentSelect TypepieceSelect TypeDocumentSelectReglementLocataire" id="DocumentSelectReglementLocataire" required>
                        <option selected style="color:gray" value="0">Choisir...</option>
                 </select>
                 <div id="TypedocReglementLocataire" class="TypedocReglementLocataire FormLabel text-danger">
                  
                </div>
                <input type="file" class="form-control" id="fichierDocumentReglementLocataire" hidden>
            </div>
            <div class="col-md-3">
                <label for="bic" class="FormLabel">Référence document</label>
                <input type="text" class="form-control referenceDocReglementLocataire" id="referenceDocReglementLocataire">
                <div class="invalid-feedback">
                </div>
            </div>

            <div class="col-md-4" style="margin-top:33px">
               <input type="text" class="form-control" id="nomFichierChoisirReglementLocataire" value="Aucun fichier choisi..." readonly>
                <div id="fichierReglementLocataireInputHidden" class="fichierReglementLocataireInputHidden FormLabel text-danger"></div>
            </div>

            <div class="col-md-2" style="margin-top:30px;">
            <div style="float:right" class="d-flex">     
                <button  class="btn btn-danger rounded-pill animate__animated animate__wobble" id="btn-FichierDeleteReglementLocataire" style="display:none;margin-right:5px" title="Supprimer" type="button"><i data-feather="trash"></i></button>
                <button  style="margin-right:5px" class="btn btn-warning rounded-pill" id="btn-ajoutFichiersReglementLocataire" title="Choisir un fichier" type="button"><i data-feather="file"></i></button>
                <button  type="button" class="btn btn-secondary rounded-pill" id="btn-AjouterdocumentsReglementLocataire"  title="Ajouter"><i data-feather="plus-circle"></i></button>
            </div>
             
            </div>
        </div>

        <div class="table-responsive">
            <table id="FormTableDocumentTableReglementLocataire" class="table table-bordered mt-4">
                <thead>
                <tr>
                <th>#</th>
                <th>Type document</th>
                <th>Référence document</th>
                <th>Document</th>
                </tr>
                </thead>
            </table> 
        </div> 



     {{-- <div class="col-md-12">
            <input type="file" class="filepond" name="media[]" data-BienAddFille="FichierAjoutDeBien" multiple data-allow-reorder="true"
                data-max-file-size="3MB" data-max-files="3">
        </div> --}}

</div>