@extends('layouts.finance')

@section('title', 'Roles')
@section('subtitle', 'Manage user roles and their permissions')

@section('content')
    <section class="card">
        <div class="section-head">
            <h2>Roles</h2>
            <a href="{{ route('access.roles.create') }}" class="btn btn-primary">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:15px;height:15px"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                New Role
            </a>
        </div>

        <table>
            <thead>
                <tr>
                    <th>User Name</th>
                    <th>Email</th>
                    <th>Permissions</th>
                    <th>Role</th>
                    <th class="right">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($roles as $role)
                    <tr class="row-hover">
                        <td>
                            @if($role->users->isEmpty())
                                <span class="muted text-xs">No users</span>
                            @else
                                <div class="space-y-1">
                                    @foreach($role->users as $user)
                                        <div>
                                            <span class="font-semibold">{{ $user->name }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </td>
                        <td>
                            @if($role->users->isEmpty())
                                <span class="muted text-xs">No email</span>
                            @else
                                <div class="space-y-1">
                                    @foreach($role->users as $user)
                                        <div class="muted text-xs">{{ $user->email }}</div>
                                    @endforeach
                                </div>
                            @endif
                        </td>
                        <td>
                            @if($role->name === 'Super Admin')
                                <span class="pill pill-green">All (gate bypass)</span>
                            @else
                                <span class="pill pill-amber">{{ $role->permissions_count }}</span>
                            @endif
                        </td>
                        <td>
                            <span class="font-semibold">{{ $role->name }}</span>
                            @if($role->name === 'Super Admin')
                                <span class="pill pill-blue" style="margin-left:6px">Super Admin</span>
                            @endif
                        </td>
                        <td class="right">
                            <div class="flex justify-end gap-2">
                                <a href="{{ route('access.roles.edit', $role) }}" class="btn btn-sm">Edit</a>
                                @if($role->name !== 'Super Admin')
                                    <form method="POST" action="{{ route('access.roles.destroy', $role) }}"
                                          onsubmit="return confirm('Delete role &quot;{{ addslashes($role->name) }}&quot;? This will remove it from all users.')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center muted" style="padding:24px">No roles found. <a href="{{ route('access.roles.create') }}" style="color:var(--accent)">Create the first role</a>.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </section>
@endsection