@extends('layouts.app')

@section('title', 'Roles')

@section('page-title', 'Roles')

@section('content')

Manage system roles and control the permissions assigned to each role.

{{-- Page Actions --}}
<div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

    <div>
        <p class="text-sm text-muted">
            Create and manage roles used to control user access throughout the system.
        </p>
    </div>

    @can('roles.create')
        <a
            href="{{ route('roles.create') }}"
            class="btn btn-primary"
        >
            <i class="fa-solid fa-plus"></i>
            Add Role
        </a>
    @endcan

</div>


{{-- Roles Table --}}
<div class="card overflow-hidden">

    {{-- Header --}}
    <div class="border-b border-border px-5 py-4">

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

            <div>
                <h2 class="text-base font-semibold text-text">
                    Role Management
                </h2>

                <p class="mt-1 text-xs text-muted">
                    Manage roles and their assigned permissions.
                </p>
            </div>

            <div class="text-xs text-muted">
                Total:
                <span class="font-semibold text-text">
                    {{ $roles->total() }}
                </span>
                roles
            </div>

        </div>

    </div>


    {{-- Table --}}
    <div class="overflow-x-auto">

        <table class="w-full text-left">

            <thead class="border-b border-border bg-background/50">

                <tr class="text-xs font-semibold uppercase tracking-wide text-muted">

                    <th class="px-5 py-3">
                        #
                    </th>

                    <th class="px-5 py-3">
                        Role
                    </th>

                    <th class="px-5 py-3">
                        Permissions
                    </th>

                    <th class="px-5 py-3">
                        Users
                    </th>

                    <th class="px-5 py-3">
                        Type
                    </th>

                    <th class="px-5 py-3">
                        Created
                    </th>

                    <th class="px-5 py-3 text-right">
                        Actions
                    </th>

                </tr>

            </thead>


            <tbody class="divide-y divide-border">

                @forelse ($roles as $role)

                    <tr class="transition hover:bg-background/40">

                        {{-- Number --}}
                        <td class="whitespace-nowrap px-5 py-4 text-sm text-muted">

                            {{ $roles->firstItem() + $loop->index }}

                        </td>


                        {{-- Role --}}
                        <td class="px-5 py-4">

                            <div class="flex items-center gap-3">

                                <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-sky-50 text-sky-600">

                                    <i class="fa-solid fa-user-shield"></i>

                                </div>

                                <div>

                                    <p class="text-sm font-semibold text-text">
                                        {{ $role->name }}
                                    </p>

                                    <p class="mt-0.5 text-xs text-muted">
                                        {{ $role->guard_name }}
                                    </p>

                                </div>

                            </div>

                        </td>


                        {{-- Permissions --}}
                        <td class="px-5 py-4">

                            <div class="flex items-center gap-2">

                                <span class="inline-flex items-center rounded-full bg-sky-50 px-2.5 py-1 text-xs font-medium text-sky-700">

                                    {{ $role->permissions_count }}

                                    {{ Str::plural('Permission', $role->permissions_count) }}

                                </span>

                            </div>

                        </td>


                        {{-- Users --}}
                        <td class="px-5 py-4">

                            <span class="text-sm font-medium text-text">
                                {{ $role->users_count }}
                            </span>

                            <span class="text-xs text-muted">
                                {{ Str::plural('user', $role->users_count) }}
                            </span>

                        </td>


                        {{-- Type --}}
                        <td class="px-5 py-4">

                            @if ($role->name === 'Super Admin')

                                <span class="inline-flex items-center gap-1.5 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-700">

                                    <i class="fa-solid fa-lock text-[10px]"></i>

                                    System

                                </span>

                            @else

                                <span class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700">

                                    Custom

                                </span>

                            @endif

                        </td>


                        {{-- Created At --}}
                        <td class="whitespace-nowrap px-5 py-4">

                            <p class="text-sm text-text">
                                {{ $role->created_at?->format('d M Y') ?? '—' }}
                            </p>

                            <p class="mt-0.5 text-xs text-muted">
                                {{ $role->created_at?->format('h:i A') }}
                            </p>

                        </td>


                        {{-- Actions --}}
                        <td class="whitespace-nowrap px-5 py-4">

                            <div class="flex items-center justify-end gap-2">

                                @can('roles.view')
                                    <a
                                        href="{{ route('roles.show', $role) }}"
                                        class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border text-muted transition hover:bg-background hover:text-text"
                                        title="View Role"
                                    >
                                        <i class="fa-regular fa-eye text-xs"></i>
                                    </a>
                                @endcan


                                @can('roles.edit')
                                    <a
                                        href="{{ route('roles.edit', $role) }}"
                                        class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border text-muted transition hover:bg-background hover:text-sky-600"
                                        title="Edit Role"
                                    >
                                        <i class="fa-regular fa-pen-to-square text-xs"></i>
                                    </a>
                                @endcan


                                @if ($role->name !== 'Super Admin')

                                    @can('roles.delete')

                                        <form
                                            action="{{ route('roles.destroy', $role) }}"
                                            method="POST"
                                            class="inline"
                                            onsubmit="return confirm('Are you sure you want to delete this role?');"
                                        >

                                            @csrf
                                            @method('DELETE')

                                            <button
                                                type="submit"
                                                class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border text-muted transition hover:border-danger/30 hover:bg-danger/5 hover:text-danger"
                                                title="Delete Role"
                                            >
                                                <i class="fa-regular fa-trash-can text-xs"></i>
                                            </button>

                                        </form>

                                    @endcan

                                @else

                                    <button
                                        type="button"
                                        disabled
                                        class="inline-flex h-8 w-8 cursor-not-allowed items-center justify-center rounded-lg border border-border text-muted/40"
                                        title="System role cannot be deleted"
                                    >
                                        <i class="fa-solid fa-lock text-xs"></i>
                                    </button>

                                @endif

                            </div>

                        </td>

                    </tr>

                @empty

                    <tr>

                        <td
                            colspan="7"
                            class="px-5 py-16 text-center"
                        >

                            <div class="mx-auto flex max-w-sm flex-col items-center">

                                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-background text-muted">

                                    <i class="fa-solid fa-user-shield text-lg"></i>

                                </div>

                                <h3 class="mt-4 text-sm font-semibold text-text">
                                    No roles found
                                </h3>

                                <p class="mt-1 text-xs leading-5 text-muted">
                                    There are currently no roles available in the system.
                                </p>

                                @can('roles.create')

                                    <a
                                        href="{{ route('roles.create') }}"
                                        class="btn btn-primary mt-4"
                                    >
                                        <i class="fa-solid fa-plus"></i>

                                        Create Role
                                    </a>

                                @endcan

                            </div>

                        </td>

                    </tr>

                @endforelse

            </tbody>

        </table>

    </div>


    {{-- Pagination --}}
    @if ($roles->hasPages())

        <div class="border-t border-border px-5 py-4">

            {{ $roles->links() }}

        </div>

    @endif

</div>

@endsection