@extends('layouts.school')

@section('title', 'Role Permissions')
@section('header', 'Role Permissions')

@section('content')
    @if(session('success'))
        <div class="mb-6 rounded-lg bg-green-50 border border-green-200 px-4 py-3 text-sm text-green-800">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="mb-6 rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-800">{{ session('error') }}</div>
    @endif

    <div class="grid gap-6 xl:grid-cols-3">

        <div class="xl:col-span-2 space-y-6">
            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
                <div class="border-b border-gray-200 px-6 py-4">
                    <h2 class="text-sm font-semibold uppercase tracking-wide text-gray-500">Staff Roles</h2>
                    <p class="mt-1 text-xs text-gray-500">Change a staff member's role. The role determines which areas of the platform they can access.</p>
                </div>
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Name</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Email</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Current Role</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Change Role</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($users as $u)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 text-primary-700 text-xs font-bold">{{ $u->initials }}</div>
                                        <span class="text-sm font-medium text-gray-900">{{ $u->name }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-600">{{ $u->email }}</td>
                                <td class="px-6 py-4">
                                    <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium bg-blue-50 text-blue-700">{{ $u->role?->label() ?? $u->role }}</span>
                                </td>
                                <td class="px-6 py-4">
                                    <form method="POST" action="{{ route('school.settings.update-permissions', [request()->route('schoolId'), $u->id]) }}" class="flex items-center gap-2">
                                        @csrf
                                        @method('PATCH')
                                        <select name="role" class="rounded-lg border border-gray-300 px-2 py-1.5 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                                            <option value="teacher" {{ ($u->role?->value ?? '') === 'teacher' ? 'selected' : '' }}>Teacher</option>
                                            <option value="accountant" {{ ($u->role?->value ?? '') === 'accountant' ? 'selected' : '' }}>Accountant</option>
                                            <option value="staff" {{ ($u->role?->value ?? '') === 'staff' ? 'selected' : '' }}>Staff</option>
                                        </select>
                                        <button type="submit" class="rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-700">Save</button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="px-6 py-12 text-center text-sm text-gray-500">No staff users found.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @foreach($permissions as $group => $items)
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
                    <div class="border-b border-gray-200 px-6 py-4">
                        <h3 class="text-sm font-bold text-gray-900">{{ ucfirst($group) }}</h3>
                    </div>
                    <ul class="divide-y divide-gray-100">
                        @foreach($items as $permission)
                            <li class="flex items-center justify-between px-6 py-3">
                                <div>
                                    <p class="text-sm font-medium text-gray-800">{{ $permission->name }}</p>
                                    @if($permission->description)
                                        <p class="text-xs text-gray-500">{{ $permission->description }}</p>
                                    @endif
                                </div>
                                <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium bg-green-50 text-green-700">Allowed</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>

        <div class="space-y-6">
            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
                <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500">Role Access Summary</h3>
                <dl class="mt-4 space-y-4">
                    <div>
                        <dt class="text-sm font-semibold text-gray-900">Teacher</dt>
                        <dd class="text-xs text-gray-600 mt-1">Access to the staff workspace, personal profile and notices inbox.</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-semibold text-gray-900">Accountant</dt>
                        <dd class="text-xs text-gray-600 mt-1">Access to the staff workspace with a focus on finance-related duties.</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-semibold text-gray-900">Staff</dt>
                        <dd class="text-xs text-gray-600 mt-1">General non-administrative access to the staff workspace.</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-semibold text-purple-700">School Administrator</dt>
                        <dd class="text-xs text-gray-600 mt-1">Full access to every module in this school. Administrators are managed under Settings &rarr; User Management.</dd>
                    </div>
                </dl>
            </div>

            <div class="rounded-xl bg-blue-50 border border-blue-100 p-6">
                <h3 class="text-sm font-semibold text-blue-800">Note</h3>
                <p class="mt-1 text-xs text-blue-700">School administrators automatically have every permission. Use this page to review what each role can do or to reassign a staff member's role.</p>
            </div>
        </div>

    </div>
@endsection