@extends("layouts.master")

@section("content")
    <main class="main-wrapper" id="app">
        <div class="our_breadcrumbs">
            <div class="container">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('home')}}"><i class="fa fa-home"></i> Accueil</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{$titre}}</li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="container">
            <div class="layout-box">
                <div class="text-right"><a href="{{route('roles.create')}}" class="btn btn-default">Ajouter <i class="fa fa-plus"></i></a></div>
                <div class="table-responsive">
                    <table id="maintable" class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Libelle</th>
                            <th scope="col" style="width:17%">Action</th>
                        </tr>
                        </thead>
                        <tbody id="sortable">
                        @foreach($roles as $role)
                            <tr id="{{$role->id}}">
                                <th scope="row">{{$role->id}}</th>
                                <td>{{$role->name}}</td>
                                <td>
                                    <a href="{{ route('roles.edit', ['role' => $role->id,]) }}" class="btn btn-edit"><i class="fa fa-pencil"></i></a>
                                    <button class="btn btn-del"  @click="destroy({{$role->id}})"><i class="fa fa-trash-o"></i></button>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <input type="hidden" id="_token" value="{{csrf_token()}}">
    </main>
@endsection

@section('script')

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                //id: 0,
            },
            methods:{
                destroy: function (id) {
                    swal({
                        title: "Confirmation de la suppression.",
                        text: "Voullez vous vraiment supprimer cet enregistrement ?",
                        icon: "warning",
                        buttons: {
                            cancel: {
                                text: "Non",
                                value: null,
                                visible: true,
                                className: "btn-success",
                                closeModal: true,
                            },
                            confirm: {
                                text: "Oui",
                                value: true,
                                visible: true,
                                className: "btn-danger",
                                closeModal: true
                            }
                        }
                    }).then(isConfirm => {
                        if (isConfirm) {
                            axios.delete('/roles/' + id)
                                .then(response => {
                                    data = response.data;
                                    if (data.remove) {
                                        $('#' + data.id).remove();
                                    }
                                })
                                .catch(error => {
                                    console.log('error: ' + error);
                                })
                        }
                    })
                }
            }

        });
    </script>
@endsection