@php
    $wardBeds = $ward->rooms->flatMap(fn ($room) => $room->beds);
    $bedsTotal = $wardBeds->count();
    $bedsOccupied = $wardBeds->where('status', 'occupied')->count();

    $chipTint = [
        'available' => 'bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200',
        'occupied' => 'bg-slate-100 text-slate-800 ring-1 ring-inset ring-slate-200',
        'reserved' => 'bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-200',
        'cleaning' => 'bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-200',
        'maintenance' => 'bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-200',
        'blocked' => 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-200',
    ];
@endphp

<x-app-layout :title="$ward->name">
    <x-page-header
        :title="$ward->name"
        subtitle="Update the ward, lay out its rooms, and set the tariffs that drive the daily bed charge."
        icon="building"
        :back="route('admin.wards.index')"
        backLabel="All wards">
        <x-slot:meta>
            <x-status-badge field="ward_type" :value="$ward->ward_type" />
            @if ($ward->gender_restriction !== 'none')
                <x-status-badge field="gender_restriction" :value="$ward->gender_restriction" />
            @endif
            @if ($ward->is_critical_care)
                <span class="inline-flex items-center gap-1 rounded-md bg-red-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-red-700">
                    <x-icon name="heart-pulse" size="xs" /> Critical care
                </span>
            @endif
            <x-status-badge :color="$ward->is_active ? 'green' : 'slate'"
                            :label="$ward->is_active ? 'Active' : 'Inactive'" dot />
            <span class="text-xs text-slate-500">{{ $bedsOccupied }} of {{ $bedsTotal }} beds taken</span>
        </x-slot:meta>

        <x-slot:actions>
            @can('beds.view')
                <a href="{{ route('beds.index', ['ward' => $ward->id]) }}" class="hms-btn-secondary">
                    <x-icon name="squares" size="sm" />
                    On the bed board
                </a>
            @endcan
        </x-slot:actions>
    </x-page-header>

    <form method="POST" action="{{ route('admin.wards.update', $ward) }}">
        @csrf
        @method('PUT')
        @include('admin.wards._form')
    </form>

    <x-card flush class="mt-6" title="Rooms & beds" icon="grid"
            header="Creating a room births one bed per place, numbered off the ward code and fitted out like the ward. Beds themselves live on the bed board."
            x-data="{ adding: false }">
        <x-slot:actions>
            <button type="button" class="hms-btn-primary hms-btn-sm" x-on:click="adding = ! adding">
                <x-icon name="plus" size="xs" />
                <span x-text="adding ? 'Close' : 'Add room'"></span>
            </button>
        </x-slot:actions>

        <form method="POST" action="{{ route('admin.wards.rooms.store', $ward) }}"
              x-show="adding" x-cloak
              class="space-y-5 border-b border-slate-200 bg-slate-50/70 px-5 py-5">
            @csrf

            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <x-form.input name="room_number" label="Room number" required
                              placeholder="e.g. 101 or B-2"
                              hint="Letters, numbers and dashes." />

                <x-form.select name="room_type" label="Room type" required
                               :options="$roomTypes" value="general" />

                <x-form.input name="capacity" label="Bed places" type="number"
                              min="1" max="20" required value="1"
                              hint="One bed is born per place, right away." />

                <x-form.input name="charge_per_day" label="Daily charge" type="number"
                              step="0.01" min="0" prefix="KShs"
                              hint="Leave blank to charge the ward rate." />
            </div>

            <div class="flex flex-wrap items-center gap-x-8 gap-y-3">
                <input type="hidden" name="has_attached_bathroom" value="0">
                <x-form.checkbox name="has_attached_bathroom" label="Ensuite bathroom" :checked="false" />

                <input type="hidden" name="is_isolation" value="0">
                <x-form.checkbox name="is_isolation" label="Isolation room" :checked="false" />

                <input type="hidden" name="is_active" value="0">
                <x-form.checkbox name="is_active" label="Active" :checked="true" />
            </div>

            <div class="flex justify-end">
                <button type="submit" class="hms-btn-primary">
                    <x-icon name="plus" size="sm" />
                    Create room
                </button>
            </div>
        </form>

        @forelse ($ward->rooms as $room)
            <div class="border-b border-slate-200 px-5 py-4 last:border-b-0 {{ $room->is_active ? '' : 'opacity-70' }}"
                 x-data="{ open: false }">
                <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5">
                    <h3 class="text-sm font-semibold text-slate-800">Room {{ $room->room_number }}</h3>
                    <x-status-badge field="room_type" :value="$room->room_type" size="sm" />

                    @if ($room->is_isolation)
                        <span class="inline-flex items-center gap-1 rounded-md bg-amber-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-700">
                            <x-icon name="warning" size="xs" /> Isolation
                        </span>
                    @endif

                    @if ($room->has_attached_bathroom)
                        <span class="text-[11px] text-slate-500">Ensuite</span>
                    @endif

                    @unless ($room->is_active)
                        <x-status-badge color="slate" label="Inactive" size="sm" />
                    @endunless

                    <span class="text-xs text-slate-400">
                        {{ $room->beds->where('status', 'occupied')->count() }} of {{ $room->beds->count() }} beds taken
                        · {{ $room->charge_per_day !== null ? money($room->charge_per_day) : money($ward->charge_per_day).' (ward rate)' }}/day
                    </span>

                    <button type="button" class="hms-btn-ghost hms-btn-sm ml-auto"
                            x-on:click="open = ! open">
                        <x-icon name="edit" size="xs" />
                        <span x-text="open ? 'Close' : 'Edit room'"></span>
                    </button>
                </div>

                @if ($room->beds->isNotEmpty())
                    <div class="mt-3 flex flex-wrap gap-1.5">
                        @foreach ($room->beds as $bed)
                            <span class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 font-mono text-[11px] {{ $chipTint[$bed->status] ?? $chipTint['occupied'] }} {{ $bed->is_active ? '' : 'opacity-50' }}"
                                  title="Bed {{ $bed->bed_number }} — {{ $bed->status_label }}">
                                {{ $bed->bed_number }}
                                @if ($bed->currentAdmission?->patient)
                                    <span class="font-sans">· {{ $bed->currentAdmission->patient->full_name }}</span>
                                @endif
                            </span>
                        @endforeach
                    </div>
                @else
                    <p class="mt-2 text-sm text-slate-400">No beds placed in this room yet.</p>
                @endif

                <form method="POST" action="{{ route('admin.wards.rooms.update', [$ward, $room]) }}"
                      x-show="open" x-cloak
                      class="mt-4 space-y-4 rounded-lg border border-slate-200 bg-slate-50/70 p-4">
                    @csrf
                    @method('PUT')

                    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                        <x-form.input name="room_number" label="Room number" required
                                      :value="$room->room_number" />

                        <x-form.select name="room_type" label="Room type" required
                                       :options="$roomTypes" :value="$room->room_type" />

                        <x-form.input name="capacity" label="Bed places" type="number"
                                      min="1" max="20" required :value="$room->capacity"
                                      hint="Capacity cannot drop below the beds already placed — extra places birth new beds." />

                        <x-form.input name="charge_per_day" label="Daily charge" type="number"
                                      step="0.01" min="0" prefix="KShs" :value="$room->charge_per_day"
                                      hint="Clear it to fall back to the ward rate." />
                    </div>

                    <div class="flex flex-wrap items-center gap-x-8 gap-y-3">
                        <input type="hidden" name="has_attached_bathroom" value="0">
                        <x-form.checkbox name="has_attached_bathroom" label="Ensuite bathroom"
                                         :checked="$room->has_attached_bathroom" />

                        <input type="hidden" name="is_isolation" value="0">
                        <x-form.checkbox name="is_isolation" label="Isolation room"
                                         :checked="$room->is_isolation" />

                        <input type="hidden" name="is_active" value="0">
                        <x-form.checkbox name="is_active" label="Active" :checked="$room->is_active" />
                    </div>

                    <div class="flex justify-end gap-3">
                        <button type="button" class="hms-btn-secondary" x-on:click="open = false">Cancel</button>
                        <button type="submit" class="hms-btn-primary hms-btn-sm">
                            <x-icon name="check" size="xs" />
                            Save room
                        </button>
                    </div>
                </form>
            </div>
        @empty
            <x-empty-state icon="grid" title="No rooms yet"
                           message="Add the first room — its beds are born automatically, numbered off the ward code." />
        @endforelse
    </x-card>
</x-app-layout>