@extends('layouts.master')
@extends('sidebar.dashboard')



@section('content')

<section id="ajax-datatable">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header border-bottom">
                    <h4 class="card-title">Manage Roles</h4>
                    <span class="float-right">
                        @if (Auth::user()->can('role.create'))
                        <a class="btn btn-primary text-white" href="{{ route('roles.create') }}">Add New Role</a>
                        @endif
                    </span>
                </div>
                <div class="card-datatable">
                    @include('layouts.messages')


                    <table class="table table-hover table-bordered">
                        <thead>



                            <tr>
                                <th>Sl</th>
                                <th>Name</th>
                                <th>Actions</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($roles as $role)



                            <tr>

                                <td>{{ $loop->index+1 }}</td>
                                <td>{{ $role->name }}</td>



                                <td>
                                    <a class="" href="{{ route('roles.edit', $role->id) }}">
                                        <i data-feather="edit-2" class="me-50"></i>
                                        Edit
                                    </a> &nbsp;&nbsp;&nbsp;
                                    <a class="delete" href="{{ route('roles.destroy', $role->id) }}" onclick="event.preventDefault(); document.getElementById('delete-form-{{ $role->id }}').submit();">
                                        <i data-feather="trash" class="me-50"></i>
                                        Delete
                                    </a>

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

                                </td>
                            </tr>

                            @endforeach



                        </tbody>
                    </table>


                    <!-- <table id="dataTable" class="datatables-ajax table table-responsive">
                        <thead class="bg-light text-capitalize">
                            <tr>
                                <th width="5%">Sl</th>
                                <th width="10%">Name</th>

                                <th width="15%">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($roles as $role)
                            <tr>
                                <td>{{ $loop->index+1 }}</td>
                                <td>{{ $role->name }}</td>

                                <td>

                                    <a class="btn btn-success text-white" href="{{ route('roles.edit', $role->id) }}">Edit</a>



                                    <a class="btn btn-danger text-white" href="{{ route('roles.destroy', $role->id) }}" onclick="event.preventDefault(); document.getElementById('delete-form-{{ $role->id }}').submit();">
                                        Delete
                                    </a>

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

                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table> -->
                </div>
            </div>
        </div>
    </div>
</section>




@endsection





@section('page-script')



<script>
    /*================================
        datatable active
        ==================================*/
    if ($('#dataTable').length) {
        $('#dataTable').DataTable({
            responsive: true
        });
    }
</script>



@endsection