@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 relances</h4>

            {{-- <button type="button" id="BtnAppelModalAjoutDeBien" class="btn btn-success btn-sm rounded-pill"
                data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i data-feather="plus-circle"></i> Ajouter</button> --}}
        </div>
        <hr>

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

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

                <div class="table-responsive">
                    <table id="RelanceDatatable" class="table table-striped w-100">
                        <thead class="tableauEntete">
                            <tr>
                                <th>Actions</th>
                                <th>Date</th>
                                <th>Référence Facture</th>
                                <th>Mode</th>
                                <th>Infos création</th>

                            </tr>
                        </thead>

                    </table>
                </div>

            </div>
        </div>


        <div class="modal fade" id="staticBackdrop" tabindex="-1" 
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title text-white" id="staticBackdropLabel">Ajout de nouvelle relance</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">
                      
                       {{-- @include('FICHES/BienForm') --}}
                    </div>
                    <div class="modal-footer">
                    
                    <button class="btn btn-outline-danger" type="button" data-bs-dismiss="modal">Fermer</button>
                    <button class="btn btn-success" type="button">Enregistrer</button>
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="ContenuModelFactureModal" tabindex="-1" aria-labelledby="staticBackdropLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title text-white" id="staticBackdropLabel">Aperçu</h5><button
                            class="btn p-1" type="button" data-bs-dismiss="modal" aria-label="Close"><span
                                class="fas fa-times fs--1 text-white"></span></button>
                    </div>
                    <div class="modal-body">
                    <div id="ContenuModelBox" style="width:100%;padding:20px"></div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-danger" id="ContenuModelBtnModal" type="button" data-bs-dismiss="modal">Fermer</button>
                    </div>
                    
                </div>
            </div>
        </div>

        @include('../primary_footer')

    </div>

    @include('../chatblock')

</main>

@include('../rightbar')

@include('../footer')

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

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


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

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

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

    function tableListeRelance(response){
               var table = $('#RelanceDatatable').DataTable();
               var Moderelance ='';
        table.clear().draw();
        $.each(response, function(key, value) {

            if(value.modeRelance == 2){
                     Moderelance = '<span class="badge bg-primary">Manuelle</span>'  
            }else{
                     Moderelance = '<span class="badge bg-success">Automatique</span>' 
            }
            var heure = value.dateCreationModeRelance.substr(11,19)
            table.row.add([
                '<i id="VoirContenuModel" data-idrelancefacture="'+value.IDRelanceFacture+'" class="fa fa-eye cursor-pointer text-success"></i>',
                formatageDate(new Date(value.dateRelance)),
                value.refFacture,
                Moderelance,
                '<span style="color:black;font-weight:bold">Par '+ value.nom_utilisateur +' '+ value.prenom_utilisateur +'</span> <br> le '+
                formatageDate(new Date(value.dateCreationModeRelance))+' '+heure
            ])
        })
        table.draw();
    }
    function ListeRelance($dateDebut,$dateFin){
         MesrequetesAjax("{{ route('RelanceFacture.recuperation') }}", "GET",{dateDebut:$dateDebut,dateFin:$dateFin}, null, true, "JSON", function(response) {
            $('div#loaders').addClass('hiddenElement');
            tableListeRelance(response.data)
        }, null, function() {
            $('div#loaders').removeClass('hiddenElement');
        });
    }
</script>

</body>

</html>