@extends('layouts.mega.master')
@section('content')
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800">
            {{ __('Roles Management') }}
            @can('role-create')
                <a class="float-right mb-2 btn btn-success btn-sm" href="{{ route('roles.create') }}"><i
                        class="fa fa-plus"></i> Create New Role</a>
            @endcan
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <div class="row">
                        <div class="col-lg-12 margin-tb">

                            <div class="pull-right">
                                @can('role-create')
                                    <a class="mb-2 btn btn-success btn-sm" href="{{ route('roles.create') }}"><i
                                            class="fa fa-plus"></i> Create New Role</a>
                                @endcan
                            </div>
                        </div>
                    </div>

                    @session('success')
                        <div class="alert alert-success" role="alert">
                            {{ $value }}
                        </div>
                    @endsession

                    <table class="table table-bordered">
                        <tr>
                            <th width="100px">No</th>
                            <th>Name</th>
                            <th width="280px">Action</th>
                        </tr>
                        @foreach ($roles as $key => $role)
                            <tr>
                                <td>{{ ++$i }}</td>
                                <td>{{ $role->name }}</td>
                                <td>
                                    <a class="btn btn-info btn-sm" href="{{ route('roles.show', $role->id) }}"><i
                                            class="fa-solid fa-list"></i> Show</a>
                                    @can('role-edit')
                                        <a class="btn btn-primary btn-sm" href="{{ route('roles.edit', $role->id) }}"><i
                                                class="fa-solid fa-pen-to-square"></i> Edit</a>
                                    @endcan

                                    @can('role-delete')
                                        <form method="POST" action="{{ route('roles.destroy', $role->id) }}"
                                            style="display:inline">
                                            @csrf
                                            @method('DELETE')

                                            <button type="submit" class="btn btn-danger btn-sm"><i
                                                    class="fa-solid fa-trash"></i> Delete</button>
                                        </form>
                                    @endcan
                                </td>
                            </tr>
                        @endforeach
                    </table>

                    {!! $roles->links('pagination::bootstrap-5') !!}

                </div>
            </div>
        </div>
    </div>



    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/2.2.0/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.2.0/js/dataTables.bootstrap5.js"></script>
@endsection