@php
  $D_Creation_locataire = session()->get('D_Creation_locataire');
  $D_Modification_locataire = session()->get('D_Modification_locataire');
  $D_Suppression_locataire = session()->get('D_Suppression_locataire');
@endphp
@include('../header')

<main class="main" id="top">
    @include('../navigation')

    <div class="content">

        @include('../loading')

        <div class="d-flex justify-content-between">
            <h4> <i class="fas fa-fan"></i> Listes des locataires</h4>

             <div class="d-flex">
                 <button type="button" id="ImprimerListeLocataire" style="margin-right:8px;"  class="btn btn-success btn-sm rounded-pill"><i data-feather="printer"></i>
                        Impression
                </button>
                  <span id="FetchInputFilname" style="margin-right:8px; display:none"></span>
                
                  <form id="importEXcel" method="post" enctype="multipart/form-data" class="Excelform">
                    @csrf
                    <input type="file" accept="csv/*" name="fichierExcel" id="ExcelInput" class="form-control" hidden>
                  </form>
                  
                  <button type="button" id="btn-callExcel" style="margin-right:8px;" class="btn btn-warning btn-sm rounded-pill"><i
                    data-feather="file"></i> Excel</button>

                    <button type="button" style="display:none;margin-right:8px" id="btn-ExcelDownload" class="btn btn-warning btn-sm rounded-pill animate__animated animate__wobble"><i
                    data-feather="arrow-down"></i>Intégrer</button>

                    <button type="button" style="display:none;margin-right:8px" id="btn-ExcelDelete" class="btn btn-danger btn-sm rounded-pill animate__animated animate__wobble"><i
                    data-feather="trash"></i></button>
           
                   @if($D_Creation_locataire)
                       <button type="button" id="btn-addLocataireCallModal" class="btn btn-success btn-sm rounded-pill" ><i data-feather="plus-circle"></i> Ajouter</button>
                   @endif
                </div>

           
           
        </div>
        <hr>

        <div class="card card-shadow mb-4">
            <div class="card-body">

            <div class="row g-3">
                        <div class="col-md-2">
                        
                        </div>
                        <div class="col-md-2">
                            <label for="" class="FormLabel">Type Locataire</label>
                            <select class="form-select TypelocataireSelect Pselect2" id="TypelocataireSelect">
                                    <option selected style="color:gray" value="0">Tous</option>
                                    <option   value="1">Personne physique</option>
                                    <option   value="2">Personne morale</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                                 <label for="" class="FormLabel">Pays</label>
                            <select class="form-select PaysSelect Pselect2" id="PaysSelect">
                                    <option selected style="color:gray" value="0">Tous</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                                 <label for="" class="FormLabel">Villes</label>
                            <select class="form-select VilleSelect Pselect2" id="VilleSelect" >
                                    <option selected style="color:gray" >Tous</option>
                            </select>
                        </div>

                         <div class="col-md-2">
                         <button class="btn btn-secondary btn-sm mt-4" id="btn-filter"> <i class="fa fa-search"></i> </button>
                         </div>
                        <div class="col-md-2"></div>
                    </div>

                <div class="table-responsive">
                    <table id="LocataireDatatable" class="table table-striped w-100">
                        <thead class="tableauEntete">
                            <tr>
                                <th>Actions</th>
                                <th>Locataire</th>
                                <th>Profession</th>
                                <th>Type</th>
                                <th>Téléphone mobile</th>
                                <th>Téléphone fixe</th>
                                <th>Email</th>
                                <th>Pays</th>
                                <th>Ville</th>
                                <th>IBAN</th>
                                <th>BIC/SWIF</th>
                                <th>Adresse postale</th>
                                <th>Code postale</th>
                                <th>Info création</th>

                            </tr>
                        </thead>

                    </table>
                </div>

            </div>
        </div>

        <div class="modal fade" id="ModalLocataire"  data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title text-white" id="modalTitreLocataire"></h5>
                    
                        <button class="btn p-1 FermerCreationParticulier" type="button" ><span class="fas fa-times fs--1 text-white"></span></button>
                        <button class="btn p-1 FermerModificationParticulier" style="display:none" type="button"><span class="fas fa-times fs--1 text-white"></span></button>
                    </div>
                    <div class="modal-body">

                        <form class="formLocataireAdd needs-validation p-0" method="POST" novalidate>
                            @include('FICHES/locataireForm')
                    </div>
                    <div class="modal-footer">

                        <button class="btn btn-outline-danger FermerCreationParticulier" type="button">Fermer</button>
                        <button type="button" class="btn btn-outline-danger FermerModificationParticulier" id="FermerModificationParticulier" style="display:none">Fermer</button>

                        <button id="btn-addLocataire" class="btn btn-success" type="submit">Enregistrer</button>
                        <button id="btn-UpdateLocataire" class="btn btn-success" style="display:none" type="submit">Modifier</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>


        <div class="modal fade" id="LocataireEntrepriseModal"  data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title text-white" id="staticBackdropLabel">Ajout de nouveau locataire</h5>

                        <button class="btn p-1 FermerCreation" type="button" ><span class="fas fa-times fs--1 text-white"></span></button>
                        <button class="btn p-1 FermerModification" style="display:none" type="button"><span class="fas fa-times fs--1 text-white"></span></button>
                                
                    </div>
                    <div class="modal-body">
                        <form class="FormAddLocataireEntreprise needs-validation p-0" method="POST" novalidate>
                                @csrf
                                {{-- <div class="firstRoundPhoto">

                                    <div id="PhotoZones" class="PhotoZones"
                                        style="display:block; margin: 0 auto; border:1px dashed #64C5B1; width:95px; height:95px; border-radius:60px; margin-top:5px;">
                                        <img class="imgPhotos" id="imgPhotos" src="" alt="">
                                        <input type="file" id="photo"  accept="image/*" class="inputPhotofile" name="inputPhotofileEntreprise" 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> --}}
                                
                                  <input type="hidden" class="form-control LocataireEntrepriseInput" value="0" id="LocataireEntrepriseInput"name="LocataireEntrepriseInput">
                                  <input type="hidden" class="form-control PhotoProfilEntrepriseInputHidden" id="PhotoProfilEntrepriseInputHidden"  name="PhotoProfilEntrepriseInputHidden">

                                <div class="row g-3">
                                
                                    <div class="col-md-2">
                                        <label for="nom" 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-4">
                                        <label for="nom" class="FormLabel">Raison sociale</label>
                                        <input type="text" class="form-control RaisonSocial" id="RaisonSocial" name="RaisonSocial" required>
                                        <div class="invalid-feedback">
                                            Nom du propriétaire obligatoire
                                        </div>
                                    </div>

                                    <div class="col-md-2">
                                        <label for="TypeLocataireSelect" class="FormLabel">Type de société</label>
                                        <select class="form-select TypeSocieteSelect" id="TypeSocieteSelect" name="TypeSocieteSelect" required>
                                            <option selected disabled value="">Choisir...</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Type de société obligatoire
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="" class="FormLabel">Email</label>
                                       <input type="text" class="form-control EmailEntreprise" id="EmailEntreprise" name="EmailEntreprise">
                                    </div>
                                </div>

                                     <div class="row g-3">
                                
                                          <div class="col-md-4">
                                                <label for="" class="FormLabel">Téléphone</label>
                                                <input type="text" class="form-control telephoneEntreprise" id="telephoneEntreprise" name="telephoneEntreprise">
                                                <div class="invalid-feedback">
                                            
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <label for="" class="FormLabel">Code postal</label>
                                                <input type="text" class="form-control CodepostalEntreprise" id="CodepostalEntreprise" name="CodepostalEntreprise">
                                                <div class="invalid-feedback">
                                            
                                                </div>
                                            </div>


                                            <div class="col-md-4">
                                                <label for="" class="FormLabel">Adresse postale</label>
                                                <input type="text" class="form-control AdressepostaleEntreprise" id="AdressepostaleEntreprise" name="AdressepostaleEntreprise">
                                                <div class="invalid-feedback">
                                            
                                                </div>
                                            </div>

                                    </div>

                                 <div class="row g-3">
                                
                                    <div class="col-md-3">
                                        <label for="" class="FormLabel">RCCM</label>
                                        <input type="text" class="form-control Rccm" id="Rccm" name="Rccm" required>
                                        <div class="invalid-feedback">
                                           RCCM obligatoire
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <label for="TypeLocataireSelect" class="FormLabel">Numéro compte contribuable</label>
                                        <input type="text" class="form-control CpteContribuable" id="CpteContribuable" name="CpteContribuable" required>
                                        <div class="invalid-feedback">
                                            Numéro compte contribuable obligatoire
                                        </div>
                                    </div>

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

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

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

                                        <div class="col-md-6">
                                            <label for="BicGerantSociete" class="FormLabel">BIC/SWIF</label>
                                            <input type="text" class="form-control BicGerantSociete" id="BicGerantSociete" name="BicGerantSociete" >
                                            <div class="invalid-feedback">
                                            </div>
                                        </div>
                                
                                </div>
                                <h5 class="mt-3">::. Gérant</h5>
                                <div class="mt-3" style="width:100%; border:0.2px solid gray; border-radius:5px;padding:20px;">
                                    <div class="row g-4">
                                        <div class="col-md-7 mt-5">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" role="switch" id="QuestionCheckbox" type="checkbox" />
                                                <label class="form-check-label" for="QuestionCheckbox">Est-ce que le gérant existe en tant que propriétaire directe ?</label> <label class="form-check-label" id="confirmLabel">Si oui veuillez sectionner dans la liste</label>
                                            </div>
                                        </div>

                                        <div style="display:none" id="ZoneInputListeProriétaire" class="col-md-5">
                                             
                                            <select class="form-select LocataireSelect" id="LocataireSelect" name="GerantSelect">
                                                <option selected disabled value="">Choisir...</option>
                                            </select>
                                            <div class="invalid-feedback">
                                              
                                            </div>
                                        </div>
                                    
                                    </div>
                                    <div class="row g-3">
                                        <div class="col-md-3">
                                            <label for="NomGerantSociete" class="FormLabel">Nom</label>
                                            <input type="text" class="form-control NomGerantSociete" id="NomGerantSociete" name="NomGerantSociete" required>
                                            <div class="invalid-feedback">
                                                Nom du gérant obligatoire
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <label for="PrenomGerantSociete" class="FormLabel">Prénom</label>
                                            <input type="text" class="form-control PrenomGerantSociete" id="PrenomGerantSociete" name="PrenomGerantSociete" required>
                                            <div class="invalid-feedback">
                                                Prénom du gérant obligatoire
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <label for="EmailGerantSociete" class="FormLabel">Email</label>
                                            <input type="text" class="form-control EmailGerantSociete" id="EmailGerantSociete" name="EmailGerantSociete">
                                            <div class="invalid-feedback">
                                        
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <label for="NumeroGerantSociete" class="FormLabel">Téléphone mobile</label>
                                            <input type="text" class="form-control NumeroGerantSociete" id="NumeroGerantSociete" name="NumeroGerantSociete" required>
                                            <div class="invalid-feedback">
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="d-flex mt-3">
                                        <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 ">
                                        <div class="col-md-3">
                                            <label for="" class="FormLabel">Type document</label>
                                            <select class="form-select TypeDocumentSelect" id="TypeDocumentSelect" name="TypeDocumentSelect">
                                                    <option selected disabled value="0">Choisir...</option>
                                            </select>
                                            <small class="text-danger" style="font-size:10x;" id="typefichierLocataireEntrepriseRequired"></small>
                                            <input type="file" class="form-control fichierDocument" name="fichierDocument" id="fichierDocument" hidden>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="" class="FormLabel">Référence document</label>
                                            <input type="text" class="form-control referenceDocEntreprise" id="referenceDocEntreprise">
                                            <div class="invalid-feedback">
                                            </div>
                                        </div>

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

                                        <div class="col-md-2" style="margin-top:33px;">
                                        <div style="float:right" class="d-flex">
                                            
                                            <button  class="btn btn-danger rounded-pill animate__animated animate__wobble" id="btn-FichierDeleteEntreprise" 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-ajoutFichierEntreprise" title="Choisir un fichier" type="button"><i data-feather="file"></i></button>
                                            <button  type="button" class="btn btn-secondary rounded-pill" id="btn-AjoutEntrepriseBD"  title="Ajouter"><i data-feather="plus-circle"></i></button>
                                        </div>
                                        
                                        </div>
                                    </div>

                                    <table id="FormTableLocataireEntreprise" 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="modal-footer">
                        <button class="btn btn-outline-danger FermerCreation" type="button">Fermer</button>
                        <button type="button" class="btn btn-outline-danger FermerModification" id="FermerModification" style="display:none">Fermer</button>
                      
                        <button class="btn btn-success" type="submit">Enregistrer</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="LocataireDetailModal" tabindex="-1" aria-labelledby="staticBackdropLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title text-white" id="staticBackdropLabel">Fiche locataire</h5>
                        <button class="btn p-1" type="button" data-bs-dismiss="modal" aria-label="Close"><span
                                class="fas fa-times fs--1 text-white"></span></button>
                    </div>
                         <div class="modal-body">

                        <div class="card card-shadow">
                        
                            <div class="card-body">

                            <div id="proprietaireInfos" class="d-flex flex-wrap" >
                                
                            </div> 

                                 <hr>
                           <div class="d-flex flex-wrap justify-content-center animate__animated animate__zoomIn">
                            <div style="margin-right:15px;font-weight:bold">Total facture : <span style="color:green" id="totalFactureLocataireComplet">0</span></div>
                            <div style="margin-right:15px;font-weight:bold">Total règlement :  <span style="color:orange" id="totalReglementLocataireComplet" >0</span></div>
                            <div style="font-weight:bold">Solde :  <span style="color:red" id="SoldeLocataireComplet">0</span></div>
                           </div>
                            </div>
                        </div>
                           
                    
                      <ul class="nav nav-underline" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation"><a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#tab-home" role="tab" aria-controls="tab-home" aria-selected="false" tabindex="-1">Documents</a></li>

                         <li class="nav-item" role="presentation"><a class="nav-link " id="contact-Location" data-bs-toggle="tab" href="#tab-Location" role="tab" aria-controls="tab-Location" aria-selected="true">Locations</a></li>

                        <li class="nav-item" role="presentation"><a class="nav-link " id="contact-tab" data-bs-toggle="tab" href="#tab-contact" role="tab" aria-controls="tab-contact" aria-selected="true">Factures location</a></li>
                        <li class="nav-item" role="presentation"><a class="nav-link" id="reglement-tab" data-bs-toggle="tab" href="#tab-reglement" role="tab" aria-controls="tab-reglement" aria-selected="true">Règlements</a></li>
                      
                      </ul>
                      <div class="tab-content mt-3" id="myTabContent">
                        <div class="tab-pane fade active show" id="tab-home" role="tabpanel" aria-labelledby="home-tab">
                            <div class="table-responsive">
                                <table id="DocumentTable" class="table table-light">
                                <thead>
                                <th>#</th>
                                <th>Type document</th>
                                <th>Référence</th>
                                <th>Libellé</th>
                                </thead>
                                </table>
                            </div>
                        
                        </div>


                        <div class="tab-pane fade " id="tab-Location" role="tabpanel" aria-labelledby="Location-tab">

                                <div class="d-flex justify-content-between mb-2">
                                    <div>Total : &nbsp;<span class="text-warning" id="TotalLocation" style="margin-right:15px;"></span></div>
                                </div>

                                <div class="table-responsive">
                                    <table id="LocationLocataireTable" class="table table-light">
                                        <thead>
                                        <th>Date</th>
                                        <th>Date fin</th>
                                        <th>Référence</th>
                                        <th>Montant</th>
                                        <th>Bien</th>
                                      
                                        </thead>
                                    </table>
                                </div>
                               
                        </div>

                        <div class="tab-pane fade " id="tab-contact" role="tabpanel" aria-labelledby="contact-tab">

                                    <div class="d-flex flex-wrap">
                                        <span>Total : </span>&nbsp;<span class="text-warning" id="montantTotalFacture" style="margin-right:15px"></span>
                                        <span>Total réglé : </span> &nbsp;<span class="text-success" id="montantTotalRegle" style="margin-right:15px;"></span>
                                         <span>Total restant : </span> &nbsp;<span  class="text-danger" id="montantrestant" ></span>
                                    </div><br>
                                   <div class="d-flex justify-content-end mb-2" style="margin-top:-50px">
                                   <button type="button" id="recuperationFactureCoche" class="btn btn-warning">Régler les factures cochés</button>
                                   </div> 
                                    <input type="hidden" id="IdLocataire">
                                <div class="table-responsive">
                                    <table id="FactureTable" class="table table-light">
                                        <thead>
                                        <th>
                                            <div class="form-check d-flex justify-content-center">
                                                <input class="form-check-input my-checkbox cursor-pointer"  onClick="toggle(this)" id="checkAll" type="checkbox" value="" />
                                            </div>
                                        </th>
                                        <th>Date</th>
                                        <th>Période</th>
                                        <th>Référence</th>
                                        <th>Montant</th>
                                        <th>Montant réglé</th>
                                        <th>Montant restant</th>
                                        <th>Propriétaire</th>
                                        <th>Bien</th>
                                        </thead>
                                    </table>
                                </div>
                               
                        </div>

                        <div class="tab-pane fade" id="tab-reglement" role="tabpanel" aria-labelledby="reglement-tab">

                            <div class="d-flex justify-content-between mb-2">
                                    <div>Total : &nbsp;<span class="text-warning" id="totalReglement" style="margin-right:15px;"></span></div>
                                    <div>Total utilisé : &nbsp;<span class="text-success" id="totalUtilise" style="margin-right:15px;"></span></div>
                                    <div>Solde : &nbsp;<span class="text-danger" id="totalSolde"></span>  </div>

                                <div style="float:right">
                                         <button type="button" id="CallmodalReglementLocataire" class="btn btn-success">
                                          <i class="fa fa-plus-circle"></i>  Faire un Règlement
                                         </button>
                                </div>
                               
                            </div>
                        
                        <div class="table-responsive">

                                <table id="ReglementTable" class="table table-light">
                                    <thead>
                                    <th>#</th>
                                     <th>Date</th>
                                    <th>Référence</th>
                                    <th>Montant</th>
                                    <th>Montant utilisé</th>
                                    <th>Solde</th>
                                    </thead>
                                </table>
                        </div>
                        </div>
                      </div>

                    </div>
                    <div class="modal-footer">

                        <button class="btn btn-outline-danger" type="button" data-bs-dismiss="modal">Fermer</button>

                    </div>
                 
                </div>
            </div>
        </div>

         <div class="modal fade" id="ModalFactureCheckbox"  data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title text-white modalTitreLocataire" ></h5>
                        <button class="btn p-1" data-bs-dismiss="modal" aria-label="Close" type="button" ><span class="fas fa-times fs--1 text-white"></span></button>
                    </div>
                    <div class="modal-body">

                        <div class="card card-shadow">

                            <div class="card-body">

                                    <div class="d-flex flex-wrap">

                                        <div style="margin-right:10px;">
                                            <label for="ReglementLocataireSelect" class="FormLabel">Veuillez sélectionner un règlement</label>
                                            <select class="form-select ReglementLocataireSelect" id="ReglementLocataireSelect" name="ReglementLocataireSelect" required>
                                                <option selected disabled value="">Choisir...</option>
                                            </select>
                                            <div class="invalid-feedback">
                                                Veuillez sélectionner un règlement
                                            </div>
                                          <input type="hidden" value="0" id="GetIdreglementInputHidden">
                                        </div>
                                    
                                        <div style="margin-right:10px;margin-top:25px;">
                                        <span>Montant règlement</span> : <span id="montantRL"> 0 F</span>
                                        </div>
                                        <div style="margin-right:10px;margin-top:25px;">
                                        <span>Total réglé</span> : <span id="montantregleL"> 0 F </span>
                                        </div>

                                        <div style="margin-right:10px;margin-top:25px;">
                                            <span>Montant restant</span> : <span id="montantRestantL"> 0 F </span>
                                        </div>
                                    </div>
                            
                            </div>
                        </div>
                     <br>

                        <div class="table-responsive">
                                    <table id="FactureCheckbox" class="table table-light">
                                        <thead>
                                        <th>Date</th>
                                        <th>Référence</th>
                                        <th>Montant</th>
                                        <th>Montant réglé</th>
                                        <th>Montant restant</th>
                                        <th>Montant</th>
                                        
                                        </thead>
                                    </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                    
                        <button class="btn btn-outline-danger" id="FermerModalReglementLocataire" data-bs-dismiss="modal" type="button">Fermer</button>
                        <button class="btn btn-success" id="paiementFacture"  type="button">Valider</button>
                    </div>
                    
                </div>
            </div>
        </div>


        <div class="modal fade" id="ModalReglementLocataire"  data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title text-white" id="Titremodal"></h5>
                        <button class="btn p-1 CloseModalBtn FermerCreationReglementLocataire" type="button"><span class="fas fa-times fs--1 text-white"></span></button>
                        <button type="button" class="btn btn-outline-danger CloseModalBtn FermerModificationReglementLocataire" id="FermerModificationReglementLocataire" style="display:none">Fermer</button>
                    </div>
                    <div class="modal-body">

                        <form class="formReglementAddInLocatairePage  needs-validation p-0" method="POST" novalidate>
                            
                                    @include('OPERATIONS/FORMS/ReglementLocataireForm') 
                        
                    </div>
                    <div class="modal-footer">
                
                        <button class="btn btn-outline-danger FermerCreationReglementLocataire" type="button">Fermer</button>
                        <button type="button" class="btn btn-outline-danger FermerModificationReglementLocataire" id="FermerModificationReglementLocataire" style="display:none">Fermer</button>
                        <button class="btn btn-success" type="submit">Enregistrer</button>
                    </div>
                   </form>
                </div>
            </div>
        </div>
       
        @include('../primary_footer')

    </div>

    @include('../chatblock')

</main>

@include('../rightbar')

@include('../footer')

<script>
    $(document).ready(function() {
        $('.nomPage').text('Locataires')

          $('.modal').each(function() {
            $(this).find('.Pselect2X').select2({
                dropdownParent: $(this),
                width: '100%' 
            });
         })

        $("#LocataireDatatable").DataTable({
            language: {
                processing: false,
                search: "Rechercher&nbsp;:",
                lengthMenu: "Afficher :&nbsp;  _MENU_&nbsp;lignes",
                info: "Affichage de ligne _START_ &agrave; _END_ sur _TOTAL_&nbsp;lignes",
                infoEmpty: "Affichage de ligne 0 &agrave; 0 sur 0&nbsp;lignes",
                infoFiltered: "(filtr&eacute; de _MAX_&nbsp;lignes au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: '<img src="assets/img/spot-illustrations/empty.png" style="width:500px;"/><br>Aucune donnée disponible dans le tableau',

                paginate: {
                    first: "",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: ""
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            },
            pagingType: 'full_numbers',
            pageLength: 25,
            columnDefs:[

                {
                   targets:[0,8],
                    className:"text-center"
                },

                {
                   targets:[0],
                    className:"tblWidth-3"
                },
                 {
                   targets:[1],
                    className:"tblWidth-0"
                },
                {
                   targets:[3,4,5,6,7,8,9,10,11,12],
                    className:"tblWidth-2 text-center"
                },
                {
                   targets:[13],
                    className:"tblWidth-1"
                }
            ]
        });
        $("#DocumentTable").DataTable({
           
           searching:false,
           "lengthChange": false,
            language: {
                processing: false,
                search: "Rechercher&nbsp;:",
                lengthMenu: "Afficher :&nbsp;  _MENU_&nbsp;lignes",
                info: "Affichage de ligne _START_ &agrave; _END_ sur _TOTAL_&nbsp;lignes",
                infoEmpty: "Affichage de ligne 0 &agrave; 0 sur 0&nbsp;lignes",
                infoFiltered: "(filtr&eacute; de _MAX_&nbsp;lignes au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: '<img src="assets/img/spot-illustrations/empty.png" style="width:500px;"/><br>Aucune donnée disponible dans le tableau',

                paginate: {
                    first: "",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: ""
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            },
            pagingType: 'full_numbers',
            pageLength: 25,
           columnDefs:[
                {
                    target:[0,1,2],
                    className:"text-center"
                }
            ]
        });

        $("#FactureTable").DataTable({
           
           searching:false,
           "lengthChange": false,
            language: {
                processing: false,
                search: "Rechercher&nbsp;:",
                lengthMenu: "Afficher :&nbsp;  _MENU_&nbsp;lignes",
                info: "Affichage de ligne _START_ &agrave; _END_ sur _TOTAL_&nbsp;lignes",
                infoEmpty: "Affichage de ligne 0 &agrave; 0 sur 0&nbsp;lignes",
                infoFiltered: "(filtr&eacute; de _MAX_&nbsp;lignes au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: '<img src="assets/img/spot-illustrations/empty.png" style="width:500px;"/><br>Aucune donnée disponible dans le tableau',

                paginate: {
                    first: "",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: ""
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            },
            pagingType: 'full_numbers',
            pageLength: 10,
             columnDefs:[
                {
                    target:[0],
                    className:"text-center tblWidth-3"
                },
                {
                    target:[3],
                    className:"text-center tblWidth-2"
                },
                {
                    target:[1],
                    className:"text-center"
                },
                {
                    target:[2],
                    className:"text-center tblWidth-2"
                },
                 {
                    target:[4,5,6],
                    className:"text-end tblWidth-2"
                },
                {
                    target:[7,8],
                    className:"tblWidth-1"
                },
                {
                    target:[1],
                    render: function(data, type, row) {
                                        var dateParts = data.split('/');
                                        var dateObject = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
                                        
                                        if (type === 'sort') {
                                            return dateObject.toISOString();
                                        }
                                        
                                        // Afficher la date dans le format personnalisé
                                        return data;
                    }
                },
                
                

            ],
            order:[['0','desc']]
           
        });

        $("#FactureCheckbox").DataTable({
           
           searching:false,
           "lengthChange": false,
            language: {
                processing: false,
                search: "Rechercher&nbsp;:",
                lengthMenu: "Afficher :&nbsp;  _MENU_&nbsp;lignes",
                info: "Affichage de ligne _START_ &agrave; _END_ sur _TOTAL_&nbsp;lignes",
                infoEmpty: "Affichage de ligne 0 &agrave; 0 sur 0&nbsp;lignes",
                infoFiltered: "(filtr&eacute; de _MAX_&nbsp;lignes au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: '<img src="assets/img/spot-illustrations/empty.png" style="width:500px;"/><br>Aucune donnée disponible dans le tableau',

                paginate: {
                    first: "",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: ""
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            },
            pagingType: 'full_numbers',
            pageLength: 10,
             columnDefs:[
                {
                    target:[0],
                    className:"text-center tblWidth-3"
                },
                
                {
                    target:[1],
                    className:"text-center"
                },
           
                 {
                    target:[2,3,4],
                    className:"text-end tblWidth-3"
                },
                
                {
                    target:[0],
                    render: function(data, type, row) {
                                        var dateParts = data.split('/');
                                        var dateObject = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
                                        
                                        if (type === 'sort') {
                                            return dateObject.toISOString();
                                        }
                                        
                                        // Afficher la date dans le format personnalisé
                                        return data;
                    }
                },
                
                

            ],
            order:[['0','desc']]
           
        });

         $("#ReglementTable").DataTable({
           
           searching:false,
           "lengthChange": false,
            language: {
                processing: false,
                search: "Rechercher&nbsp;:",
                lengthMenu: "Afficher :&nbsp;  _MENU_&nbsp;lignes",
                info: "Affichage de ligne _START_ &agrave; _END_ sur _TOTAL_&nbsp;lignes",
                infoEmpty: "Affichage de ligne 0 &agrave; 0 sur 0&nbsp;lignes",
                infoFiltered: "(filtr&eacute; de _MAX_&nbsp;lignes au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: '<img src="assets/img/spot-illustrations/empty.png" style="width:500px;"/><br>Aucune donnée disponible dans le tableau',

                paginate: {
                    first: "",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: ""
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            },
            pagingType: 'full_numbers',
            pageLength: 25,
            columnDefs:[
                {
                    target:[3,4,5],
                    className:"text-end"
                },
                {
                    target:[0,1,2],
                    className:"text-center"
                },
                {
                    target:[1],
                    render: function(data, type, row) {
                                        var dateParts = data.split('/');
                                        var dateObject = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
                                        
                                        if (type === 'sort') {
                                            return dateObject.toISOString();
                                        }
                                        
                                        // Afficher la date dans le format personnalisé
                                        return data;
                    }
                },
            
            ],
            order:[['0','desc']]
         });

        $("#LocationLocataireTable").DataTable({
           
           searching:false,
           "lengthChange": false,
            language: {
                processing: false,
                search: "Rechercher&nbsp;:",
                lengthMenu: "Afficher :&nbsp;  _MENU_&nbsp;lignes",
                info: "Affichage de ligne _START_ &agrave; _END_ sur _TOTAL_&nbsp;lignes",
                infoEmpty: "Affichage de ligne 0 &agrave; 0 sur 0&nbsp;lignes",
                infoFiltered: "(filtr&eacute; de _MAX_&nbsp;lignes au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: '<img src="assets/img/spot-illustrations/empty.png" style="width:500px;"/><br>Aucune donnée disponible dans le tableau',

                paginate: {
                    first: "",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: ""
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            },
            pagingType: 'full_numbers',
            pageLength: 25,
            columnDefs:[
            
                {
                    target:[0,1,2],
                    className:"text-center"
                },
                 {
                    target:[3],
                    className:"text-end"
                }
            
            ]
           
         });
         

        //:::::::::::::::::::::::::::::: FORM TABLE ::::::::::::::::::::::::::::::::

        $("#FormTableLocataireEntreprise").DataTable({
           
           searching:false,
           "lengthChange": false,
            language: {
                processing: false,
                search: "Rechercher&nbsp;:",
                lengthMenu: "Afficher :&nbsp;  _MENU_&nbsp;lignes",
                info: "Affichage de ligne _START_ &agrave; _END_ sur _TOTAL_&nbsp;lignes",
                infoEmpty: "Affichage de ligne 0 &agrave; 0 sur 0&nbsp;lignes",
                infoFiltered: "(filtr&eacute; de _MAX_&nbsp;lignes au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: '<img src="assets/img/spot-illustrations/empty.png" style="width:500px;"/><br>Aucune donnée disponible dans le tableau',

                paginate: {
                    first: "",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: ""
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            },
            pagingType: 'full_numbers',
            pageLength: 25,
            columnDefs:[
                {
                    target : 0,
                    className : 'text-center'
                }
            ]
           
        });

        $("#FormTableLocataireParticulier").DataTable({
           
           searching:false,
           "lengthChange": false,
            language: {
                processing: false,
                search: "Rechercher&nbsp;:",
                lengthMenu: "Afficher :&nbsp;  _MENU_&nbsp;lignes",
                info: "Affichage de ligne _START_ &agrave; _END_ sur _TOTAL_&nbsp;lignes",
                infoEmpty: "Affichage de ligne 0 &agrave; 0 sur 0&nbsp;lignes",
                infoFiltered: "(filtr&eacute; de _MAX_&nbsp;lignes au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: '<img src="assets/img/spot-illustrations/empty.png" style="width:500px;"/><br>Aucune donnée disponible dans le tableau',

                paginate: {
                    first: "",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: ""
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            },
            pagingType: 'full_numbers',
            pageLength: 25,
            columnDefs:[
                {
                    target : 0,
                    className : 'text-center'
                }
            ]
           
        });
        

    })
</script>
<script>
    var photoZonex = document.querySelector('.PhotoZones');
    var inputPhotoPersonnelx = document.querySelector('.inputPhotofile');
    var ImgPhotos = document.querySelector('.imgPhotos');
    photoZonex.addEventListener('click', () => {
        inputPhotoPersonnelx.click();
       
    })

    inputPhotoPersonnelx.addEventListener('change', function() {
        var clickFilex = this.files[0];
        if (clickFilex) {
            ImgPhotos.style = "display:block";
            var reader = new FileReader();
            reader.readAsDataURL(clickFilex);
            reader.onloadend = function() {
                var result = reader.result;
                let src = this.result;
                ImgPhotos.src = src;
                ImgPhotos.alt = clickFileX.name
            }

        }

    })
</script>

<script>
    $(document).ready(function() {

        recuperationCivilite();
        recuperationLocataire();
        matriculeLocataire();
        TypeSocieteSelect();
        recuperationPays();
        recuperationTypedePiece();
        //recuperationListeComboProprietaire();
        referenceReglement()
      
        recuperationDocumentLocataireParticulier();
        recuperationDocumentLocataireEntreprise();
        Filepond();
        var jc ='';
        var modificationDocumentStatut= false;
        var modificationDocumentStatutParticulier = false;
         var tabIDFacture = [];
        $('.nomLocataire').on('input',function(){
            $(this).css('text-transform','uppercase')
        })

        $('.PrenomLocataire').on('input',function(){
                    $(this).css('text-transform','uppercase')
        })
        const inputElement = document.querySelector('input[name="media[]"]');
        const pond = FilePond.create( inputElement);
        $('#btn-addLocataireCallModal').on('click',function(){

             $('.FormAddLocataireEntreprise')[0].reset();
             $('.formLocataireAdd')[0].reset();
              jc =  $.confirm({
                            title: '',
                            content: '<div class="d-flex flex-row flex-wrap justify-content-around align-items-center mt-3 mb-2"><div class="card card-shadow cursor-pointer text-center" style="width:150px;" id="CreerEtreprise"> <div class="card-body"> <i class="fa fa-home"></i><br> Entreprise </div> </div>  <div class="card card-shadow cursor-pointer text-center" style="width:150px;" id="CreerParticulier"><div class="card-body"> <i class="fa fa-user"></i><br> Particulier </div></div></div>',
                            type: 'red',
                            backgroundDismiss: true,
                            onContentReady: function () {
                                var self = this;
                                this.setContentPrepend('');
                            },
                            buttons: {
                                fermer: {
                                    text: 'Fermer',
                                },
                            },
                            columnClass: 'small',
                    });

            
            $('.IDLocataireInput').val(0)
            $('.PhotoProfilInputHidden').val(0)
            matriculeLocataire();
            $('#btn-UpdateLocataire').css('display','none')
            $('#btn-addLocataire').css('display','block')
            $('.ZonePieceJointe').html('')
        })
   
        $('#RemovePicture').on('click', function() {
            $('.imgPhoto').attr('src', 'assets/img/white.png')
            $('.imgPhoto').attr('alt', '')
            $('.inputPhoto').val('');
            $(this).css('display', 'none')
        })

        $('#photo').on('change', function() {

            $('#RemovePicture').css({
                'border-radius': '120px',
                'display': 'block',
                'margin-top': '-42px',
                'width': '30px',
                'height': '30px',
                'margin-left': '38px'
            })
        })

        $(document).on('click', '#ModifierLocataire', function() {

            $('#modalTitreLocataire').text('Modification locataire')
            $('#btn-UpdateLocataire').css('display','block')
            $('#btn-addLocataire').css('display','none')
            var IdLocataire = $(this).attr('data-id');
               var docAddtable = $('#FormTableLocataireParticulier').DataTable();
               var docAddtableEntreprise = $('#FormTableLocataireEntreprise').DataTable();

            MesrequetesAjax("{{ route('LocataireParId.recuperation') }}", "GET", {
                IDLocataire: IdLocataire
            }, null, true, "JSON", function(resp) {

                $('.Civilite').html('');
                var civilite = '';
                $.each(resp.data, function(key, value) {
                    civilite = value.libelleCivilite 
                    $('.imgPhoto').css('display','block')
                    $('.imgPhoto').prop("src","media/PhotoProfil/"+value.photoProfil)
                    
                    $('.nomLocataire').val(value.nom)
                    $('.PrenomLocataire').val(value.prenom)
                    $('.TypepieceSelect').val(value.IDTypepiece).trigger('change')
                    $('.NumeroPiece').val(value.numeroPiece)
                    
                    $('.locataireCodePostal').val(value.codePostale)
                    $('.locataireAdressePostal').val(value.adressePostale)
                    $('.locatairetelephoneMobile').val(value.telephoneMobile)
                    $('.locatairetelephonefix').val(value.telephoneFix)
                    $('.locataireemail').val(value.mail)
                    $('.CiviliteSelect').val(value.IDCivilite).trigger('change')
                    $('.Professionlocataire').val(value.profession)
                    $('.locataireIBAN').val(value.iban)
                    $('.matriculeLocataire').val(value.matriculeLocataire)
                    
                    $('.locataireBIC').val(value.bic_swif)
                    $('.IDLocataireInput').val(value.IDLocataire)
                    $('.PhotoProfilInputHidden').val(value.photoProfil)
                 
                //:::::::::::::::::::::::::::::: ENTREPPRISE :::::::::::::::::::::::::::::::::::
                $('.RaisonSocial').val(value.raisonSocial)
                $('.TypeSocieteSelect').val(value.IDTypeSociete).trigger('change')
                $('.PaysSelect').val(value.IDPays).trigger('change')
                $('.VilleSelect').val(value.IDVille).trigger('change')
                $('.Rccm').val(value.rccm)
                $('.CpteContribuable').val(value.compteContribuable)

                $('.EmailEntreprise').val(value.mail)
                $('.telephoneEntreprise').val(value.telephoneMobile)
                $('.CodepostalEntreprise').val(value.codePostale)
                $('.AdressepostaleEntreprise').val(value.adressePostale)
                
                $('.NomGerantSociete').val(value.nomGerant)
                $('.PrenomGerantSociete').val(value.prenomGerant)
                $('.EmailGerantSociete').val(value.mailGerant)
                $('.NumeroGerantSociete').val(value.numeroGerant)
                $('.IbanGerantSociete').val(value.iban)
                $('.BicGerantSociete').val(value.bic_swif)
                $('.LocataireEntrepriseInput').val(value.IDLocataire)
                $('.PhotoProfilEntrepriseInputHidden').val(value.photoProfil)
                

                $('.imgPhotos').css('display', 'block');
                if(value.gerantSociete !=null){
                    $('#QuestionCheckbox').prop('checked',true)
                    $('#ZoneInputListeProriétaire').css('display','block');
                    $('.ProprietaireSelect').val(value.gerantSociete).trigger('change')
                }
                if(value.photoProfil==null){
                     $('.imgPhotos').attr('src', 'assets/img/white.png')
                     $('.imgPhoto').attr('src', 'assets/img/white.png')
                }else{
                     $('.imgPhotos').attr('src', 'media/PhotoProfil/'+value.photoProfil)
                     $('.imgPhoto').attr('src', 'media/PhotoProfil/'+value.photoProfil)
                }

                })

                 if(resp.data[0].TypeLocataire == 1){
                    $('.FermerCreationParticulier').css('display','none');
                    $('.FermerModificationParticulier').css('display','block');
                       $('#ModalLocataire').modal('show')
                }else{
                    $('.FermerCreation').css('display','none');
                    $('.FermerModification').css('display','block');
                       $('#LocataireEntrepriseModal').modal('show')
                }

                $.each(resp.civilite, function(key, value) {

                    if (value.libelleCivilite == civilite) {
                        $('.Civilite').append('<option selected value="' + value
                            .IDCivilite + '">' + value.libelleCivilite + '</option>'
                        )
                    } else {
                        $('.Civilite').append($('<option>', {
                            value: value.IDCivilite,
                            text: value.libelleCivilite
                        }))
                    }
                })

                  // REMPLISSAGE TABLEAU DOCUMENT PARTICULIER
                $.each(resp.data,function(key,value){
                    docAddtable.clear().draw();
                            $.each(resp.PieceJointe,function(key,value){
                                docAddtable.row.add(['<i class="fa fa-trash text-danger cursor-pointer" id="suppressionDocuments" data-id="'+value.IDPiecejoint+'"></i>',value.libelleType_piece,value.referenceDocument,value.UrlFichier])
                            })
                   docAddtable.draw();
                })
                
                 // REMPLISSAGE TABLEAU DOCUMENT ENTREPRISE
                 $.each(resp.data,function(key,value){
                    docAddtableEntreprise.clear().draw();
                            $.each(resp.PieceJointe,function(key,value){
                                docAddtableEntreprise.row.add(['<i class="fa fa-trash text-danger cursor-pointer" id="suppressionDocuments" data-id="'+value.IDPiecejoint+'"></i>',value.libelleType_piece,value.referenceDocument,value.UrlFichier])
                            })
                   docAddtableEntreprise.draw();
                })

                if (resp.PieceJointe.length > 0) {
                    recuperationPieceJoint(resp.PieceJointe)
                } else {
                    $('.ZonePieceJointe').html('')
                }

               
            })
        })

        // SUPPRESSION DE FICHIER LORS DE LA MODIFICATION
        $(document).on('click', '#SuppressionFichierLorsDeLaModification', function() {
            var GetId = $(this).attr('data-id')
            var GetIDLocataire = $('.IDLocataireInput').val();
            suppressionPieceJointe(GetId, GetIDLocataire,4)
        })

        $(document).on('click', '#supprimerLocataire', function() {
             var GetId = $(this).attr('data-id')
             SuppressionElement(GetId,'locataires','IDLocataire',recuperationLocataire)
        })
        
        // TELECHARGEMENT DE FICHIER LORS DE LA MODIFICATION
        $(document).on('click', '#TelechargementFichierLorsDeLaModification', function() {
              var nomFichier = $(this).attr('data-NomFichier');
              telechargerPieceJoint(nomFichier,4)
        })

        $(document).on('click','#CreerEtreprise',function(){
             $('.modal-title').text('Ajout de nouveau locataire (Entreprise)')
                $('#confirmLabel').hide();
                $('.inputPhotofile').val('')
                $('.imgPhotos').attr('src', 'assets/img/white.png')
                var table =  $("#FormTableLocataireEntreprise").DataTable();
                table.clear().draw();
                table.draw();

            $('#LocataireEntrepriseModal').modal('show'),
            jc.close();
        })
         $(document).on('click','#CreerParticulier',function(){
            $('#modalTitreLocataire').text('Ajout de nouveau locataire')
                $('.inputPhoto').val('')
                $('.imgPhoto').attr('src', 'assets/img/white.png')
                var table =  $("#FormTableLocataireParticulier").DataTable();
                table.clear().draw();
                table.draw();
            $('#ModalLocataire').modal('show'),
            jc.close();
        })

        $('#QuestionCheckbox').on('click',function(){         
            if ($(this).is(':checked')) {
                        $('#confirmLabel').show();
                        $('#ZoneInputListeProriétaire').css('display','block');
            } else {
                    $('#ZoneInputListeProriétaire').css('display','none');
                    $('#confirmLabel').hide();
                        $('#NomGerantSociete').val('')
                        $('#PrenomGerantSociete').val('')
                        $('#EmailGerantSociete').val('')
                        $('#NumeroGerantSociete').val('')
                        $('#BicGerantSociete').val('')
                        $('#IbanGerantSociete').val('')

                         $('#NomGerantSociete').prop('readonly',false)
                        $('#PrenomGerantSociete').prop('readonly',false)
                        $('#EmailGerantSociete').prop('readonly',false)
                        $('#NumeroGerantSociete').prop('readonly',false)

                        $('#IbanGerantSociete').prop('readonly',false)
                        $('#BicGerantSociete').prop('readonly',false)
            }  
        })
         $('.PaysSelect').on('change',function(){
            var getIdpays = $(this).val();
             MesrequetesAjax("{{ route('villePardIdPays.recuperation') }}", "GET", {Idpays:getIdpays}, null, true, "JSON", function(
            resp) {
                 $('.VilleSelect').html('')
            
              $.each(resp.data, function(key, values) {
                    $('.VilleSelect').append($('<option>', {
                        value: values.IDVille,
                        text: values.Libelleville
                    }))

                 
              })

            })
        })


          $('.PaysSelectParticulier').on('change',function(){
            var getIdpays = $(this).val();
             MesrequetesAjax("{{ route('villePardIdPays.recuperation') }}", "GET", {Idpays:getIdpays}, null, true, "JSON", function(
            resp) {
                
                  $('.VilleSelectParticulier').html('')
              $.each(resp.data, function(key, values) {
                   
                    $('.VilleSelectParticulier').append($('<option>', {
                        value: values.IDVille,
                        text: values.Libelleville
                    }))
              })

            })
        })

        $('.FormAddLocataireEntreprise').on('submit', function(e) {

               
            if (!$(this)[0].checkValidity()) {
                $(this).addClass('was-validated'); // Ajoutez la classe 'was-validated' pour activer les styles de validation Bootstrap
                e.preventDefault(); // Empêchez la soumission normale du formulaire
                e.stopPropagation(); // Arrêtez la propagation de l'événement
            } else {
              
                 e.preventDefault();
                MesrequetesAjax("{{ Route('LocataireEntreprise.creer') }}", "POST", new FormData(this), false,
                    false, "JSON",
                    function(resp) {
                        Notification('Succès', resp.msg, 'top-right', 'success')
                        MesrequetesAjax("{{ route('Locataire.recuperation') }}", "GET", null,
                            true, true, "JSON",
                            function(response) {
                                TableRecuperationLocataire(response.data)
                            });
                        $('#LocataireEntrepriseModal').modal('hide')
                        $('.FormAddLocataireEntreprise').removeClass('was-validated');
                        $('.FormAddLocataireEntreprise')[0].reset();
                        {{-- pond.removeFiles(); --}}
                    },
                    function(error) {},
                    function() {

                        if ($('#Rccm').val().length == 0) {
                            return false;
                        }
                         if ($('#RaisonSocial').val().length == 0) {
                            return false;
                        }

                        if ($('#CpteContribuable').val().length == 0) {
                            return false;
                        }

                        if ($('#TypeSocieteSelect').val() == 'Choisir...') {
                            return false;
                        }

                         if ($('#NomGerantSociete').val().length == 0) {
                            return false;
                        }
                         if ($('#PrenomGerantSociete').val().length == 0) {
                            return false;
                        }

                           if ($('#NumeroGerantSociete').val().length == 0) {
                            return false;
                        }

                    }
                )
            }

        })

        $('.formLocataireAdd').on('submit', function(e) {

            if (!$(this)[0].checkValidity()) {
                $(this).addClass('was-validated'); // Ajoutez la classe 'was-validated' pour activer les styles de validation Bootstrap
                e.preventDefault(); // Empêchez la soumission normale du formulaire
                e.stopPropagation(); // Arrêtez la propagation de l'événement
            } else {
                e.preventDefault();
                MesrequetesAjax("{{ Route('Locataire.creer') }}", "POST", new FormData(this), false,
                    false, "JSON",
                    function(resp) {
                        Notification('Succès', resp.msg, 'top-right', 'success')
                        MesrequetesAjax("{{ route('Locataire.recuperation') }}", "GET", null,
                            true, true, "JSON",
                            function(response) {
                                TableRecuperationLocataire(response.data)
                            });
                        $('#ModalLocataire').modal('hide')
                        $('.formLocataireAdd').removeClass('was-validated');
                        $('.IDproprietaire').val(0)
                        $('.PhotoProfilInputHidden').val(0)
                        $('.formLocataireAdd')[0].reset();
                        {{-- pond.removeFiles(); --}}
                    },
                    function(error) {},
                    function() {

                        if ($('#nom').val().length == 0) {
                            return false;
                        }
                         if ($('#PrenomLocataire').val().length == 0) {
                            return false;
                        }

                        {{-- if ($('#NumeroPiece').val().length == 0) {
                            return false;
                        } --}}

                        if ($('#TypepieceSelect').val() == 'Choisir...') {
                            return false;
                        }

                        if ($('#TypepieceSelect').val() == 'Choisir...') {
                            return false;
                        }

                        if ($('#VilleSelect').val() == 'Choisir...') {
                            return false;
                        }

                        if ($('#telephoneMobile').val().length == 0) {
                            return false;
                        }


                    }
                )
            }
        })
        $('.LocataireSelect').on('change',function(){
            var IdProprietaire = $(this).val();
            MesrequetesAjax("{{ route('Proprietaire.recuperation') }}", "GET", {IDProprietaire:IdProprietaire}, null, true, "JSON", function(
            resp) {
            
            $('#NomGerantSociete').val(resp.data[0].nom)
            $('#PrenomGerantSociete').val(resp.data[0].prenom)
            $('#EmailGerantSociete').val(resp.data[0].mail)
            $('#NumeroGerantSociete').val(resp.data[0].telephoneMobile)

            $('#IbanGerantSociete').val(resp.data[0].iban)
            $('#BicGerantSociete').val(resp.data[0].bic_swif)

            $('#NomGerantSociete').prop('readonly',true)
            $('#PrenomGerantSociete').prop('readonly',true)
            $('#EmailGerantSociete').prop('readonly',true)
            $('#NumeroGerantSociete').prop('readonly',true)

            $('#IbanGerantSociete').prop('readonly',true)
            $('#BicGerantSociete').prop('readonly',true)
            
            })

        })

        $(document).on('click','#btn-callExcel',function(){
            $('#ExcelInput').click();
        })

        $('#ExcelInput').change(function() {
                var filenames = $(this).val().split('\\').pop()
                if (filenames) {
                  $('#btn-ExcelDownload').css('display','flex')
                  $('#btn-ExcelDelete').css('display','flex')
                  $('#btn-callExcel').css('display','none')
                  $('#FetchInputFilname').css('display', 'flex');
                  $('#FetchInputFilname').text(filenames);
                }
        })

        $('#importEXcel').on('submit',function(e){
            e.preventDefault();
            MesrequetesAjax("{{ Route('ExcelLocataire.importation') }}", "POST", new FormData(this), false,
                    false, "JSON",
                    function(resp) {
                     
                        $('div#loaders').addClass('hiddenElement');
                        Notification('Succès',resp.msg,'top-right','success')
                        recuperationLocataire()

                    },null,
                    function(){
                        
                       $('.nomPage').text('Intégration')
                       $('div#loaders').removeClass('hiddenElement');
                       
                    })

        })
        $('#btn-ExcelDownload').on('click',function(){

            $('#importEXcel').submit();
        })

        $(document).on('click','#btn-ExcelDelete',function(){
            $('#FetchInputFilname').text('');
            $('#ExcelInput').val('');
            $('#btn-ExcelDownload').css('display','none');
            $(this).css('display','none');
            $('#btn-callExcel').css('display','flex');
            $('#FetchInputFilname').css('display', 'none');

        })

        $(document).on('click','#VoirLocataire',function(){
            var idLocataire= $(this).attr('data-id');
            $('#IdLocataire').val(idLocataire)
            ficheLocataire(idLocataire)
            $('#LocataireDetailModal').modal('show')
           
        })

        $('.formReglementAddInLocatairePage').on('submit', function(e) {

             var  idLocataire = $('#IdLocataire').val()
            if (!$(this)[0].checkValidity()) {
                $(this).addClass('was-validated');
                e.preventDefault();
                e.stopPropagation();
            } else {
                e.preventDefault();
                MesrequetesAjax("{{Route('Reglement.creer')}}", "POST", new FormData(this), false, false, "JSON",function(resp) {
                          
                        Notification('Succès', resp.msg, 'top-right', 'success')
                        $('#ModalReglementLocataire').modal('hide');
                        ficheLocataire(idLocataire)
                        $('#LocataireDetailModal').modal('show');
                        $('.InputIDRegelement').val(0)
                        $('.formReglementAddInLocatairePage')[0].reset()
                        $('.formReglementAddInLocatairePage').removeClass('was-validated');
                    },
                    function(error) {},
                    function() {
    
                        if ($.trim($('.montantReglementLocataire').val()).length == 0) {
                          
                            return false;
                        }
                        if ($('.ModeReglementSelect').val().length == 0) {
                           
                            return false;
                        } 

                    })

            }

        })

        //:::::::::::::::::::::::::::::::::::::::::::::::::::: SECTION DOCUMENT FORM ENTREPRISE ::::::::::::::::::::::::::::

        $('#fichierDocument').change(function() {
            var filenames = $(this).val().split('\\').pop()
            if (filenames) {
                $('#btn-FichierDeleteEntreprise').css('display','flex')
                $('#btn-ajoutFichierEntreprise').css('display','none')
                $('#nomFichierChoisirEntreprise').val(filenames);
            }
        })

        $(document).on('click','#btn-ajoutFichierEntreprise',function(){
            $('#fichierDocument').click();
        })

        // AJOUT DE DOCUMENT EN BASE DE DONNEE
        $(document).on('click','#btn-AjoutEntrepriseBD',function(){

                    if($('.TypepieceSelect').val() == 0){
                        $('#typefichierLocataireEntrepriseRequired').text('Type document obligatoire');
                        return false;
                    }else{
                        $('#typefichierLocataireEntrepriseRequired').text('');
                    }
                    var docAddtableEntreprise =  $('#FormTableLocataireEntreprise').DataTable();
                    var fileInput = $('#fichierDocument')[0].files[0];
                    var formData = new FormData();
                    formData.append('fichier', fileInput); // Ajoute le fichier à FormData
                    formData.append('typeDoc',$('#TypeDocumentSelect').val()); 
                    formData.append('referenceDoc',$('#referenceDocEntreprise').val());
                    formData.append('typeDossier',4); 

                     $.ajax({
                        type: "POST",
                        url: "{{ Route('FileStore.creer') }}",
                        headers: {
                         'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }, 
                        data: formData,
                        dataType: "json",
                        contentType: false,
                        processData: false,
                        success: function (resp) {
                            modificationDocumentStatut = true;
                         recuperationDocumentLocataireEntreprise();
                        }
                    }); 
        })

         //SUPPRESSION DE DOCUMENT
        $(document).on('click','#btn-FichierDeleteEntreprise',function(){
            $('#nomFichierChoisirEntreprise').val('');
            $('#fichierDocumentEntreprise').val('');
            $('#referenceDocEntreprise').val('');
            $(this).css('display','none');
            $('#btn-ajoutFichierEntreprise').css('display','flex');

        })

        $(document).on('click','#suppressionDocuments',function(){
                var GetId = $(this).attr('data-id');
                $.confirm({
                icon: 'fa fa-warning',
                title: '<span style="font-size:16px;color:black; font-weight:bolder">Voulez-vous vraiment supprimer ?</span>',
                content: 'Cette action est irévessible',
                type: 'red',
                typeAnimated: true,
                buttons: {
                    tryAgain: {
                        text: 'Valider',
                        btnClass: 'btn-red',
                        action: function() {
                            
                                
                            MesrequetesAjax("{{ route('pieceJointe.supprimer') }}", "GET", {IDPieceJointe:GetId,typeDossier:4}, null, true, "JSON", function(resp) {
                                Notification('Succès',resp.msg,'top-right','success');
                                recuperationDocumentLocataireParticulier();
                                recuperationDocumentLocataireEntreprise();
                            })
                        }
                    },

                    fermer: {
                        text: 'Fermer',
                    },
                
                }
            });
        
        
        })

        $('.FermerModification').on('click',function(){
            var __table =$('#FormTableLocataireEntreprise').DataTable();
          
            if(modificationDocumentStatut== true){
                   
                $.confirm({
                    icon: 'fa fa-warning',
                    title: '<span style="font-size:16px;color:black; font-weight:bolder">Attention !</span>',
                    content: '<span style="font-size:13px;color:black;">Voulez-vous abandonner cette opération ?</span>',
                    type: 'red',
                    typeAnimated: true,
                    buttons: {
                        tryAgain: {
                            text: 'OUI',
                            btnClass: 'btn-red',
                            action: function() {

                                 MesrequetesAjax("{{ route('pieceJointetout.supprimer') }}", "GET",{typeDoc:4}, null, true, "JSON", function(resp) {
                                     modificationDocumentStatut= false
                                    $('#LocataireEntrepriseModal').modal('hide')
                                    $('.FormAddLocataireEntreprise')[0].reset();
                                    $('#btn-FichierDeleteEntreprise').css('display','none')
                                    $('#btn-ajoutFichierEntreprise').css('display','flex')
                                 
                                     __table.clear().draw();
                                     __table.draw();
                                })
                            }
                        },

                        fermer: {
                            text: 'NON',
                        },
                    
                    }
                });
            
          }else{

            $('#LocataireEntrepriseModal').modal('hide')
          }
        })
        
        $('.FermerCreation').on('click',function(){
            var __table =$('#FormTableLocataireEntreprise').DataTable();
          
            if(modificationDocumentStatut== true){
                   
                $.confirm({
                    icon: 'fa fa-warning',
                    title: '<span style="font-size:16px;color:black; font-weight:bolder">Attention !</span>',
                    content: '<span style="font-size:13px;color:black;">Voulez-vous abandonner cette opération ?</span>',
                    type: 'red',
                    typeAnimated: true,
                    buttons: {
                        tryAgain: {
                            text: 'OUI',
                            btnClass: 'btn-red',
                            action: function() {

                                 MesrequetesAjax("{{ route('pieceJointetout.supprimer') }}", "GET",{typeDoc:4}, null, true, "JSON", function(resp) {
                                     modificationDocumentStatut= false
                                    $('#LocataireEntrepriseModal').modal('hide')
                                    $('.FormAddLocataireEntreprise')[0].reset();
                                    $('#btn-FichierDeleteEntreprise').css('display','none')
                                    $('#btn-ajoutFichierEntreprise').css('display','flex')
                                     __table.clear().draw();
                                     __table.draw();
                                })
                            }
                        },

                        fermer: {
                            text: 'NON',
                        },
                    
                    }
                });
            
          }else{

            $('#LocataireEntrepriseModal').modal('hide')
          }
        })

   //:::::::::::::::::::::::::::::::::::::::::::::::::::: SECTION DOCUMENT FORM PARTICULIER ::::::::::::::::::::::::::::

        $('#fichierDocumentParticulier').change(function() {
            var filenames = $(this).val().split('\\').pop()
            if (filenames) {
                $('#btn-FichierDeleteParticulier').css('display','flex')
                $('#btn-ajoutFichierParticulier').css('display','none')
                $('#nomFichierChoisirParticulier').val(filenames);
            }
        })

        $(document).on('click','#btn-ajoutFichierParticulier',function(){
            $('#fichierDocumentParticulier').click();
        })

        // AJOUT DE DOCUMENT EN BASE DE DONNEE
        $(document).on('click','#btn-AjoutParticulierBD',function(){

            if($('.TypepieceSelect').val() == 0){
                $('#typefichierLocataireParticulierRequired').text('Type document obligatoire');
                return false;
            }else{
                 $('#typefichierLocataireParticulierRequired').text('');
            }
                    var docAddtableEntreprise =  $('#FormTableLocataireEntreprise').DataTable();
                    var fileInput = $('#fichierDocumentParticulier')[0].files[0];
                    var formData = new FormData();
                    formData.append('fichier', fileInput); // Ajoute le fichier à FormData
                    formData.append('typeDoc',$('#DocumentSelectParticulier').val()); 
                    formData.append('referenceDoc',$('#referenceDocParticulier').val());
                    formData.append('typeDossier',4); 

                     $.ajax({
                        type: "POST",
                        url: "{{ Route('FileStore.creer') }}",
                        headers: {
                         'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }, 
                        data: formData,
                        dataType: "json",
                        contentType: false,
                        processData: false,
                        success: function (resp) {
                         modificationDocumentStatutParticulier = true
                         recuperationDocumentLocataireParticulier();
                        }
                    }); 
        })

         //SUPPRESSION DE DOCUMENT
        $(document).on('click','#btn-FichierDeleteParticulier',function(){
            $('#nomFichierChoisirParticulier').val('');
            $('#fichierDocumentParticulier').val('');
            $('#referenceDocParticulier').val('');
            $(this).css('display','none');
            $('#btn-ajoutFichierParticulier').css('display','flex');

        })

        $('.FermerModificationParticulier').on('click',function(){
            
           
            var __table =$('#FormTableLocataireParticulier').DataTable();
          
            if(modificationDocumentStatutParticulier== true){
                   
                $.confirm({
                    icon: 'fa fa-warning',
                    title: '<span style="font-size:16px;color:black; font-weight:bolder">Attention !</span>',
                    content: '<span style="font-size:13px;color:black;">Voulez-vous abandonner cette opération ?</span>',
                    type: 'red',
                    typeAnimated: true,
                    buttons: {
                        tryAgain: {
                            text: 'OUI',
                            btnClass: 'btn-red',
                            action: function() {

                                 MesrequetesAjax("{{ route('pieceJointetout.supprimer') }}", "GET",{typeDoc:4}, null, true, "JSON", function(resp) {
                                     modificationDocumentStatutParticulier= false
                                    $('#btn-FichierDeleteParticulier').css('display','none')
                                    $('#btn-ajoutFichierParticulier').css('display','flex')
                                    $('#ModalLocataire').modal('hide')
                                    $('.formLocataireAdd')[0].reset();
                                   
                                     __table.clear().draw();
                                     __table.draw();
                                })
                            }
                        },

                        fermer: {
                            text: 'NON',
                        },
                    
                    }
                });
            
          }else{

            $('#ModalLocataire').modal('hide')
          }
        })

        $('.FermerCreationParticulier').on('click',function(){
             var __table =$('#FormTableLocataireParticulier').DataTable();
            if(modificationDocumentStatutParticulier== true){
                   
                $.confirm({
                    icon: 'fa fa-warning',
                    title: '<span style="font-size:16px;color:black; font-weight:bolder">Attention !</span>',
                    content: '<span style="font-size:13px;color:black;">Voulez-vous abandonner cette opération ?</span>',
                    type: 'red',
                    typeAnimated: true,
                    buttons: {
                        tryAgain: {
                            text: 'OUI',
                            btnClass: 'btn-red',
                            action: function() {

                                 MesrequetesAjax("{{ route('pieceJointetout.supprimer') }}", "GET",{typeDoc:4}, null, true, "JSON", function(resp) {
                                     modificationDocumentStatutParticulier= false
                                    $('#ModalLocataire').modal('hide')
                                    $('.formLocataireAdd')[0].reset();
                                     $('#btn-FichierDeleteParticulier').css('display','none')
                                    $('#btn-ajoutFichierParticulier').css('display','flex')
                                     __table.clear().draw();
                                     __table.draw();
                                })
                            }
                        },

                        fermer: {
                            text: 'NON',
                        },
                    
                    }
                });
            
          }else{

            $('#ModalLocataire').modal('hide')
          }

        })
         //:::::::::::::::::::::::::::::::::::::::::::::::::::: FIN SECTION DOCUMENT FORM PARTICULIER ::::::::::::::::::::::::::::

        
        // FILTRE 
        $(document).on('click','#btn-filter',function(){
            
              var typelocataire = $('.TypelocataireSelect').val();
              var choisirPays = $('.PaysSelect').val();
              var choisirVille = $('.VilleSelect').val();

            MesrequetesAjax("{{ route('locataire.filtrer') }}", "GET", {
                pays:choisirPays,typeLocataire:typelocataire,ville:choisirVille}, null, true, "JSON", function(resp) {
                    $('div#loaders').addClass('hiddenElement');
                if(resp.length == 0){
                    recuperationLocataire()
                }else{
                     var table = $('#LocataireDatatable').DataTable();
                     table.clear().draw();
                     <br />
<b>Warning</b>:  Undefined variable $D_Modification_locataire in <b>E:\install\laragon\www\reditas\resources\views\FICHES\locataire.blade.php</b> on line <b>1990</b><br />
<br />
<b>Warning</b>:  Undefined variable $D_Suppression_locataire in <b>E:\install\laragon\www\reditas\resources\views\FICHES\locataire.blade.php</b> on line <b>1990</b><br />
                                table.column(0).visible(false)
                                                     $.each(resp,function(key,value){

                                
                                $actionBtnSupprimer = '';
                                $actionBtnModifier = '';
                                $typeProprietaire = '';
                                $Nomproprietaire = value.nom+' '+value.prenom;
                                $telephoneFixe =  value.telephoneFix;
                                $mail = value.mail;
                                $iban = value.iban;
                                $bic_swif = value.bic_swif;
                                $adressePostale = value.adressePostale;
                                $Profession =  value.profession; 
                                $codePostale = value.codePostale;
                            
                                $actionBtnVoir = '<i id="VoirLocataire" data-id="'+value.IDLocataire+'"class="fa fa-eye cursor-pointer text-success"></i>&nbsp;&nbsp;';
                                <br />
<b>Warning</b>:  Undefined variable $D_Suppression_locataire in <b>E:\install\laragon\www\reditas\resources\views\FICHES\locataire.blade.php</b> on line <b>2009</b><br />

                                <br />
<b>Warning</b>:  Undefined variable $D_Modification_locataire in <b>E:\install\laragon\www\reditas\resources\views\FICHES\locataire.blade.php</b> on line <b>2013</b><br />

                                if (value.photoProfil !=null) {
                                $photoprofil = '<img class="imgInTableRow" src="media/PhotoProfil/'+value.photoProfil+'">';
                                }
                                if(value.TypeLocataire==1 && value.photoProfil ==null ){
                                 $photoprofil = '<img class="imgInTableRow" src="media/imgDefault/userDefault.png">';
                                }

                                if(value.TypeLocataire!=1 && value.photoProfil ==null ){
                                    $photoprofil = '<img class="imgInTableRow" src="media/imgDefault/buldingDefault.png">';
                                }

                                if(value.TypeLocataire==1){
                                    $typeProprietaire = 'Personne physique';
                                }else{
                                    $typeProprietaire = 'Personne morale';
                                }

                                if(value.TypeLocataire==2){
                                    $Nomproprietaire = value.raisonSocial;
                                }

                                if(value.mail==null){
                                    $mail ='?';
                                }
                                if(value.telephoneFix==null){
                                    $telephoneFixe = '?';
                                }

                                if(value.iban==null){
                                    $iban = '?';
                                }

                                if(value.bic_swif==null){
                                    $bic_swif = '?';
                                }

                                if(value.codePostale==null){
                                    $codePostale = '?';
                                }

                                if(value.adressePostale==null){
                                $adressePostale = '?';
                                }

                                if(value.profession==null){
                                $Profession = '?';
                                }
                                
                      table.row.add([
                        
                            $actionBtnVoir+''+$actionBtnSupprimer+'&nbsp;'+$actionBtnModifier,
                            $photoprofil+' '+$Nomproprietaire,
                            $Profession,
                            '<span class="badge bg-secondary">'+$typeProprietaire+'</span>',
                            value.telephoneMobile,
                            $telephoneFixe,
                            $mail,
                            value.Libellepays,
                            value.Libelleville,
                            $iban,
                            $bic_swif,
                            $adressePostale,
                            $codePostale,
                      ]);
                     
                     })

                     table.draw();
                }
            }, null, function() {
               $('div#loaders').removeClass('hiddenElement');
            })
        })

        //RECUPERATION FACTURE COCHE
        $(document).on('click','#recuperationFactureCoche',function(e){
            $('.modalTitreLocataire').text('Paiement de facture')
            $('#montantregleL').text(0+' F')
            $('#montantRestantL').text(0+' F')
            e.preventDefault();
            var IDArray = [];
            var IDLocataire = $('#IdLocataire').val();
            if ($('#checkAll').is(":checked")) {

                if ($('.my-checkbox').is(":checked")) {
                    $('input[name="myCheckbox"]').each(function() {
                        IDArray.push(this.value);
                    })  
                }
                
            }

            $('input[name="myCheckbox"]').each(function() {
                if ($(this).is(":checked")) {
                     IDArray.push(this.value);
                }
            })  

            if(IDArray.length > 0){
                var tabFactureCheckbox = $("#FactureCheckbox").DataTable();
                    MesrequetesAjax("{{ route('FactureLocataireCheckbox.recuperation') }}", "GET", {tableauID:IDArray,IDlocataire:IDLocataire}, null, true, "JSON", function(resp) {

                       tabFactureCheckbox.clear().draw();
                        $.each(resp.data,function(key,value){
                            var prenom = '';
                            if(value.prenom !=null){
                                prenom = value.prenom
                            }

                            var nom = '';
                            if(value.nom !=null){
                                nom = value.nom
                            }
                            var montantRestant = parseInt(value.montantFacture) - parseInt(value.montantRegle)
                            tabFactureCheckbox.row.add([
                            formatageDate(new Date(value.dateFacture)),value.refFacture,formaterNombre(value.montantFacture)+' F',formaterNombre(value.montantRegle)+' F',formaterNombre(montantRestant)+' F',
                           '<input type="text" class="form-control inputPaiementFacture NumeriqueAutorise SeparateurMillier" data-idreglement="'+value.IDReglementLocataire+'" data-idfacture="'+value.IDFacture+'"  id="inputPaiementFacture">' ])
                        })
                        tabFactureCheckbox.draw();

                        $('.ReglementLocataireSelect').html('');
                         $('.ReglementLocataireSelect').append('<option selected disabled value="">Choisir...</option>')
                        $.each(resp.GetReglement,function(key,value){

                            if(value.montantRestant > 0){

                                $('.ReglementLocataireSelect').append($('<option>', {
                                    value: value.IDReglementLocataire,
                                    text: value.RefReglementInterne
                                }))
                            }
                        })

                        $('#LocataireDetailModal').modal('hide')
                        $('#ModalFactureCheckbox').modal('show')
                    })
            }       
        })

        $(document).on('change','#inputPaiementFacture',function(e){
            
            var montantInserer = $(this).val().replace(/\s+/g, "");
            var IDreglement =  $('#GetIdreglementInputHidden').val()
            if(IDreglement == 0){
                 
                Notification('Erreur','Veuillez séléctionner un règlement svp !','top-right','error')
                $(this).val("")
                return false;
            }

              var table = $('#FactureCheckbox').DataTable();
              var rowNode = $(this).parent().parent()[0];
              var montantRestantFacture = table.row(rowNode).data()[4];
              var ValeurmontantRestantFacture = parseInt(montantRestantFacture.replace(/\s+/g, ""))

            if( parseInt(montantInserer) > parseInt(ValeurmontantRestantFacture)){

                Notification('Erreur','Le montant saisi est suppérieur au montant de la facture','top-right','error')
                $(this).val("")
                return false;
            }
            var factID = $(this).data('idfacture')
            var reglementID = $(this).data('idreglement') 
            var elementTrouve = false;
            for(var i=0; i<tabIDFacture.length; i++){
                
                if(tabIDFacture[i].idFacture == factID){
                    tabIDFacture[i].MontantInserer = $(this).val().replace(/\s+/g, "");
                    elementTrouve = true;
                }
            }

            if(elementTrouve == false){

                tabIDFacture.push({
                   idFacture : factID,
                   MontantInserer : $(this).val().replace(/\s+/g, ""),
                })
            }

            var SommeMontantInserer = 0;
            for(var i=0; i<tabIDFacture.length; i++){
                SommeMontantInserer +=parseInt(tabIDFacture[i].MontantInserer) 
            }

           

            MesrequetesAjax("{{ route('Reglementfacture.recuperation') }}", "GET", {IdReglement:IDreglement }, null, true, "JSON", function(resp) {

                var montantregle =parseInt(resp.data[0].TotalUtilise)
                var montantRestant =parseInt(resp.data[0].montantReglement) - parseInt(resp.data[0].TotalUtilise)

                   
                if(parseInt(SommeMontantInserer) <= parseInt(montantRestant) ){
                  var nouveauSolde =  parseInt(montantRestant) - parseInt(SommeMontantInserer);
                }else{

                    Notification('Erreur','Le montant restant du règlément est insuffisant','top-right','error')
                    $(this).val("")
                    return false;
                }
              
                var nouveauMontantregle = parseInt(montantregle) + parseInt(SommeMontantInserer)
                $('#montantregleL').text(formaterNombre(nouveauMontantregle)+' F')
                $('#montantRestantL').text(formaterNombre(nouveauSolde)+' F')
            })

        })

        $(document).on('change','.ReglementLocataireSelect',function(e){
              var IDreglement =  $(this).val();
              $('#GetIdreglementInputHidden').val(IDreglement)
               MesrequetesAjax("{{ route('Reglementfacture.recuperation') }}", "GET", {IdReglement:IDreglement }, null, true, "JSON", function(resp) {
                var montantRestant =0;
                var montant = 0;
                var montantregle = 0;
                montant =parseInt(resp.data[0].montantReglement);
                montantregle =parseInt(resp.data[0].TotalUtilise)
                montantRestant =parseInt(montant) - parseInt(montantregle)
                
                $('#montantRL').text(formaterNombre(montant)+' F')
                $('#montantregleL').text(formaterNombre(montantregle)+' F')
                $('#montantRestantL').text(formaterNombre(montantRestant)+' F')
               })

        })
        $(document).on('click','#FermerModalReglementLocataire',function(){
                       tabIDFacture.length = 0;
                      
                    $('#ModalFactureCheckbox').modal('hide')
                    $('#LocataireDetailModal').modal('show')
        })
        $(document).on('click','#paiementFacture',function(){

            if(tabIDFacture.length > 0){
                    var idreglement =   $('#GetIdreglementInputHidden').val()
                    var idLocataire = $('#IdLocataire').val()
                        MesrequetesAjax("{{ route('SoldeFacture.verification') }}", "GET", {tableauFacture:tabIDFacture,IDReglement:idreglement}, null, true, "JSON", function(resp) {

                            if(resp.error){
                                $.alert({
                                    title: 'Attention!',
                                    content: ''+resp.ListeErreur+'',
                                });
                            }

                            if(resp.succes){
                                Notification('Succès',resp.msg,'top-right','success');
                                tabIDFacture.length == 0;
                                $('#ModalFactureCheckbox').modal('hide')
                                ficheLocataire(idLocataire)
                                $('#LocataireDetailModal').modal('show')
                                $('.inputPaiementFacture').val('')
                            }
                        })
            }else{

                Notification('Erreur','Veuillez renseigner au moins une ligne','top-right','error')
                return false;
            }
        })

        $(document).on('click','#CallmodalReglementLocataire',function(){

                 var table =  $("#FormTableDocumentTableReglementLocataire").DataTable()
                     table.clear().draw();
                     table.draw();

                $('#Titremodal').text('Nouveau règlement')
            var IDlocataire = $('#IdLocataire').val()
              MesrequetesAjax("{{ route('LocataireParId.recuperation') }}", "GET", {IDLocataire:IDlocataire}, null, true, "JSON", function(resp) {

                 var prenom = "";
                if(resp.data[0].prenom !=null){
                    prenom = resp.data[0].prenom;
                }
                 $('.LocataireSelect').html('')
                $('.LocataireSelect').append($('<option>', {
                    value: resp.data[0].IDLocataire,
                    text: resp.data[0].nom + ' ' + prenom
                }))
                 $('#LocataireDetailModal').modal('hide')
                $('#ModalReglementLocataire').modal('show')
              })
            
        })

        $(document).on('click','#modalReglementLocataire',function(){

                $('#ModalReglementLocataires').modal('hide')
                $('#LocataireDetailModal').modal('show')
        })

        $(document).on('click','#ModifierReglementLocataires',function(){

            $('#Titremodal').text('Modification règlement')
            var IDReglement = $(this).data('id');
            MesrequetesAjax("{{ route('Reglementfacture.recuperation') }}", "GET", {
                    IdReglement: IDReglement
                }, false, true,
                "JSON",
                function(resp) {

                    
                    $('.dateReglement').val(formatageDate(new Date(resp.data[0].dateReglement)))
                    InputSeparateurMillierAffectation(resp.data[0].montantReglement,$('.montantReglementLocataire'))
                   
                    $('.InputIDRegelement').val(resp.data[0].IDReglementLocataire);
                    $('#ReferenceReglement').val(resp.data[0].RefReglementInterne);
                    $('#ReferenceReglementNumerique').val(resp.data[0].RefReglementNumerique);
                    $('#ReferenceReglementExterne').val(resp.data[0].RefReglementExterne);
                    $('#ObservationReglement').val(resp.data[0].ObservationReglement);
                    $('.ModeReglementSelect').val(resp.data[0].IDModeReglement).trigger('change')

                        MesrequetesAjax("{{ route('LocataireParId.recuperation') }}", "GET", {IDLocataire: resp.data[0].IDLocataire}, null, true, "JSON", function(response) {

                             var prenom = "";
                            if(response.data[0].prenom !=null){
                                prenom = resp.data[0].prenom;
                            }
                         $('.LocataireSelect').html('');
                         $('.LocataireSelect').append('<option value="'+response.data[0].IDLocataire+'">'+response.data[0].nom+' '+prenom+'</option>')
                    })
                 
                    $('.NomBanque').val(resp.data[0].IDBanque)
                    $('.NumeroCheque').val(resp.data[0].numeroCheque)
                    
                    var table = $("#FormTableDocumentTableReglementLocataire").DataTable()
                 
                        table.clear().draw();
                        $.each(resp.PieceJointe,function(key,value){
                            table.row.add(['<i class="fa fa-trash text-danger cursor-pointer" id="suppressiondocument" data-id="'+value.IDPiecejoint+'"></i>',value.libelleType_piece,value.referenceDocument,value.UrlFichier])
                        })

                        table.draw(); 
                    
                     $('#LocataireDetailModal').modal('hide')
                     $('#ModalReglementLocataire').modal('show')
                })
        })
        

    6//26-01-2024
    // IMPRESSION LISTE DES LOCATAIRES
    $(document).on('click','#ImprimerListeLocataire',function(){

            // mode:0 => impression sans Entete
            $.confirm({
                icon: 'fa fa-warning',
                title: '<span style="font-size:13px;color:black; font-weight:bolder">Voulez-vous imprimer le reçu avec entête ?</span>',
                content: 'Cette action est irévessible',
                type: 'success',
                typeAnimated: true,
                buttons: {
                    fermer: {
                        text: 'FERMER'
                    },
                    pasEntete: {
                        text: 'NON',
                        action: function() {

                                    MesrequetesAjax("{{ route('listeImpression.imprimer') }}", "GET", {param:3,mode:0 }, null, true, null, function(resp) {
                                        var pdfData = "data:application/pdf;base64," + resp.pdf;
                                        var newTab = window.open('', '_blank');
                                        newTab.document.write('<iframe src="' + pdfData + '" style="width:100%; height:100%;" frameborder="0"></iframe>');
                                    })

                                }

                            },

                    tryAgain: {
                        text: 'OUI',
                        btnClass: 'btn-red',
                        action: function() { 

                                    MesrequetesAjax("{{ route('listeImpression.imprimer') }}", "GET", {param:3,mode:1 }, null, true, null, function(resp) {
                                        var pdfData = "data:application/pdf;base64," + resp.pdf;
                                        var newTab = window.open('', '_blank');
                                        newTab.document.write('<iframe src="' + pdfData + '" style="width:100%; height:100%;" frameborder="0"></iframe>');
                                    })
                        }
                    },
                },

            });
    })

})
    function recuperationCivilite() {
        MesrequetesAjax("{{ route('Civilite.recuperation') }}", "GET", null, true, true, "JSON", function(resp) {
            $.each(resp.data, function(key, values) {
                $('#CiviliteSelect').append($('<option>', {
                    value: values.IDCivilite,
                    text: values.libelleCivilite
                }))
            })
        });
    }
    function ficheLocataire($idLocataire){

            MesrequetesAjax("{{ route('LocataireParId.recuperation') }}", "GET", {
                IDLocataire: $idLocataire
            }, null, true, "JSON", function(resp) {
             $('#proprietaireInfos').html('')
             var proprietaireDefaultImg = '';
             var contact = 'Aucun';
             var email ='Aucun';
             var iban ='Aucun';
             var Swift_bic = '/Aucun';
             var pays ='Aucun';
             var ville ='Aucune';
             var prenom ='';
             var adressePostale = 'Aucune';
               
                if(resp.data[0].prenom !=null){
                   prenom = resp.data[0].prenom;
                }

                if(resp.data[0].telephoneMobile !=null){
                   contact = resp.data[0].telephoneMobile;
                }

                if(resp.data[0].mail !=null){
                   email = resp.data[0].mail;
                }
                if(resp.data[0].iban !=null){
                   iban = resp.data[0].iban;
                }

                if(resp.data[0].bic_swif !=null){
                   Swift_bic = '/'+resp.data[0].bic_swif;
                }

                if(resp.data[0].Libellepays !=null){
                   pays = resp.data[0].Libellepays;
                }

                if(resp.data[0].Libelleville !=null){
                   ville = '/'+resp.data[0].Libelleville;
                }

                if(resp.data[0].adressePostale !=null){
                   adressePostale = resp.data[0].adressePostale;
                }

             if(resp.data[0].TypeLocataire !=1 && resp.data[0].photoProfil ==null){
                proprietaireDefaultImg = '<img class="imgInTableRow" src="media/PhotoProfil/buldingDefault.png">';
             }

              if(resp.data[0].TypeLocataire ==1 && resp.data[0].photoProfil ==null){
                proprietaireDefaultImg = '<img class="imgInTableRow" src="media/PhotoProfil/userDefault.png">';
             }

             if (resp.data[0].photoProfil !=null) {
                    proprietaireDefaultImg = '<img class="imgInTableRow" src="media/PhotoProfil/'+resp.data[0].photoProfil+'">';
                }

            
                $('#proprietaireInfos').append(' <div>'+proprietaireDefaultImg+'</div>\
                                                <div class="mt-2 nomCompletProprietaire" style="margin-left:15px;">'+resp.data[0].nom+'&nbsp;'+prenom+'</div>\
                                                <div class="mt-2 contactProprietaire" style="margin-left:15px;"><i class="text-warning cursor-pointer fas fa-phone" title="Contact"></i>&nbsp;'+contact+'</div>\
                                                <div class="mt-2 emailProrietaire" style="margin-left:15px;"> <i class="text-warning cursor-pointer fas fa-mail-bulk" title="Email"></i>&nbsp;'+email+'</div>\
                                                <div class="mt-2 ibanProprietaire" style="margin-left:15px;"><i class="far fa-credit-card text-warning" title="IBAN/BIC_SWIFT"></i>&nbsp;'+iban+''+Swift_bic+'</div>\
                                                <div class="mt-2 ibanProprietaire" style="margin-left:15px;"><i class="text-warning cursor-pointer fas fa-map-marked-alt" title="Pays/Ville"></i>&nbsp;'+pays+''+ville+'</div>\
                                                <div class="mt-2 ibanProprietaire" style="margin-left:15px;"><i class="text-warning cursor-pointer far fa-compass" title="Adresse postale"></i>&nbsp;'+adressePostale+'</div>\
                ')

                var tableDocument = $("#DocumentTable").DataTable();
                var tabFacture = $("#FactureTable").DataTable();
                var tabReglement = $("#ReglementTable").DataTable();
                var tablocationLocataires= $("#LocationLocataireTable").DataTable();
                tableDocument.clear().draw();
                $.each(resp.PieceJointe,function(key,value){
                    
                    tableDocument.row.add(['<span class="badge bg-warning cursor-pointer" title="Télécharger" id="TelechargementFichierLorsDeLaModification" data-NomFichier="'+value.UrlFichier+'" data-id="'+value.IDPiecejoint+'"><i class="fa fa-arrow-down"></i></span>',value.libelleType_piece,
                    value.referenceDocument,
                    value.UrlFichier,
                    ])
                })
                tableDocument.draw();

                 var montantTotalfacture = 0;
                 var montantTotalRegle = 0;
                 var montantrestant = 0;
                 tabFacture.clear().draw();
                $.each(resp.facturelocationLocataire,function(key,value){
                    var prenom = '';
                    if(value.prenom !=null){
                         prenom = value.prenom
                    }

                    var nom = '';
                    if(value.nom !=null){
                        nom = value.nom
                    }
                    montantTotalfacture +=parseInt(value.montantFacture);
                    var montantRestant = parseInt(value.montantFacture) - parseInt(value.montantRegle)
                    montantTotalRegle +=parseInt(value.montantRegle);
                    montantrestant += parseInt(montantRestant);
                    tabFacture.row.add(['<div class="form-check d-flex justify-content-center" style="margin-left:-14px"><input class="form-check-input my-checkbox" name="myCheckbox" value="'+value.IDFacture+'" id="SelectFactureCheckbox'+value.IDFacture+'" type="checkbox"/></div>',
                    formatageDate(new Date(value.dateFacture)),''+formatageDate(new Date(value.dateDebutFacture))+' - '+formatageDate(new Date(value.dateFinFacture))+' ',value.refFacture,formaterNombre(value.montantFacture)+' F',formaterNombre(value.montantRegle)+' F',formaterNombre(montantRestant)+' F',
                    nom+' '+prenom,value.intituleBien])
                })
                tabFacture.draw();
                
                $('#montantTotalFacture').text(formaterNombre(montantTotalfacture)+' F')
                $('#montantTotalRegle').text(formaterNombre(montantTotalRegle)+' F')
                $('#montantrestant').text(formaterNombre(montantrestant)+' F')

                 var totalReglement = 0;
                 var totalUtilises = 0
                 var totalSoldes = 0;
                 tabReglement.clear().draw();
                $.each(resp.Reglement,function(key,value){
                    totalReglement+=parseInt(value.montantReglement)
                    totalrestant = parseInt(value.montantReglement) - parseInt(value.montantRegle)
                    totalSoldes  += parseInt(totalrestant)
                    totalUtilises+= parseInt(value.montantRegle)
                   tabReglement.row.add([
                    '<i class="fa fa-edit text-success cursor-pointer" data-id="'+value.IDReglementLocataire+'" id="ModifierReglementLocataires"></i>',
                    formatageDate(new Date(value.dateReglement)),
                    value.RefReglementInterne,
                    formaterNombre(value.montantReglement)+' F',
                    formaterNombre(value.montantRegle)+' F',
                    formaterNombre(totalrestant)+' F'])
                })
                tabReglement.draw();
                $('#totalReglement').text(formaterNombre(totalReglement)+' F')
                $('#totalUtilise').text(formaterNombre(totalUtilises)+' F')
                $('#totalSolde').text(formaterNombre(totalSoldes)+' F')
                 
                 //LOCATION LOCATAIRE
                 var totalLocation = 0;
                tablocationLocataires.clear().draw();
                $.each(resp.LocationLocataire,function(key,value){
                    totalLocation +=parseInt(value.MontantTTCLoyer)
                   tablocationLocataires.row.add([formatageDate(new Date(value.dateDebutLocation)),
                   formatageDate(new Date(value.dateRenouvelementContrat)),value.refLocation,formaterNombre(value.MontantTTCLoyer)+' F',value.intituleBien])
                })
                tablocationLocataires.draw();
                $('#totalFactureLocataireComplet').text(formaterNombre(montantTotalfacture)+' F')
                $('#totalReglementLocataireComplet').text(formaterNombre(totalReglement)+' F')
                $('#SoldeLocataireComplet').text(formaterNombre(montantTotalfacture - totalReglement)+' F')
                $('#TotalLocation').text(formaterNombre(totalLocation)+' F')
               
            })
    }

    function TableRecuperationLocataire(response) {
        var table = $('#LocataireDatatable').DataTable();
        table.clear().draw();
          <br />
<b>Warning</b>:  Undefined variable $D_Modification_locataire in <b>E:\install\laragon\www\reditas\resources\views\FICHES\locataire.blade.php</b> on line <b>2569</b><br />
<br />
<b>Warning</b>:  Undefined variable $D_Suppression_locataire in <b>E:\install\laragon\www\reditas\resources\views\FICHES\locataire.blade.php</b> on line <b>2569</b><br />
           table.column(0).visible(false)
                table.rows.add(response).draw();
    }

    function recuperationLocataire() {
        MesrequetesAjax("{{ route('Locataire.recuperation') }}", "GET", null, true, true, "JSON", function(
            response) {
            $('div#loaders').addClass('hiddenElement');
            TableRecuperationLocataire(response.data)
        }, null, function() {
            $('div#loaders').removeClass('hiddenElement');
        });
    }

    function referenceReglement() {
        MesrequetesAjax("{{ route('getReferenceReglement.creer') }}", "GET", null, true, true, "JSON", function(resp) {
            
            $('#ReferenceReglement').val(resp[0]);
            $('#ReferenceReglementNumerique').val(resp[1]);
            
        });
    }
    function GetModeReglement() {
        MesrequetesAjax("{{ route('ModeReglement.recuperation') }}", "GET", null, true, true, "JSON", function(response) {
            $.each(response.data, function(key, value) {
                $('.ModeReglementSelect').append($('<option>', {
                    value: value.IDModeReglement,
                    text: value.intituleModeReglement
                }))
            })
        });
    }

    function matriculeLocataire() {
            MesrequetesAjax("{{ route('matriculeLocataire.recuperation') }}", "GET", null, true, true, "JSON", function(resp) {
                $('.matriculeLocataire').val(resp[0]);
                $('.matriculeNumeriqueLocataire').val(resp[1]);
            });
    }

    function recuperationPays(){

         MesrequetesAjax("{{ route('pays.recuperation') }}", "GET", null, true, true, "JSON", function(
            resp) {
                 $('.PaysSelect').html('')
                 $('.PaysSelectParticulier').html('')
            $.each(resp.data, function(key, values) {
                
                $('.PaysSelect').append($('<option>', {
                    value: values.IDPays,
                    text: values.Libellepays
                }))

                $('.PaysSelectParticulier').append($('<option>', {
                    value: values.IDPays,
                    text: values.Libellepays
                }))
            })
        });
        
    }

    function TypeSocieteSelect(){

        MesrequetesAjax("{{ route('typeSociete.recuperation') }}", "GET", null, true, true, "JSON", function(resp) {
            $.each(resp.data, function(key, value) {
                $('#TypeSocieteSelect').append($('<option>', {
                    value: value.IDTypeSociete,
                    text: value.libelleTypeSociete
                }))
            })
        });
    }

    function recuperationListeComboProprietaire() {
        MesrequetesAjax("{{ route('Proprietaire.recuperation') }}", "GET", null, true, true, "JSON", function(
            resp) {
            $.each(resp.data, function(key, values) {
                var name = '';
                if(values.prenom !=null){
                    name = values.prenom;
                }
                $('.LocataireSelect').append($('<option>', {
                    value: values.IDProprietaire,
                    text: values.nom + ' ' +name 
                }))
            })
        });
    }

    function recuperationTypedePiece(){
        MesrequetesAjax("{{ route('typePiece.recuperation') }}", "GET", null, true, true, "JSON", function(resp) {
            $.each(resp.data, function(key, values) {
                $('.TypeDocumentSelect').append($('<option>', {
                    value: values.IDTypepiece,
                    text: values.libelleType_piece
                }))
            })
        });  
    }

    function recuperationDocumentLocataireParticulier(){
        var docAddtableParticulier =  $('#FormTableLocataireParticulier').DataTable();
         MesrequetesAjax("{{ route('Document.recuperation') }}", "GET", {typeDossier:4}, null, true, "JSON", function(resp) {
                docAddtableParticulier.clear().draw();
                            $.each(resp.data,function(key,value){
                                docAddtableParticulier.row.add(['<i class="fa fa-trash text-danger cursor-pointer" id="suppressionDocuments" data-id="'+value.IDPiecejoint+'"></i>',value.libelleType_piece,value.referenceDocument,value.UrlFichier])
                            })

                 docAddtableParticulier.draw(); 
         })
    }
  
    function recuperationDocumentLocataireEntreprise(){
        var docAddtableEntreprise =  $('#FormTableLocataireEntreprise').DataTable();
         MesrequetesAjax("{{ route('Document.recuperation') }}", "GET", {typeDossier:4}, null, true, "JSON", function(resp) {
    
                docAddtableEntreprise.clear().draw();
                            $.each(resp.data,function(key,value){
                                docAddtableEntreprise.row.add(['<i class="fa fa-trash text-danger cursor-pointer" id="suppressionDocuments" data-id="'+value.IDPiecejoint+'"></i>',value.libelleType_piece,value.referenceDocument,value.UrlFichier])
                            })

                 docAddtableEntreprise.draw();
            })

    }

    // COCHEZ TOUTES LES CASES A COCHER DANS LE PANIER
    function toggle(source) {

        checkboxes = document.getElementsByName('myCheckbox');
        for (var i = 0, n = checkboxes.length; i < n; i++) {
            checkboxes[i].checked = source.checked;
        }

    }
   
</script>

<script>
    const photoZone = document.querySelector('#PhotoZone');
    const inputPhotoPersonnel = document.querySelector('#photo');
    const ImgPhoto = document.querySelector('.imgPhoto');
    photoZone.addEventListener('click', () => {
        inputPhotoPersonnel.click();
    })

    inputPhotoPersonnel.addEventListener('change', function(e) {

        const clickFile = this.files[0];
        if (clickFile) {

            ImgPhoto.style = "display:block";
            const reader = new FileReader();
            reader.readAsDataURL(clickFile);
            reader.onloadend = function() {

                const result = reader.result;
                let src = this.result;
                ImgPhoto.src = src;
                ImgPhoto.alt = clickFile.name
            }

        }

    })
</script>
</body>

</html>