@extends('Admin.pages.layout.header')
@section('Batiment')
    <style>
        .bg-cronos {
            background-color: #00563B;
        }

        .btn-cronos {
            background-color: #00563B;
            color: #ffff;
        }
    </style>
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    @include('sweetalert::alert')
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>


    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- SELECT2 EXAMPLE -->
            <div class="card ">
                <div class="card-header bg-cronos">
                    <h2 class="card-title text-white">Bâtiment</h2>
                    <div class="card-tools">
                    </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <a id="btnModalFormBatiment" href="#modalBatiment" class="btn btn-cronos text-white add"
                        data-toggle="modal" data-backdrop="static" data-keyboard="false"><i class="fas fa-plus-circle"></i>
                        <span>Ajouter un bâtiment</span></a>

                    <table class="table table-striped table-bordered table-hover" data-toolbar="#btnModalFormGestionVentes"
                        id="table" data-toggle="table" data-ajax="ajaxRequest" data-buttons-class="cronos"
                        data-show-refresh="true" data-show-toggle="true" data-show-fullscreen="true"
                        data-show-columns="true" data-show-columns-toggle-all="true" data-show-export="true"
                        data-click-to-select="true" data-toggle="table" data-search="true" data-select-item-name="toolbar1"
                        data-pagination="true" data-sort-name="name" data-page-size="10" data-sort-order="desc">
                        <thead>
                            <tr>
                                <th data-field="nomBatiment" data-sortable="true">Nom bâtiment</th>
                                <th data-field="longitudeBatiment" data-sortable="true">longitude</th>
                                <th data-field="latitudeBatiment" data-sortable="true">latitude</th>
                                <th data-formatter="actionFormatter" data-events="actionEvents">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <!-- /.card-body -->
                <div class="card-footer"></div>
            </div>
            <!-- /.card -->


        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
    @include('Admin.pages.File_Batiment.deleteBatiment')
    @include('Admin.pages.File_Batiment.editBatiment')
    @include('Admin.pages.File_Batiment.addBatiment')
@endsection

<!-- Modal-->



@section('script')
    <script>
        function actionFormatter(value, row, index) {
            return [
                '<a class="editBatiment" style="color:blue" href="javascript:void(0)" title="Modifier">',
                '<i class="fas fa-edit" aria-hidden="true"></i>',
                '</a>',
                '&nbsp;&nbsp;', // Ajout d'un espace supplémentaire
                '<a class="deleteBatiment" style="color:red" href="javascript:void(0)" title="Supprimer">',
                '<i class="fas fa-trash" aria-hidden="true"></i>',
                '</a>'
            ].join('');
        }

        window.actionEvents = {
            'click .editBatiment': function(e, value, row, index) {
                var id = row.id;
                $('#ModalEdit').modal('show');
                $.ajax({
                    type: "GET",
                    url: "{{ route('gestionBatiments.edit', ['id' => ':id']) }}".replace(':id', id),
                    success: function(response) {
                        console.log(response);
                        $('#nomBatiment').val(response.Batiments.nomBatiment);
                        $('#latitudeBatiment').val(response.Batiments.latitudeBatiment);
                        $('#longitudeBatiment').val(response.Batiments.longitudeBatiment);
                        $('#id').val(response.Batiments.id);
                    }
                });
            },

            'click .deleteBatiment': function(e, value, row, index) {
                var id = row.id;
                $('#ModalDelete').modal('show');
                $('#deleteing_id').val(id);
            }
        };
    </script>

    <script>
        // your custom ajax request here
        function ajaxRequest(params) {
            var url = '{{ route('Batiments.create') }}'
            $.get(url + '?' + $.param(params.data)).then(function(res) {
                params.success(res)
            })
        }
    </script>
@endsection
