@csrf

        <div class="row g-3">
                <div class="col-md-2">
                     <label for="" class="FormLabel">Matricule</label>
                    <input type="text" class="form-control maticuleProprietaire" id="maticuleProprietaire" name="maticuleProprietaire" readonly>
                    <input type="hidden" class="form-control maticuleNumeriqueProprietaire" id="maticuleNumeriqueProprietaire" name="maticuleNumeriqueProprietaire" 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 nomProprietaire" id="nom" name="nom" required>
                <div class="invalid-feedback">
                    Nom obligatoire
                </div>

            </div>

            <div class="col-md-5">
                <label for="nom" class="FormLabel">Prénom(s)</label>
                <input type="text" class="form-control PrenomProprietaire" id="PrenomProprietaire" name="PrenomProprietaire" required>
                <div class="invalid-feedback">
                    Prénom obligatoire
                </div>
            </div>
           
          
        </div>
             <div class="row g-3">
            <div class="col-xl-3">
                    <label for="" class="FormLabel">Pays</label>
                    <select class="form-select PaysSelect Pselect2X" id="PaysSelect" 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 VilleSelect Pselect2X" id="VilleSelect" 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 proprietaireCodePostal" id="codePostal" name="codePostal">
            </div>

            <div class="col-md-3">
                 <label for="AdressPostal" class="FormLabel">Adresse postale</label>
                <input type="text" class="form-control proprietaireAdressePostal" id="AdressPostal" name="proprietaireAdressePostal">
            </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 proprietairetelephoneMobile" 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 proprietairetelephonefix" id="telephoneFix"
                    name="telephoneFix">
            </div>
            <div class="col-md-6">
                <label for="email" class="FormLabel">Email</label>
                <input type="text" class="form-control proprietaireemail" id="email" name="email">

            </div>

        </div>

        <div class="row g-3 mb-3">
            <div class="col-md-6">
                <label for="iban" class="FormLabel">IBAN</label>
                <input type="text" class="form-control proprietaireIBAN" 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 proprietaireBIC" id="bic" name="bic">
                <div class="invalid-feedback">
                </div>
            </div>
        </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 TypepieceSelect" id="TypeDocument" name="TypeDocument">
                        <option selected disabled value="0">Choisir...</option>
                 </select>
                 <small class="text-danger" style="font-size:10x;" id="typefichierProprietaireParticulierRequired"></small>
                <input type="file" class="form-control"  id="fichierDocument" 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="referenceDoc" name="referenceDoc">
                <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-FichierDelete" 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-ajoutFichier" title="Choisir un fichier" type="button"><i data-feather="file"></i></button>
                <button  type="button" class="btn btn-secondary rounded-pill" id="btn-AjoutBD"  title="Ajouter"><i data-feather="plus-circle"></i></button>
            </div>
             
            </div>
        </div>

        <table id="tableLorsInsertionProprietaireParticulier" 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>  

        <input type="hidden" class="form-control IDproprietaire" value="0" id="IDproprietaire" name="IDproprietaireInput">
        <input type="hidden" class="form-control PhotoProfilInputHidden" value="0" id="PhotoProfilInputHidden"  name="PhotoProfilInputHidden">
       

            <br>
            {{-- <div style="display:none" class="ZonePieceJointe todo-list"></div> --}}
        <br>
        {{-- <div class="col-md-12">
            <input type="file" id="filepondProprietaire" class="filepond" name="media[]" multiple
                data-allow-reorder="true" data-max-file-size="3MB">
        </div> --}}