@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 factures échues</h4>
        </div>
        <hr>

           <br>
                <div class="d-flex justify-content-center flex-wrap animate__animated animate__zoomIn">
                
                    <div style="margin-right:10px;">
                        <p class="Nomask fs-1">Montant total : <span class="text-warning fs-1" id="MontantTotal"></span> </p>
                         <p class="mask" style="display:none;">Montant Total : <span class="text-warning fs-1">***** F</span> </p>
                    </div>

                    <div style="margin-right:10px;">
                         <p class="Nomask fs-1">Total réglé : <span class="text-success fs-1" id="TotalRegle"></span></p>
                          <p class="mask"  style="display:none;">Total réglé : <span class="text-success fs-1" >***** F</span></p>
                    </div>

                    <div  style="margin-right:10px;">
                        <p class="Nomask fs-1">Total restant :  <span class="text-danger fs-1" id="TotalRestant"></span></p>
                        <p class="mask"  style="display:none;">Total restant :  <span class="text-danger fs-1" >***** F</span></p>
                    </div>

                    <div>
                        <p><i class="fa fa-eye-slash fs-2 mt-1 cursor-pointer masquerTotaux"></i></p>
                         <i class="fa fa-eye fs-2 cursor-pointer voirTotaux" style="display:none;"></i>
                    </div>
                </div>
                
            <br>

        <div class="card card-shadow mb-3"> 
            <div class="card-body">
                <div class="d-flex justify-content-center">
                    <input style="width:300px; text-align:center"
                        class="form-control datetimepicker flatpickr-input dateInputSearch dateInput" type="text"
                        placeholder="d/m/Y À d/m/Y"
                        data-options="{&quot;mode&quot;:&quot;range&quot;,&quot;dateFormat&quot;:&quot;d/m/Y&quot;,&quot;disableMobile&quot;:true}"
                        readonly="readonly">
                
                    <button class="btn btn-success me-1" id="dateSearch" style="margin-left:12px;">
                         <i class="fa fa-search cursor-pointer  text-light "></i>
                    </button>
                </div>

                <div class="table-responsive">
                    <table id="ListeFactureDatatable" class="table table-striped w-100">
                        <thead class="tableauEntete">
                            <tr>
                              
                                <th>Actions</th>
                                <th>Locataire</th>
                                <th>Date</th>
                                <th>Référence</th>
                                <th>Montant</th>
                                <th>Montant réglé</th>
                                <th>Montant restant</th>
                                <th>Date écheance</th>
                                <th>Temps écoulé</th>
                            </tr>
                        </thead>

                    </table>
                </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> 
                             
                            </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-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-contact" role="tabpanel" aria-labelledby="contact-tab">

                                <div class="table-responsive">
                                    <table id="FactureTable" class="table table-light">
                                        <thead>
                                        <th>Date</th>
                                        <th>Référence</th>
                                        <th>Montant</th>
                                        <th>Taux propriétaire (%)</th>
                                        </thead>
                                    </table>
                                </div>
                               
                        </div>

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

                            <table id="ReglementTable" class="table table-light">
                                        <thead>
                                        <th>Date</th>
                                        <th>Référence</th>
                                        <th>Montant</th>
                                        </thead>
                            </table>
                        
                        </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>


        @include('../primary_footer')

    </div>

    @include('../chatblock')

</main>

@include('../rightbar')

@include('../footer')

<script>
$(document).ready(function(){
     $('.nomPage').text('Listes factures')
    $("#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"
            }
        ]
    });

    $("#BienTable").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,1,2,3,4,5,6],
                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: 25,
             columnDefs:[
                {
                    target:[2,3],
                    className:"text-end"
                },
                 {
                    target:[0,1],
                    className:"text-center"
                }
        
            
            ]
           
        });

    $("#tableDataCommentaire").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"
            }  
        ],

        order:[]
        
    });

    $("#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:[2],
                    className:"text-end"
                },
                {
                    target:[0,1],
                    className:"text-center"
                }
            
            ]
           
         });

    $("#VersementsTable").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:[
            {
                targets:[0,1,3],
                className: 'text-center'
            },
            {
                targets:[2],
                className: 'text-end'
            }
        ]
        
    });
    $("#ListeFactureDatatable").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,2,3],
                    className:'text-center'
                },
                 {
                    targets:[1],
                    className:'tblWidth-2'
                },
                {
                    targets:[4,5,6],
                    className:'text-end'
                },
                {
                    targets:[7,8],
                    className:'text-center'
                }
            ],
            order:[]
            
        });

    listeFactureEchues();


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

            var e = $('.dateInputSearch').val();
            var dateDepart = e.slice(0, 10)
            var dateFin = e.slice(13, 23)
            var dateDepartFormater = dateDepart.slice(6, 10) + '-' + dateDepart.slice(3, 5) + '-' +dateDepart.slice(0, 2)
            var dateFinFormater = dateFin.slice(6, 10) + '-' + dateFin.slice(3, 5) + '-' + dateFin.slice(0, 2)
            listeFactureEchues(dateDepartFormater,dateFinFormater);
    })

    $(document).on('click', '.masquerTotaux', function(){
                $(this).css('display','none');
                $('.mask').css('display','block');

                $('.Nomask').css('display','none');
                $('.voirTotaux').css({'display':'block','margin-top':'-10px'});
    })

    $(document).on('click', '.voirTotaux', function(){
                $(this).css('display','none');
                $('.mask').css('display','none');

                $('.Nomask').css('display','block');
                $('.masquerTotaux').css({'display':'block','margin-top':'-10px'});
    })


    $(document).on('click','#DetailLocataires',function(){
            var idProprietaire = $(this).attr('data-id');
            var tabFacture = $("#FactureTable").DataTable();
            var tabBien = $("#BienTable").DataTable();
            var tabDocument = $("#DocumentTable").DataTable();
            var tabVersement = $("#VersementsTable").DataTable();
        MesrequetesAjax("{{ route('Proprietaire.recuperation') }}", "GET", {IDProprietaire :idProprietaire}, 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].TypeProprietaire !=1 && resp.data[0].photoProfil ==null){
                        proprietaireDefaultImg = '<img class="imgInTableRow" src="media/PhotoProfil/buldingDefault.png">';
                    }

                    if(resp.data[0].TypeProprietaire ==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>\
                        ')

                    tabFacture.clear().draw();
                    $.each(resp.FacturelocationProprietaire,function(key,value){
                        var resteEncaisse = value.montantFacture - value.totalEncaisse
                        var resteVerse = value.MontantPartProprietaire - value.totalverse
                        tabFacture.row.add([formatageDate(new Date(value.dateFacture)),value.refFacture,formaterNombre(value.montantFacture)+' F',
                        formaterNombre(value.MontantPartProprietaire)+' F',
                        value.TauxCommissionGestion,'<span class=" badge bg-success"> Encaissé : '+formaterNombre(value.totalEncaisse)+' F</span>'+' '+'<span class="badge bg-danger">Reste : '+formaterNombre(resteEncaisse)+' F</span>', '<span class="badge bg-success"> Versé : '+formaterNombre(value.totalverse)+' F</span>'+' '+'<span class="badge bg-danger">Reste : '+formaterNombre(resteVerse)+' F</span>'])
                    })

                    tabFacture.draw();

                    tabBien.clear().draw();
                    $.each(resp.BienProprietaire,function(key,value){
                        tabBien.row.add([value.refBien,value.intituleBien,value.intituleTypeBien,value.libelleTypePrecis,value.taux,value.NomLocataire,value.Libelleville,value.Libellecommune])
                    })

                    tabBien.draw();

                    tabDocument.clear().draw();
                    $.each(resp.PieceJointe,function(key,value){
                        tabDocument.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])
                    })
                    tabDocument.draw();
                    
                        
                    tabVersement.clear().draw();
                    $.each(resp.VersementProrietaire,function(key,value){
                        var heure = value.dateVersementLigne.substr(11,19)
                        tabVersement.row.add([formatageDate(new Date(value.dateVersementLigne))+' '+heure,value.refFacture,formaterNombre(value.montantVersementLigne)+' F',value.nom_utilisateur+' '+value.prenom_utilisateur])
                    })
                    tabVersement.draw();


        })

            

            
        $('#ProprietaireDetailModal').modal('show')
    })

        $(document).on('click','#DetailLocataire',function(){
            var idLocataire= $(this).attr('data-id');
             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 !=''){
                   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();
                    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();

                 tabFacture.clear().draw();
                $.each(resp.facturelocationLocataire,function(key,value){
                   tabFacture.row.add([formatageDate(new Date(value.dateFacture)),value.refFacture,formaterNombre(value.montantFacture)+' F',value.TauxCommissionGestion])
                })
                tabFacture.draw();
                 tabReglement.clear().draw();
                $.each(resp.Reglement,function(key,value){
                   tabReglement.row.add([formatageDate(new Date(value.dateReglement)),value.RefReglementInterne,formaterNombre(value.montantReglement)+' F'])
                })
                tabReglement.draw();
            })
           $('#LocataireDetailModal').modal('show')
        })
       
    
})
function listeFactureEchues($dateDepart,$dateFin){

         var table =  $("#ListeFactureDatatable").DataTable();
         table.clear().draw();
        MesrequetesAjax("{{ route('FactureEchus.recuperation') }}", "GET", {dateDepart:$dateDepart,dateFin:$dateFin}, null, true, "JSON", function(response) {
            
            $('div#loaders').addClass('hiddenElement');

                 var montantTotal = 0;
                 var totalRegle = 0;
                 var totalRestant = 0;
                $.each(response.ligne,function(key,value){

                            var date = moment(value.dateEcheanceFacture); // Date de référence
                              moment.locale('fr');
                            var tempsecoule = date.fromNow();
                      montantTotal +=parseInt(value.montantFacture);
                      totalRegle +=parseInt(value.montantRegle);
                      var montantRestant = parseInt(value.montantFacture) - parseInt(value.montantRegle)

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

                    if(value.TypeLocataire !=1 && value.photoProfil ==null ){
                                photoprofil = '<img class="imgInTableRow" src="media/PhotoProfil/buldingDefault.png">';
                    }
                    table.row.add(['<i class="fa fa-eye text-success cursor-pointer" data-id="'+value.IDLocataire+'" id="DetailLocataire"></i>',photoprofil+' '+value.nom+' '+value.prenom,
                    formatageDate(new Date(value.dateFacture)),value.refFacture,formaterNombre(value.montantFacture)+' F',formaterNombre(value.montantRegle)+' F',formaterNombre(montantRestant)+' F',
                   formatageDate(new Date(value.dateEcheanceFacture)),'<span class="text-success">'+tempsecoule+'</span>'])
                })

              table.draw();

            $('#MontantTotal').text(formaterNombre(montantTotal)+' F');
        
            $('#TotalRegle').text(formaterNombre(totalRegle)+' F');

            var TotalRestants = parseInt(montantTotal) - parseInt(totalRegle);

            $('#TotalRestant').text(formaterNombre(TotalRestants)+' F');
            $('.masquerTotaux').css({'display':'block','margin-top':'-10px'});
           $('.voirTotaux').css({'display':'none'});
             
         }, null, function() {
            $('div#loaders').removeClass('hiddenElement');
        })

}
</script>