@php
    $stateClass = [
        'due' => 'bg-amber-50 text-amber-800',
        'overdue' => 'bg-red-50 text-red-800',
        'given' => 'bg-emerald-50 text-emerald-800',
        'held' => 'bg-slate-100 text-slate-700',
        'refused' => 'bg-orange-50 text-orange-800',
        'missed' => 'bg-red-50 text-red-700',
        'prn_due' => 'bg-sky-50 text-sky-800',
        'prn_given' => 'bg-emerald-50 text-emerald-700',
    ];
@endphp

<x-app-layout title="MAR · {{ $visit->patient?->fullName() }}">
    <div class="space-y-6">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <p class="text-sm text-slate-500">
                    @if ($visit->careUnit)
                        <a href="{{ route('care.care-units.mar', $visit->careUnit) }}" class="text-indigo-600 hover:text-indigo-800">{{ $visit->careUnit->name }} MAR</a>
                        <span class="text-slate-300">/</span>
                    @endif
                    Patient chart
                </p>
                <h1 class="mt-1 text-2xl font-semibold text-slate-900">{{ $visit->patient?->fullName() }}</h1>
                <p class="mt-1 text-sm text-slate-500">
                    {{ $visit->careUnit?->name ?? 'Not placed' }}
                    @if ($visit->bed) · Bed {{ $visit->bed->label }} @endif
                </p>
            </div>
            <form method="GET" class="flex items-end gap-2">
                <div>
                    <label class="block text-xs font-medium uppercase text-slate-500">Date</label>
                    <input type="date" name="date" value="{{ $day->toDateString() }}" class="mt-1 rounded-lg border-slate-300 text-sm">
                </div>
                <button type="submit" class="btn-secondary">Go</button>
            </form>
        </div>

        <div class="space-y-4">
            @forelse ($chart as $block)
                @php $order = $block['order']; @endphp
                <div class="rounded-2xl border border-slate-200 bg-white p-5">
                    <div class="flex flex-wrap items-start justify-between gap-3">
                        <div>
                            <h2 class="text-base font-semibold text-slate-900">{{ $order->drug_name }}</h2>
                            <p class="text-sm text-slate-500">
                                {{ $order->dosage ?: 'Dose not set' }}
                                · {{ $order->route ?: 'Route n/a' }}
                                · {{ $frequencies[$order->frequency_code] ?? strtoupper($order->frequency_code) }}
                            </p>
                            @if ($order->instructions)
                                <p class="mt-1 text-sm text-slate-600">{{ $order->instructions }}</p>
                            @endif
                        </div>
                    </div>

                    <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-4">Scheduled</th>
                                    <th class="pb-2 pr-4">State</th>
                                    <th class="pb-2"></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @foreach ($block['slots'] as $slot)
                                    @php
                                        $state = $slot['state'];
                                        $done = in_array($state, ['given', 'held', 'refused', 'missed', 'prn_given'], true);
                                    @endphp
                                    <tr>
                                        <td class="py-3 pr-4">{{ $slot['scheduled_for']?->format('d M Y H:i') ?? 'PRN' }}</td>
                                        <td class="py-3 pr-4">
                                            <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $stateClass[$state] ?? 'bg-slate-100' }}">
                                                {{ $stateLabels[$state] ?? $state }}
                                            </span>
                                            @if ($slot['administration']?->reason)
                                                <div class="mt-1 text-xs text-slate-500">{{ $slot['administration']->reason }}</div>
                                            @endif
                                        </td>
                                        <td class="py-3 text-right">
                                            @if ($canAdminister && ! $done)
                                                <form method="POST" action="{{ route('care.mar.administer', $order) }}" class="inline-flex flex-wrap justify-end gap-1">
                                                    @csrf
                                                    @if ($slot['scheduled_for'])
                                                        <input type="hidden" name="scheduled_for" value="{{ $slot['scheduled_for']->toDateTimeString() }}">
                                                    @endif
                                                    <button name="status" value="given" class="rounded border border-emerald-200 px-2 py-1 text-xs text-emerald-700">Given</button>
                                                    <button name="status" value="held" class="rounded border border-slate-200 px-2 py-1 text-xs" onclick="const r=prompt('Reason'); if(!r) return false; this.form.reason.value=r;">Held</button>
                                                    <button name="status" value="refused" class="rounded border border-orange-200 px-2 py-1 text-xs text-orange-700" onclick="const r=prompt('Reason'); if(!r) return false; this.form.reason.value=r;">Refused</button>
                                                    <input type="hidden" name="reason" value="">
                                                </form>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @empty
                <div class="rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-6 py-8 text-center text-sm text-slate-500">
                    No active medication orders on this visit. Prescribe and activate medications first; dispensed Rxs also sync to MAR.
                </div>
            @endforelse
        </div>
    </div>
</x-app-layout>