@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> Liste de bien principal</h4>
            <button type="button" id="btn-AddCallModal" class="btn btn-success btn-sm rounded-pill" data-bs-toggle="modal" data-bs-target="#GroupeBienModal"><i data-feather="plus-circle"></i> Ajouter</button>
        </div>
        <hr>
        <div class="card card-shadow">

            <div class="card-body">

                <div class="row g-3">
                        <div class="col-md-2">
                        
                        </div>
                        <div class="col-md-2">
                            <label for="" class="FormLabel">Type de bien principal</label>
                            <select class="form-select typeGroupeBienSelect Pselect2" id="typeGroupeBienSelect">
                                    <option selected style="color:gray" value="0">Tous</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                                 <label for="" class="FormLabel">Pays</label>
                            <select class="form-select PaysSelectFilter Pselect2" id="PaysSelectFilter">
                                    <option selected style="color:gray" value="0">Tous</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                                 <label for="" class="FormLabel">Villes</label>
                            <select class="form-select villeFilter Pselect2" id="SuggestionvilleFilter" >
                                    <option selected style="color:gray" >Tous</option>
                            </select>
                        </div>

                         <div class="col-md-2">
                         <button class="btn btn-secondary btn-sm mt-4" id="btn-filter"> <i class="fa fa-search"></i> </button>
                         </div>
                        <div class="col-md-2"></div>
                    </div>
                    
                <div class="table-responsive">
                    <table id="GroupeBienDatatable" class="table table-striped w-100">
                        <thead class="tableauEntete">
                            <tr>
                                <th>Actions</th>
                                <th>Référence</th>
                                <th>Intitulé</th>
                                <th>Type</th>
                                <th>Commune</th>
                                <th>Logitude GPS</th>
                                <th>Latitude GPS</th>
                                <th>Date début de gestion</th>
                                <th>Date fin de gestion</th>
                                <th>Infos création</th>
                            </tr>
                        </thead>

                    </table>
                </div>

            </div>
        </div>


        <div class="modal fade" id="GroupeBienModal"  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 modal-Title text-white" id="staticBackdropLabel">Ajout de nouveau bien principal</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=" p-0 g-3 needs-validation formAddgroupeBien" method="POST" enctype="multipart/form-data" novalidate>
                            @include('PARAMETTRES_UTILES/FORMS/groupeBienForm')
                    </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" type="submit">Enregistrer</button>
                        <button class="btn btn-success" style="display:none" type="submit">Modifier</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>


         <div class="modal fade" id="VoirBien" 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 de bien principal  <span id="RefgroupeBien"></span></h5><button class="btn p-1" type="button" data-bs-dismiss="modal" aria-label="Close"><span class="fas fa-times fs--1 text-white"></span></button>
                    </div>
                     <div class="modal-body" 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="home-tab" data-bs-toggle="tab" href="#tab-home" role="tab" aria-controls="tab-home" aria-selected="false" tabindex="-1">Informations principales</a></li>

                         <li class="nav-item" role="presentation"><a class="nav-link" id="listeBiens" data-bs-toggle="tab" href="#listeBien" role="tab" aria-controls="listeBien" aria-selected="false" tabindex="-1">Liste des biens</a></li>

                        <li class="nav-item" role="presentation"><a class="nav-link " id="profile-tab" data-bs-toggle="tab" href="#tab-profile" role="tab" aria-controls="tab-profile" aria-selected="true">Documents</a></li>
                      </ul>
                      <div class="tab-content mt-3" id="myTabContent">
                        <div class="tab-pane fade active show" id="tab-home" role="tabpanel" aria-labelledby="home-tab">
                        
                                <h5>Informations du bien principal</h5>
                                <hr>
                                <div id="DetailBienBlock1" class="row g-3">
                                
                                </div>
                                <div id="DetailBienBlock2v" class="row g-2"></div>
                        
                        </div>
                        <div class="tab-pane fade" id="listeBien" role="tabpanel" aria-labelledby="profile-tab">
                                    
                                    <div class="tabe-resonsive">

                                            <table id="BienTable" class="table table-light">
                                                    <thead>
                                                        <th>Référence</th>
                                                        <th>Bien</th>
                                                        <th>Type de bien</th>
                                                        <th>ville</th>
                                                        <th>Commune</th>
                                                    </thead>
                                            </table>

                                    </div>
                                    
                        </div>

                         <div class="tab-pane fade " id="tab-profile" role="tabpanel" aria-labelledby="profile-tab">
                        
                                    <table id="DocumentTable" class="table table-light">
                                        <thead>
                                            <th>#</th>
                                            <th>Type document</th>
                                            <th>Référence</th>
                                            <th>Libellé</th>
                                        </thead>
                                    </table>
                        </div>
                       
                      </div>
                    



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

                        <button class="btn btn-outline-danger" 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() {

        $('.modal').each(function() {
            $(this).find('.Pselect2X').select2({
                dropdownParent: $(this),
                width: '100%' 
            });
        });
        $("#GroupeBienDatatable").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'
            , "lengthMenu": [
                [5, 10, 25, 50, -1]
                , [5, 10, 25, 50, "Tous"]
            ]
            , pageLength: 25
            , 'columnDefs': [
                {
                    targets: 0
                    , className: "text-center"
                },
                {
                    targets: 2
                    , className: "tblWidth-0"
                },
                {
                    targets:[4,5,6,7,8]
                    ,className: "text-center tblWidth-2"
                },

                 {
                    targets: [9]
                    ,className: "tblWidth-0"
                }
             ]
            , 'order': []
           
        });

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

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

        $("#BienTable").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: 10,
           columnDefs:[
                {
                    target:[0,2,3,4],
                    className:"text-center"
                }
            ]
        });
    })

</script>

<script>

Filepond()

const inputElement = document.querySelector('input[name="media[]"]');
const pond = FilePond.create( inputElement);
</script>

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

        $('.nomPage').text('Groupe de bien')
        recuperationTypeGroupeBien();
        referenceGroupeBien();
        recuperationCommune();
        recuperationGroupeBien();
        recuperationville()
        recuperationPays()
        recuperationPaysFilter()
        recuperationTypedePiece()
        var modificationDocumentStatut = false;

        $('.intituleGroupeBien').on('input',function(){
            $(this).css('text-transform','uppercase')
        })

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

        $('#btn-AddCallModal').on('click',function(){
             $('.formAddgroupeBien')[0].reset();
             $('.ZonePieceJointe').css('display', 'none');
             $('.GroupeBienInput').val(0)
              $('.modal-Title').text('Ajout de nouveau bien principal')
             referenceGroupeBien() 
        })
        $('.formAddgroupeBien').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('GroupeBien.creer')}}", "POST", new FormData(this), false
                , false, "JSON"
                , function(resp) {

                        if(resp.error){
                            Notification('Erreur', resp.msg, 'top-right', 'danger')
                            return false;
                        }

                        Notification('Success', resp.msg, 'top-right', 'success')
                        
                        MesrequetesAjax("{{ route('GroupeBien.recuperation') }}", "GET", null, true, true
                            ,"JSON"
                            ,function(response) {
                                TablerecuperationGroupeBien(response.data)
                            });
                             
                     $('#GroupeBienModal').modal('hide')
                      $('.GroupeBienInput').val(0)
                     pond.removeFiles();
                     $('.formAddgroupeBien').removeClass('was-validated');
                    $('.formAddgroupeBien')[0].reset();
 
                },function(error) {},
                function() {

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

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

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

                            if ($('.dateDebGroupBienContrat').val().length == 0) {

                                $('.dateDebGroupBienContrat').css('border-color', 'red');
                                $('.invalid-dateDeb').css('color', 'red')
                                $('.invalid-dateDeb').text('Date début obligatoire')
                                return false;
                            } else {
                                $('.dateDebGroupBienContrat').css('border-color', 'green');
                                $('.invalid-dateDeb').text('')

                            }
                            if ($('.dateFinGroupBienContrat').val().length == 0) {
                                $('.dateFinGroupBienContrat').css('border-color', 'red');
                                $('.invalid-dateFin').css('color', 'red')
                                $('.invalid-dateFin').text('Date fin obligatoire')
                                return false;
                            } else {

                                $('.dateFinGroupBienContrat').css('border-color', 'green');
                                $('.invalid-dateFin').text('')
                            }
                }
            )

         }
        })

        $(document).on('click','#ModifierGroupeBien',function(){
            var IDGroupebien = $(this).attr('data-id')
            $('.modal-Title').text('Modification bien principal')
            $('.FermerModification').css('display','block')
            $('.FermerCreation').css('display','none')
             MesrequetesAjax("{{ route('GroupeBien.recuperation') }}", "GET", {
                IdGroupebien: IDGroupebien
            }, null, true, "JSON", function(resp) {

                    var commune = resp.data[0].Libellecommune;
                    var typeGroupeBien = resp.data[0].intituleTypeGroupeBien
                     $('.typeGroupeBienSelect').html('')
                     $('.communeSelect').html('')
                     $('.GroupeBienInput').val(resp.data[0].IDGroupeBien)
                     $('.referenceGroupeBien').val(resp.data[0].refGroupeBien)
                     $('.intituleGroupeBien').val(resp.data[0].intituleGroupeBien)
                    
                     InputSeparateurMillierAffectation(resp.data[0].valeurBien,$('.valeurGroupeBien'))
                     $('.longitudeGpsGroupeBien').val(resp.data[0].longitudeGps)
                     $('.latitudeGpsGroupeBien').val(resp.data[0].latitudeGps)
                     $('.dateDebGroupBienContrat').val(formatageDate(new Date(resp.data[0].dateSignatureContrat)))
                     $('.dateFinGroupBienContrat').val(formatageDate(new Date((resp.data[0].dateFinContrat))))
                     $('.observation').val(resp.data[0].observation)

                     $('#PaysSelect').val(resp.data[0].IDPays).trigger('change')
                     $('#VilleSelect').val(resp.data[0].IDVille).trigger('change')
                     $('#TauxCommission').val(resp.data[0].tauxCommissionGroupBien)
                     $('#SituationGeo').val(resp.data[0].situationGeoGroupeBien)
                     $('#SuperficieGroupeBien').val(resp.data[0].SuperficieGroupeBien)
                    
                    $.each(resp.commune,function(key,val){

                         if(val.Libellecommune == commune){
                                $('.communeSelect').append('<option selected value="'+val.IDCommune+'">'+val.Libellecommune+'</option>')
                        }else{
                            $('.communeSelect').append($('<option>',{value:val.IDCommune, text:val.Libellecommune}))
                        }
                    })

                    $.each(resp.typeGroupBien,function(key,value){
                        if(value.intituleTypeGroupeBien == typeGroupeBien){
                                $('.typeGroupeBienSelect').append('<option selected value="'+value.IDTypeGroupeBien+'">'+value.intituleTypeGroupeBien+'</option>')
                        }else{
                            $('.typeGroupeBienSelect').append($('<option>',{value:value.IDTypeGroupeBien, text:value.intituleTypeGroupeBien}))
                        }
                         
                    })

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

                 var tableDoc =  $('#FormTableDocumentTableGroupeBien').DataTable();
                 // REMPLISSAGE TABLEAU DOCUMENT ENTREPRISE
            
                    tableDoc.clear().draw();
                            $.each(resp.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();
                         $('#GroupeBienModal').modal('show')
            })
        })

        // SUPPRESSION DE FICHIER LORS DE LA MODIFICATION
        $(document).on('click', '#SuppressionFichierLorsDeLaModification', function() {
            var GetId = $(this).attr('data-id')
            var GetIDGroupeBien = $('.GroupeBienInput').val();
            suppressionPieceJointe(GetId,GetIDGroupeBien,2)
        })

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

        $(document).on('click','#btn-telechargementPieceJointe',function(){
           var nomFichier = $(this).attr('data-NomFichier');
              telechargerPieceJoint(nomFichier,2)
        })

        $(document).on('click','#VoirGroupeBien',function(){
            var IDGroupebien = $(this).attr('data-id')
            var tabDocument = $("#DocumentTable").DataTable();
             MesrequetesAjax("{{ route('GroupeBien.recuperation') }}", "GET", { IdGroupebien: IDGroupebien }, null, true, "JSON", function(resp) {
                                 $('#DetailBienBlock1').html('');
                                 var Output = '';
                                 $('#RefgroupeBien').text('('+resp.data[0].refGroupeBien+')')

                                var Observation = '';

                                if(resp.data[0].observation =null){

                                    Observation=resp.data[0].observation;
                                }
                       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">Type de bien</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" >' +
                        resp.data[0].intituleTypeGroupeBien +
                        '</a></div>\
                            <div class="col-6 border-1 border-bottom py-2"><a style="margin-left:4px" class="text-800 hover-primary text-decoration-none fw-semi-bold d-flex justify-content-between d-xxl-inline-block"><span class="FormLabel">Latitude GPS</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 class="btn btn-link fs-0 text-800 hover-primary text-decoration-none fw-semi-bold d-flex flex-column d-xxl-inline-block">' +
                        resp.data[0].latitudeGps +
                        ' </a> </div>\
                            <div class="col-6 border-1 border-bottom border-end py-2"><a style="margin-right:4px;" class=" text-800 hover-primary text-decoration-none fw-semi-bold d-flex justify-content-between d-xxl-inline-block" ><span class="FormLabel">Longitude GPS</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 text-decoration-none me-2 mb-2 mb-xxl-0"></span> </div> </a>\
                                <a class="btn btn-link ps-2 fs-0 text-800 hover-primary text-decoration-none fw-semi-bold d-flex flex-column d-xxl-inline-block" >' +
                        resp.data[0].longitudeGps +
                        '</a></div>\
                            <div class="col-6 border-1 border-bottom py-2"><a style="margin-left:4px" class=" text-800 hover-primary text-decoration-none fw-semi-bold d-flex justify-content-between d-xxl-inline-block" ><span class="FormLabel">Reférence</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 class="btn btn-link fs-0 text-800 hover-primary text-decoration-none fw-semi-bold d-flex flex-column d-xxl-inline-block" href="#!">' +
                        resp.data[0].refGroupeBien +
                        '</a> </div>\
                            <div class="col-6 border-1 border-end py-2"><a style="margin-right:4px;" class=" text-800 hover-primary text-decoration-none fw-semi-bold d-flex justify-content-between d-xxl-inline-block"><span class="FormLabel">Taux de gestion </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 fas fa-location-arrow me-2 mb-2 mb-xxl-0"></span></div> </a>\
                                <a class="btn btn-link ps-2 fs-0 text-800 text-decoration-none hover-primary fw-semi-bold d-flex flex-column d-xxl-inline-block" >' +
                        resp.data[0].tauxCommissionGroupBien +
                        ' %</a></div>\
                            <div class="col-6 border-1 py-2"><a style="margin-left:4px" class="text-800 text-decoration-none hover-primary fw-semi-bold d-flex justify-content-between d-xxl-inline-block"><span class="FormLabel">Valeur</span>\
                                <div style="width:30px;height:30px; border:3px solid orange;border-radius:5px"> <span style="margin-left:6px;margin-top:3px" class="fa-solid fas fas fa-map-marker-alt me-2 mb-2 mb-xxl-0"></span> </div> </a> <a class="btn btn-link fs-0 text-800 text-decoration-none hover-primary fw-semi-bold d-flex flex-column d-xxl-inline-block" href="#!">' +
                        formaterNombre(resp.data[0].valeurBien) + ' FCFA</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">'+resp.data[0].intituleGroupeBien+'</h3>\
                                    <p class="text-700 fw-semi-bold">'+Observation+' </p>\
                                </div>\
                            </div>\
                        </div> '
                $('#DetailBienBlock1').append(Output);

               
                   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 bienTable = $('#BienTable').DataTable();
                      bienTable.clear().draw();
                    $.each(resp.ListeBien,function(key,value){
                        bienTable.row.add([
                            value.refBien,
                            value.intituleBien,
                            value.intituleTypeBien,
                            value.Libelleville,
                            value.Libellecommune
                        ])
                    })
                    bienTable.draw();

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

           
            
        })

        //SUPPRESION DE GROUPE DE BIEN
        $(document).on('click','#supprimerGroupeBien',function(){
           var GetId = $(this).attr('data-id')
             SuppressionElement(GetId,'groupe_biens','IDGroupeBien',recuperationGroupeBien)  
        })

        $('#PaysSelect').on('change',function(){

            var getIdpays = $(this).val();

             MesrequetesAjax("{{ route('villePardIdPays.recuperation') }}", "GET", {Idpays:getIdpays}, null, true, "JSON", function(
            resp) {
                 $('#VilleSelect').html('')
              $.each(resp.data, function(key, values) {
                    $('#VilleSelect').append($('<option>', {
                        value: values.IDVille,
                        text: values.Libelleville
                    }))
              })

            })
        })

        $('.PaysSelectFilter').on('change',function(){

            var getIdpays = $(this).val();

             MesrequetesAjax("{{ route('villePardIdPays.recuperation') }}", "GET", {Idpays:getIdpays}, null, true, "JSON", function(
            resp) {
                 $('.villeFilter').html('')
              $.each(resp.data, function(key, values) {
                    $('.villeFilter').append($('<option>', {
                        value: values.IDVille,
                        text: values.Libelleville
                    }))
              })

            })
        })
        

        // ::::::::::::::::::::::::::::::::::::::::::::::::::::: 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')
                $('#nomFichierChoisirGroupeBien').val(filenames);
            }
        })
        $('#DocumentSelectGroupeBien').change(function() {
            $('.Typedoc').text('')
        })

        $(document).on('click','#btn-AjouterDocuments',function() {
            
            var typeDoc = $('#DocumentSelectGroupeBien').val();
            var refDoc = $('#referenceDoc').val();
            var table = $('#FormTableDocumentTableGroupeBien').DataTable();
            var IdGroupebien = $('#GroupeBienInput').val();
            if($('#DocumentSelectGroupeBien').val()==0){
                $('.Typedoc').text('Type document obligatoire')
                return false;
            }else{
                 $('.Typedoc').text('')
            }
            GestionFichier(typeDoc,refDoc,$('#fichierDocument'),table,2,IdGroupebien,2);
            $('#DocumentSelectGroupeBien').val(0).trigger('change')
            $('#nomFichierChoisirGroupeBien').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 = $('#FormTableDocumentTableGroupeBien').DataTable()
            var IDLocation = $('#IdLocationInput').val()
            SupprimerPieceJointe(tableau,GetId,3,IDLocation)
        })

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

        })

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

                        fermer: {
                            text: 'NON',
                        },
                    
                    }
                });
            
          }else{
              $('#GroupeBienModal').modal('hide')
          }

            
         
        })

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

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

            if(modificationDocumentStatut== false){

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

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

        // FILTRE 
        $(document).on('click','#btn-filter',function(){
            
              var typeBienPrincipal = $('.typeGroupeBienSelect').val();
              var choisirPays = $('.PaysSelectFilter').val();
              var choisirVille = $('.villeFilter').val();
             MesrequetesAjax("{{ route('bienPrincipal.filtrer') }}", "GET", {
                pays:choisirPays,typebienPrincipal:typeBienPrincipal,ville:choisirVille}, null, true, "JSON", function(
            resp) {
                if(resp.data.length == 0){
                recuperationGroupeBien()

                }else{
                    TablerecuperationGroupeBien(resp.data)
                }
            })
        })
    })

    function recuperationTypeGroupeBien() {
        MesrequetesAjax("{{ route('TypegroupeBien.recuperation') }}", "GET", null, true, true, "JSON", function(resp) {
            $.each(resp.data, function(key, values) {
                $('.typeGroupeBienSelect').append($('<option>', {
                    value: values.IDTypeGroupeBien
                    , text: values.intituleTypeGroupeBien
                }))
            })
        });
    }

    function recuperationCommune() {
        MesrequetesAjax("{{ route('Commune.recuperation') }}", "GET", null, true, true, "JSON", function(resp) {
            $.each(resp.data, function(key, values) {
                $('#communeSelect').append($('<option>', {
                    value: values.IDCommune
                    , text: values.Libellecommune
                }))
            })
        });
    }

    function referenceGroupeBien() {
        MesrequetesAjax("{{route('ReferenceGroupeBien.recuperation')}}", "GET", null, true, true, "JSON", function(resp) {
            
            $('#referenceGroupeBien').val(resp[0]);
            $('.referenceGroupeBienNumerique').val(resp[1]);
        });
    }

    function TablerecuperationGroupeBien(response){

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

             var heure = value.dateCreationGroupeDeBien.substr(11,19)
            table.row.add([
            '<i id="VoirGroupeBien" title="Détail bien principal" data-id="' + value.IDGroupeBien+'"class="fa fa-eye cursor-pointer text-success"></i>&nbsp;&nbsp;\
            <i id="supprimerGroupeBien" title="Supprimer bien principal" data-id="' + value.IDGroupeBien+'"class="fa fa-trash cursor-pointer text-danger"></i>&nbsp;&nbsp;\
            <i id="ModifierGroupeBien" title="Modifier bien principal" data-id="' +value.IDGroupeBien + '" class="fa fa-edit cursor-pointer text-success"></i>',
            value.refGroupeBien,
            value.intituleGroupeBien,
            value.intituleTypeGroupeBien,
            value.Libellecommune,
            value.longitudeGps,
            value.latitudeGps,
            {{-- formaterNombre(value.valeurBien)+' CFA', --}}
            formatageDate(new Date(value.dateSignatureContrat)),
            formatageDate(new Date(value.dateFinContrat)) ,
          
             '<span style="color:black;font-weight:bold">Par '+ value.nom_utilisateur +' '+ value.prenom_utilisateur +'</span> <br> le '+
                formatageDate(new Date(value.dateCreationGroupeDeBien))+' '+heure
            ])
        })
        table.draw();
    }

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

    function recuperationPays(){
        MesrequetesAjax("{{ route('pays.recuperation') }}", "GET", null, true, true, "JSON", function(
                resp) {
                $.each(resp.data, function(key, values) {
                    $('.PaysSelect').append($('<option>', {
                        value: values.IDPays,
                        text: values.Libellepays
                    }))
                })
        });
    }

     function recuperationPaysFilter(){
        MesrequetesAjax("{{ route('pays.recuperation') }}", "GET", null, true, true, "JSON", function(
                resp) {
                $.each(resp.data, function(key, values) {
                    $('.PaysSelectFilter').append($('<option>', {
                        value: values.IDPays,
                        text: values.Libellepays
                    }))
                })
        });
    }

    

    function recuperationville(){
         MesrequetesAjax("{{route('ville.recuperation')}}", "GET", null, true, true, "JSON", function(resp) {
             $.each(resp.ligne, function(key, value) {
                $('.ville').append($('<option>', {
                    value: value.IDVille,
                    text: value.Libelleville
                }))
            })
        })
    }

    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>