@extends('layouts.app')

@section('title', 'Roles & Permissions')

@section('content')
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Roles & Permissions</h1>
            <p class="text-xs text-muted-foreground">Access control groups across the twenty system modules</p>
        </div>

        <div class="overflow-x-auto rounded-xl border border-border bg-card">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                        <th class="px-4 py-2 font-medium">Role</th>
                        <th class="px-4 py-2 font-medium">Description</th>
                        <th class="px-4 py-2 font-medium">Users</th>
                        <th class="px-4 py-2 font-medium">Permissions</th>
                        <th class="px-4 py-2 text-right font-medium">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($roles as $role)
                        <tr class="border-b last:border-0 hover:bg-accent/40">
                            <td class="px-4 py-2.5">
                                <span class="rounded-full border border-border px-2.5 py-0.5 text-[10px] font-medium">{{ $role->name }}</span>
                                @if ($role->system)<span class="ml-1 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] text-primary">System</span>@endif
                            </td>
                            <td class="max-w-md px-4 py-2.5 text-muted-foreground">{{ $role->description }}</td>
                            <td class="px-4 py-2.5 tabular-nums">{{ $role->users_count }}</td>
                            <td class="px-4 py-2.5 text-xs text-muted-foreground">{{ count($role->permissions ?? []) }} grants</td>
                            <td class="px-4 py-2.5">
                                <div class="flex justify-end gap-2">
                                    <details class="relative">
                                        <summary class="cursor-pointer list-none rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Edit</summary>
                                        <form method="post" action="{{ route('settings.roles.update', $role) }}" class="absolute right-0 z-10 mt-1 w-80 rounded-xl border border-border bg-card p-3 shadow-lg" onsubmit="return confirm('Save permission changes for {{ $role->name }}?')">
                                            @csrf
                                            @method('PUT')
                                            <div class="flex flex-col gap-3">
                                                <div class="flex flex-col gap-1.5">
                                                    <label class="text-xs text-muted-foreground">Role name</label>
                                                    <input name="name" value="{{ $role->name }}" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                                </div>
                                                <div class="flex flex-col gap-1.5">
                                                    <label class="text-xs text-muted-foreground">Description</label>
                                                    <textarea name="description" rows="2" class="rounded-lg border border-input bg-transparent px-3 py-2 text-sm outline-none focus-visible:border-ring">{{ $role->description }}</textarea>
                                                </div>
                                                <fieldset class="flex flex-col gap-2">
                                                    <legend class="text-[11px] uppercase tracking-wide text-muted-foreground">Module grants</legend>
                                                    <div class="flex max-h-36 flex-wrap gap-2 overflow-y-auto">
                                                        @foreach ($modules as $m)
                                                            <label class="flex items-center gap-1.5 rounded-lg border border-border px-2 py-1 text-[11px]">
                                                                <input type="checkbox" name="permissions[]" value="{{ $m }}" class="size-3.5" @checked(is_array($role->permissions) && array_key_exists($m, $role->permissions))>{{ $m }}
                                                            </label>
                                                        @endforeach
                                                    </div>
                                                </fieldset>
                                                <button class="rounded-lg bg-primary px-3 py-2 text-xs font-medium text-primary-foreground hover:bg-primary/90">Save changes</button>
                                            </div>
                                        </form>
                                    </details>
                                    @if (! $role->system)
                                        <details class="relative">
                                            <summary class="cursor-pointer list-none rounded-md border border-destructive/40 px-2 py-1 text-xs text-destructive hover:bg-destructive/5">Delete</summary>
                                            <form method="post" action="{{ route('settings.roles.destroy', $role) }}" class="absolute right-0 z-10 mt-1 rounded-xl border border-border bg-card p-2 shadow-lg" onsubmit="return confirm('Permanently delete role {{ $role->name }}?')">
                                                @csrf
                                                @method('DELETE')
                                                <button class="w-full rounded-md bg-destructive px-3 py-1.5 text-xs font-medium text-white">Delete role</button>
                                            </form>
                                        </details>
                                    @else
                                        <span class="text-xs text-muted-foreground">—</span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <form method="post" action="{{ route('settings.roles.store') }}" class="flex flex-col gap-3 p-4">
                @csrf
                <h2 class="text-sm font-semibold">Create Role</h2>
                <div class="grid gap-3 sm:grid-cols-2">
                    <x-field label="Role name" required>
                        <x-input name="name" placeholder="e.g. School Nurse" required />
                    </x-field>
                    <x-field label="Description" required>
                        <x-input name="description" placeholder="Short summary of access" required />
                    </x-field>
                </div>
                <fieldset class="flex flex-col gap-2">
                    <legend class="text-xs text-muted-foreground">Module grants</legend>
                    <div class="flex flex-wrap gap-2">
                        @foreach ($modules as $m)
                            <label class="flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1 text-xs">
                                <input type="checkbox" name="permissions[]" value="{{ $m }}" class="size-3.5"> {{ $m }}
                            </label>
                        @endforeach
                    </div>
                </fieldset>
                <div>
                    <button class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Create Role</button>
                </div>
            </form>
        </div>
    </div>
@endsection