@extends('root.layout.master')

@section('content')
            <!-- Main Container -->
            <main id="main-container">
                <script type="text/javascript">
                    $(document).ready(function() {
                        $('#example').DataTable( {
                            dom: 'Bfrtip',
                            buttons: [
                                'copy', 'csv', 'excel', 'pdf', 'print'
                            ]
                        } );
                    } );
                </script> 

                <!-- Page Content -->
                <div class="content">
                    <!-- Quick Overview -->
                    <h2 class="content-heading">
                        <i class="fa fa-angle-right text-muted mr-1"></i> Liste des Categories articles
                    </h2>
                    <div class="block block-rounded invisible" data-toggle="appear">
                        <div class="block-content block-content-full ">
                            <div class="col-lg-12">
                                <table id="example" class="table-responsive stripe" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>Titre</th>
                                                <th>Modifier</th>
                                                <th>Supprimer</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($categorie as $categories)
                                            <tr>

                                                <td>{{$categories->LibelleCategorie}}</td>
                                                <td onclick="window.location.href = '{{ url('/modificationCat/'.($categories->id))}}' "><i class="btn fa fa-edit"></i></td>
                                                <td id="supprimer{{$categories->id}}"><i class="btn fa fa-trash"></i></td>
                                            </tr> 

                <script type="text/javascript">
                    
                    $('#supprimer{{$categories->id}}').on('click', function(){


                        let idcat = {{$categories->id}};
                        console.log(idcat);






                    swalWithBootstrapButtons.fire({
                      title: 'Etes vous sûr ?',
                      text: "Voulez vous vraiment supprimer cette categorie ?",
                      type: 'warning',
                      showCancelButton: true,
                      confirmButtonText: 'Oui, supprimer',
                      cancelButtonText: 'Non, abandonner',
                      reverseButtons: true
                    }).then((result) => {
                        if (result.value) {


                            showWaitingMask();
                            $.ajax({
                                type: 'POST',
                                url: '{{ url("/supprimer_categorie") }}',
                                data: {
                                    idcat:idcat,
                                    "_token":"{{ csrf_token() }}" 
                                },

                                success:function(result) {
                                    showWaitingMask(false);
                                    if(result === '1'){
                                        swalWithBootstrapButtons.fire({
                                            title: 'Good Job',
                                            text: 'Catégorie supprimée avec succès',
                                            type: 'success',
                                            showConfirmButton: true,
                                            confirmButtonText: 'D\'accord'
                                        });
                                        location.reload();
                                    }
                                    else{
                                        console.log(result);
                                        swalWithBootstrapButtons.fire({
                                            title: 'Ooops',
                                            text: 'Inpossible de supprimer cette catégorie',
                                            type: 'error',
                                            showCancelButton: true,
                                            showConfirmButton:false,
                                            cancelButtonText: 'OK'
                                        });

                                        
                                    }
                                },

                                error:function(result){
                                    showWaitingMask(false);
                                    console.log(result);
                                    swalWithBootstrapButtons.fire({
                                        title: 'Ooops',
                                        text: 'Echec de l\'opération',
                                        type: 'error',
                                        showCancelButton: true,
                                        showConfirmButton:false,
                                        cancelButtonText: 'Hummmm'
                                    });

                                }
                            })    }







                          })

                    })

                
                                        

                </script> 





                                            @endforeach
                                        </tbody>
                                </table>
                            </div>        
                        </div>
                        </div>
                    </div>
                    <!-- END Quick Overview -->

                    


                </div>
                <!-- END Page Content -->
            </main>
            <!-- END Main Container -->

            <!-- Footer -->
@endsection