@extends('dashboard.layouts.app')

@section('title', __('dashboard.Roles'))

@section('page_heading', __('dashboard.Roles'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item">
        <span class="bullet bg-gray-500 w-5px h-2px"></span>
    </li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.roles.index') }}" class="text-muted text-hover-primary">{{ __('dashboard.Roles') }}</a>
    </li>
@endsection

@section('content')
<div class="row g-7">
    <div class="col-xl-12">
        <div class="card card-flush h-lg-100">
            <div class="card-header pt-7">
                <div class="card-title">
                    <h2>{{ __('dashboard.Roles') }}</h2>
                </div>
                <div class="card-toolbar">
                    <a href="{{ route('dashboard.roles.create') }}" class="btn btn-primary">{{ __('dashboard.Add Role') }}</a>
                </div>
            </div>
            <div class="card-body pt-5">
                <!-- Table -->
                <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0">
                    <thead>
                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                            <th class="min-w-125px">{{ __('dashboard.Name') }}</th>
                            <th class="min-w-125px">{{ __('dashboard.Guard Name') }}</th>
                            <th class="min-w-125px">{{ __('dashboard.Created At') }}</th>
                            <th class="text-end min-w-100px">{{ __('dashboard.Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="fw-semibold text-gray-600">
                        @foreach($roles as $role)
                            <tr>
                                <td>{{ $role->name }}</td>
                                <td>{{ $role->guard_name }}</td>
                                <td>{{ $role->created_at->format('d M Y, h:i A') }}</td>
                                <td class="text-end">
                                    <a href="{{ route('dashboard.roles.edit', $role->id) }}" class="btn btn-icon btn-active-light-primary w-30px h-30px me-3">
                                        <i class="ki-outline ki-setting-3 fs-3"></i>
                                    </a>
                                    <form action="{{ route('dashboard.roles.destroy', $role->id) }}" method="POST" style="display: inline-block;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-icon btn-active-light-primary w-30px h-30px">
                                            <i class="ki-outline ki-trash fs-3"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                        @if($roles->isEmpty())
                            <tr>
                                <td colspan="4" class="text-center">{{ __('dashboard.No roles found.') }}</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
                <!-- End Table -->

                <!-- Pagination -->
                <div class="d-flex justify-content-start mt-5">
                    {{ $roles->links() }}
                </div>
                <!-- End Pagination -->
            </div>
        </div>
    </div>
</div>
@endsection