@extends('layouts.app')

@section('content')

    {{-- ── Page Header ── --}}
    <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">Permissions</h1>
            <p class="text-sm text-base-content/50 mt-0.5">Manage system 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('roles.index') }}" class="btn btn-soft btn-secondary gap-2">
                <span class="icon-[tabler--shield] size-4"></span>
                Roles
            </a>
            <a href="{{ route('permissions.create') }}" class="btn btn-warning gap-2">
                <span class="icon-[tabler--plus] size-4"></span>
                Add Permission
            </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--key] size-4 inline me-1"></span>Permission</th>
                            <th><span class="icon-[tabler--tag] size-4 inline me-1"></span>Group</th>
                            <th><span class="icon-[tabler--shield] size-4 inline me-1"></span>Roles</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 ($permissions as $permission)
                            <tr class="hover:bg-base-200/50 transition-colors">

                                {{-- Permission Name --}}
                                <td>
                                    <span class="font-mono text-sm font-semibold">{{ $permission->name }}</span>
                                </td>

                                {{-- Group --}}
                                <td>
                                    <span class="badge badge-ghost badge-soft capitalize">
                                        {{ explode('.', $permission->name)[0] }}
                                    </span>
                                </td>

                                {{-- Roles --}}
                                <td>
                                    @php $roles = $permission->roles; @endphp
                                    @if ($roles->isEmpty())
                                        <span class="text-base-content/30 text-sm">—</span>
                                    @else
                                        <div class="flex flex-wrap gap-1">
                                            @foreach ($roles as $role)
                                                <span class="badge badge-secondary badge-soft badge-xs capitalize">
                                                    {{ $role->name }}
                                                </span>
                                            @endforeach
                                        </div>
                                    @endif
                                </td>

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

                                {{-- Actions --}}
                                <td>
                                    <div class="flex items-center justify-end gap-1">
                                        <a href="{{ route('permissions.edit', $permission) }}"
                                            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('permissions.destroy', $permission) }}"
                                            onsubmit="return confirm('Delete this permission?')">
                                            @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--key-off] size-12 mx-auto block mb-3 opacity-30"></span>
                                    <p class="font-semibold text-base">No permissions found</p>
                                    <a href="{{ route('permissions.create') }}" class="btn btn-primary btn-sm mt-4 gap-2">
                                        <span class="icon-[tabler--plus] size-4"></span>
                                        Add Permission
                                    </a>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

        </div>
    </div>

@endsection