@php
  $D_Creation_location = session()->get('D_Creation_location');
  $D_Modification_location = session()->get('D_Modification_location');
  $D_Suppression_location = session()->get('D_Suppression_location');
@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 locations</h4>

                    <div class="d-flex">

                    <button type="button" id="ImprimerListeLocation" 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_location)
                             <button type="button" class="btn btn-success btn-sm rounded-pill" id="btn-CallModalAdd" data-bs-toggle="modal" data-bs-target="#LocationModal"><i data-feather="plus-circle"></i> Ajouter</button>
                     @endif
                </div>

                       
                </div>

                <hr>

        <div class="card card-shadow">

            <div class="card-body">

            <div class="d-flex justify-content-center">

             <label style="margin-right:15px;margin-top:7px" class="FormLabel">Statut</label>
                   <div style="margin-right:15px">
                       
                        <select class="form-select " id="StatutLocation" style="height:35px" >
                                <option selected value="1">En cours</option>
                                <option  value="2">En attente</option>
                                <option  value="3">Clôturé</option>
                                <option  value="0">Tous</option>
                        </select>
              
                   </div>
                    <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="LocationDatatable" class="table table-striped w-100 display">
                        <thead class="tableauEntete">
                            <tr>
                                <th>Actions</th>
                                <th>Référence</th>
                                <th>Locataire </th>
                                <th>Statut location</th>
                                <th>Date démarrage</th>
                                 <th>Jour de facturation</th>
                                <th>Périodicité</th>
                              
                                <th>Type de bail</th>
                                <th>Caution</th>
                                <th>Montant TTC</th>
                                <th>Frais de retard</th>
                                <th>Info création</th>
                               
                            </tr>
                        </thead>

                    </table>
                </div>

            </div>
        </div>


        <div class="modal fade" id="LocationModal" 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="modalTitreLocation"></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="formLocationAdd  needs-validation p-0" method="POST" novalidate>
                              @include('OPERATIONS/FORMS/locationForm')

                    </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" id="btn-AddLocation"  type="submit">Enregistrer</button>
                    <button class="btn btn-success" id="btn-modifierLocation" style="display:none" type="submit">Modifier</button>
                     </form>
                    </div>
                </div>
            </div>
        </div>


         <div class="modal fade" id="VoirGarantModal" tabindex="-1" 
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-center ">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title text-white" id="staticBackdropLabel">Garant</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">
            
                   <table id="tableGarant" align="center" class=" w-100 table table-bordered" >
                   <thead>
                   <th>Nom complet</th>
                   <th>Téléphone</th>
                   <th>Email</th>
                   <th>Lieu habitation</th>
                   <th>Action</th>
                   </thead>
                   
                   </table>
                       
                    </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="VoirLocationModal" 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 location <span id="RefLocation"></span></h5><button
                            class="btn p-1 CloseModalBtn" 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" style="background-image:url('assets/img/bg.png');background-size:cover">

                    
                      <ul class="nav nav-underline" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation"><a class="nav-link active" id="homes-tabs" data-bs-toggle="tab" href="#tabs-homes" role="tab" aria-controls="tabs-homes" aria-selected="false" tabindex="-1">Informations principales</a></li>
                        <li class="nav-item" role="presentation"><a class="nav-link" id="profiles-tabs" data-bs-toggle="tab" href="#tabs-profiles" role="tab" aria-controls="tab-profiles" aria-selected="true">Compositions</a></li>
                        <li class="nav-item" role="presentation"><a class="nav-link" id="Factures-tabs" data-bs-toggle="tab" href="#tabs-Factures" role="tab" aria-controls="tab-Factures" aria-selected="true">Factures</a></li>
                         <li class="nav-item" role="presentation"><a class="nav-link" id="Travaux-tabs" data-bs-toggle="tab" href="#tabs-Travaux" role="tab" aria-controls="tab-Travaux" aria-selected="true">Demandes</a></li> 
                        <li class="nav-item" role="presentation"><a class="nav-link" id="contacts-tabs" data-bs-toggle="tab" href="#tabs-contacts" role="tab" aria-controls="tab-contacts" aria-selected="false" tabindex="-1">Documents</a></li>
                      </ul>
                      <div class="tab-content mt-3" id="myTabContent">
                        <div class="tab-pane fade active show" id="tabs-homes" role="tabpanel" aria-labelledby="homes-tabs">

                                 <h5>::. Informations de la location</h5>
                                <hr>
                                <div id="DetailBienBlock1" class="row g-3">
                                
                                </div>
                                <div id="DetailBienBlock2" class="row g-2"></div>
                        </div>
                        <div class="tab-pane fade" id="tabs-profiles" role="tabpanel" aria-labelledby="profiles-tabs">
                        
                                <div class="table-responsive">
                                    <table id="CompositionTableEtat" class="table table-light">
                                        <thead>
                                            <tr>
                                                <th>Libellé</th>
                                                <th>Quantité</th>
                                            </tr>
                                        </thead>
                                     
                                    </table>
                                </div>
                        </div>

                        <div class="tab-pane fade" id="tabs-Factures" role="tabpanel" aria-labelledby="Factures-tabs">
                        
                                
                                <div class="d-flex">
                                        <span id="MontantTotalFacture"></span>
                                </div>
                                <div class="table-responsive">
                                    <table id="FactureTable" class="table table-light">
                                    <thead>
                                    <th>Date debut</th>
                                    <th>Date fin</th>
                                    <th>Référence</th>
                                    <th>Montant facture</th>
                                  
                                    </thead>
                                </table>
                                </div>
                        </div>

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

                                <div class="d-flex">
                                    <div>
                                        <span>Total : </span>
                                        <span id="MontantTotalTravaux"></span>
                                    </div>   
                                </div>

                                <input type="hidden" id="GetIDLocationHidden">

                                <div class="table-responsive">
                                    <table id="DemandeTable" class="table table-light">
                                    <thead>
                                    <th>#</th>
                                    <th>Date</th>
                                    <th>Référence</th>
                                    <th>Locataire</th>
                                    <th>Bien</th>
                                    <th>Statut</th>
                                    </thead>
                                </table>
                                </div>
                        </div>

                        <div class="tab-pane fade" id="tabs-contacts" role="tabpanel" aria-labelledby="contacts-tabs">
                        
                            <div class="table-responsive">
                                    <table id="DocumentTableEtat" class="table table-light">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Type document</th>
                                                <th>Reférence</th>
                                                <th>libellé</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                        </div>
                      </div>

                </div>
                    <div class="modal-footer" style="background-image:url('assets/img/modalbg.png');background-repeat:no-repeat;background-size:cover">
                    <button class="btn btn-outline-danger" type="button" data-bs-dismiss="modal">Fermer</button>                  
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="LocationTravauxModal" data-bs-backdrop="static" data-bs-keyboard="false" 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="modalTitreTravaux"></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> --}}

                        <button class="btn p-1" type="button" data-bs-dismiss="modal" aria-label="Close"><span class="fas fa-times fs--1"></span></button>
                    </div>
                    <div class="modal-body">
                    <form  class="formLocationTravauxAdd needs-validation p-0" method="POST" novalidate>
                              @include('OPERATIONS/FORMS/locationTravauxForm')

                    </div>
                    <div class="modal-footer">
                    <button class="btn btn-outline-danger" type="button" data-bs-dismiss="modal">Fermer</button>
                    {{-- <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" id="btn-AddLocation"  type="submit">Enregistrer</button>
                    {{-- <button class="btn btn-success" id="btn-modifierLocation" style="display:none" type="submit">Modifier</button> --}}
                     </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="DemandeLigneModal"  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="modalTitreDemandeLigne"></h5>
                        <button class="btn p-1 " type="button" ><span data-bs-dismiss="modal" aria-label="Close" class="fas fa-times fs--1 text-white"></span></button>
                       
                    </div>
                    <div class="modal-body">

                    <table id="DemandeLigneTable" align="center" class="table table-light w-100">
                        <thead>
                        <th style="text-align:left">Tâche</th>
                        <th>Montant</th>
                        </thead>
                    </table>

                    </div>
                    <div class="modal-footer">
                    <button class="btn btn-outline-danger " id="FermerModalDemandeLigne" data-bs-dismiss="modal" aria-label="Close" type="button">Fermer</button>

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

        @include('../primary_footer')

    </div>

    @include('../chatblock')

</main>

@include('../rightbar')

@include('../footer')

<script>
referenceBien()
GetLocataire()
GetBienForLocation()
GetComposition()
recuperationTypedePiece()
recuperationIndiceRevision()
recuperationTypeTravaux()
recuperationPrestataire()
recuperationLocation()
referenceTravaux()
Filepond()
var tableComposition =[];
var modificationDocumentStatut =false;
const inputElement = document.querySelector('input[name="media[]"]');
const pond = FilePond.create( inputElement);
    $(document).ready(function() {

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

        $('#MtTTC').on('input', function() {
                var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });

         $('#CautionLoyer').on('input', function() {
            var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });

         $('#ValeurFraisR').on('input', function() {
             var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });

        $('#montantMoisAvance').on('input', function() {
             var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });

        $('#montantMoisCharge').on('input', function() {
             var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });

        $('#eau').on('input', function() {
             var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });

        $('#clim').on('input', function() {
             var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });
        
        $('#timbre').on('input', function() {
             var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });

        $('#fraisDossier').on('input', function() {
             var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });

        $('#tvaFraisDossier').on('input', function() {
             var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });

        $('#enregistrementLoyerAnnuel').on('input', function() {
             var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });

        $('#MontantAuProrata').on('input', function() {
             var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });

        $('#honoraireAgence').on('input', function() {
             var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });

        $('#TvaHonoraire').on('input', function() {
             var inputVal = $(this).val().replace(/ /g, "");
                if (!isNaN(inputVal)) {
                    let formattedVal = numberWithSpaces(inputVal);
                    $(this).val(formattedVal);
                }
        });

        var proarataDateDeValeur ='';
         countRow = 1;
        var tabGarantID =new Array();
        var dateDebut = dateDebRecuperationdonnees()
        var dateFin = dateFinRecuperationdonnees()

       
        $("#LocationDatatable").DataTable({
           fixedHeader: true,
            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 tblWidth-2'
                },
                {
                    targets:[1,3,4,5,6,7,8,9,10],
                    className:'tblWidth-2'
                },
                {
                    targets:[8,9,10],
                    className:'text-end'
                },
                {
                    targets:[3,4,5,6],
                    className:'text-center'
                },
                {
                    target:2,
                    className:'tblWidth-0'
                },
                {
                    target:11,
                    className:'tblWidth-0'
                }
            ]
        });

        $("#tableGarant").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: "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,3,4],
                className:'text-center'
            }]
         
        });

        $("#CompositionTable").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: "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],
                className:'text-center'
            }]
         
        });

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

        $("#DocumentTableEtat").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: "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],
                className:'text-center'
            }]
         
        });

        $("#CompositionTableEtat").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: "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],
                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: "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],
                className:'text-center'
               },
               {
                targets:[3],
                className:'text-end'
               }
            ]
         
        });

        $("#DemandeTable").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: "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,5],
                className:'text-center'
               },
              
            ]
         
        });

        $('#DemandeLigneTable').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: "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:[1],
                className:'text-end'
               },
              
            ]
            
         
        });


        $('.formLocationAdd').on('submit',function(e){
              e.preventDefault();
              var formData = new FormData(this);
              // Convertir le tableau en chaîne JSON
                var tableauJSON = JSON.stringify(tableComposition);
              formData.append('tableauCompostion',tableauJSON)
                MesrequetesAjax("{{ Route('Location.creer') }}", "POST",formData, false, false,
                    "JSON",
                    function(resp) {

                        $('#LocationModal').modal('hide');
                        Notification('Succès', resp.msg, 'top-right', 'success')
                        MesrequetesAjax("{{ route('Location.recuperation') }}", "GET", null, true, true,
                            "JSON",
                            function(response) {
                              
                                recuperationLocation()
                            });
                       // pond.removeFiles();
                        $('.formLocationAdd').removeClass('was-validated');
                        $('.formLocationAdd')[0].reset();
                        $('.referenceNumerique').val('')
                        $('#IdLocationInput').val(0)
                        $('#IdGarantInput').val(0)
                         tabGarantID.length = 0;
                        modificationDocumentStatut =false
                    },
                    function(error) {},
                    function() {

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

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

                        if ($('.dateDebLocation').val().length == 0) {
                            $('.dateDebBienContrat').css('border-color', 'red');
                            $('.invalid-dateDeb').css('color', 'red')
                            $('.invalid-dateDeb').text('Date début obligatoire')
                            return false;
                        } else {
                            $('.dateDebBienContrat').css('border-color', 'green');
                            $('.invalid-dateDeb').text('')
                        }
                 
                    }
                )
        })

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

            $('#modalTitreLocation').text('Ajout de nouvelle location')
            $('.formLocationAdd')[0].reset();
            $('#IdLocationInput').val(0)
            $('.FermerModification').css('display','none')
            $('.FermerCreation').css('display','block')
            referenceBien()
            
            $('#btn-AddLocation').css('display','block')
            $('#btn-modifierLocation').css('display','none')
            var tableCompo = $("#CompositionTable").DataTable()
                tableCompo.clear().draw();
                tableCompo.draw()
                var tableDocs = $("#FormTableDocumentTableLocation").DataTable()
                tableDocs.clear().draw();
                tableDocs.draw()
            $('#GarranspaceField').html('')
            var htmlCode = '';
                htmlCode+= '<tr>';
                htmlCode+='<td><label  for="nomPrenomGarant1" class="FormLabel nomPrenomGarant1" >Garant du locataire</label><input type="text" name="nomPrenomGarant[]" id="nomPrenomGarant1" class="form-control telephoneGarant1" style="width:300px"></td>';
                htmlCode+=' <td><label for="telephoneGarant1" class="FormLabel telephoneGarant1" style="margin-left:20px;">Téléphone</label><input type="text" name="telephoneGarant[]" id="telephoneGarant1" class="form-control telephoneGarant1" style="margin-left:20px;width:200px"></td>';
                htmlCode+='<td><label for="" class="FormLabel emailGarant1" style="margin-left:20px;">Email</label> <input type="text" name="emailGarant[]" id="emailGarant1" class="form-control emailGarant1" style="margin-left:20px;width:200px"></td>';
                htmlCode+='<td><label for="" class="FormLabel HabitationGarant1" style="margin-left:20px;">Lieu habitation garant</label><input type="text" name="HabitationGarant[]" id="HabitationGarant1" class="form-control HabitationGarant1" style="margin-left:20px;width:230px"></td>';
                htmlCode+='<td> <button id="DuplcateInput" class="btn btn-phoenix-secondary me-1 mb-1 DuplcateInput1" style=" margin-top:24px;margin-left:10px" type="button"><i class="fa fa-plus-circle cursor-pointer text-success"></i></button></td>';
                htmlCode+= '</tr>';
            $('#GarranspaceField').append(htmlCode)

                     var DateDeb = $('.dateDebLocation').val();
                     var DateDebJour = DateDeb.slice(0,2)
                    
                    if(DateDebJour !=01){
                        $('.checkboxProrata').attr('checked','checked')
                        var proarataDateDeValeur = $('.dateDebLocation').val();
                        var jourMoisSelect = proarataDateDeValeur.slice(0,2)
                        var mois =  proarataDateDeValeur.slice(3,5)
                        var Annee =  proarataDateDeValeur.slice(6,10)
                        var DernierJourMois = new Date(Annee, mois, 0).getDate();
                        var nombreDejour = DernierJourMois-jourMoisSelect;
                         $('#NombreDeJourAuProrata').val(nombreDejour)
                    }
            $('.RowZonePieceJointe').css('display','none');
        })

        $('.checkboxProrata').on('click',function(){

            if(!$(this).is(':checked')){

                 $('#NombreDeJourAuProrata').val(0)
                 $('#MontantAuProrata').val(0)
                 
            }
        })
        $('#LocataireSelect').on('change',function(){

                var idLocataire = $(this).val()
                MesrequetesAjax("{{ route('LocataireParId.recuperation') }}", "GET", {IDLocataire:idLocataire}, null, true, "JSON", function(resp) {

                            MesrequetesAjax("{{ route('infoSociete.recuperation') }}", "GET", null, true, true, "JSON", function(response) {

                                    if(resp.data[0].TypeLocataire == 1){
                                        $('#autreTaxe').val(response.ligne[0].autreTaxeLocataireParticulier)
                                    }else{
                                         $('#autreTaxe').val(response.ligne[0].autreTaxeLocataireEntreprise)
                                    }
                            });
                });
        })

        $(document).on('click','#ModifierLocation',function(){
             $('#modalTitreLocation').text('Modification location')
             $('#btn-AddLocation').css('display','none')
             $('#btn-modifierLocation').css('display','block')

            $('.FermerModification').css('display','block')
            $('.FermerCreation').css('display','none')
             
            var idLocation = $(this).attr('data-id');
            var tabStatus =  [{valeur:1,nom:'En cours'}, {valeur:2,nom:'En attente'},{valeur:3,nom:'Clôturé'}]
             MesrequetesAjax("{{ route('Location.recuperation') }}", "GET", {IDLocation:idLocation }, null, true, "JSON", function(response) {
                 var Locataire = '';
                 var StatutLocation = '';
                 var Typebail = '';
                 var Bien ='';
                 var prenom ='';
            $.each(response.data,function(key,value){
                    Locataire = value.IDLocataire
                    StatutLocation = value.statusLocation
                    Typebail = value.libelleBail
                    Bien = value.intituleBien
                    if(value.ProrataCheckbox==1){
                      $('.checkboxProrata').attr('checked','checked');
                    }
                    
                    InputSeparateurMillierAffectation(value.MontantTTCLoyer,$('.MtTTC'))
                    InputSeparateurMillierAffectation(value.CautionLoyer,$('.CautionLoyer'))
                    InputSeparateurMillierAffectation(value.FraisDeRetard,$('.ValeurFraisR'))
                    InputSeparateurMillierAffectation(value.MontantTTCProrata,$('.MontantAuProrata'))
                    InputSeparateurMillierAffectation(value.montantMoisAvanceLoyer,$('.montantMoisAvance'))
                    InputSeparateurMillierAffectation(value.montantCharge,$('.montantMoisCharge'))
                    InputSeparateurMillierAffectation(value.montantClim,$('.clim'))
                    InputSeparateurMillierAffectation(value.montantEau,$('.eau'))
                    InputSeparateurMillierAffectation(value.timbre,$('.timbre'))
                    InputSeparateurMillierAffectation(value.fraisDossier,$('.fraisDossier'))
                    InputSeparateurMillierAffectation(value.honoraireAgence,$('.honoraireAgence'))
                    InputSeparateurMillierAffectation(''+value.enregistrementLoyerAnnuel+'',$('.enregistrementLoyerAnnuel'))
                    
             

                    $('#referenceLocation').val(value.refLocation)
                    $('#referenceNumerique').val(value.RefLocationNumerique)
                    $('.dateDebLocation').val(formatageDate(new Date(value.dateDebutLocation)))
                    $('#IdLocationInput').val(value.IDLocation)
                    $('.QtePeriode').val(value.QuantitePeriodicite)
                    $('.TauxHonoraire').val(value.tauxBienLocation)
                    $('.JourFacturation').append('<option selected value="'+value.JourDeFacturation+'">'+value.JourDeFacturation+'</option>')
                    $('.Periodicite').val(value.Periodicite)
                    $('.NbreJourEcheance').val(value.DelaisPaiement)
                    $('.NombreDeJourAuProrata').val(value.NombreDeJourProrata)
                    $('.TypeFraisR').val(value.typeFrais)
                    $('.QteCaution').val(value.nombreMoisCaution)
                    $('.NbreMoisAvanceLoyer').val(value.nombreMoisAvance)
                    $('.nbreMoisCharge').val(value.nombreMoisCharge)
                    $('.ProvisionCharge').val(value.provisionCharge).trigger('change')
                    $('.IndiceRevisionSelect').val(value.indiceRevision).trigger('change')
                    $('.tvaFraisDossier').val(value.tvaFraisDossier)
                    $('.TvaHonoraire').val(value.tvaHonorais)
                    $('.datereevaluation').val(formatageDate(new Date(value.dateRenouvelementContrat)))
                    $('#LocataireSelect').val(value.IDLocataire).trigger('change')
                    $('#autreTaxe').val(value.autreTaxeLocataire)


            })

             $('#BienSelect').html('')
             $.each(response.Bien,function(key,value){
            if(Bien == value.intituleBien ){
                $('#BienSelect').append('<option selected value="'+value.IDBien+'">'+value.intituleBien+'</option>')
            }else{
                 $('#BienSelect').append($('<option>',{value:value.IDBien, text: value.intituleBien}))
            }
            
             })
             
            // TYPE DE BAIL
            $('.TypebailSelect').html('')
            $.each(response.TypeBail,function(key,value){

                 if(Typebail == value.libelleBail){
                            $('.TypebailSelect').append('<option selected value="'+value.IDTypeBail+'">'+ value.libelleBail+'</option>')
                        }else{
                             $('.TypebailSelect').append($('<option>',{value:value.IDTypeBail, text: value.libelleBail}))
                        }
                
            })

            // STATUT LOCATION
            $('.StatutLocation').html('')
            $.each(tabStatus,function(key,val){
                        if(StatutLocation == val.valeur){
                            $('.StatutLocation').append('<option selected value="'+val.valeur+'">'+ val.nom+'</option>')
                        }else{
                           $('.StatutLocation').append($('<option>',{value:val.valeur, text:val.nom}))  
                        }
            })

            var countRow = 1;
             $('#GarranspaceField').html('')
             
            $.each(response.Garant,function(key,value){
                countRow++;
                tabGarantID.push(value.IDGarant)
                var htmlCode = '';
                htmlCode+= '<tr id="row'+countRow+'">';
                htmlCode+='<td><label for="" class="FormLabel">Garant du locataire</label><input type="text" name="nomPrenomGarant[]" value="'+value.nomCompletGarant+'" id="nomPrenomGarant'+countRow+'" class="form-control" style="width:300px"></td>';
                htmlCode+='<td><label for="" class="FormLabel" style="margin-left:20px;">Téléphone</label><input type="text" name="telephoneGarant[]" value="'+value.telephoneGarant+'" id="telephoneGarant'+countRow+'" class="form-control" style="margin-left:20px;width:200px"></td>';
                htmlCode+='<td><label for="" class="FormLabel" style="margin-left:20px;">Email</label><input type="text" name="emailGarant[] "value="'+value.emailGarant+'" id="emailGarant'+countRow+'" class="form-control" style="margin-left:20px;width:200px"></td>';
                htmlCode+='<td><label for="" class="FormLabel" style="margin-left:20px;">Lieu habitation garant</label><input type="text" name="HabitationGarant[]" value="'+value.habitationGarant+'" id="HabitationGarant'+countRow+'" class="form-control" style="margin-left:20px;width:230px"></td>';
                htmlCode+='<td>  &nbsp; &nbsp;<span style="height:30px;margin-top:24px;" id="DuplcateInput" class="badge bg-secondary cursor-pointer"> <i class="fa fa-plus-circle cursor-pointer text-white mt-1"></i></span><span style="margin-left:5px; margin-top:24px;height:30px" data-id="'+value.IDGarant+'" id="DeleteRowInDatabase" class="badge bg-danger cursor-pointer"><i  class="fa fa-trash cursor-pointer text-white mt-1"></i></span></td>';
                htmlCode+= '</tr>';
              $('#GarranspaceField').append(htmlCode)
                $('.IdGarantInput').val(tabGarantID)
            })

            if(response.Garant.length ==0){

                 $('#GarranspaceField').html('')
                var htmlCode = '';
                htmlCode+= '<tr>';
                htmlCode+='<td><label  for="nomPrenomGarant1" class="FormLabel nomPrenomGarant1" >Garant du locataire</label><input type="text" name="nomPrenomGarant[]" id="nomPrenomGarant1" class="form-control telephoneGarant1" style="width:300px"></td>';
                htmlCode+=' <td><label for="telephoneGarant1" class="FormLabel telephoneGarant1" style="margin-left:20px;">Téléphone</label><input type="text" name="telephoneGarant[]" id="telephoneGarant1" class="form-control telephoneGarant1" style="margin-left:20px;width:200px"></td>';
                htmlCode+='<td><label for="" class="FormLabel emailGarant1" style="margin-left:20px;">Email</label> <input type="text" name="emailGarant[]" id="emailGarant1" class="form-control emailGarant1" style="margin-left:20px;width:200px"></td>';
                htmlCode+='<td><label for="" class="FormLabel HabitationGarant1" style="margin-left:20px;">Lieu habitation garant</label><input type="text" name="HabitationGarant[]" id="HabitationGarant1" class="form-control HabitationGarant1" style="margin-left:20px;width:230px"></td>';
                htmlCode+='<td> <button id="DuplcateInput" class="btn btn-phoenix-secondary me-1 mb-1 DuplcateInput1" style=" margin-top:24px;margin-left:10px" type="button"><i class="fa fa-plus-circle cursor-pointer text-success"></i></button></td>';
                htmlCode+= '</tr>';
               $('#GarranspaceField').append(htmlCode)
            }


            if (response.PieceJointe.length > 0) {
            $('.RowZonePieceJointe').css('display','block')
            $('.RowZonePieceJointe').addClass('mt-2')
                recuperationPieceJoint(response.PieceJointe)
            } else {
                $('.ZonePieceJointe').html('')
            }

             var tableDoc =  $('#FormTableDocumentTableLocation').DataTable();
             // REMPLISSAGE TABLEAU DOCUMENT ENTREPRISE
            
                    tableDoc.clear().draw();
                            $.each(response.PieceJointe,function(key,value){
                                tableDoc.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])
                            })
                   tableDoc.draw();
            
           
            tableComposition.length = 0;
            $.each(response.Composition,function(key,value){
                 tableComposition.push({
                'IDcompositionLocation':value.IDCompositionLocation,
                'compostionID':value.IDComposition,
                'compostion':value.LibelleComposition,
                'QteComposition':value.qteComposition,
                'Idlocation':value.IDLocation,
                'Etat' : 1
                })
            })
            afficheCompositionLocation()
            $('#LocationModal').modal('show')
         });
           
        })

        $('.FermerCreation').on('click',function(){
            var __table =$('#FormTableDocumentTableLocation').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:3}, null, true, "JSON", function(resp) {
                                     modificationDocumentStatut= false
                                    $('#LocationModal').modal('hide')
                                    $('.formLocationAdd')[0].reset();
                                    $('#btn-FichierDelete').css('display','none')
                                    $('#btn-ajoutFichier').css('display','flex')
                                     __table.clear().draw();
                                     __table.draw();
                                    
                                  
                                })
                            }
                        },

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

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

           
         
        })

        $('.FermerModification').on('click',function(){
            var __table =$('#FormTableDocumentTableLocation').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:3}, null, true, "JSON", function(resp) {
                                     modificationDocumentStatut= false
                                    $('#LocationModal').modal('hide')
                                    $('.formLocationAdd')[0].reset();
                                    $('#btn-FichierDelete').css('display','none')
                                    $('#btn-ajoutFichier').css('display','flex')
                                     __table.clear().draw();
                                     __table.draw();
                                    
                                  
                                })
                            }
                        },

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

            if(modificationDocumentStatut== false){

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

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

            var IDLocations = $(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('Location.supprimer') }}", "GET", { IDLocation: IDLocations }, null, true, "JSON", function(response) {
                                Notification('Succès', response.msg, 'top-right','success')
                                recuperationLocation()
                                })

                                   }
                    },

                    fermer: {
                        text: 'Fermer',
                    },
                    //close: function () {}
                }
            });
        })

        $(document).on('change','.dateDebProrata',function(){
            var valeur = $(this).val();
            proarataDateDeValeur = $(this).val();
            var jourMoisSelect = valeur.slice(0,2)
            var mois =  valeur.slice(3,5)
            var Annee =  valeur.slice(6,10)
            var DernierJourMois = new Date(Annee, mois, 0).getDate();
            var nombreDejour = DernierJourMois-jourMoisSelect;
                
           $('#NombreDeJourAuProrata').val(nombreDejour)
            if($('#MtTTC').val().length == 0){

                $('.MtTTCRequired').text('Montant obligatoire')
                return false;
               
            }else{
                $('.MtTTCRequired').text('')
                var MtTTC = $('#MtTTC').val()
                $('#MontantAuProrata').val(ArrondiNombre((nombreDejour *MtTTC)/DernierJourMois))
            }
        })

        $(document).on('change','#MtTTC',function(){
            if($('.dateDebLocation').val().length == 0){
                
                return false;
            }else{
                proarataDateDeValeur = $('.dateDebLocation').val();
                var jourMoisSelect = proarataDateDeValeur.slice(0,2)
                var mois =  proarataDateDeValeur.slice(3,5)
                var Annee =  proarataDateDeValeur.slice(6,10)
                var DernierJourMois = new Date(Annee, mois, 0).getDate();
                var nombreDejour = DernierJourMois-jourMoisSelect;
                var MtTTC = $(this).val()
                
                    $('.MtTTCRequired').text('')
                    $('#NombreDeJourAuProrata').val(nombreDejour)
                $('#MontantAuProrata').val(ArrondiNombre((nombreDejour *MtTTC)/DernierJourMois))
            }

            var montantHT = $(this).val();
            var mt =  montantHT.replace(/\s/g, '');
            var TauxHonoraire = $('#TauxHonoraire').val();
            var tvaHonoraire =  $('#TvaHonoraire').val();
            var tvaFraisDossier =  $('#tvaFraisDossier').val();
            
            var NbreMoisAvanceLoyer =  $('#NbreMoisAvanceLoyer').val();
            var nbreMoisCharge = $('#nbreMoisCharge').val();

            var calculEnregistrement =(parseInt(mt) * 12 * 2.5) / 100;
            InputSeparateurMillierAffectation(''+calculEnregistrement+'',$('#enregistrementLoyerAnnuel'))

            if($('#TvaHonoraire').val()!=''){
                var Honoraire = (parseInt(mt) * TauxHonoraire)/100;
                var CalculHonoraire = parseInt(Honoraire) + ((parseInt(Honoraire) * parseInt(tvaHonoraire))/100);
                InputSeparateurMillierAffectation(''+parseInt(CalculHonoraire)+'',$('#honoraireAgence'))
            }

            var  CalculFraisDossier = (parseInt(mt) * tvaFraisDossier)/100;
            InputSeparateurMillierAffectation(''+parseInt(CalculFraisDossier)+'',$('#fraisDossier'))
            
        
            var CalculnbreMoisCharge = (parseInt(mt) * nbreMoisCharge)
            InputSeparateurMillierAffectation(''+parseInt(CalculnbreMoisCharge)+'',$('#montantMoisCharge'))
            
        })

        $(document).on('change','#StatutLocation',function(){

            var valeur = $(this).val();
             MesrequetesAjax("{{ route('LocationforStatus.recuperation') }}", "GET", {Valeur:valeur}, null, true, "JSON", function(resp) {

                     TablerecuperationLocation(resp.data)
             })

        })
        

        $(document).on('click','#DuplcateInput',function(){
        countRow++;
        var htmlCode = '';
            htmlCode+= '<tr id="row'+countRow+'">';
            htmlCode+='<td><label for="" class="FormLabel">Garant du locataire</label><input type="text" name="nomPrenomGarant[]" id="nomPrenomGarant'+countRow+'" class="form-control" style="width:300px"></td>';
            htmlCode+='<td><label for="" class="FormLabel" style="margin-left:20px;">Téléphone</label><input type="text" name="telephoneGarant[]" id="telephoneGarant'+countRow+'" class="form-control" style="margin-left:20px;width:200px"></td>';
            htmlCode+='<td><label for="" class="FormLabel" style="margin-left:20px;">Email</label><input type="text" name="emailGarant[]" id="emailGarant'+countRow+'" class="form-control" style="margin-left:20px;width:200px"></td>';
            htmlCode+='<td><label for="" class="FormLabel" style="margin-left:20px;">Lieu habitation garant</label><input type="text" name="HabitationGarant[]" id="HabitationGarant'+countRow+'" class="form-control" style="margin-left:20px;width:230px"></td>';
            htmlCode+='<td>  &nbsp; &nbsp;<span style="height:30px;margin-top:24px;" id="DuplcateInput" class="badge bg-secondary cursor-pointer"> <i class="fa fa-plus-circle cursor-pointer text-white mt-1"></i></span><span style="margin-left:5px; margin-top:24px;height:30px" id="DeleteRow" class="badge bg-danger cursor-pointer"><i  class="fa fa-trash cursor-pointer text-white mt-1"></i></span></td>';
            htmlCode+= '</tr>';
        $('#GarranspaceField').append(htmlCode)
        })

        $(document).on('click','#DeleteRow',function(){
        var row =  $(this).closest('tr');
        row.remove();
        })

        $(document).on('click','#DeleteRowInDatabase',function(){
            var IdGarant = $(this).attr('data-id');
            var e = $(this);
            var i = 0;
            $.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() {
                            e.closest('tr').remove();
                             MesrequetesAjax("{{ route('Garant.supprimer') }}",
                            "GET", { IDGarant: IdGarant }, null, true, "JSON", function(response) {
                                Notification('Succès', response.msg, 'top-right','success')
                            }); 
                        }
                    },

                    fermer: {
                        text: 'Fermer',
                    },
                    //close: function () {}
                }
            });

           
          
                           
        })

        // SUPPRESSION DE FICHIER LORS DE LA MODIFICATION
        $(document).on('click', '#SuppressionFichierLorsDeLaModification', function() {
            var GetId = $(this).attr('data-id')
            var GetIDLocation = $('.IdLocationInput').val();
            suppressionPieceJointe(GetId,GetIDLocation,3)
        })
        // TELECHARGEMENT DE FICHIER LORS DE LA MODIFICATION
        $(document).on('click', '#TelechargementFichierLorsDeLaModification', function() {
              var nomFichier = $(this).attr('data-NomFichier');
              telechargerPieceJoint(nomFichier,3) 
        })

        // TELECHARGEMENT DE FICHIER LORS DES DETAILS
        $(document).on('click', '#btn-telechargementPieceJointe', function() {
              var nomFichier = $(this).attr('data-NomFichier');
              telechargerPieceJoint(nomFichier,3) 
        })

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

          var idLocation = $(this).attr('data-id');
          $('#GetIDLocationHidden').val(idLocation)
            MesrequetesAjax("{{ route('Location.recuperation') }}", "GET", {IDLocation:idLocation }, null, true, "JSON", function(resp) {

                    $('#DetailBienBlock1').html('');
                    var Output = '';
                    var GarantTable='';
                    var photoprofil = '';
                    var prenom ='';
                    var profession = ''
                    var Periodicite = ''
                    $('#RefLocation').text('('+resp.data[0].refLocation+')')
                    $.each(resp.Garant,function(key,value){

                        GarantTable+='<tr>'
                        GarantTable+='<td> <i class="fas fa-user text-warning" style="font-size:15px;margin-left:3px"></i> '+value.nomCompletGarant+'</td> <td> <i class="fas fa-phone text-warning" style="font-size:15px"></i> '+value.telephoneGarant+'</td> <td><i class="fas  fa-envelope text-warning" style="font-size:15px"></i> '+value.emailGarant+'</td> <td> <i class="fas  fa-home text-warning" style="font-size:15px"></i> '+value.habitationGarant+'</td> '
                        GarantTable+='</tr>'
                    })

                    if(resp.Garant.length==0){

                        GarantTable+='<tr>'
                        GarantTable+='<td><img style="width:100px"  src="assets/img/no_data.svg"/> Aucune donnée</td>'
                        GarantTable+='</tr>'
                    }

                    $.each(resp.data,function(key,value){
                    if (value.photoProfil != "") {
                    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.prenom !=null){
                        prenom = value.prenom
                    }
                    if(value.profession !=null){
                        profession = value.profession;
                    }
                    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"
                    }
                    Output +='<div class="col-md-4">\
                        <div class="row g-0">\
                            <div class="col-6 border-1 border-bottom border-end py-2"> <a style="margin-right:4px;text-decoration:none" class=" text-800 hover-primary fw-semi-bold d-flex justify-content-between d-xxl-inline-block" ><span class="FormLabel">Référencee location</span>\
                                <div style="width:30px;height:30px; border:3px solid orange;border-radius:5px;"> <span style="margin-left:4px;margin-top:3px" class="fa-solid fas fa-dharmachakra me-2 mb-2 mb-xxl-0"></span> </div> </a>\
                                <a style="text-decoration:none" class="btn btn-link ps-2 fs-0 text-800 hover-primary fw-semi-bold d-flex flex-column d-xxl-inline-block" ><span class="fa-solid fa-user-group me-2 mb-2 mb-xxl-0"></span>'+value.refLocation+'</a> </div>\
                            <div class="col-6 border-1 border-bottom py-2"><a style="margin-left:4px;text-decoration:none" class="text-800 hover-primary fw-semi-bold d-flex justify-content-between d-xxl-inline-block"><span class="FormLabel"> Type de bail</span>\
                                <div style="width:30px;height:30px; border:3px solid orange;border-radius:5px"> <span style="margin-left:4px;margin-top:3px" class="fa-solid fas fa-medal me-2 mb-2 mb-xxl-0"></span> </div> </a>    <a style="text-decoration:none" class="btn btn-link fs-0 text-800 hover-primary fw-semi-bold d-flex flex-column d-xxl-inline-block">'+value.libelleBail+'</a> </div>\
                            <div class="col-6 border-1 border-bottom border-end py-2"><a style="margin-right:4px; text-decoration:none" class=" text-800 hover-primary fw-semi-bold d-flex justify-content-between d-xxl-inline-block" ><span class="FormLabel">Périodicité</span>\
                                <div style="width:30px;height:30px; border:3px solid orange;border-radius:5px;"> <span style="margin-left:4px;margin-top:3px" class="fa-solid far fa-clock me-2 mb-2 mb-xxl-0"></span> </div> </a>\
                                <a style="text-decoration:none" class="btn btn-link ps-2 fs-0 text-800 hover-primary fw-semi-bold d-flex flex-column d-xxl-inline-block" ><span class="fa-solid fa-photo-film me-2 mb-2 mb-xxl-0"></span>'+Periodicite+'</a></div>\
                            <div class="col-6 border-1 border-bottom py-2"><a style="margin-left:4px;text-decoration:none" class=" text-800 hover-primary fw-semi-bold d-flex justify-content-between d-xxl-inline-block" ><span class="FormLabel"> Date de facturation</span>\
                                <div style="width:30px;height:30px; border:3px solid orange;border-radius:5px"> <span style="margin-left:4px;margin-top:3px" class="fa-solid fas fa-calendar me-2 mb-2 mb-xxl-0"></span> </div> </a>   <a style="text-decoration:none" class="btn btn-link fs-0 text-800 hover-primary fw-semi-bold d-flex flex-column d-xxl-inline-block" href="#!">'+formatageDate(new Date(value.DateFacutrationChaine))+'</a> </div>\
                            <div class="col-6 border-1 border-end py-2"><a style="margin-right:4px;text-decoration:none" class=" text-800 hover-primary fw-semi-bold d-flex justify-content-between d-xxl-inline-block" ><span class="FormLabel">Caution loyer</span>\
                                <div style="width:30px;height:30px; border:3px solid orange;border-radius:5px;"> <span style="margin-left:4px;margin-top:3px" class="fa-solid fas fa-money-bill-wave me-2 mb-2 mb-xxl-0"></span> </div> </a>\
                                <a style="text-decoration:none" class="btn btn-link ps-2 fs-0 text-800 hover-primary fw-semi-bold d-flex flex-column d-xxl-inline-block" > <span class="fa-solid fa-dice me-2 mb-2 mb-xxl-0"></span>'+formaterNombre(value.CautionLoyer)+' F</a></div>\
                            <div class="col-6 border-1 py-2"><a style="margin-left:4px;text-decoration:none" class="text-800 hover-primary fw-semi-bold d-flex justify-content-between d-xxl-inline-block"><span class="FormLabel">Montant location</span>\
                                <div style="width:30px;height:30px; border:3px solid orange;border-radius:5px"> <span style="margin-left:4px;margin-top:3px" class="fa-solid fas fa-money-bill-wave me-2 mb-2 mb-xxl-0"></span> </div> </a> <a style="text-decoration:none" class="btn btn-link fs-0 text-800 hover-primary fw-semi-bold d-flex flex-column d-xxl-inline-block" href="#!"><span class="fa-solid fa-user-gear me-2 mb-2 mb-xxl-0"></span>'+formaterNombre(value.MontantTTCLoyer)+' F</a></div>\
                        </div>\
                    </div>';
                    Output +=' <div class="col-md-8">\
                        <div class="card border border-300 h-100 w-100 overflow-hidden"> <div class="bg-holder d-block bg-card" style="background-image:url(../assets/img/spot-illustrations/32.png);background-position: top right;"> </div>  <div class="d-dark-none"><div class="bg-holder d-none d-sm-block d-xl-none d-xxl-block bg-card" style="background-image:url(../assets/img/spot-illustrations/21.png);background-position: bottom right; background-size: auto;"></div> </div>\
                            <div class="d-light-none">\
                                <div class="bg-holder d-none d-sm-block d-xl-none d-xxl-block bg-card" style="background-image:url(../assets/img/spot-illustrations/dark_21.png);background-position: bottom right; background-size: auto;"> </div>\
                            </div>\
                            <div class="card-body px-5 position-relative">\
                                <h3 class="mb-5">'+photoprofil+' '+value.nom+' '+prenom+'</h3>\
                                <p   style="color:green" class=" fw-semi-bold">'+profession+' </p>\
                                <h4 style="color:orange"> <span class="fa-solid fas fa-list-ul"></span> Liste des garants</h4><br>\
                                <table class="table table-bordered" style="width:100%">'+GarantTable+'</table>\
                            </div>\
                            <div class="card-footer border-0 py-0 px-5 z-index-1"></div>\
                        </div>\
                    </div>';
                    $('#DetailBienBlock1').append(Output);

 
                })

                 var tableCompo = $("#CompositionTableEtat").DataTable();
                   tableCompo.clear().draw();
                    $.each(resp.Composition,function(key,value){
                        tableCompo.row.add([value.LibelleComposition,value.qteComposition])
                    })
                    tableCompo.draw();

                    var tableDocument = $("#DocumentTableEtat").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 tableFactureLocation = $("#FactureTable").DataTable();
                    var totalFacture = 0;
                    tableFactureLocation.clear().draw();
                    $.each(resp.FactureLocation,function(key,value){
                        var montantFacture = 0;
                        if(value.montantFacture !=null){
                            montantFacture = formaterNombre(value.montantFacture)+' F'
                            totalFacture += parseInt(value.montantFacture)
                        }
                        
                        tableFactureLocation.row.add([
                           formatageDate(new Date(value.dateFacture)), formatageDate(new Date(value.dateFinFacture)),value.refFacture,montantFacture
                        ])
                    })
                    tableFactureLocation.draw();
                    $('#MontantTotalFacture').text('Total : '+formaterNombre(totalFacture)+' F')

                    
                    var tableTravaux = $("#DemandeTable").DataTable();
                    tableTravaux.clear().draw();

                    var MontantTotalTravaux = 0;
                    $.each(resp.TravauxLocation,function(key,value){

                       var nom = '';
                        var prenom = '';
                        if(value.prenom !=null){
                            prenom = value.prenom
                        }
                        if(value.nom !=null){
                            nom = value.nom
                        }
                        if(prenom !=''){
                            nom = nom+' '+prenom
                        }
                        if(value.statutDemande == 1){
                            status = '<span class="badge bg-success">En cours</span>'
                        }
                       // MontantTotalTravaux +=parseInt(value.montantTravaux)
                        tableTravaux.row.add([
                            '<i class="fa fa-eye text-success cursor-pointer" id="VoirDemandeLigne" data-id="'+value.IDDemandeLocataire+'"></i>',
                            formatageDate(new Date(value.dateDemande)),
                            value.refDemandeLocataire,nom,
                            value.intituleBien,
                             status,
                           ])
                    })
                    tableTravaux.draw();
                    //$('#MontantTotalTravaux').text(formaterNombre(MontantTotalTravaux)+' F')
               $('#VoirLocationModal').modal('show')
            })
       
        })

        $(document).on('click','#VoirGarantLocation',function(){
        
        var IdLocation = $(this).attr('data-id');
        MesrequetesAjax("{{ route('Garant.recuperation') }}",
                        "GET", { IDLocation: IdLocation }, null, true, "JSON", function(response) {
                            var table =  $("#tableGarant").DataTable();
                                table.clear().draw()
                            $.each(response.data,function(key,value){
                                table.row.add([value.nomCompletGarant,value.telephoneGarant,value.emailGarant,value.habitationGarant,'<i class="fa fa-trash text-danger cursor-pointer" id="deleteGarantINModal" data-idLocation="'+value.IdLocation+'" data-id="'+value.IDGarant+'"></i>'])
                            })
                            table.draw();
                        });
        $('#VoirGarantModal').modal('show')
        })

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

        var IdGarant = $(this).attr('data-id');
        var IdLocation = $(this).attr('data-idLocation');
            MesrequetesAjax("{{ route('Garant.supprimer') }}",
                        "GET", { IDGarant: IdGarant }, null, true, "JSON", function(response) {
                            Notification('Succès', response.msg, 'top-right','success')

                            MesrequetesAjax("{{ route('Garant.recuperation') }}",
                        "GET", { IDLocation: IdLocation }, null, true, "JSON", function(response) {
                            var table =  $("#tableGarant").DataTable();
                                table.clear().draw()
                            $.each(response.data,function(key,value){
                                table.row.add([value.nomCompletGarant,value.telephoneGarant,value.emailGarant,value.habitationGarant,'<i class="fa fa-trash text-danger cursor-pointer" id="deleteGarantINModal" data-idLocation="'+value.IdLocation+'" data-id="'+value.IDGarant+'"></i>'])
                            })
                            table.draw();
                        });

                        });
                
        })

        $(document).on('change','#Periodicite',function(){

               if($(this).val()==1){
                 $('#JourFacturation').attr('disabled','disabled');
               }else if($(this).val()==2){
                $('#JourFacturation').attr('disabled','disabled');

               }else if($(this).val()==3){
                 $('#JourFacturation').prop('disabled',false);
                
                    

               }else{

                 $('#JourFacturation').prop('disabled',false);
                 
               }
        })

        $('#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)
             recuperationLocation(dateDepartFormater,dateFinFormater);
        })

        // AVANCE LOYER
         $(document).on('change','#NbreMoisAvanceLoyer',function(){
           
            var montantHT = $('#MtTTC').val();
            var mt =  montantHT.replace(/\s/g, '');
            var NbreMoisAvanceLoyer =  $(this).val();
            var CalculmontantMoisAvance = (parseInt(mt) * NbreMoisAvanceLoyer)
            InputSeparateurMillierAffectation(''+parseInt(CalculmontantMoisAvance)+'',$('#montantMoisAvance'))
            
         })
        
        // CHARGE
          $(document).on('change','#nbreMoisCharge',function(){

             var montantHT = $('#MtTTC').val();
             var mt =  montantHT.replace(/\s/g, '');
             var nbreMoisCharge =  $(this).val();
             var CalculnbreMoisCharge = (parseInt(mt) * nbreMoisCharge)
             InputSeparateurMillierAffectation(''+parseInt(CalculnbreMoisCharge)+'',$('#montantMoisCharge'))
            
         })

          // CHARGE
          $(document).on('change','#QteCaution',function(){

             var montantHT = $('#MtTTC').val();
             var mt =  montantHT.replace(/\s/g, '');
             var QteCaution =  $(this).val();
             var CalculQteCaution = (parseInt(mt) * QteCaution)
             InputSeparateurMillierAffectation(''+parseInt(CalculQteCaution)+'',$('#CautionLoyer'))
            
         })

        $(document).on('change','#BienSelect',function(){

            var IDBien = $(this).val();
            MesrequetesAjax("{{ route('BienParId.recuperation') }}", "GET", {IDbien:IDBien}, null, true, "JSON", function(response) { 
                    
                            $('#TauxHonoraire').val(response.data[0].TauxCommission)
            });   
        })

        // ::::::::::::::::::::::::::: BLOCK GESTION DE DOCUMENT ::::::::::::::::::::::::::::::::::::::::::::::

        $(document).on('click','#btn-ajoutFichier',function(){
            $('#fichierDocument').click();
        })
        $('#fichierDocument').change(function() {
            var filenames = $(this).val().split('\\').pop()
            if (filenames) {
                $('#btn-FichierDelete').css('display','flex')
                $('#btn-ajoutFichier').css('display','none')
                $('#nomFichierChoisirLocation').val(filenames);
            }
        })
        $('#DocumentSelectLocation').change(function() {
            $('.Typedoc').text('')
        })
        
        $(document).on('click','#btn-ajouterComposition',function() {

            if($('.CompositionSelect').val()==0){

                $('.invalid').text('Composition obligatoire')  
                return false;
            }
            $('.invalid').text('')
            var compo = $('#CompositionSelect').find('option:selected').text()
            var QteCompo = $('#QteCompo').val()
            var IDCompo = $('#CompositionSelect').val()
            if($('#QteCompo').val().length==0){
                QteCompo = 1;
            }
            tableComposition.push({
                'IDcompositionLocation':0,
                'compostionID':IDCompo,
                'compostion':compo,
                'QteComposition':QteCompo,
                'Etat' : 0
            })
           
            modificationDocumentStatut = true;
            /*var tableCompo = $('#CompositionTable').DataTable();
            tableCompo.clear().draw()
            $.each(tableComposition,function(key,value){
                tableCompo.row.add(['<i class="fa fa-trash text-danger cursor-pointer deleteCompositionItem" data-id="'+value.compostionID+'" title="supprimer" id=""></i>',value.compostion,value.QteComposition])
            })
            tableCompo.draw() */

             afficheCompositionLocation();
        })

        //SUPPRESSION DE COMPOSITION
        $(document).on('click','.deleteCompositionItem',function(){
                
               
                var identifiantASupprimer = $(this).data('id');
               
                 var identifiantLocation = $('.IdLocationInput').val();
                // Parcours du tableau pour trouver l'index de l'élément avec l'identifiant spécifié 
                var indexElementASupprimer = -1;
                var etat = 0;
                for (var i = 0; i < tableComposition.length; i++) {
 
                    if (tableComposition[i].IDcompositionLocation == identifiantASupprimer) {
                        indexElementASupprimer = i;
                        etat = tableComposition[i].Etat;
                        break; // Arrête la boucle une fois que l'élément est trouvé
                    }
                }

                if(indexElementASupprimer !=-1){

                        if(etat==0){
                         tableComposition.splice(indexElementASupprimer, 1);
                          afficheCompositionLocation()
                        }else{

                            
                            MesrequetesAjax("{{ route('composition.supprimer') }}", "GET",{IDcomposition:identifiantASupprimer,IDlocation:identifiantLocation}, null,true,
                            "JSON",
                            function(resp) {
                               // tableComposition.length = 0; 

                                    let tab =[]
                                    for (var i = 0; i < tableComposition.length; i++) {

                                            if(tableComposition[i].IDcompositionLocation <= 0){

                                                tab.push({
                                                    'IDcompositionLocation':tableComposition[i].IDcompositionLocation,
                                                    'compostionID':tableComposition[i].compostionID,
                                                    'compostion':tableComposition[i].compostion,
                                                    'QteComposition':tableComposition[i].QteComposition,
                                                    'Idlocation':tableComposition[i].Idlocation,
                                                    'Etat' : tableComposition[i].Etat
                                                })
                                                //tableComposition.splice(i,1)
                                               
                                            }
                                     }

                                    tableComposition.length = 0;

                                    tableComposition  = tab;
                                    
                                $.each(resp.CompositionAfterDelete,function(key,value){
                                    tableComposition.push({
                                        'IDcompositionLocation':value.IDCompositionLocation,
                                        'compostionID':value.IDComposition,
                                        'compostion':value.LibelleComposition,
                                        'QteComposition':value.qteComposition,
                                        'Idlocation':value.IDLocation,
                                        'Etat' : 1
                                    })
                                })

                                Notification('Succès',resp.msg,'top-right','success'); 
                                
                                afficheCompositionLocation()
                                }
                            )

                        }
                }    
        })
        
        //--
        $(document).on('click','#btn-AjouterDocuments',function() {
            
            if($('#DocumentSelectLocation').val()==0){
                $('.Typedoc').text('Type document obligatoire')
                return false;
            }else{
                 $('.Typedoc').text('')
            }
            GestionFichier($('#DocumentSelectLocation').val(),$('#referenceDoc').val(),$('#fichierDocument'),$('#FormTableDocumentTableLocation').DataTable(),3,$('#IdLocationInput').val(),3);
            $('#DocumentSelectLocation').val(0).trigger('change')
            $('#nomFichierChoisirLocation').val('');
            $('#fichierDocument').val('');
            $('#referenceDoc').val('');
            $('#btn-FichierDelete').css('display','none');
            $('#btn-ajoutFichier').css('display','flex');
             modificationDocumentStatut = true;
        })
         //SUPPRESSION DE DOCUMENT DEPUIS LA BASE DE DONNEE
        $(document).on('click','#suppressionDocument',function() {
             var GetId = $(this).attr('data-id');
            var tableau = $('#FormTableDocumentTableLocation').DataTable()
            var IDLocation = $('#IdLocationInput').val()
            SupprimerPieceJointe(tableau,GetId,3,IDLocation)
        })

        //SUPPRESSION DE DOCUMENT DEPUIS L'INTERFACE
        $(document).on('click','#btn-FichierDelete',function(){
            $('#nomFichierChoisirLocation').val('');
            $('#fichierDocument').val('');
            $('#referenceDoc').val('');
            $(this).css('display','none');
            $('#btn-ajoutFichier').css('display','flex');

        })

        // ::::::::::::::::::::::::::: FIN BLOCK GESTION DE DOCUMENT ::::::::::::::::::::::::::::::::::::::::::::::
        
        $(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('ExcelLocation.importation') }}", "POST", new FormData(this), false,
                    false, "JSON",
                    function(resp) {
                     
                        $('div#loaders').addClass('hiddenElement');
                        Notification('Succès',resp.msg,'top-right','success')
                       recuperationLocation()

                    },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','#impressionLocationPdf',function(){

                var GetIDLocation = $(this).data('id');
            MesrequetesAjax("{{ route('LocationIndividuel.imprimer') }}", "GET", {IDLocation:GetIDLocation }, null, true,null, function(resp) {

                   /* var blob = new Blob([resp], { type: 'application/pdf' });
                    var link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = 'document.pdf';
                    link.click();*/

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

            })

                
        })

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

            $('#modalTitreTravaux').text('Ajout de travaux')
            var idlocation = $(this).data('id')
            $('#IDLocationHidden').val(idlocation)
            $('#LocationTravauxModal').modal('show')
        })

        $('.formLocationTravauxAdd').on('submit',function(e){
              e.preventDefault();
              var idLocation = $('#IDLocationHidden').val()
                MesrequetesAjax("{{ Route('travauxLocation.creer') }}", "POST", new FormData(this), false, false,
                    "JSON",
                    function(resp) {
                        if(resp.error){
                            Notification('Erreur',resp.msg,'top-right','error')
                            return false
                        }

                         Notification('Succès',resp.msg,'top-right','success')
                        $('#LocationTravauxModal').modal('hide')
                        $('.formLocationTravauxAdd')[0].reset();

                        if(resp.modif){

                            $('#LocationTravauxModal').modal('hide')
                            ActualisationTravauxLocation(idLocation)
                            $('#VoirLocationModal').modal('show')
 
                        }
                        
                    },
                    function(error) {},
                    function() {

                        if($('.TypeTravauxSelect').val().lenght == 0){
                            return false
                        }
                        if($('.TypeTravauxSelect').val().lenght == 0){
                            return false
                        }
                       
                    }
                )
        })

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

                var idTravaux = $(this).data('id');
                 MesrequetesAjax("{{ route('travauxPrestataire.recuperation') }}",
                        "GET", { IDTravaux: idTravaux }, null, true, "JSON", function(resp) {
                            $('#refTravaux').val(resp.data[0].refTravaux)
                            $('#dateDebutTravaux').val(resp.data[0].dateDebutTravaux)
                            $('#dateFinTravaux').val(resp.data[0].dateFinTravaux)
                            $('#TitreTravaux').val(resp.data[0].libelleTravaux)
                            $('#TypeTravauxSelect').val(resp.data[0].IDtypeTravaux)

                            $('#PrestataireSelect').val(resp.data[0].IDPrestataire)
                            $('#montantTravaux').val(resp.data[0].montantTravaux)
                            $('#observationTravaux').val(resp.data[0].observationTravaux)
                            $('#StatutTravaux').val(resp.data[0].statutTravaux)

                            $('#IDTravauxHidden').val(resp.data[0].IDTravaux)
                            $('#IDLocationHidden').val(resp.data[0].IDLocation)   
                        })
                $('#VoirLocationModal').modal('hide')

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

        //.......!
        $(document).on('click','#SupprimerTravaux',function(){

                var IDtravaux  = $(this).data('id');
                var idLocation = $('#GetIDLocationHidden').val()
                $.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('Travauxlocation.supprimer') }}", "GET", {IDTravaux:IDtravaux}, null, true, "JSON", function(resp) {
                                Notification('Succès',resp.msg,'top-right','success');
                                 ActualisationTravauxLocation(idLocation)
                            }) 

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

        $(document).on('click','#VoirDemandeLigne',function(){
            
            $('#modalTitreDemandeLigne').text('Détails')
            var GetID = $(this).data('id')
            var table = $('#DemandeLigneTable').DataTable();
            MesrequetesAjax("{{ route('Demandeligne.recuperation') }}", "GET", {IDDemandeLocataire:GetID}, null, true, "JSON", function(resp) {
                    table.clear().draw();       
                $.each(resp.data,function(key,value){

                    table.row.add([value.motifDemandeLocataire,formaterNombre(value.montantTache)+' F'])
                })
                table.draw();
                $('#VoirLocationModal').modal('hide')
                $('#DemandeLigneModal').modal('show')
            }) 
            
        })


        $(document).on('click','#FermerModalDemandeLigne',function(){
            $('#VoirLocationModal').modal('show')
            $('#DemandeLigneModal').modal('hide')
        })

        //26-01-2024
        // IMPRESSION LISTE DES LOCATIONS
        $(document).on('click','#ImprimerListeLocation',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:5,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:5,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 TablerecuperationLocation(response){
        var table =  $("#LocationDatatable").DataTable();
         table.clear().draw();

        $.each(response,function(key,value){
            var photoprofil = "";
            var statusLocation = "";
            var PeriodiciteLocation = "";
           
             var Prenom = '';
             if(value.prenom != null){
                    Prenom = value.prenom;
                }

             if(value.statusLocation==1){
                statusLocation = '<span class="badge bg-success">En cours</span>'
             }else if(value.statusLocation==2){
                     statusLocation = '<span class="badge bg-warning">En attente</span>'
             }else{
                 statusLocation = '<span class="badge bg-danger">Clôturé</span>'
             }

             if(value.Periodicite==1){
                PeriodiciteLocation = 'Journalier'
             }else if(value.Periodicite==2){
                     PeriodiciteLocation = 'Hebdomadaire'
             }else if(value.Periodicite==3){
                      PeriodiciteLocation = 'Mensuelle'
             }else if(value.Periodicite==4){
                       PeriodiciteLocation = 'Trimestre'
             }else{
                 PeriodiciteLocation = 'Semestre'
             }
            if(value.TypeLocataire==1){
               photoprofil = '<img class="imgInTableRow" src="media/imgDefault/userDefault.png">';
            }

            if(value.TypeLocataire!=1){
                photoprofil = '<img class="imgInTableRow" src="media/imgDefault/buldingDefault.png">';
            }
           
            <br />
<b>Warning</b>:  Undefined variable $D_Modification_location in <b>E:\install\laragon\www\reditas\resources\views\OPERATIONS\location.blade.php</b> on line <b>2126</b><br />
                actionBtn= '';
            
           <br />
<b>Warning</b>:  Undefined variable $D_Suppression_location in <b>E:\install\laragon\www\reditas\resources\views\OPERATIONS\location.blade.php</b> on line <b>2132</b><br />
            actionBtnSupprimer= '';
          
            var heure = value.dateCreationLocation.substr(11,19)
            table.row.add([
                '<i id="VoirLocation" title="Suppression" data-id="' + value.IDLocation+ '"class="fa fa-eye cursor-pointer text-success"></i>&nbsp;&nbsp; <i id="impressionLocationPdf" title="Imprimer la location" data-id="' + value.IDLocation+ '"class="fa fa-file cursor-pointer text-warning"></i>&nbsp;&nbsp;&nbsp;\
                {{-- <i class="fa-solid fa-person-digging cursor-pointer" title="Travaux" data-id="' + value.IDLocation+ '" id="EffectuerTravaux"></i> --}}\
                 '+actionBtnSupprimer+' <i id="VoirGarantLocation" title="Voir garant" data-id="' + value.IDLocation+ '"class="fas fa-user-tie cursor-pointer text-danger"></i>&nbsp;&nbsp; '+actionBtn+'',
                value.refLocation,photoprofil+' &nbsp; '+value.nom+' '+Prenom,statusLocation,formatageDate(new Date(value.dateDebutLocation)),value.JourDeFacturation,PeriodiciteLocation,value.libelleBail,formaterNombre(value.CautionLoyer) +' F',
                formaterNombre(value.MontantTTCLoyer)+' F',formaterNombre(value.FraisDeRetard)+' '+value.typeFrais,
                '<span style="color:black;font-weight:bold">Par '+ value.nom_utilisateur +' '+ value.prenom_utilisateur +'</span> <br> le '+
                formatageDate(new Date(value.dateCreationLocation))+' '+heure
            ]);
        })

        table.draw()
    }
    function recuperationLocation($dateDebut,$dateFin){
           MesrequetesAjax("{{ route('Location.recuperation') }}", "GET",{dateDebut:$dateDebut,dateFin:$dateFin}, null,true,
                "JSON",
                function(response) {
                      $('div#loaders').addClass('hiddenElement');
                    TablerecuperationLocation(response.data)
                }, null, function() {
            $('div#loaders').removeClass('hiddenElement');
        });

    }

    function referenceBien() {
        MesrequetesAjax("{{ route('referenceLocation.creer') }}", "GET", null, true, true, "JSON", function(resp) {
            $('#referenceLocation').val(resp[0]);
            $('.referenceNumerique').val(resp[1]);  
        });
    }

    function GetLocataire(){
        MesrequetesAjax("{{ route('Locataire.recuperation') }}", "GET", null, true, true, "JSON", function(response) {
            
            $.each(response.ligne,function(key,value){
                var prenom = "";
                if(value.prenom !=null){
                    prenom = value.prenom;
                }
                  $('#LocataireSelect').append($('<option>',{value:value.IDLocataire, text: value.nom+' '+prenom}))  
            })
        });
    }

    function GetBienForLocation(){

         MesrequetesAjax("{{ route('BienpourLocation.recuperation') }}", "GET", null, true, true, "JSON", function(response) { 
            $.each(response.ligne,function(key,value){

                    $('#BienSelect').append($('<option>',{value:value.IDBien, text: value.refBien +' - '+value.intituleBien})) 
            })
        });
    }

     function GetComposition(){
         MesrequetesAjax("{{ route('composition.recuperation') }}", "GET", null, true, true, "JSON", function(response) {
            $.each(response.data,function(key,value){
                  $('#CompositionSelect').append($('<option>',{value:value.IDComposition, text: value.LibelleComposition}))  
            })
        });
    }

    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 afficheCompositionLocation(){
            var compoTable = $("#CompositionTable").DataTable();
            compoTable.clear().draw()
         $.each(tableComposition,function(key,value){
                compoTable.row.add(['<i class="fa fa-trash text-danger cursor-pointer deleteCompositionItem"  data-idlocation="'+value.Idlocation+'" data-id="'+value.IDcompositionLocation+'" title="supprimer" id=""></i>',value.compostion,value.QteComposition])
        })
         compoTable.draw()
    }

    function recuperationIndiceRevision(){

             MesrequetesAjax("{{ route('indiceRevision.recuperation') }}", "GET", null, true, true, "JSON", function(resp) {
            $.each(resp.data, function(key,value) {
                $('.IndiceRevisionSelect').append($('<option>', {
                    value: value.IDIndiceRevision,
                    text: value.LibelleRevision
                }))
            })
        });  
    }

    function recuperationTypeTravaux(){

         MesrequetesAjax("{{ route('typeTravaux.recuperation') }}", "GET", null, true, true, "JSON", function(resp) {
            $.each(resp.data, function(key,value) {
                $('.TypeTravauxSelect').append($('<option>', {
                    value: value.IDTypeTravaux ,
                    text: value.libelleTypeTravaux
                }))
            })
        });  
    }

    function recuperationPrestataire(){

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

    function referenceTravaux(){
        MesrequetesAjax("{{ route('referenceTravaux.creer') }}", "GET", null, true, true, "JSON", function(resp) {
            $('.refTravaux').val(resp[0]);
            $('.refTravauxNumerique').val(resp[1]);  
        });
    }

    function ActualisationTravauxLocation($id){

         MesrequetesAjax("{{ route('ActualisationTravaux.recuperation') }}", "GET", {IDLocation : $id }, null, true, "JSON", function(resp) {

                 var tableTravaux = $("#DemandeTable").DataTable();
                    tableTravaux.clear().draw();
                     var MontantTotalTravaux = 0;
                    $.each(resp.TravauxLocation,function(key,value){

                        var nom = '';
                        var prenom = '';
                        if(value.prenom !=null){
                            prenom = value.prenom
                        }
                        if(value.nom !=null){
                            nom = value.nom
                        }
                        if(prenom !=''){
                            nom = nom+' '+prenom
                        }
                       MontantTotalTravaux += parseInt(value.montantTravaux);
                        tableTravaux.row.add([
                            '<i class="fa fa-trash text-danger cursor-pointer" id="SupprimerTravaux" data-id="'+value.IDTravaux+'"></i> &nbsp;&nbsp; <i class="fa fa-edit text-success cursor-pointer" id="ModifierTravaux" data-id="'+value.IDTravaux+'"></i>',
                            formatageDate(new Date(value.dateDebutTravaux)),
                            formatageDate(new Date(value.dateFinTravaux)),
                            value.refTravaux,nom,
                            value.libelleTypeTravaux,
                            value.libelleTravaux,
                            value.observationTravaux,
                            formaterNombre(value.montantTravaux)+' F'])
                    })
                    tableTravaux.draw();

                    $('#MontantTotalTravaux').text(formaterNombre(MontantTotalTravaux)+' F')
         })
    }
</script>

</body>

</html>