@extends('layouts.epelcon')
@section('title', 'Rooms')

@section('content')
@php $canManage = auth()->user()->hasRole('admin', 'manager'); @endphp
<div x-data="{ addRoom: false, addType: false, editRoom: null, editType: null }">
    <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Rooms & room types</h1>
            <p class="text-sm text-slate-500">Live room status board.</p>
        </div>
        @if ($canManage)
            <div class="flex gap-2">
                <button @click="addType = true" class="rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-slate-700 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50">+ Room type</button>
                <button @click="addRoom = true" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">+ Room</button>
            </div>
        @endif
    </div>

    {{-- Summary chips --}}
    <div class="no-scrollbar mb-5 flex gap-2 overflow-x-auto">
        <span class="shrink-0 rounded-full bg-emerald-100 px-3.5 py-1.5 text-xs font-bold text-emerald-800">{{ $summary['available'] }} available</span>
        <span class="shrink-0 rounded-full bg-rose-100 px-3.5 py-1.5 text-xs font-bold text-rose-800">{{ $summary['occupied'] }} occupied</span>
        <span class="shrink-0 rounded-full bg-sky-100 px-3.5 py-1.5 text-xs font-bold text-sky-800">{{ $summary['reserved'] }} reserved</span>
        <span class="shrink-0 rounded-full bg-slate-200 px-3.5 py-1.5 text-xs font-bold text-slate-600">{{ $summary['maintenance'] }} maintenance</span>
        <span class="shrink-0 rounded-full bg-amber-100 px-3.5 py-1.5 text-xs font-bold text-amber-800">{{ $summary['dirty'] }} need cleaning</span>
    </div>

    {{-- Room grid --}}
    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5">
        @foreach ($rooms as $room)
            @php
                $statusStyle = ['available' => 'ring-emerald-300 bg-emerald-50', 'occupied' => 'ring-rose-300 bg-rose-50', 'reserved' => 'ring-sky-300 bg-sky-50', 'maintenance' => 'ring-slate-300 bg-slate-100'][$room->status] ?? 'ring-slate-200 bg-white';
                $dot = ['available' => 'bg-emerald-500', 'occupied' => 'bg-rose-500', 'reserved' => 'bg-sky-500', 'maintenance' => 'bg-slate-400'][$room->status] ?? 'bg-slate-300';
            @endphp
            <div class="rounded-2xl p-4 shadow-sm ring-1 {{ $statusStyle }}">
                <div class="flex items-start justify-between">
                    <p class="text-lg font-extrabold text-slate-900">{{ $room->number }}</p>
                    <span class="mt-1.5 h-2.5 w-2.5 rounded-full {{ $dot }}"></span>
                </div>
                <p class="text-xs font-semibold text-slate-500">{{ $room->roomType->name }}</p>
                <p class="mt-0.5 text-[11px] font-medium capitalize text-slate-400">{{ $room->status }} · {{ str_replace('_', ' ', $room->housekeeping_status) }}</p>
                @if ($room->currentBooking)
                    <p class="mt-1 truncate text-[11px] font-bold text-rose-600">{{ $room->currentBooking->customer->name ?? '' }}</p>
                @endif
                <div class="mt-2.5 flex items-center gap-1.5">
                    <form method="POST" action="{{ route('epelcon.rooms.hk_status', $room) }}">@csrf
                        <input type="hidden" name="housekeeping_status" value="{{ $room->housekeeping_status === 'dirty' ? 'clean' : 'dirty' }}">
                        <button class="rounded-lg bg-white/80 px-2 py-1 text-[10px] font-bold text-slate-600 ring-1 ring-slate-200 hover:bg-white" title="Toggle housekeeping status">
                            {{ $room->housekeeping_status === 'dirty' ? 'Mark clean' : 'Mark dirty' }}
                        </button>
                    </form>
                    @if ($canManage)
                        <button @click='editRoom = {{ json_encode(["id" => $room->id, "number" => $room->number, "floor" => $room->floor, "room_type_id" => $room->room_type_id, "status" => $room->status, "notes" => $room->notes]) }}'
                                class="rounded-lg bg-white/80 px-2 py-1 text-[10px] font-bold text-indigo-600 ring-1 ring-slate-200 hover:bg-white">Edit</button>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

    {{-- Room types --}}
    <h2 class="mb-3 mt-8 text-lg font-extrabold text-slate-900">Room types</h2>
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ($roomTypes as $type)
            <div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
                @if ($type->image)
                    <img src="{{ asset($type->image) }}" alt="{{ $type->name }}" class="h-32 w-full object-cover">
                @else
                    <div class="flex h-32 w-full items-center justify-center bg-gradient-to-br from-slate-800 to-slate-950 text-4xl">🛏</div>
                @endif
                <div class="p-5">
                    <div class="flex items-start justify-between">
                        <h3 class="font-bold text-slate-900">{{ $type->name }}</h3>
                        <span class="rounded-full bg-indigo-50 px-2 py-0.5 text-[10px] font-bold text-indigo-600">{{ $type->rooms_count }} rooms</span>
                    </div>
                    <p class="mt-1 text-xl font-extrabold text-indigo-600">@money($type->base_price)<span class="text-xs font-medium text-slate-400">/night</span></p>
                    <p class="mt-1 text-xs text-slate-500">{{ $type->capacity_adults }} adults · {{ $type->capacity_children }} children · {{ $type->size_sqm }}m²</p>
                    <div class="mt-2 flex flex-wrap gap-1">
                        @foreach (array_slice($type->amenities ?? [], 0, 4) as $amenity)
                            <span class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-500">{{ $amenity }}</span>
                        @endforeach
                    </div>
                    @if ($canManage)
                        <button @click='editType = {{ json_encode(["id" => $type->id, "name" => $type->name, "description" => $type->description, "base_price" => $type->base_price, "capacity_adults" => $type->capacity_adults, "capacity_children" => $type->capacity_children, "size_sqm" => $type->size_sqm, "amenities" => implode(", ", $type->amenities ?? []), "status" => $type->status]) }}'
                                class="mt-3 rounded-lg bg-indigo-50 px-3 py-1.5 text-xs font-bold text-indigo-600 hover:bg-indigo-100">Edit / photo</button>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

    @if ($canManage)
        {{-- Add room modal --}}
        <div x-cloak x-show="addRoom" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
            <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="addRoom = false"></div>
            <div x-show="addRoom" x-transition class="relative w-full max-w-md rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
                <h2 class="mb-4 text-lg font-extrabold">Add room</h2>
                <form method="POST" action="{{ route('epelcon.rooms.store') }}" class="space-y-4">@csrf
                    <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Room number</span><input name="number" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Floor</span><input name="floor" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Type</span>
                        <select name="room_type_id" class="w-full rounded-xl border-slate-200 text-sm">@foreach ($roomTypes as $type)<option value="{{ $type->id }}">{{ $type->name }}</option>@endforeach</select></label>
                    <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Status</span>
                        <select name="status" class="w-full rounded-xl border-slate-200 text-sm">@foreach (['available', 'maintenance'] as $s)<option value="{{ $s }}">{{ ucfirst($s) }}</option>@endforeach</select></label>
                    <div class="flex justify-end gap-2"><button type="button" @click="addRoom = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                        <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Add room</button></div>
                </form>
            </div>
        </div>

        {{-- Edit room modal --}}
        <div x-cloak x-show="editRoom" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
            <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="editRoom = null"></div>
            <div x-show="editRoom" x-transition class="relative w-full max-w-md rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
                <h2 class="mb-4 text-lg font-extrabold">Edit room <span x-text="editRoom?.number"></span></h2>
                <form method="POST" :action="'{{ url('epelcon/rooms') }}/' + editRoom?.id + '/update'" class="space-y-4">@csrf
                    <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Room number</span><input name="number" x-model="editRoom.number" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Floor</span><input name="floor" x-model="editRoom.floor" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Type</span>
                        <select name="room_type_id" x-model="editRoom.room_type_id" class="w-full rounded-xl border-slate-200 text-sm">@foreach ($roomTypes as $type)<option value="{{ $type->id }}">{{ $type->name }}</option>@endforeach</select></label>
                    <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Status</span>
                        <select name="status" x-model="editRoom.status" class="w-full rounded-xl border-slate-200 text-sm">@foreach (['available', 'occupied', 'reserved', 'maintenance'] as $s)<option value="{{ $s }}">{{ ucfirst($s) }}</option>@endforeach</select></label>
                    <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Notes</span><textarea name="notes" x-model="editRoom.notes" rows="2" class="w-full rounded-xl border-slate-200 text-sm"></textarea></label>
                    <div class="flex justify-end gap-2"><button type="button" @click="editRoom = null" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                        <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Save</button></div>
                </form>
            </div>
        </div>

        {{-- Add type modal --}}
        <div x-cloak x-show="addType" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
            <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="addType = false"></div>
            <div x-show="addType" x-transition class="relative max-h-[92vh] w-full max-w-lg overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
                <h2 class="mb-4 text-lg font-extrabold">Add room type</h2>
                <form method="POST" action="{{ route('epelcon.room_types.store') }}" enctype="multipart/form-data" class="grid grid-cols-2 gap-4">@csrf
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Photo</span>
                        <input type="file" name="image" accept="image/*" class="w-full rounded-xl border border-slate-200 p-2 text-sm file:mr-3 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-3 file:py-1.5 file:text-xs file:font-bold file:text-indigo-600"></label>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Name</span><input name="name" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Price / night ({{ $CUR }})</span><input type="number" step="0.01" name="base_price" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Size (m²)</span><input type="number" name="size_sqm" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Adults</span><input type="number" name="capacity_adults" value="2" min="1" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Children</span><input type="number" name="capacity_children" value="1" min="0" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Amenities (comma-separated)</span><input name="amenities" placeholder="Air conditioning, Free Wi-Fi, Smart TV" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Description</span><textarea name="description" rows="2" class="w-full rounded-xl border-slate-200 text-sm"></textarea></label>
                    <div class="col-span-2 flex justify-end gap-2"><button type="button" @click="addType = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                        <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Create type</button></div>
                </form>
            </div>
        </div>

        {{-- Edit type modal --}}
        <div x-cloak x-show="editType" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
            <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="editType = null"></div>
            <div x-show="editType" x-transition class="relative max-h-[92vh] w-full max-w-lg overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
                <h2 class="mb-4 text-lg font-extrabold">Edit room type</h2>
                <form method="POST" :action="'{{ url('epelcon/room-types') }}/' + editType?.id + '/update'" enctype="multipart/form-data" class="grid grid-cols-2 gap-4">@csrf
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Photo (replace)</span>
                        <input type="file" name="image" accept="image/*" class="w-full rounded-xl border border-slate-200 p-2 text-sm file:mr-3 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-3 file:py-1.5 file:text-xs file:font-bold file:text-indigo-600"></label>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Name</span><input name="name" :value="editType?.name" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Price / night ({{ $CUR }})</span><input type="number" step="0.01" name="base_price" :value="editType?.base_price" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Size (m²)</span><input type="number" name="size_sqm" :value="editType?.size_sqm" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Adults</span><input type="number" name="capacity_adults" :value="editType?.capacity_adults" min="1" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Children</span><input type="number" name="capacity_children" :value="editType?.capacity_children" min="0" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Amenities (comma-separated)</span><input name="amenities" :value="editType?.amenities" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Description</span><textarea name="description" rows="2" class="w-full rounded-xl border-slate-200 text-sm" x-init="editType && ($el.value = editType.description ?? '')"></textarea></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Status</span>
                        <select name="status" class="w-full rounded-xl border-slate-200 text-sm" x-init="editType && ($el.value = editType.status)"><option value="active">Active</option><option value="inactive">Inactive</option></select></label>
                    <div class="col-span-2 flex justify-end gap-2"><button type="button" @click="editType = null" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                        <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Save changes</button></div>
                </form>
            </div>
        </div>
    @endif
</div>
@endsection
