@extends('layouts.school')
@section('title', 'Permissions: ' . $teacher->full_name)
@section('header', 'Teacher Permissions — ' . $teacher->full_name)
@section('content')
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <a href="{{ route('school.teachers.account', [request()->route('schoolId'), $teacher->id]) }}" class="text-sm text-primary-600 hover:text-primary-700">&larr; Back to portal account</a>
        <p class="text-xs text-gray-500">Unchecked capabilities are blocked server-side, not just hidden. Items marked <span class="font-semibold">override</span> deviate from the default.</p>
    </div>

    <form method="POST" action="{{ route('school.teachers.save-permissions', [request()->route('schoolId'), $teacher->id]) }}">
        @csrf
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            @foreach ($groups as $group => $items)
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
                    <h3 class="text-lg font-display font-semibold text-gray-900 mb-4">{{ $group }}</h3>
                    <div class="space-y-3">
                        @foreach ($items as $item)
                            <label class="flex items-center justify-between gap-4 rounded-lg border px-4 py-3 text-sm {{ $item['on'] ? 'border-primary-200 bg-primary-50/50' : 'border-gray-200' }}">
                                <span class="flex items-center gap-3">
                                    <input type="checkbox" name="perm[{{ $item['key'] }}]" value="1" {{ $item['on'] ? 'checked' : '' }}
                                           class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                    <span class="font-medium text-gray-800">{{ $item['label'] }}</span>
                                </span>
                                @if ($item['overridden'])
                                    <span class="rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-amber-700">override</span>
                                @endif
                            </label>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-6 flex flex-wrap gap-3">
            <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Save Permissions</button>
            @if ($teacher->permissions)
                <button type="submit" name="restore" value="1" class="rounded-lg border border-amber-300 bg-amber-50 px-6 py-2.5 text-sm font-semibold text-amber-700 hover:bg-amber-100">Restore Defaults</button>
            @endif
            <a href="{{ route('school.teachers.show', [request()->route('schoolId'), $teacher->id]) }}" class="rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</a>
        </div>
    </form>
@endsection