@extends('layouts.app')

@section('content')

<section class="content-header" style="margin-bottom:20px">
    <h1>
        Role Management
        <small>manage roles</small>
    </h1>
</section>

@if ($message = Session::get('success'))
<div class="alert alert-warning shows-div">
    <p>{{ $message }}</p>
</div>
@endif

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Role data</h3>
        <div class="pull-right">
            <a class="btn btn-success btn-sm pull-right" href="{{ route('roles.create') }}"> Create New Role</a>
        </div>
    </div>
    <div class="box-body">
        <table class="table table-bordered table-hover dataTable">
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Action</th>
            </tr>

            @foreach ($roles as $key => $role)
            <tr class="role_{{ $role->id }}">
                <td>{{ $role->id }}</td>
                <td>{{ $role->name }}</td>
                <td>
                    @can('role-edit')
                    <a class="btn btn-primary btn-sm btn-block space_buttons" href="{{ route('roles.edit',$role->id) }}">Edit</a>
                    @endcan

                    @can('role-delete')
                    <a class="btn btn-danger btn-sm btn-block space_buttons deleteRole" data-id="{{ $role->id }}" href="#">Delete</a>
                    @endcan
                </td>
            </tr>
            @endforeach
        </table>
    </div>

    <hr>
    <div class="text-right margin-r-5">
        <div>Showing {{ $pageInfo['currentPage'] }} to {{ $pageInfo['lastPage'] }} of {{ $pageInfo['total'] }} entries</div>
        <div>{!! $roles->render() !!}</div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('click', '.deleteRole', function (e) {
            e.preventDefault();

            var that = $(this);
            var checkMsg = confirm("Are you sure you want to delete this record!");
            if (!checkMsg) {
                return false;
            }
            $.ajax({
                type: "POST",
                url: '{{ route("roles.destroy", ":id") }}'.replace(':id', $(this).data('id')),
                data: {
                    "_token": "{{ csrf_token() }}",
                    "_method": "DELETE"
                },
                success: function (json) {
                    if (json.status == 'success') {
                        that.closest('.role_' + json.id).delay(1000).html('<td colspan="3" style="text-align:center;">' + json.message + '</td>').fadeOut(1000, function () {
                            $(this).remove();
                        });
                    } else if (json.status == 'failure') {
                        alert(json.message);
                    }
                }
            });
        });
    });
</script>

@endsection