@extends('layouts.branch')

@section('title', 'Room Management')
@section('header', 'Room Inventory')

@section('content')
<div class="space-y-6" x-data="{
    search: '{{ request('search') }}',
    limit: '{{ request('limit', '10') }}',
    loading: false,
    updateTable() {
        this.loading = true;
        const params = new URLSearchParams({
            search: this.search,
            limit: this.limit
        });
        fetch('{{ route('branch.rooms.index') }}?' + params.toString(), {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(response => response.text())
        .then(html => {
            document.getElementById('table-container').innerHTML = html;
            this.loading = false;
            window.history.pushState({}, '', '{{ route('branch.rooms.index') }}?' + params.toString());
        });
    },
    exportPdf() {
        const params = new URLSearchParams({
            search: this.search
        });
        window.location.href = '{{ route('branch.rooms.export-pdf') }}?' + params.toString();
    }
}">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Room Inventory', 'url' => route('branch.rooms.index')]
        ]
    ])

    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-3xl shadow-sm border border-slate-100">
        <div>
            <h2 class="text-2xl font-black text-slate-800 tracking-tight uppercase">Room Management</h2>
            <p class="text-[10px] text-slate-400 font-bold tracking-widest uppercase">Configure hospital rooms, floor mappings, and availability</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('branch.rooms.create') }}" class="flex items-center gap-2 px-6 py-3 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-[10px] hover:bg-indigo-600 shadow-xl shadow-slate-200 transition-all 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="2" d="M12 4v16m8-8H4"/></svg>
                Add Room
            </a>
        </div>
    </div>

    <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
        <div class="p-6 border-b border-slate-50 flex items-center justify-between gap-4">
            <div class="flex items-center gap-4 flex-1">
                <div class="relative flex-1 max-w-md">
                    <input type="text" x-model="search" @input.debounce.500ms="updateTable()" 
                        placeholder="Search by room no. or type..." 
                        class="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-100 rounded-xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all placeholder:font-black placeholder:text-slate-300 font-black text-xs uppercase tracking-widest text-slate-700">
                    <div class="absolute left-3.5 top-2.5 text-slate-300">
                        <svg x-show="!loading" class="h-4 w-4" 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>
                        <svg x-show="loading" class="animate-spin h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                    </div>
                </div>

                <select x-model="limit" @change="updateTable()" class="px-3 py-2 bg-slate-50 border border-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest outline-none focus:ring-4 focus:ring-indigo-500/10">
                    <option value="10">10 Rows</option>
                    <option value="50">50 Rows</option>
                    <option value="100">100 Rows</option>
                    <option value="all">All Records</option>
                </select>
            </div>

            <button @click="exportPdf()" class="flex items-center gap-2 px-6 py-2 bg-white border border-slate-200 text-slate-700 rounded-xl font-black uppercase tracking-widest text-[10px] hover:bg-slate-50 transition-all">
                <svg class="h-4 w-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                Export PDF
            </button>
        </div>

        <div id="table-container">
            @include('branch.rooms._table')
        </div>
    </div>
</div>
@endsection