<style>
    #datatable-buttons_filter,#datatable-buttons_paginate{
        float:right;
    }
</style>
            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="content-page">
                <!-- Start content -->
                <div class="content">
                    <div class="container-fluid">
                        <div class="page-title-box">
                            <div class="row align-items-center">
                                <div class="col-sm-6">
                                    <h4 class="page-title">Categorie</h4>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item active">Bienvenue sur votre administration</li>
                                    </ol>
                                </div>
                                <div class="col-sm-6">
                                    <div class="float-right d-none d-md-block">
                                        <div class="dropdown">
                                            <button id="btnadd" class="btn btn-primary  waves-effect waves-light" type="button">
                                                <i class="mdi mdi-plus mr-2"></i> Ajouter une categorie
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- end row -->
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="mt-0 header-title">Categorie</h4>
                                        <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th>Intitule</th>
                                                    <th>Parent</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php
                                                    foreach (Categorie::q()->orderBy('id DESC')->execute() as $key => $value) {
                                                        ?>
                                                            <tr>
                                                                <td><?=$value->intitule?></td>
                                                                <td><?=$value->idparent == 0 ? '' : Categorie::get($value->idparent)->intitule?></td>
                                                                <td>
                                                                    <a href="javascript:;" class="btn btn-secondary edit" data-id="<?=$value->id?>"><i class="mdi mdi-pencil"></i></a>
                                                                    &nbsp;&nbsp;
                                                                    <a href="javascript:;" class="btn btn-danger delete" data-id="<?=$value->id?>"><i class="mdi mdi-delete"></i></a>
                                                                </td>
                                                            </tr>
                                                        <?php
                                                    }
                                                ?>                                                
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!-- end col -->
                        </div>
                        <!-- end row -->
                    </div>
                    <!-- container-fluid -->
                </div>
                <!-- content -->
                <footer class="footer">
                    © 2021 GIST France <span class="d-none d-sm-inline-block">- Designed <i class="mdi mdi-heart text-danger"></i> by worldevs</span>.
                </footer>
            </div>
            <!-- ============================================================== --><!-- End Right content here --><!-- ============================================================== -->
        </div>
        <!-- END wrapper --><!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/metisMenu.min.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/waves.min.js"></script>
        <!-- Required datatable js -->
        <script src="plugins/datatables/jquery.dataTables.min.js"></script>
        <script src="plugins/datatables/dataTables.bootstrap4.min.js"></script>
        <!-- Buttons examples -->
        <script src="plugins/datatables/dataTables.buttons.min.js"></script>
        <script src="plugins/datatables/buttons.bootstrap4.min.js"></script>
        <script src="plugins/datatables/jszip.min.js"></script>
        <script src="plugins/datatables/pdfmake.min.js"></script>
        <script src="plugins/datatables/vfs_fonts.js"></script>
        <script src="plugins/datatables/buttons.html5.min.js"></script>
        <script src="plugins/datatables/buttons.print.min.js"></script>
        <script src="plugins/datatables/buttons.colVis.min.js"></script>
        <!-- Responsive examples -->
        <script src="plugins/datatables/dataTables.responsive.min.js"></script>
        <script src="plugins/datatables/responsive.bootstrap4.min.js"></script>
        <!-- Datatable init js -->
        <script src="assets/pages/datatables.init.js"></script>
        <!-- App js -->
        <script src="assets/js/app.js"></script>
        <script>

          $("#btnadd").click(function(){
            $('#modalAll .modal-content').html('<center><i class="fa fa-spin fa-spinner fa-2x"></i></center>');
            $('#modalAll').modal('show');
            $.ajax({
              type: "POST",
              url: "categorie/add",
              data: {},
              dataType: "text",
              success: function(data){
                //alert(data);
                $('#modalAll .modal-content').html(data);
              }
            });
          });

          $(document).on('click', '.edit', function(){
            $('#modalAll .modal-content').html('<center><i class="fa fa-spin fa-spinner fa-2x"></i></center>');
            $('#modalAll').modal('show');
                $.ajax({
              type: "POST",
              url: "categorie/update",
              data: {id:$(this).attr('data-id')},
              dataType: "text",
              success: function(data){
                //alert(data);
                $('#modalAll .modal-content').html(data);
              }
            });

          });
            $(".delete").click(function() {
                $('#modaldelete').modal('show');
                var id = $(this).attr('data-id');
                $('#modaldelete #delete').attr('data-id',id);
            });
            
            $(document).on('click','#delete',function(){
            var id = $(this).attr('data-id');
            $.ajax({
                    type: "POST",
                    url: "formation/delete",
                    data: {'id':id},
                    dataType: "text",
                    success: function(data){
                        location.reload();
                    }
                    });
            });
        </script>
    </body>
</html>
