@php $r = $report; @endphp

<x-app-layout title="Performance · {{ $unit->name }}">
    <div class="space-y-6">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <p class="text-sm text-slate-500">
                    <a href="{{ route('care.care-units.show', $unit) }}" class="text-indigo-600 hover:text-indigo-800">{{ $unit->name }}</a>
                    <span class="text-slate-300">/</span>
                    Nurse performance
                </p>
                <h1 class="mt-1 text-2xl font-semibold text-slate-900">Unit nursing KPIs</h1>
                <p class="mt-1 text-sm text-slate-500">MAR compliance, vitals, assessments, notes, and handovers.</p>
            </div>
            <form method="GET" class="flex flex-wrap items-end gap-2">
                <div>
                    <label class="block text-xs font-medium uppercase text-slate-500">From</label>
                    <input type="date" name="from" value="{{ $r['from']->toDateString() }}" class="mt-1 rounded-lg border-slate-300 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium uppercase text-slate-500">To</label>
                    <input type="date" name="to" value="{{ $r['to']->toDateString() }}" class="mt-1 rounded-lg border-slate-300 text-sm">
                </div>
                <button type="submit" class="btn-secondary">Apply</button>
            </form>
        </div>

        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div class="rounded-2xl border border-slate-200 bg-white p-5">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">MAR given</p>
                <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $r['mar']['given'] }}</p>
                <p class="mt-1 text-sm text-slate-500">of {{ $r['mar']['total'] }} recorded · compliance {{ $r['mar']['compliance_rate'] ?? '—' }}%</p>
            </div>
            <div class="rounded-2xl border border-slate-200 bg-white p-5">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">On-time MAR</p>
                <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $r['mar']['on_time_rate'] ?? '—' }}%</p>
                <p class="mt-1 text-sm text-slate-500">{{ $r['mar']['on_time_given'] }} given within window</p>
            </div>
            <div class="rounded-2xl border border-slate-200 bg-white p-5">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Assessments done</p>
                <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $r['assessments']['completed'] }}</p>
                <p class="mt-1 text-sm text-slate-500">{{ $r['assessments']['completion_rate'] ?? '—' }}% of {{ $r['assessments']['started'] }} started</p>
            </div>
            <div class="rounded-2xl border border-slate-200 bg-white p-5">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Notes / vitals</p>
                <p class="mt-2 text-3xl font-semibold text-slate-900">{{ $r['notes']['total'] }} / {{ $r['vitals']['total'] }}</p>
                <p class="mt-1 text-sm text-slate-500">{{ $r['handovers']['completed'] }} handovers · {{ $r['placed_patients'] }} placed now</p>
            </div>
        </div>

        <div class="grid gap-6 lg:grid-cols-2">
            <div class="rounded-2xl border border-slate-200 bg-white p-6">
                <h2 class="text-base font-semibold text-slate-900">Nursing packs</h2>
                <ul class="mt-4 divide-y divide-slate-100 text-sm">
                    @forelse ($r['assessments']['by_template'] as $row)
                        <li class="flex items-center justify-between py-2">
                            <span>{{ $row['name'] }}</span>
                            <span class="text-slate-500">{{ $row['completed'] }}/{{ $row['total'] }}</span>
                        </li>
                    @empty
                        <li class="py-2 text-slate-500">No nursing assessments in range.</li>
                    @endforelse
                </ul>
            </div>

            <div class="rounded-2xl border border-slate-200 bg-white p-6">
                <h2 class="text-base font-semibold text-slate-900">By clinician</h2>
                <div class="mt-4 overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead class="text-left text-xs uppercase text-slate-500">
                            <tr>
                                <th class="pb-2 pr-3">Staff</th>
                                <th class="pb-2 pr-3">MAR</th>
                                <th class="pb-2 pr-3">Notes</th>
                                <th class="pb-2 pr-3">Assess</th>
                                <th class="pb-2">Handover</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($r['by_actor'] as $actor)
                                <tr>
                                    <td class="py-2 pr-3 font-medium">{{ $actor['label'] }}</td>
                                    <td class="py-2 pr-3">{{ $actor['mar_given'] }}/{{ $actor['mar_total'] }}</td>
                                    <td class="py-2 pr-3">{{ $actor['notes'] }}</td>
                                    <td class="py-2 pr-3">{{ $actor['assessments_completed'] }}</td>
                                    <td class="py-2">{{ $actor['handovers'] }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="py-3 text-slate-500">No activity attributed yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>