@extends('layouts.app')

@section('content')

    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold tracking-tight">Roles</h1>
            <p class="text-sm text-base-content/50 mt-0.5">Manage roles and their permissions</p>
        </div>
        <div class="flex flex-wrap items-center gap-2 self-start">
            <a href="{{ route('users.index') }}" class="btn btn-soft btn-primary gap-2">
                <span class="icon-[tabler--users] size-4"></span>
                Users
            </a>
            <a href="{{ route('permissions.index') }}" class="btn btn-soft btn-warning gap-2">
                <span class="icon-[tabler--key] size-4"></span>
                Permissions
            </a>
            <a href="{{ route('roles.create') }}" class="btn btn-secondary gap-2">
                <span class="icon-[tabler--plus] size-4"></span>
                Add Role
            </a>
        </div>
    </div>

    <div class="card bg-base-100 border border-base-200 shadow-sm">
        <div class="card-body p-0">
            <div class="overflow-x-auto">
                <table class="table table-zebra w-full">
                    <thead>
                        <tr class="bg-base-200 text-base-content/70 text-sm">
                            <th><span class="icon-[tabler--shield] size-4 inline me-1"></span>Role</th>
                            <th><span class="icon-[tabler--key] size-4 inline me-1"></span>Permissions</th>
                            <th><span class="icon-[tabler--users] size-4 inline me-1"></span>Users</th>
                            <th><span class="icon-[tabler--calendar] size-4 inline me-1"></span>Created</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($roles as $role)
                            <tr class="hover:bg-base-200/50 transition-colors">

                                {{-- Role Name --}}
                                <td>
                                    <div class="flex items-center gap-2">
                                        <div class="bg-secondary/10 text-secondary rounded-lg p-2">
                                            <span class="icon-[tabler--shield-check] size-4"></span>
                                        </div>
                                        <span class="font-semibold text-sm capitalize">{{ $role->name }}</span>
                                    </div>
                                </td>

                                {{-- Permissions --}}
                                <td>
                                    @if ($role->permissions->isEmpty())
                                        <span class="text-base-content/30 text-sm">No permissions</span>
                                    @else
                                        <div class="flex flex-wrap gap-1">
                                            @foreach ($role->permissions->take(3) as $permission)
                                                <span class="badge badge-primary badge-soft badge-xs">
                                                    {{ $permission->name }}
                                                </span>
                                            @endforeach
                                            @if ($role->permissions->count() > 3)
                                                <span class="badge badge-ghost badge-xs">
                                                    +{{ $role->permissions->count() - 3 }} more
                                                </span>
                                            @endif
                                        </div>
                                    @endif
                                </td>

                                {{-- Users Count --}}
                                <td>
                                    <span class="badge badge-secondary badge-soft">
                                        {{ $role->users()->count() }}
                                    </span>
                                </td>

                                {{-- Created --}}
                                <td class="text-sm text-base-content/50">
                                    {{ $role->created_at->format('d M Y') }}
                                </td>

                                {{-- Actions --}}
                                <td>
                                    <div class="flex items-center justify-end gap-1">
                                        <a href="{{ route('roles.edit', $role) }}"
                                            class="btn btn-soft btn-primary btn-xs btn-square" title="Edit">
                                            <span class="icon-[tabler--edit] size-4"></span>
                                        </a>
                                        <form method="POST" action="{{ route('roles.destroy', $role) }}"
                                            onsubmit="return confirm('Delete this role?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-soft btn-error btn-xs btn-square"
                                                title="Delete">
                                                <span class="icon-[tabler--trash] size-4"></span>
                                            </button>
                                        </form>
                                    </div>
                                </td>

                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-16 text-base-content/40">
                                    <span class="icon-[tabler--shield-off] size-12 mx-auto block mb-3 opacity-30"></span>
                                    <p class="font-semibold text-base">No roles found</p>
                                    <a href="{{ route('roles.create') }}" class="btn btn-primary btn-sm mt-4 gap-2">
                                        <span class="icon-[tabler--plus] size-4"></span>
                                        Add Role
                                    </a>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($roles->hasPages())
                <div class="px-5 py-4 border-t border-base-200">
                    {{ $roles->links() }}
                </div>
            @endif

        </div>
    </div>

@endsection