@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> Liste groupe de biens</h4>
                    <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i data-feather="plus-circle"></i> Ajouter</button>
                </div>
        <hr>
        <div class="card" style="box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;">
           
            <div class="card-body">
                <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>LogitudeGps</th>
                                <th>LatitudeGps</th>
                                <th>Valeur du bien</th>
                                <th>Date debut contrat</th>
                                <th>Date fin contrat</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 nouveau groupe de bien</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 id="formAddgroupeBien" class=" g-3 needs-validation" method="POST" novalidate>
                       @include('PARAMETTRES_UTILES/FORMS/groupeBienForm')
                    </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="submit">Enregistrer</button>
                     <button class="btn btn-success" style="display:none" type="submit">Modifier</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>

        @include('../primary_footer')

    </div>

    @include('../chatblock')

</main>

@include('../rightbar')

@include('../footer')

<script>
    $(document).ready(function() {
        $("#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',
            pageLength: 25,
        });

    })
</script>

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

    $('#formAddgroupeBien').on('submit',function(e){

        e.preventDefault();
       $.ajax({
        type: "POST",
        url: "{{Route('ajoutDeBien')}}",
        data: new FormData(this),
        dataType: "json",
        contentType:false,
        processData:false,
        beforeSend: function(){
            if($('.reference').val().length ==0){
                return false;
            }
            if($('.intitule').val().length==0){
                return false;
            }
           
            if($('.proprietaire').val()=='Choisir...'){
                return false;
            }
            if($('.dateDebContrat').val().length==0){
               
                $('.dateDebContrat').css('border-color','red');
                $('.invalid-dateDeb').css('color','red')
                $('.invalid-dateDeb').text('Date début obligatoire')
                return false;
            }else{
                $('.dateDebContrat').css('border-color','green');
                 $('.invalid-dateDeb').text('')

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

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

        },
        success: function (data) {
            
        }
       });
    })
})
</script>


</body>

</html>