@extends('layouts.branch')

@section('title', 'Bed Master')
@section('header', 'Bed Inventory Management')

@section('content')
<div class="space-y-6 italic" x-data="bedIndex()">
    <!-- Breadcrumbs -->
    <div class="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400">
        <a href="{{ route('branch.dashboard') }}" class="hover:text-indigo-600 transition-colors">Dashboard</a>
        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-indigo-600">Bed Master</span>
    </div>

    <!-- Actions & Filters -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 bg-white p-8 rounded-[40px] shadow-sm border border-slate-100 relative overflow-hidden">
        <div class="relative z-10 flex flex-col md:flex-row md:items-center gap-8">
            <h2 class="text-3xl font-black text-slate-800 tracking-tighter uppercase leading-none">Bed <span class="text-indigo-600">Directory</span></h2>
            
            <div class="flex items-center gap-4">
                <div class="relative group">
                    <input type="text" x-model="search" @input.debounce.500ms="fetchBeds()" placeholder="Search Bed or Room..." 
                           class="w-64 pl-12 pr-6 py-3.5 bg-slate-50 border-none rounded-2xl text-[11px] font-bold focus:ring-2 focus:ring-indigo-500 transition-all outline-none italic placeholder:text-slate-400">
                    <svg class="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 group-focus-within:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </div>

                <select x-model="roomId" @change="fetchBeds()" class="px-6 py-3.5 bg-slate-50 border-none rounded-2xl text-[11px] font-bold focus:ring-2 focus:ring-indigo-500 transition-all outline-none italic">
                    <option value="">All Rooms</option>
                    @foreach($rooms as $room)
                        <option value="{{ $room->id }}">{{ $room->room_number }} ({{ $room->roomType->name }})</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="relative z-10">
            <a href="{{ route('branch.beds.create') }}" class="inline-flex items-center gap-3 px-8 py-4 bg-slate-900 text-white rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-indigo-600 hover:shadow-2xl hover:shadow-indigo-200 transition-all active:scale-95 group">
                <svg class="h-4 w-4 transition-transform group-hover:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
                Add New Bed
            </a>
        </div>
        
        <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-50 rounded-full blur-3xl opacity-50 -mr-32 -mt-32"></div>
    </div>

    <!-- Table Container -->
    <div id="beds-table" class="bg-white rounded-[40px] shadow-sm border border-slate-100 overflow-hidden">
        @include('branch.beds._table')
    </div>
</div>

@push('scripts')
<script>
function bedIndex() {
    return {
        search: '',
        roomId: '',
        fetchBeds() {
            const url = new URL('{{ route("branch.beds.index") }}');
            if (this.search) url.searchParams.set('search', this.search);
            if (this.roomId) url.searchParams.set('room_id', this.roomId);

            fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(res => res.text())
                .then(html => {
                    document.getElementById('beds-table').innerHTML = html;
                });
        }
    }
}
</script>
@endpush
@endsection