@include('../header')

<main class="main" id="top">

    @include('../navigation')

    <div class="content">

        <div class="d-flex justify-content-between">
            <h4> <i class="fas fa-fan"></i> Listes des visites</h4>
            <div class="d-flex">
                    <button type="button" id="ImprimerListeVisiteLocataire" style="margin-right:8px;"  class="btn btn-warning btn-sm rounded-pill"><i data-feather="printer"></i>
                        Impression
                    </button>
             <button type="button" id="BtnAppelModalAjoutDeVisite" class="btn btn-success btn-sm rounded-pill"
                data-bs-toggle="modal" data-bs-target="#VisiteModal"><i data-feather="plus-circle"></i>
                Ajouter</button>
            </div>
        </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 " 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="visiteDatatable" class="table table-striped w-100">
                        <thead class="tableauEntete">
                            <tr>
                                <th>Actions</th>
                                <th>Date de visite</th>
                                <th>Locataire</th>
                                 <th>Bien</th>
                                 <th>Infos création</th>
                             
                            </tr>
                        </thead>

                    </table>
                </div>

            </div>
        </div>


        <div class="modal fade" id="VisiteModal" 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="modalTitreVisite"></h5><button
                            class="btn p-1" type="button" data-bs-dismiss="modal" aria-label="Close"><span
                                class="fas fa-times fs--1 text-white"></span></button>
                    </div>
                    <div class="modal-body">
                        <form class="FormAddVisite needs-validation p-0" method="POST" novalidate>
                            @include('OPERATIONS/FORMS/visiteForm')
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-danger" type="button" data-bs-dismiss="modal">Fermer</button>
                        <button class="btn btn-success btnSubmit" type="submit">Enregistrer</button>
                    </div>
                    </form> 
                </div>
            </div>
        </div>

        @include('../primary_footer')

    </div>

    @include('../chatblock')

</main>

@include('../rightbar')

@include('../footer')

<script>
    $(document).ready(function() {

        $('.modal').each(function() {
            $(this).find('.Pselect2X').select2({
                dropdownParent: $(this),
                width: '100%' 
            });
        });
        Filepond()
        /*GetBien();
        GetLocataire();*/
        recuperationTypedePiece();
        var dateDebut = dateDebRecuperationdonnees()
        var dateFin = dateFinRecuperationdonnees()
        recuperationVisite()
        const inputElement = document.querySelector('input[name="media[]"]');
        const pond = FilePond.create( inputElement);
        $("#visiteDatatable").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,3],
                    className:'text-center'
                },
                {
                    targets:[0],
                    className:'tblWidth-4'
                },
                {
                    targets:[3],
                    className:'tblWidth-2'
                }
            ]
        });
         $("#FormTableDocumentTableVisite").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:[
                {
                    target: 0,
                    className: 'text-center'
                }
            ]
           
        });


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

        $('.FormAddVisite').on('submit',function(e){

             if (!$(this)[0].checkValidity()) {
                $(this).addClass('was-validated');
                e.preventDefault();
                e.stopPropagation();
            } else {

                    e.preventDefault();
                MesrequetesAjax("{{ Route('visiteLocataire.creer') }}", "POST", new FormData(
                    this), false, false,
                    "JSON",
                    function(resp) {

                    $('#VisiteModal').modal('hide');
                    recuperationVisite(dateDebut,dateFin)
                    pond.removeFiles();
                    $('.FormAddVisite').removeClass('was-validated');
                    },
                    function(error) {},
                    function() {

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

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

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

        $(document).on('click','#SupprimerVisite',function(){
             var IdViste = $(this).attr('data-id');
             SuppressionElement(IdViste,'visite_locataire','IDVisitelocataire',recuperationVisite)
        })

        $(document).on('click','#modifierVisite',function(){
            $('#modalTitreVisite').text('Modification visite')
             var IDVisite = $(this).attr('data-id')
              $('.visiteIDHidden').val(IDVisite);
                MesrequetesAjax("{{ route('visiteLocataire.recuperation') }}", "GET",{IDvisite:IDVisite}, null,true,
            "JSON",
            function(resp) {
             
              $('.commentaireVisite').val(resp.ligne[0].commentaire);
              $('.Bien').val(resp.ligne[0].IDBien).trigger('change')
              $('.LocataireSelect').val(resp.ligne[0].IDLocataire).trigger('change')

              /* if (resp.PieceJointe.length > 0) {
                    recuperationPieceJoint(resp.PieceJointe)
                } else {
                    $('.ZonePieceJointe').html('')
                } */

                       var docAddtable = $('#FormTableDocumentTableVisite').DataTable();
                         docAddtable.clear().draw();
                        $.each(resp.PieceJointe, function(key, value) {
                            docAddtable.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
                            ])
                        })

                        docAddtable.draw();
            })
            
            $('.btnSubmit').text('Modifier')
            $('#VisiteModal').modal('show')
        })

        $('#BtnAppelModalAjoutDeVisite').on('click',function(){
             $('#modalTitreVisite').text('Nouvelle visite')
             $('.btnSubmit').text('Enregistrer')
             $('.visiteIDHidden').val(0);
             $('.FormAddVisite')[0].reset();
             GetBien();
             GetLocataire();
             var table=  $("#FormTableDocumentTableVisite").DataTable();
             table.clear().draw();
             table.draw();
        })

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

        // :::::::::::::::::::::::::::::::::::::::::::::::: SECTION DE DOCUMENTS :::::::::::::::::::::::::::::::::::::::::::::::::::

        $(document).on('click', '.FermerModification', function() {

            if (modificationDocumentStatut == true) {
                Confirme = $.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: 7
                                    }, null, true, "JSON",
                                    function(resp) {
                                        //recuperationDocumentDemande();
                                        $('#DemandeLocataireModal').modal('hide')
                                        $('.FormDemandeLocataireAdd')[0].reset();
                                        $('#btn-FichierDeleteVisite').css('display', 'none')
                                        $('#btn-ajoutFichierVisite').css('display', 'flex')
                                        modificationDocumentStatut = false;
                                    })
                            }
                        },

                        fermer: {
                            text: 'NON',
                        },

                    }
                });

            }else{
            $('#ModalReglementPrestataire').modal('hide')
          }

        })

        $('.FermerCreation').on('click',function(){
            if (modificationDocumentStatut == true) {
                Confirme = $.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: 7
                                    }, null, true, "JSON",
                                    function(resp) {

                                         //recuperationDocumentDemande();
                                        $('#DemandeLocataireModal').modal('hide')
                                        $('.FormDemandeLocataireAdd')[0].reset();
                                        $('#btn-FichierDeleteVisite').css('display', 'none')
                                        $('#btn-ajoutFichierVisite').css('display', 'flex')
                                        modificationDocumentStatut = false;

                                      
                                    })

                            }
                        },

                        fermer: {
                            text: 'NON',
                        },

                    }
                });

            }
            else{
            $('#ModalReglementPrestataire').modal('hide')
          }
        })

        $('#fichierDocumentVisite').change(function() {
            var filenames = $(this).val().split('\\').pop()
            if (filenames) {
                $('#btn-FichierDeleteVisite').css('display', 'flex')
                $('#btn-ajoutFichierVisite').css('display', 'none')
                $('#nomFichierChoisirVisite').val(filenames);
            }
        })

        // AJOUT DE FICHIER EN BASE DE DONNEE
        $(document).on('click', '#btn-AjouterDocuments', function() {

            if($('#DocumentSelectVisite').val() == 0){

                $('#typefichierVisiteRequired').text('Type document obligatoire')
                return false;
            }else{
                $('#typefichierVisiteRequired').text('')
            }
            if($('#fichierDocumentVisite').val().length == 0){

                $('#fichierRequiredVisite').text('Fichier obligatoire')
                return false;
            }else{
                $('#fichierRequiredVisite').text('')
            }

             //$('.FermerModification').css('display', 'block')
             //$('.FermerCreation').css('display', 'none')
            var docAddtable = $('#FormTableDocumentTableVisite').DataTable();
           // var fileInput = $('#fichierDocument')[0].files[0];
            var referecenceDoc = $('#referenceDocVisite').val();
            var typeDocument = $('#DocumentSelectVisite').val();
            var IDvisiteIDHiddenLocataire = $('#visiteIDHidden').val()

            GestionFichier(typeDocument, referecenceDoc, $('#fichierDocumentVisite'), docAddtable,
                8, IDvisiteIDHiddenLocataire, 8);
            modificationDocumentStatut = true;

        })

        //SUPPRESSION DE DOCUMENT
        $(document).on('click', '#btn-FichierDeleteVisite', function() {
            $('#nomFichierChoisirVisite').val('');
            $('#fichierDocumentVisite').val('');
            $(this).css('display', 'none');
            $('#btn-ajoutFichierVisite').css('display', 'flex');

        })

        $(document).on('click', '#btn-ajoutFichierVisite', function() {
            $('#fichierDocumentVisite').click();
        })

        $(document).on('click', '#suppressionDocument', function() {
            var GetId = $(this).attr('data-id');
            var tableau = $('#FormTableDocumentTableVisite').DataTable();
            var IDvisite = $('#visiteIDHidden').val()
          SupprimerPieceJointe(tableau,GetId,8,IDvisite)

        })

        // :::::::::::::::::::::::::::::::::::::::::::::::: FIN DE SECTION DE DOCUMENTS :::::::::::::::::::::::::::::::::::::::::::::::::::
         
        //29-01-2024
        // IMPRESSION LISTE DES LOCATIONS
        $(document).on('click','#ImprimerListeVisiteLocataire',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:10,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:10,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 GetBien(){
         MesrequetesAjax("{{ route('Bien.recuperation') }}", "GET", null, true, true, "JSON", function(response) {
            
            $.each(response.data,function(key,value){
                  $('#BienSelect').append($('<option>',{value:value.IDBien, text: value.intituleBien}))  
            })
        });
    }

    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 TablerecuperationVisite(response){
        var table =  $("#visiteDatatable").DataTable();
        table.clear().draw()
     
        $.each(response,function(key,value){
              var photoProfil = '';
             {{-- if (value.photoProfil != "") {
                photoprofil = '<img class="imgInTableRow" src="media/PhotoProfil/'+value.photoProfil+'">';
             } --}}
             var prenom = "";
                if(value.prenom !=null){
                    prenom = value.prenom;
                }
            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">';
            }
             var heure = value.dateCreationVisiteLocataire.substr(11,19)
            table.row.add([
                '<i class="fa fa-trash text-danger cursor-pointer" data-id="'+value.IDVisitelocataire+'" id="SupprimerVisite"></i>&nbsp;&nbsp;<i class="fa fa-edit text-success cursor-pointer" data-id="'+value.IDVisitelocataire+'" id="modifierVisite"></i>',
                formatageDate(new Date(value.date_visite)),
                photoprofil+' '+value.nom+' '+prenom,
                value.intituleBien,
               '<span style="color:black;font-weight:bold">Par '+ value.nom_utilisateur +' '+ value.prenom_utilisateur +'</span> <br> le '+
                formatageDate(new Date(value.dateCreationVisiteLocataire))+' '+heure
            ]);
        })

        table.draw()
    }

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

    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
                }))
            })
        });  
    }
</script>

</body>

</html>