@extends('layouts.app')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header">

            <!-- Navigation Buttons -->
            <!-- Navigation Buttons -->
            <div class="row align-items-center">
                <div class="col-12 mt-3">

                    @can('view role')
                        <a href="{{ url('roles') }}" class="btn btn-primary mx-1">Roles</a>
                    @endcan

                    @can('view permission')
                        <a href="{{ url('permissions') }}" class="btn btn-info mx-1">Permissions</a>
                    @endcan

                    @can('view user')
                        <a href="{{ url('users') }}" class="btn btn-warning mx-1">Users</a>
                    @endcan

                </div>
            </div>

            <hr>
        </div>

        <div class="container mt-2">
            <div class="row">
                <div class="col-md-12">

                    <!-- Success Message -->
                    @if (session('status'))
                        <div class="alert alert-success">{{ session('status') }}</div>
                    @endif

                    <!-- Permissions Card -->
                    <div class="card mt-3">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h4 class="mb-0">Permissions</h4>
                            @can('create permission')
                                <a href="{{ url('permissions/create') }}" class="btn btn-primary">Add Permission</a>
                            @endcan
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="bookings-table" class="table table-bordered table-striped align-middle text-center">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Id</th>
                                            <th>Name</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($permissions as $permission)
                                        <tr>
                                            <td>{{ $permission->id }}</td>
                                            <td>{{ $permission->name }}</td>
                                            <td>
                                                @can('update permission')
                                                    <a href="{{ url('permissions/'.$permission->id.'/edit') }}" class="btn btn-success btn-sm">Edit</a>
                                                @endcan

                                                @can('delete permission')
                                                    <a href="{{ url('permissions/'.$permission->id.'/delete') }}" class="btn btn-danger btn-sm ">Delete</a>
                                                @endcan
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div> <!-- .table-responsive -->
                        </div>
                    </div> <!-- .card -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
$(document).ready(function () {
    $('#bookings-table').DataTable({
        responsive: true,
        scrollX: true,
        // pageLength: 10,
        // lengthMenu: [5, 10, 25, 50, 100],
        // order: [[0, 'asc']],
        // columnDefs: [
        //     { orderable: false, targets: -1 } // disable sorting for last column
        // ]
    });
});
</script>
@endpush