@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</h4>
            <div class="d-flex">
                    <button type="button" id="ImprimerListeFactureLocation" style="margin-right:8px;"  class="btn btn-warning btn-sm rounded-pill"><i data-feather="printer"></i>
                        Impression
                    </button>
             <button type="button" class="btn btn-success btn-sm rounded-pill" id="btn-CallModalGenererFacture" data-bs-toggle="modal" data-bs-target="#ModalGenererFacture"><i data-feather="plus-circle"></i> Générer facture</button>
            </div>
         </div>
        <hr>
            <br>
                <div class="d-flex justify-content-center flex-wrap">
                
                    <div style="margin-right:10px;">
                        <p class="Nomask">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">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">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 mb-3" style="box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;">

            <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 " 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="FactureLocationDatatable" class="table table-striped w-100">
                        <thead class="tableauEntete">
                            <tr>
                                <th>Actions</th>
                                <th>Date facture</th>
                                <th>Référence</th>
                                <th>Locataire</th>
                                <th>Référence location</th>
                                <th>Montant facture</th>
                                <th>Montant reglé</th>
                                <th>Montant restant</th>
                                <th>Bien</th>
                                <th>Statut</th>
                                <th>Date démarrage</th>
                                <th>Date de fin</th>
                                <th>Date d’échéance</th>
                            </tr>
                        </thead>

                    </table>
                </div>

            </div>
        </div>


        <div class="modal fade" id="DetailRelanceManuelleFactureModal" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title text-white" id="staticBackdropLabel">Relance manuelle</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="table-responsive">
                            <table id="tableRelanceDetail" class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Reference facture</th>
                                        <th>Mode relance</th>
                                        <th>Model</th>
                                    </tr>
                                </thead>

                            </table>
                        </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="ContenuModelFactureModal" tabindex="-1" aria-labelledby="staticBackdropLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title text-white" id="staticBackdropLabel">Aperçu</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 id="ContenuModelBox" style="width:100%;padding:20px"></div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-danger" id="ContenuModelBtnModal" type="button"
                            data-bs-dismiss="modal">Fermer</button>
                    </div>

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


        <div class="modal fade" id="RelanceManuelleFactureModal" tabindex="-1" aria-labelledby="staticBackdropLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title text-white" id="staticBackdropLabel">Relance manuelle</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">

                        <form id="EnvoiDeModel">
                            @csrf
                            <div class="row">
                                <div class="col-md-12 col-xl-12 col-sm-12">
                                    <div class="form-floating mb-3">
                                        <input class="form-control" id="IDFactureHidden" name="IDFactureHidden"
                                            type="hidden" />
                                        <input class="form-control" id="EmailLocataireHidden"
                                            name="EmailLocataireHidden" type="hidden" />
                                        <input class="form-control" id="NumeroFacture" name="NumeroFacture"
                                            type="hidden" />
                                    </div>
                                    <textarea name="contenuModel" class="modelCodeBox" id="summernote"></textarea>
                                    <small class="modelRequired text-danger FormLabel"></small>
                                </div>
                            </div>


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

                        <button class="btn btn-outline-danger" type="button" data-bs-dismiss="modal">Fermer</button>
                        <button class="btn btn-success" type="submit">Envoyer</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="ReglementFactureModal" tabindex="-1" aria-labelledby="staticBackdropLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title text-white" id="staticBackdropLabel">Règlément <span id="RefFacture"></span></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">
                                    
                                    <div class="card-body">
                                    
                                    <p class="text-center fw-bold" id="NomLocataire"></p>
                            
                                    </div>
                            </div>

                            <div class="table-responsive">
                                    <table align="center" class="table table-bordered mt-4" style="width:70%">
                                        <thead class="bg-success text-white" >
                                        <th style="font-size:10px">Location</th>
                                        <th style="font-size:10px">Bien</th>
                                        <th style="font-size:10px">Montant</th>
                                        <th style="font-size:10px">Montant réglé</th>
                                        <th style="font-size:10px">Montant restant</th>
                                        </thead>
                                        <tr>
                                        <td  style="font-size:10px"class="text-center" id="infoLocation"></td>
                                        <td  style="font-size:10px" class="text-center" id="infoBien"></td>
                                        <td  style="font-size:10px"class="text-center" id="infoMontant"></td>
                                        <td  style="font-size:10px"class="text-center" id="infoMontantRegle"></td>
                                        <td  style="font-size:10px"class="text-center" id="infoMontantRestant"></td>
                                        </tr>
                                    </table>
                            </div>

                        <form class="FormAddReglementFacture needs-validation p-0" method="POST" novalidate>
                            @csrf
                                <div class="card mt-4" style="display:block;margin:0 auto">
                                    
                                    <div class="card-body">
                                    
                                        <div class="row g-3">
                                       
                                            <div class="col-md-12 col-xl-3 col-lg-3 col-sm-3">
                                            <label class="FormLabel">Reférence Externe</label>
                                            <input  class="form-control ReferenceReglementExterne" id="ReferenceReglementExterne" name="ReferenceReglementExterne" type="text" />
                                            </div>

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

                                                    <input class="form-control  ReferenceReglement" id="ReferenceReglement" name="ReferenceReglement" type="hidden" readonly />
                                                    
                                                    <input  class="form-control ReferenceReglementNumerique" id="ReferenceReglementNumerique" name="ReferenceReglementNumerique" type="hidden" readonly />
                                            </div>

                                            <div class="col-md-12 col-xl-3 col-lg-3 col-sm-3">
                                                <label class="FormLabel">Date de règlement</label>
                                                <input value="04/10/2026" class="form-control datetimepicker dateReglement" name="dateReglement"
                                                    id="datepicker" type="text" placeholder="dd/mm/yyyy"
                                                    data-options='{"disableMobile":true,"dateFormat":"d/m/Y"}' required="required" />
                                                <div class="invalid-dateDeb">
                                                </div>
                                            </div>

                                            <div class="col-md-12 col-xl-3 col-lg-3 col-sm-3">
                                                    <label class="FormLabel">Montant</label>
                                                    <input class="form-control NumeriqueAutorise" id="montantInserer" name="montantReglement" placeholder="Entrer le montant" type="text" required />
                                                    <div class="invalid-feedback">
                                                         Montant obligatoire
                                                    </div>
                                            </div>

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

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

                                            <div class="col-md-12 col-xl-12 col-sm-12">
                                                <label class="FormLabel">Observation</label>
                                                <textarea class="form-control" name="ObservationReglement" id=""></textarea>
                                            </div>

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

                                            <div class="col-md-12 col-xl-12 col-sm-12">
                                                <div class="">
                                                    <input class="form-control" id="IdfactureHidden" name="IdfactureHidden" type="hidden" />
                                                    <input class="form-control" id="mt-facture" type="hidden" />
                                                </div>
                                            </div>
                                        </div>
                                       
                                    </div>
                                </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-danger" type="button" data-bs-dismiss="modal">Fermer</button>
                        <button class="btn btn-success" type="submit">Enregistrer</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>

         <div class="modal fade" id="ModalGenererFacture"  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 modalTitreGenererFacture" ></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">

                        <form class="FormAddGenererFacture needs-validation p-0" method="POST" novalidate>

                            <div class="card">

                                <div class="card-body">
                                
                                    <div class="row g-2">
                                        <div class="col-md-12 col-sm-12 col-lg-6 col-md-xl-6">
                                                <label class="FormLabel">Date début facturation</label>
                                                <input value="01/10/2026" class="form-control datetimepicker dateDebutPeriodeLocation"
                                                id="datepicker" type="text" placeholder="dd/mm/yyyy"
                                                data-options='{"disableMobile":true,"dateFormat":"d/m/Y"}' required="required" />
                                        </div>

                                        <div class="col-md-12 col-sm-12 col-lg-6 col-md-xl-6">
                                                <label class="FormLabel">Date fin facturation</label>
                                                <input value="04/12/2026" class="form-control datetimepicker dateFinPeriodeLocation" 
                                                id="datepicker" type="text" placeholder="dd/mm/yyyy"
                                                data-options='{"disableMobile":true,"dateFormat":"d/m/Y"}' required="required" />

                                                {{-- <input type="text" class="form-control" name=""> --}}
                                        </div>
                                    </div><br><br>

                                    <table id="tableListeLocataireForFacture" class=" table table-striped w-100">

                                        <thead>
                                            <th>
                                                <div class="form-check d-flex justify-content-center">
                                                    <input class="form-check-input my-checkbox cursor-pointer" id="CheckAllCheckbox" type="checkbox" value="" />
                                                </div>
                                            </th>
                                            <th>Locataire</th>
                                            <th>Location</th>
                                        </thead>
                                    </table>

                                </div>
                            </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="GenererFactureLocation"  type="button">Générer</button>
                    </div>
                      </form>
                </div>
            </div>
        </div>


    @include('../primary_footer')

    </div>

    @include('../chatblock')

</main>

@include('../rightbar')

@include('../footer')

<script>
    $(document).ready(function() {
       /* $(window).scroll(function() {
            var hauteurScroll = $('.wrapper').offset().top; 
            var scrollActuel = $(this).scrollTop(); 
            if (scrollActuel > hauteurScroll) {
            $('#FactureLocationDatatable').addClass('fixe');
            } else {
            $('#FactureLocationDatatable').removeClass('fixe');
            }
        });*/

        $('.nomPage').text('Facture')
        $('#summernote').summernote({
            placeholder: 'Entrez du texte ici...',
            tabsize: 2,
            height: 200
        });
       
        var dateDebut = dateDebRecuperationdonnees()
        var dateFin = dateFinRecuperationdonnees()
        recuperationFactureLocation();
        referenceReglement();

        var tableauIDLocation = [];
        
         $('#montantInserer').on('input', function() {
             var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });
        
        $("#tableRelanceDetail").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: 10,
            'columnDefs': [{
                targets: [0, 1, 2, 3],
                className: 'text-center'
            }],
            'order': []
        });

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

        $("#tableListeLocataireForFacture").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: 10,
            select: {
                        style: 'multi', // Enable multi-selection
                        selector: 'td:first-child' // Selector for the checkbox in the first column
                    },

           /* columnDefs:[

                {
                    targets:[0,1,3],
                    className:'text-center tblWidth-3'
                },
                {
                    targets:[2,7],
                    className:'tblWidth-1'
                },
                 {
                    targets:[4,5,6],
                    className:'tblWidth-2'
                },
                 {
                    targets:[4,5,6],
                    className:'text-end'
                }
            ],
            
            'order': []*/
        });

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

            if($('.dateInputSearch').val().length==0){
               Notification('Erreur', 'Veuillez renseigner une intervalle de date', 'top-right', 'error')
                return false;
            }
            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)
             recuperationFactureLocation(dateDepartFormater,dateFinFormater);
        })

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

            var getIDFacture = $(this).attr('data-idfacture')
            var getLocataireEmail = $(this).attr('data-email')
            var numeroFacture = $(this).attr('data-numerofacture')
            $('#NumeroFacture').val(numeroFacture)
            $('#IDFactureHidden').val(getIDFacture)
            $('#EmailLocataireHidden').val(getLocataireEmail)
            MesrequetesAjax("{{ route('ModelFacture.recuperation') }}", "GET", null, true, true, "JSON",
                function(resp) {
                    $('.modelCodeBox').summernote('code', resp.ligne[0].ContenuModel);
                })
            $('#RelanceManuelleFactureModal').modal('show')
        })

        $('#EnvoiDeModel').on('submit', function(e) {
            e.preventDefault();

            MesrequetesAjax("{{ Route('Model.envoi') }}", "POST", new FormData(this), false, false,
                "JSON",
                function(resp) {
                    $('div#loaders').addClass('hiddenElement');
                    Notification('Succès', resp.msg, 'top-right', 'success')
                    $('#RelanceManuelleFactureModal').modal('hide');
                    
                    if(resp.error){
                         $('div#loaders').addClass('hiddenElement');
                        Notification('Erreur',resp.msg,'top-right','error')
                    }
                },
                null,
                function() {

                    if ($('.modelCodeBox').summernote('isEmpty')) {
                        $('.modelRequired').text('Champ obligatoire');

                        return false;
                    } else {
                        $('.modelRequired').css('border-color', 'green');

                    }
                    $('.nomPage').text('Patientez...')
                    $('#RelanceManuelleFactureModal').modal('hide');
                    $('div#loaders').removeClass('hiddenElement');
                }
            )

        })

        $(document).on('click', '#VoirContenuModel', function() {
            var IDRelanceFactures = $(this).attr('data-idrelancefacture')
            MesrequetesAjax("{{ route('relanceByIDRelance.recuperation') }}", "GET", {
                IDRelanceFacture: IDRelanceFactures
            }, null, true, "JSON", function(resp) {

                $('#ContenuModelBox').html('');
                $('#ContenuModelBox').append(resp.ligne[0].contenuModel)

            })
            $('#DetailRelanceManuelleFactureModal').modal('hide');
            $('#ContenuModelFactureModal').modal('show')
        })

        $(document).on('click', '#ContenuModelBtnModal', function() {
            $('#DetailRelanceManuelleFactureModal').modal('show');
            $('#ContenuModelFactureModal').modal('hide')
        })

        $(document).on('click', '#VoirRelanceFacture', function() {
            var table = $("#tableRelanceDetail").DataTable();
            var IDFacture = $(this).attr('data-idfacture');
            var Moderelance = '';
            table.clear().draw();
            MesrequetesAjax("{{ route('relanceByIDFacture.recuperation') }}", "GET", {
                IDfacture: IDFacture
            }, null, true, "JSON", function(resp) {
                $.each(resp.ligne, function(key, value) {
                    if (value.modeRelance == 2) {
                        Moderelance = '<span class="badge bg-primary">Manuelle</span>'
                    } else {
                        Moderelance =
                            '<span class="badge bg-success">Automatique</span>'
                    }
                    table.row.add([formatageDate(new Date(value.dateRelance)), value
                        .refFacture, Moderelance,
                        '<i class="fa fa-eye cursor-pointer" id="VoirContenuModel" data-idrelancefacture="' +
                        value.IDRelanceFacture + '"></i>'
                    ])
                })

                table.draw()
                $('#DetailRelanceManuelleFactureModal').modal('show');
            })

        })

        $(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', '#FaireReglement', function(){

            var montantFacture = $(this).data('montant')
            var Nomcomplet = $(this).data('nomcomplet')
            var IdentifiantFacture = $(this).data('id')
            $('#IdfactureHidden').val(IdentifiantFacture)
            var RefFacture = $(this).data('reffacture')
            var Reflocation = $(this).data('reflocation')
            var bien = $(this).data('bien')
            var idlocataire = $(this).data('idlocataire')
            $('#locataireID').val(idlocataire)
            var IDFacture = $(this).data('id')
            
            var montantRegle = $(this).data('montantregle')
            var montantRestant = $(this).data('montantrestant')
                $('#mt-facture').val(montantRestant)
            $('#RefFacture').text('('+RefFacture+')')
            $('#NomLocataire').text(Nomcomplet)
            $('#infoLocation').text(Reflocation)
            $('#infoBien').text(bien)
            $('#infoMontant').text(formaterNombre(montantFacture)+' F')
            $('#infoMontantRegle').text(formaterNombre(montantRegle)+' F')
            $('#infoMontantRestant').text(formaterNombre(montantRestant)+' F')
            
            $('#ReglementFactureModal').modal('show')
        })
        
        $('.FormAddReglementFacture').on('submit',function(e){
                 e.preventDefault();
                if (!$(this)[0].checkValidity()) {
                $(this).addClass('was-validated');
                e.preventDefault();
                e.stopPropagation();
            } else {
                e.preventDefault();
                MesrequetesAjax("{{ Route('ReglementFacture.creer') }}", "POST", new FormData(this), false, false, "JSON", function(resp) {

                        $('#ReglementFactureModal').modal('hide');
                        Notification('Succès', resp.msg, 'top-right', 'success')
                        $('.InputIDRegelement').val(0)
                        recuperationFactureLocation();
                        $('.FormAddReglementFacture')[0].reset()
                        $('.FormAddReglementFacture').removeClass('was-validated');

                        var IDRegelementLocataire = resp.IDreglement
                        var IDfacture = $('#IdfactureHidden').val()
                            // mode:1 => impression avec Entete
                            // 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('RecuReglement.imprimer') }}", "GET", {mode:0,idRegelementLocataire: IDRegelementLocataire,IDFacture:IDfacture}, 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('RecuReglement.imprimer') }}", "GET", {mode:1,idRegelementLocataire: IDRegelementLocataire,IDFacture:IDfacture}, 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(error) {},
                    function() {

                            var montantInsere = $('#montantInserer').val().replace(/\s/g, '');
                            var e = parseInt(montantInsere)
                            var montantRestant = $('#mt-facture').val();
                        
                            if( e > parseInt(montantRestant)){

                                Notification('Erreur','Vous ne pouvez payer plus que le montant de la facture','top-right','error');
                                return false;
                            }       
                        if ($('#montantInserer').val().length == 0) {
                            return false;
                        }

                        if ($('#mt-facture').val() == 0) {

                             Notification('Erreur','Cette facture est déjà soldé','top-right','error');
                            return false;
                        }

                        if ($('.ModeReglementSelect').val() == "") {
                            return false;
                        }

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

                    })

            }
        }) 

        $(document).on('click', '#btn-CallModalGenererFacture', function(){  
            $('.modalTitreGenererFacture').text('Génération de facture') 
        })

        $(document).on('change', '.dateFinPeriodeLocation', function(){
            
            var dateDebut = $('.dateDebutPeriodeLocation').val()
            var dateFin = $(this).val();
            MesrequetesAjax("{{ route('GetGenererFactureLocation.recuperation') }}", "GET", {
                dateDebPeriode: dateDebut,
                dateFinPeriode: dateFin
            }, null, true, "JSON", function(resp) {
            
            var table =  $("#tableListeLocataireForFacture").DataTable();
                table.clear().draw()
            $.each(resp.data,function(key,value){

                var prenom = '';
                if(value.Locataire[0].prenom !=null){
                    prenom = value.Locataire[0].prenom;
                }
                table.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.IDLocation+'" id="checkboxTable"  type="checkbox"/></div>',
                    value.Locataire[0].nom+' '+prenom,
                    value.refLocation
                ])
            })

            table.draw();

            },
            null,
            function(){


            })

        })
        
        // :::::::::::::::::::::::::::::::::::::::::: CASE A COCHER TRES FONCTIONNELLE ::::::::::::::::::::::::::::::::::::::::
        $('#CheckAllCheckbox').on('click', function() {
            var table =  $("#tableListeLocataireForFacture").DataTable();
            var rows = table.rows({ search: 'applied' }).nodes();
            $('input[type="checkbox"]', rows).prop('checked', this.checked);
             if (this.checked) {
                   
                tableauIDLocation.length = 0;
                    $('input[name="myCheckbox"]',rows).each(function() {
                    tableauIDLocation.push(this.value)
                    }) 
                    
            } else {
                tableauIDLocation.length = 0;
            }
        
        });

        $(document).on('change', '#checkboxTable', function() {
            var valeurCase = $(this).val(); 
            if ($(this).is(':checked')) {
                tableauIDLocation.push(valeurCase);
            } else {
                var index = tableauIDLocation.indexOf(valeurCase);
                if (index !== -1) {
                    tableauIDLocation.splice(index, 1);
                }
            }

        });
        // :::::::::::::::::::::::::::::::::::::::::: FIN CASE A COCHER TRES FONCTIONNELLE ::::::::::::::::::::::::::::::::::::::::

        $('#GenererFactureLocation').on('click', function() {
           
            var dateDebut = $('.dateDebutPeriodeLocation').val()
            var dateFin = $('.dateFinPeriodeLocation').val()
           
            MesrequetesAjax("{{ route('GetGenererFactureLocation.creer') }}", "GET", {
                dateDebPeriode: dateDebut,
                dateFinPeriode: dateFin,
                tabID : tableauIDLocation
            }, null, true, "JSON", function(resp) {

                    Notification('Succès',resp.mg,'top-right','success');
                    $('#ModalGenererFacture').modal('hide')
                    recuperationFactureLocation();

            })
           
        })

        //29-01-2024
        // IMPRESSION LISTE DES FACTURES LOCATIONS
        $(document).on('click','#ImprimerListeFactureLocation',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:8,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:8,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 recuperationFactureLocationTable(response) {
        var table = $("#FactureLocationDatatable").DataTable();
        table.clear().draw()
        var montantTotal = 0;
        var totalRegle = 0;
        var totalRestant = 0;
        $.each(response, function(key, value) {
            
            montantTotal +=parseInt(value.montantFacture);
            totalRegle +=parseInt(value.MontantRegle);
            var montantrestant = parseInt(value.montantFacture) - parseInt(value.MontantRegle)
            
            var periodicite = '';
            var photoprofil = '';
            var prenom = '';
            if (value.Periodicite == 1) {
                periodicite = 'Journalier'
            } else if (value.Periodicite == 2) {
                periodicite = 'Hebdomadaire'
            } else if (value.Periodicite == 3) {
                periodicite = 'Mensuelle'
            } else if (value.Periodicite == 4) {
                periodicite = 'Trimestre'
            } else {
                periodicite = 'Semestre'
            }
            if (value.photoProfil != "") {
                photoprofil = '<img class="imgInTableRow" src="media/PhotoProfil/' + value.photoProfil + '">';

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

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

            if(value.prenom !=null){

                   prenom = value.prenom
            }

            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth() + 1;
            var day = today.getDate();

            var formattedDate = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
           
            if( montantrestant > 0 && formattedDate > value.dateEcheanceFacture ){

                 statutFacture = '<span class="badge bg-danger">Echus</span>';
            }

            if( montantrestant <= 0){

                 statutFacture = '<span class="badge bg-success">Réglé</span>';
            }

            
            table.row.add([
                '<i id="VoirRelanceFacture" data-idfacture="' + value.IDFacture +
                '"  class="fa fa-eye text-success cursor-pointer" title="Voir relance"></i>&nbsp;&nbsp;<i class="fa fa-plus-circle text-warning cursor-pointer" title="Faire un règlément" id="FaireReglement" data-montantrestant="'+montantrestant+'" data-montantregle="'+value.MontantRegle+'" data-bien="'+value.intituleBien+'" data-reflocation="'+value.refLocation+'" data-reffacture="'+value.refFacture+'" data-nomcomplet ="'+value.nom+' '+prenom+'" data-montant="'+value.montantFacture+'" data-idlocataire="'+value.IDLocataire+'" data-id="'+value.IDFacture+'"></i> &nbsp;<i id="RelanceManuelleFacture" data-numerofacture="' +
                value.refFacture + '" data-idfacture="' + value.IDFacture + '"  data-email="' + value
                .email +
                '"  class="fa fa-refresh text-warning cursor-pointer" title="Relance manuelle"></i>',formatageDate(new Date(value.dateFacture)),value.refFacture, photoprofil + ' ' + value.nom + ' ' +prenom, value.refLocation,
                '<span style="font-weight:bolder">' + formaterNombre(value.montantFacture) +' F <span>',formaterNombre(value.MontantRegle)+' F',formaterNombre(montantrestant)+' F',value.intituleBien, statutFacture,
                 formatageDate(new Date(value.dateDebutFacture)), formatageDate(new Date(value.dateFinFacture)), formatageDate(new Date(value.dateEcheanceFacture))
            ])
        })

        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'});
    }

    function recuperationFactureLocation($dateDebut,$dateFin) {
        MesrequetesAjax("{{ route('FactureLocation.recuperation') }}", "GET",{dateDebut:$dateDebut,dateFin:$dateFin}, null, true,
            "JSON",
            function(response) {
                $('div#loaders').addClass('hiddenElement');
                recuperationFactureLocationTable(response)
            }, null,
            function() {
                $('div#loaders').removeClass('hiddenElement');
            });

    }

    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 referenceReglement() {
        MesrequetesAjax("{{ route('getReferenceReglement.creer') }}", "GET", null, true, true, "JSON", function(resp) {
            
            $('#ReferenceReglement').val(resp[0]);
            $('#ReferenceReglementNumerique').val(resp[1]);
            
        });
    }

     function toggle(source) {

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

    }

</script>