@csrf
        {{-- <div
            style="display:block; margin: 0 auto; border:2.5px solid #64C5B1; width:110px; height:110px; border-radius:60px; margin-bottom:12px;">

            <div id="PhotoZone" class="PhotoZone"
                style="display:block; margin: 0 auto; border:1px dashed #64C5B1; width:95px; height:95px; border-radius:60px; margin-top:5px;">

                <img class="imgPhoto " src="" alt="">
                <input type="file" id="photo" accept="image/*" class="inputPhoto" name="photoLocataire" hidden>

            </div>

            <div id="RemovePicture" style="display:none;background:green"
                class="animate animated animate__bounceIn cursor-pointer"> <i class="fa fa-times"
                    style="postion:absolute;margin-left:10px;margin-top:8px;color:#fff"></i> </div>

        </div> --}}
        <div class="row g-3">
               
        
                <div class="col-md-2">
                     <label for="" class="FormLabel">Matricule</label>
                     <input type="text" class="form-control matriculeLocataire"  id="matriculeLocataire" name="matriculeLocataire" readonly>
                     <input type="hidden" class="form-control matriculeNumeriqueLocataire" id="matriculeNumeriqueLocataire" name="matriculeNumeriqueLocataire" readonly>
                </div>

                 <div class="col-md-2">
                     <label for="CiviliteSelect" class="FormLabel">Civilité</label>
                    <select class="form-select CiviliteSelect" id="CiviliteSelect" name="Civilite" required>
                        <option selected disabled value="">Choisir...</option>

                    </select>
                    <div class="invalid-feedback">
                        Civilité obligatoire
                    </div>
                </div>

              <div class="col-md-3">
               <label for="nom" class="FormLabel">Nom</label>
                <input type="text" class="form-control nomLocataire" id="nom" name="nomLocataire" required>
                <div class="invalid-feedback">
                    Nom obligatoire
                </div>

            </div>

            <div class="col-md-3">
                <label for="nom" class="FormLabel">Prénom(s)</label>
                <input type="text" class="form-control PrenomLocataire" id="PrenomLocataire" name="PrenomLocataire" required>
                <div class="invalid-feedback">
                    Prénom obligatoire
                </div>
            </div>

             <div class="col-md-2">
                <label for="" class="FormLabel">Profession</label>
                <input type="text" class="form-control Professionlocataire" id="Professionlocataire" name="Professionlocataire">
                <div class="invalid-feedback">
                </div>
            </div>
            

            {{-- <div class="col-md-2">
                <label for="" class="FormLabel">Type de pièces</label>
                <select class="form-select TypepieceSelect" id="TypepieceSelect" name="Typepiece" required>
                    <option selected disabled value="">Choisir...</option>

                </select>
                <div class="invalid-feedback">
                   Type de pièce obligatoire
                </div> 
            </div>--}}

           
          
        </div>
             <div class="row g-3">
            <div class="col-md-3">
                    <label for="" class="FormLabel">Pays</label>
                    <select class="form-select PaysSelectParticulier Pselect2X" id="PaysSelectParticulier" name="Pays" required>
                        <option selected disabled value="">Choisir...</option>

                    </select>
                    <div class="invalid-feedback">
                        Pays obligatoire
                </div>
            </div>

              <div class="col-md-3">
                 <label for="" class="FormLabel">Ville</label>
                    <select class="form-select VilleSelectParticulier Pselect2X" id="VilleSelectParticulier" name="Ville" required>
                        <option selected disabled value="">Choisir...</option>

                    </select>
                    <div class="invalid-feedback">
                        Ville obligatoire
                </div>
            </div>

            <div class="col-md-3">
                <label for="codePostal" class="FormLabel">Code postal</label>
                <input type="text" class="form-control locataireCodePostal" id="codePostal" name="codePostal">

            </div>

            <div class="col-md-3">
                 <label for="AdressPostal" class="FormLabel">Adresse postale</label>
                <input type="text" class="form-control locataireAdressePostal" id="AdressPostal" name="locataireAdressePostal">
            </div>

          
        </div>

        <div class="row g-3">
            <div class="col-md-3">
                <label for="telephoneMobile" class="FormLabel">Téléphone mobile</label>
                <input type="text" class="form-control locatairetelephoneMobile" id="telephoneMobile"
                    name="telephoneMobile" required>
                <div class="invalid-feedback">
                    Téléphone mobile obligatoire
                </div>
            </div>
            <div class="col-md-3">
                <label for="telephoneFix" class="FormLabel">Téléphone fixe</label>
                <input type="text" class="form-control locatairetelephonefix" id="telephoneFix"
                    name="telephoneFix">
            </div>
            <div class="col-md-6">

                <label for="email" class="FormLabel">Email</label>
                <input type="text" class="form-control locataireemail" id="email" name="email">

            </div>

        </div>

        <div class="row g-3">
           

            <div class="col-md-6">
                <label for="iban" class="FormLabel">IBAN</label>
                <input type="text" class="form-control locataireIBAN" id="iban" name="iban">
                <div class="invalid-feedback">
                </div>
            </div>

            <div class="col-md-6">
                <label for="bic" class="FormLabel">BIC/SWIF</label>
                <input type="text" class="form-control locataireBIC" id="bic" name="bic">
                <div class="invalid-feedback">
                </div>
            </div>
        </div>

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

            {{-- <br>
            <div style="display:none" class="ZonePieceJointe todo-list"></div> --}}
        <br>

        <div class="d-flex">
            <h5>::. Documents</h5>
            <div class="gradient-background1" style="width:90%;height:1px;margin-top:13px;margin-left:3px"></div>
        </div>
        <div class="row g-3 mt-2">
            <div class="col-md-3">
                <label for="iban" class="FormLabel">Type document</label>
                <select class="form-select TypeDocumentSelect" id="DocumentSelectParticulier">
                        <option selected disabled value="0">Choisir...</option>
                 </select>
                 <small class="text-danger" style="font-size:10px;" id="typefichierLocataireParticulierRequired"></small>
                <input type="file" class="form-control" id="fichierDocumentParticulier" hidden>
            </div>
            <div class="col-md-3">
                <label for="bic" class="FormLabel">Référence document</label>
                <input type="text" class="form-control referenceDoc" id="referenceDocParticulier">
                <div class="invalid-feedback">
                </div>
            </div>

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

            <div class="col-md-2" style="margin-top:32px;">
            <div style="float:right" class="d-flex">
                
                <button  class="btn btn-danger rounded-pill animate__animated animate__wobble" id="btn-FichierDeleteParticulier" 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-ajoutFichierParticulier" title="Choisir un fichier" type="button"><i data-feather="file"></i></button>
                <button  type="button" class="btn btn-secondary rounded-pill" id="btn-AjoutParticulierBD"  title="Ajouter"><i data-feather="plus-circle"></i></button>
            </div>
             
            </div>
        </div>
        <div class="table-responsive">
        
            <table id="FormTableLocataireParticulier" 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" id="filepondLocataire" class="filepond" name="media[]" multiple
                data-allow-reorder="true" data-max-file-size="3MB">
        </div> --}}