@extends('layouts.school')
@section('title', 'Staff Categories & Designations')
@section('header', 'Staff Management')
@section('content')
    @php $sid = request()->route('schoolId'); @endphp

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
        <div class="card">
            <h3 class="section-label">Categories ({{ $categories->count() }})</h3>
            <form method="POST" action="{{ route('school.staff.settings.store', [$sid, 'category']) }}" class="mt-2 flex gap-2">
                @csrf
                <input type="text" name="name" placeholder="New category..." required class="input grow">
                <button type="submit" class="btn-primary btn-sm">Add</button>
            </form>
            @error('name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            <ul class="mt-4 divide-y divide-gray-100 text-sm">
                @forelse ($categories as $c)
                    <li class="flex items-center justify-between py-2">
                        <span class="font-medium text-gray-800">{{ $c->name }} <span class="ml-1 badge badge-gray !px-1.5 !py-0">{{ $c->staff_members_count }}</span></span>
                        <form method="POST" action="{{ route('school.staff.settings.destroy', [$sid, 'category', $c->id]) }}" onsubmit="return confirm('Delete category {{ $c->name }}?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-xs text-red-500 hover:underline">Delete</button>
                        </form>
                    </li>
                @empty
                    <li class="py-3 empty-state !border-0">No categories.</li>
                @endforelse
            </ul>
        </div>

        <div class="card">
            <h3 class="section-label">Departments ({{ $departments->count() }})</h3>
            <form method="POST" action="{{ route('school.staff.settings.store', [$sid, 'department']) }}" class="mt-2 flex gap-2">
                @csrf
                <input type="text" name="name" placeholder="New department..." required class="input grow">
                <button type="submit" class="btn-primary btn-sm">Add</button>
            </form>
            @error('name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            <ul class="mt-4 divide-y divide-gray-100 text-sm">
                @forelse ($departments as $d)
                    <li class="flex items-center justify-between py-2">
                        <span class="font-medium text-gray-800">{{ $d->name }} <span class="ml-1 badge badge-gray !px-1.5 !py-0">{{ $d->staff_members_count }}</span></span>
                        <form method="POST" action="{{ route('school.staff.settings.destroy', [$sid, 'department', $d->id]) }}" onsubmit="return confirm('Delete department {{ $d->name }}?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-xs text-red-500 hover:underline">Delete</button>
                        </form>
                    </li>
                @empty
                    <li class="py-3 empty-state !border-0">No departments.</li>
                @endforelse
            </ul>
        </div>

        <div class="card">
            <h3 class="section-label">Designations ({{ $designations->count() }})</h3>
            <form method="POST" action="{{ route('school.staff.settings.store', [$sid, 'designation']) }}" class="mt-2 space-y-2">
                @csrf
                <input type="text" name="name" placeholder="New designation..." required class="input w-full">
                <select name="category_id" class="select w-full">
                    <option value="">No category</option>
                    @foreach ($categories as $c)
                        <option value="{{ $c->id }}">{{ $c->name }}</option>
                    @endforeach
                </select>
                <button type="submit" class="btn-primary btn-sm w-full">Add Designation</button>
            </form>
            @error('name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            <ul class="mt-4 max-h-96 divide-y divide-gray-100 overflow-y-auto text-sm">
                @foreach ($designations as $d)
                    <li class="flex items-center justify-between py-2">
                        <span class="font-medium text-gray-800">{{ $d->name }}
                            <span class="block text-xs text-gray-400">{{ $d->category?->name ?? 'Uncategorized' }} · {{ $d->staffMembers->count() }} staff</span>
                        </span>
                        <form method="POST" action="{{ route('school.staff.settings.destroy', [$sid, 'designation', $d->id]) }}" onsubmit="return confirm('Delete designation {{ $d->name }}?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-xs text-red-500 hover:underline">Delete</button>
                        </form>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
@endsection