@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 cautions versée</h4>
             <div class="d-flex">
                
                    <button type="button" id="ImprimerListeVersementCaution" style="margin-right:8px;"  class="btn btn-warning btn-sm rounded-pill"><i data-feather="printer"></i>
                        Impression
                    </button>
            <button type="button" id="BtnModalAjoutversement" class="btn btn-success btn-sm rounded-pill"
                data-bs-toggle="modal" data-bs-target="#VersementCautionModal"><i data-feather="plus-circle"></i>
                Ajouter</button>
        </div>
         </div>
        <hr>

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

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

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

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

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

                {{-- <div class="d-flex justify-content-center mb-3">
                    <input style="width:300px; text-align:center"
                        class="form-control datetimepicker flatpickr-input dateInputSearch dateInput" type="text"
                        placeholder="d/m/Y À d/m/Y"
                        data-options="{&quot;mode&quot;:&quot;range&quot;,&quot;dateFormat&quot;:&quot;d/m/Y&quot;,&quot;disableMobile&quot;:true}"
                        readonly="readonly">

                    <button class="btn btn-success me-1" id="dateSearch" style="margin-left:12px;">
                        <i class="fa fa-search cursor-pointer  text-light "></i>
                    </button>
                </div> --}}


                <div class="table-responsive">
                    <table id="VersementCautionTable" class="table table-striped">
                        <thead class="tableauEntete">
                            <tr>
                                <th >Actions</th>
                                <th >Date</th>
                                <th >Locataire</th>
                                <th >Référence location</th>
                                <th >Caution location</th>
                                <th >Caution versée</th>
                                <th >Caution restante</th>
                                <th >Mode règlement</th>
                                <th >N° de chèque</th>
                                <th >Banque</th>
                                <th >Statut</th>
                                 <th >Infos création</th>
                            </tr>
                        </thead>
                    
                    </table>
                </div>
                
            </div>
        </div>

        <div class="modal fade" id="VersementCautionModal"  data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title text-white" id="modalTitreVersementCaution"></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">
                        
                        <ul class="nav nav-underline" id="myTab" role="tablist">
                        <li class="nav-item"><a class="nav-link active" id="versementcaution-tab" data-bs-toggle="tab" href="#tab-versementcaution" role="tab" aria-controls="tab-versementcaution" aria-selected="true">Versement caution</a></li>
                        <li class="nav-item"><a class="nav-link" id="versemecautionDocument-tab" data-bs-toggle="tab" href="#tab-versemecautionDocument" role="tab" aria-controls="tab-versemecautionDocument" aria-selected="false">Documents</a></li>

                        </ul>
                     <form class="formVersementCautionAdd needs-validation p-0" method="POST" novalidate>

                            @csrf
                        <div class="tab-content mt-3" id="myTabContent">
                        <div class="tab-pane fade show active" id="tab-versementcaution" role="tabpanel" aria-labelledby="versementcaution-tab">
                            
                             @include('COMPTABILITES/FORMS/versementCautionForm')
                        </div>
                        <div class="tab-pane fade" id="tab-versemecautionDocument" role="tabpanel" aria-labelledby="versemecautionDocument-tab">
          
                            <div class="row g-3 mb-3">
                                <div class="col-md-12 col-sm-3 col-lg-3 col-xl-3">
                                    <label for="iban" class="FormLabel">Type document</label>
                                    <select class="form-select TypeDocumentSelect" id="DocumentSelect" required>
                                            <option selected style="color:gray" value="0">Choisir...</option>
                                    </select>
                                    <div class="Typedoc FormLabel text-danger">
                                    
                                    </div>
                                    <input type="file" class="form-control" id="fichierDocument" hidden>
                                </div>
                                <div class="col-md-12 col-sm-3 col-lg-3 col-xl-3">
                                    <label for="bic" class="FormLabel">Référence document</label>
                                    <input type="text" class="form-control referenceDoc" id="referenceDoc">
                                    <div class="invalid-feedback">
                                    </div>
                                </div>

                                <div class="col-md-12 col-sm-4 col-lg-4 col-xl-4" style="margin-top:32px">
                                <input type="text" class="form-control" id="nomFichierChoisir" value="Aucun fichier choisi..." readonly>
                                </div>

                                <div class="col-md-12 col-sm-2 col-lg-2 col-xl-2" style="margin-top:32px;">
                                    <div style="float:right" class="d-flex">     
                                        <button  class="btn btn-danger rounded-pill animate__animated animate__wobble" id="btn-FichierDelete" style="display:none;margin-right:5px" title="Supprimer" type="button"><i data-feather="trash"></i></button>
                                        <button  style="margin-right:5px" class="btn btn-warning rounded-pill" id="btn-ajoutFichier" title="Choisir un fichier" type="button"><i data-feather="file"></i></button>
                                        <button  type="button" class="btn btn-secondary rounded-pill" id="btn-AjouterDocuments"  title="Ajouter"><i data-feather="plus-circle"></i></button>
                                    </div>
                                </div>
                            </div>
        
                            <div class="table-responsive">
                            
                                <table id="tableCautionversementDocument" class="table table-bordered mt-4">
                                    <thead>
                                    <tr>
                                    <th>#</th>
                                    <th>Type document</th>
                                    <th>Référence document</th>
                                    <th>Document</th>
                                    </tr>
                                    </thead>
                            
                                </table>  
                            
                            </div>

                         </div>
                      
                        </div> 
                    </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 btnSubmit" type="submit">Enregistrer</button>
                    </div>
                    </form> 
                </div>
            </div>
        </div>

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


                            <ul class="nav nav-underline" id="myTab" role="tablist">
                                <li class="nav-item"><a class="nav-link active" id="VLigne-tab" data-bs-toggle="tab" href="#tab-VLigne" role="tab" aria-controls="tab-VLigne" aria-selected="true">Versements de cautions</a></li>
                                <li class="nav-item"><a class="nav-link" id="DocLigne-tab" data-bs-toggle="tab" href="#tab-DocLigne" role="tab" aria-controls="tab-DocLigne" aria-selected="false">Documents</a></li>
                            </ul>

                            <div class="tab-content mt-3" id="myTabContent">
                            <div class="tab-pane fade show active" id="tab-VLigne" role="tabpanel" aria-labelledby="VLigne-tab">

                            <div class="d-flex">
                            <span id="TotalVersementCautionDeduit"></span>
                            </div>
                            <div class="table-responsive">
                            
                                <table id="tableCautionversementLigne" class="table table-light mt-4">
                                    <thead>
                                    <tr>
                                    <th>#</th>
                                    <th>Motif</th>
                                    <th>Montant</th>
                                    </tr>
                                    </thead>
                                </table>  
                            
                            </div>

                            </div>
                            <div class="tab-pane fade" id="tab-DocLigne" role="tabpanel" aria-labelledby="DocLigne-tab">
                            
                            <div class="table-responsive">
                            
                                <table id="tableCautionversementLigneDoc" class="table table-light mt-4">
                                    <thead>
                                    <tr>
                                    <th>#</th>
                                    <th>Type document</th>
                                    <th>Référence document</th>
                                    <th>Libelle</th>
                                    </tr>
                                    </thead>
                            
                                </table>  
                            
                            </div>
                                    
                            </div>
                            
                            </div>
                    </div>
                    <div class="modal-footer">
                      
                       <button class="btn btn-outline-danger" type="button" data-bs-dismiss="modal">Fermer</button>
                    </div>
                    </form> 
                </div>
            </div>
        </div>

        @include('../primary_footer')

    </div>

    @include('../chatblock')

</main>

@include('../rightbar')

@include('../footer')

<script>
 $(document).ready(function(){
     $('.nomPage').text('Versements caution')
    recuperationTypedePiece();
    recuperationLocationCloture();
    
    $('.modal').each(function() {
            $(this).find('.Pselect2X').select2({
                dropdownParent: $(this),
                width: '100%' 
            });
        });
    var countRow = 1;
    AutoriserQueSaisieNumerique();
    InputSeparateurMillier();
    recuperationVersementCaution();

    var tableauElements = [];

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

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

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

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

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

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

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

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

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

    // ::::::::::::::::::::::::::::::::::::::::::::::::::::: BLOCK INSERTION DE 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')
            $('#nomFichierChoisir').val(filenames);
        }
    })
    $('#DocumentSelect').change(function() {
        $('.Typedoc').text('')
    })

    $(document).on('click','#btn-AjouterDocuments',function() {
        
        
        var typeDoc = $('#DocumentSelect').val();
        var refDoc = $('#referenceDoc').val();
        var table = $('#tableCautionversementDocument').DataTable();
        var Idversementcaution = $('.IdversementCautionInput').val();
        if($('#DocumentSelect').val()==0){
            $('.Typedoc').text('Type document obligatoire')
            return false;
        }else{
                $('.Typedoc').text('')
        }
        GestionFichier(typeDoc,refDoc,$('#fichierDocument'),table,9,Idversementcaution,9);
        $('#DocumentSelect').val(0).trigger('change')
        $('#nomFichierChoisir').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 = $('#tableCautionversementDocument').DataTable()
        var Idversementcaution = $('.IdversementCautionInput').val();
        SupprimerPieceJointe(tableau,GetId,9,Idversementcaution)
    })

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

    })

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

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

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

    })

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

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

        if(modificationDocumentStatut== false){

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

    // ::::::::::::::::::::::::::::::::::::::::::::::::::::: FIN BLOCK INSERTION  DE GESTION DE DOCUMENT :::::::::::::::::::::::::::::

    $(document).on('click','#DuplcateInput',function(){
        countRow++;
        var htmlCode = '';
            htmlCode+= '<tr id="row'+countRow+'">';
            htmlCode+='<td><label for="" class="FormLabel">Motif</label><input type="text" name="motif[]" id="motif'+countRow+'" class="form-control" style="width:500px">\
            <small style="font-size:9px" class=" text-danger" id="motifRequired'+countRow+'"></small></td>';
            htmlCode+='<td><label for="" class="FormLabel">Montant à déduire</label><input type="text" data-montant="montantDeduit" name="montantDeduit[]" id="montantDeduit'+countRow+'" class="form-control montantDeduit NumeriqueAutorise SeparateurMillier" style="width:200px">\
            <small style="font-size:9px" class=" text-danger" id="montantDeduitRequired'+countRow+'"></small></td>';
            htmlCode+='<td> &nbsp;<span style="height:30px;margin-top:22px;margin-right:3px;" 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-top:22px;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>';
        $('#CautionVersementField').append(htmlCode)
    })

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

        row.remove();

        $('#CautionVersementField tr').each(function() {
            var inputDansLigne = $(this).find('td:eq(1) input[type="text"]');
            var valeurInput = inputDansLigne.val().replace(/\s/g, ''); // Récupère la valeur de l'input sans espaces
            if (valeurInput !== '') {
                totalDeduit += parseInt(valeurInput); // Ajoute la valeur convertie en nombre au total
            }
        });

        InputSeparateurMillierAffectation(''+totalDeduit+'',$('#totalDeduit'))
      
    });

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

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

                InputSeparateurMillierAffectation(resp.ligne[0].CautionLoyer,$('#montantCautionLocation'))
               
        })
    })
    
    $(document).on('change','.montantDeduit',function(){

                if($('#montantCautionLocation').val().length==0){
                    
                   $('#montantRequired').text('Champs obligatoire')
                   $(this).val(0)
                    return false;
                }else{
                     $('#montantRequired').text('')
                }
            var row = $('#CautionVersementField').find('tr');
            var totalDeduit = 0;
            var totalCaution = $('#montantCautionLocation').val()

            row.each(function() {
                var inputDansLigne = $(this).find('td:eq(1) input[type="text"]');
                totalDeduit += parseInt(inputDansLigne.val().replace(/\s/g, ''))
            });

             InputSeparateurMillierAffectation(''+totalDeduit+'',$('#totalDeduit'))
                
             var totalRestant = ''+totalCaution.replace(/\s/g, '')+'' - totalDeduit;
           
             InputSeparateurMillierAffectation(''+totalRestant+'',$('#totalrestant'))
             
    })

    $(document).on('change', '.ModeReglementSelect', function(){
             var IdModeReglement = $(this).val();
           MesrequetesAjax("{{ route('modereglementChoisir.recuperation') }}", "GET", {IDModeReglement:IdModeReglement}, null, true, "JSON", function(resp) {
                $('#VerifyChequeChoose').val(resp.data[0].chequeInsere);

                if(resp.data[0].chequeInsere == 1){
                   // recuperationBanque();
                    $('.chequeComposant').css('display','block');
                    $('.NumeroCheque').focus();
                }else{
                    $('.chequeComposant').css('display','none')
                }
            });
    })
            $(document).on('click', '.masquerTotaux', function(){
                $(this).css('display','none');
                $('.mask').css('display','block');

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

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

                    $('.Nomask').css('display','block');
                    $('.masquerTotaux').css({'display':'block','margin-top':'-10px'});
        })
   
    $(document).on('click', '#BtnModalAjoutversement', function(){

        recuperationLocationCloture();
        $('#modalTitreVersementCaution').text('Nouveau versement')
        $('#chequeComposant').css('display','none')
        $('.formVersementCautionAdd')[0].reset();
        $('#IdversementCautionInput').val(0)
         var table = $('#tableCautionversementDocument').DataTable();
         table.clear().draw();
        $('#CautionVersementField').html('')
        var htmlCode = '';
                    htmlCode+= '<tr>';
                    htmlCode+='<td><label for="" class="FormLabel">Motif</label><input type="text" name="motif[]" id="motif1" class="form-control" style="width:500px">\
                    <small style="font-size:9px" class=" text-danger" id="motifRequired1"></small></td>';
                    htmlCode+='<td><label for="" class="FormLabel">Montant à déduire</label><input type="text" data-montant="montantDeduit" name="montantDeduit[]" id="montantDeduit1" class="form-control montantDeduit NumeriqueAutorise SeparateurMillier" style="width:200px">\
                    <small style="font-size:9px" class=" text-danger" id="montantDeduitRequired1"></small></td>';
                    htmlCode+='<td>&nbsp;<button id="DuplcateInput" class="btn btn-phoenix-secondary me-1 mt-4 DuplcateInput1" type="button"><i class="fa fa-plus-circle"></i></button></td>';
                    htmlCode+= '</tr>';
                $('#CautionVersementField').append(htmlCode)
    })

    $(document).on('change', '#StatusChequeSelect', function(){
            
            var valeur = $(this).val()
            var selectedOption = $(this).find('option:selected');
            var idVersementCaution = selectedOption.attr('data-id');
            MesrequetesAjax("{{ route('miseAjourVersemetCautionModeCheque.modifier') }}", "GET", {IDVersementCaution:idVersementCaution,IDStatus:valeur}, null, true, "JSON", function(resp) {
            Notification('Succès',resp.msg,'top-right','success');
            recuperationVersementCaution();

        });
    })

    $('.formVersementCautionAdd').on('submit',function(e){
            
            if (!$(this)[0].checkValidity()) {

                $(this).addClass(
                    'was-validated'
                    ); // Ajoutez la classe 'was-validated' pour activer les styles de validation Bootstrap
                e.preventDefault(); // Empêchez la soumission normale du formulaire
                e.stopPropagation(); // Arrêtez la propagation de l'événement
            } else {

                 
                e.preventDefault();
                MesrequetesAjax("{{ Route('versementCaution.creer') }}", "POST", new FormData(this), false,
                    false, "JSON",
                    function(resp) {
                        recuperationVersementCaution();
                        Notification('Succès',resp.msg,'top-right','success')

                        $('#VersementCautionModal').modal('hide')
                        $('.formVersementCautionAdd').removeClass('was-validated');

                },function(err){},
                function(){
                    
                  if($('#montantCautionLocation').val().length==0){
                        
                    $('#montantRequired').text('Champs obligatoire')
                    $(this).val(0)
                        return false;
                    }else{
                        $('#montantRequired').text('')
                    }

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

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

                    for(var i=1; i<=countRow; i++){
                        
                        if($.trim($('#motif'+i+'').val()).length==0){
                                 $('#motifRequired'+i+'').text('Champs obligatoire')
                            return false;
                        }else{
                           $('#motifRequired'+i+'').text('')
                        }

                        if($.trim($('#montantDeduit'+i+'').val()).length==0){
                                 $('#montantDeduitRequired'+i+'').text('Champs obligatoire')
                            return false;
                        }else{
                           $('#montantDeduitRequired'+i+'').text('')
                        }
                    }
                    
                })
            }
    })

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

             $('#modalTitreVersementCaution').text('Modification versements cautions')
            var IdversementCaution = $(this).data('id')
            var IDlocation = $(this).data('idlocation')
            var table = $("#tableCautionversementDocument").DataTable()
         MesrequetesAjax("{{ route('VersementCaution.recuperation') }}", "GET",{IDVersementCautionLocation:IdversementCaution,IDLocation:IDlocation}, null, true,
            "JSON",
            function(resp) {

                $('.locationClotureSelect').html('')
                  $('.locationClotureSelect').append($('<option>', {
                    value: resp.location[0].IDLocation,
                    text: resp.location[0].refLocation
                }))
                 
                 $('.ModeReglementSelect').val(resp.data[0].IDModeReglement).trigger('change')
                 $('#montantCautionLocation').val(resp.data[0].montantCautionLocation)
                 $('#IdversementCautionInput').val(resp.data[0].IDVersementCautionLocation)
            
                 var reste = parseInt(resp.data[0].montantCautionLocation) - parseInt(resp.data[0].MontantDeduit);
                 InputSeparateurMillierAffectation(resp.data[0].MontantDeduit,$('#totalDeduit'))
                 InputSeparateurMillierAffectation(''+reste+'',$('#totalrestant'))

                 recuperationDocument(table,9,IdversementCaution)
                
                var countRow = 0;
                $('#CautionVersementField').html('');
                 $.each(resp.ligne,function(key,value){
                    countRow++;
                    var htmlCode = '';
                    htmlCode+= '<tr id="row'+countRow+'">';
                    htmlCode+='<td><label for="" class="FormLabel">Motif</label><input type="text" name="motif[]" id="motif'+countRow+'" value="'+value.motif+'" class="form-control" style="width:500px">\
                    <small style="font-size:9px" class=" text-danger" id="motifRequired'+countRow+'"></small></td>';
                    htmlCode+='<td><label for="" class="FormLabel">Montant à déduire</label><input type="text" data-montant="montantDeduit" value="'+value.montantDeduit+'" name="montantDeduit[]" id="montantDeduit'+countRow+'" class="form-control montantDeduit NumeriqueAutorise SeparateurMillier" style="width:200px">\
                    <small style="font-size:9px" class=" text-danger" id="montantDeduitRequired'+countRow+'"></small></td>';
                    htmlCode+='<td> &nbsp;<span style="height:30px;margin-top:22px;margin-right:3px;" 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-top:22px;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>';
                $('#CautionVersementField').append(htmlCode)
                   
                 })

                $('.NomBanque').html('')
                 $('#VersementCautionModal').modal('show')
            })
       
    })

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

               var Idversementcaution = $(this).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('VersementCaution.supprimer') }}", "GET",{IDVersementCautionLocation:Idversementcaution}, null, true,
                                        "JSON",
                                        function(resp) {

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

                        }
                    },

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

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

                var Idversementcautionligne = $(this).data('id');
                var idCautionVersement = $(this).data('idversementcaution');
                
                 $.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('VersementCautionLigne.supprimer') }}", "GET",{IDVersementCautionLocationLigne:Idversementcautionligne}, null, true,
                                        "JSON",
                                        function(resp) {
                                            Notification('Succès',resp.msg,'top-right','success');
                                            recuperationVersementLigne(idCautionVersement);
                                            recuperationVersementCaution();
                                            
                                    })
                        }
                    },

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

    $(document).on('click','#VoirVersementLigne',function(){
        var getID = $(this).data('id');
        recuperationVersementLigne(getID);
        $('#VersementCautionLigneModal').modal('show')
    })

    // TELECHARGEMENT DE FICHIER LORS DE LA MODIFICATION
    $(document).on('click', '#TelechargementFichierLorsDeLaModification', function() {
        var nomFichier = $(this).attr('data-NomFichier');
        telechargerPieceJoint(nomFichier, 9)
    })

                //29-01-2024
    // IMPRESSION LISTE DES LOCATIONS
    $(document).on('click','#ImprimerListeVersementCaution',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:12,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:12,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 recuperationLocationCloture(){
        
        MesrequetesAjax("{{ route('LocationCloture.recuperation') }}", "GET",null, true,  true, "JSON", function(resp){
            $('.locationClotureSelect').html('');
            $('.locationClotureSelect').append('<option selected disabled value="">Choisir...</option>')
            $.each(resp.ligne, function(key, value) {
                $('.locationClotureSelect').append($('<option>', {
                    value: value.IDLocation,
                    text: value.refLocation
                }))
            })
        })

    }

    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 GetModeReglement() {
        MesrequetesAjax("{{ route('ModeReglement.recuperation') }}", "GET", null, true, true, "JSON", function(response) {
            $.each(response.data, function(key, value) {
                $('.ModeReglementSelect').append($('<option>', {
                    value: value.IDModeReglement,
                    text: value.intituleModeReglement
                }))
            })
        });
    }
    function TableRecuperationVersementCaution(response) { 
        var table = $('#VersementCautionTable').DataTable();
        table.clear().draw();
        
        var montantTotal = 0;
        var totalRegle = 0;
        var totalRestant = 0;
    
        $.each(response,function(key,value) {

            montantTotal +=parseInt(value.montantCautionLocation);
            totalRegle +=parseInt(value.MontantDeduit);
            var solde = parseInt(value.montantCautionLocation) - parseInt(value.MontantDeduit);
            var photoprofil = "";
             
        if (value.photoProfil !=null) {
            photoprofil = '<img class="imgInTableRow" src="media/PhotoProfil/'+value.photoProfil+'">';
        }
        if(value.TypeLocataire==1 && value.photoProfil ==null ){
            photoprofil = '<img class="imgInTableRow" src="media/PhotoProfil/userDefault.png">';
        }

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

        if(value.statutCaution > 0){
            if(value.statutCaution == 1){
                 var status = '<select id="StatusChequeSelect" class="form-select"><option selected  data-id="'+value.IDVersementCautionLocation+'" value="1">À encaisser</option><option data-id="'+value.IDVersementCautionLocation+'" value="2">Encaissé</option> <option  data-id="'+value.IDVersementCautionLocation+'" value="3">Réjetté</option></select>';
            }else if(value.statutCaution == 2){

              status = '<select id="StatusChequeSelect" class="form-select"><option data-id="'+value.IDVersementCautionLocation+'" value="1">À encaisser</option><option selected data-id="'+value.IDVersementCautionLocation+'" value="2">Encaissé</option> <option  data-id="'+value.IDVersementCautionLocation+'" value="3">Réjetté</option></select>';
           
            }else if(value.statutCaution == 3){

              status = '<select id="StatusChequeSelect" class="form-select"><option data-id="'+value.IDVersementCautionLocation+'" value="1">À encaisser</option><option selected data-id="'+value.IDVersementCautionLocation+'" value="2">Encaissé</option> <option selected data-id="'+value.IDVersementCautionLocation+'" value="3">Réjetté</option></select>';
            }
           
        }
        else{
             status = 'R.A.S';
        }
            var btnAjouterVersement  = '<i id="VoirVersementLigne" data-id="'+value.IDVersementCautionLocation+'" class="fa fa-eye text-success cursor-pointer" title="éffectuer un versement"></i>'
        {{-- if(value.statutCaution > 0 && value.statutCaution !=2){
            var btnAjouterVersement = '<i class="fa fa-plus-circle text-danger cursor-pointer" title="Veuillez Encaisser le chèque pour faire un versement"></i>'
        } --}}

        prenom ='';
        if(value.prenom){
            prenom = value.prenom;
        }
           var heure = value.dateCreationVersementCautionLocation.substr(11,19)
        table.row.add([
              '<i id="SupprimerVersement" data-id="'+value.IDVersementCautionLocation+'" class="fa fa-trash text-danger cursor-pointer" title="Supprimer"></i> &nbsp;'+btnAjouterVersement+' &nbsp; <i id="ModifierVersementCaution" data-idlocation="'+value.IDLocation+'"  data-id="'+value.IDVersementCautionLocation+'" class="fa fa-edit text-success cursor-pointer" title="Modifier"></i>',
              formatageDate(new Date(value.created_at)),photoprofil+' '+value.nom+' '+prenom,value.refLocation,
              formaterNombre(value.montantCautionLocation)+' F',formaterNombre(value.MontantDeduit)+' F',formaterNombre(solde)+' F','<span class="badge bg-warning">'+value.intituleModeReglement+'</span>',value.numeroCheque,value.NomBanque,status,
             '<span style="color:black;font-weight:bold">Par '+ value.nom_utilisateur +' '+ value.prenom_utilisateur +'</span> <br> le '+
                formatageDate(new Date(value.dateCreationVersementCautionLocation))+' '+heure
              ])
        })
      table.draw();
  
        $('#MontantTotal').text(formaterNombre(montantTotal)+' F');
    
        $('#TotalRegle').text(formaterNombre(totalRegle)+' F');

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

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

    }

    function recuperationVersementCaution(){

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

    function recuperationVersementLigne(IDversementCaution){
        var table = $("#tableCautionversementLigne").DataTable()
        var tabDocument = $("#tableCautionversementLigneDoc").DataTable();
        table.clear().draw();
        
        MesrequetesAjax("{{ route('VersementCaution.recuperation') }}", "GET",{IDVersementCautionLocation:IDversementCaution}, null, true,
            "JSON",
            function(resp) {
                
                 $('#modalTitles').text(resp.data[0].nom+' '+resp.data[0].prenom+' '+'('+resp.data[0].refLocation+')')
                    tabDocument.clear().draw();
                $.each(resp.PieceJointe,function(key,value){
                        tabDocument.row.add(['<span class="badge bg-warning cursor-pointer" title="Télécharger"  id="TelechargementFichierLorsDeLaModification" data-NomFichier="'+value.UrlFichier+'" data-id="'+value.IDPiecejoint+'"><i class="fa fa-arrow-down"></i></span>',value.libelleType_piece,value.referenceDocument,value.UrlFichier])
                    })
                tabDocument.draw();

                var totalversemetCautionDeduit =0;
                $.each(resp.ligne,function(key,value){
                    totalversemetCautionDeduit +=parseInt(value.montantDeduit)
                    table.row.add([
                        '<i class="fa fa-trash text-danger cursor-pointer" data-idversementcaution="'+value.IDVersementCautionLocation+'" data-id="'+value.IDCautionversementLigne+'" id="supprimerLigneVersementCaution"></i>',
                        value.motif,
                        formaterNombre(value.montantDeduit)+' F'
                    ])
                })

                table.draw();

                $('#TotalVersementCautionDeduit').text(' Total : '+formaterNombre(totalversemetCautionDeduit)+' F')
        })
    }

    function recuperationBanque() {
        $('.NomBanque').html('')
        MesrequetesAjax("{{ route('Banque.recuperation') }}", "GET", null, true, true, "JSON", function(resp) {
            $.each(resp.data, function(key, value) {
                $('.NomBanque').append($('<option>', {
                    value: value.IDBanque,
                    text: value.nomBanque
                }))
            })
        })
    }
</script>

</body>

</html>