{{--
    brafa Systems — guest-services requests from the room TVs.
    Livewire backing: App\Http\Livewire\SuperAdmin\TvGuestRequestManagement.
--}}
<div class="brafa-screen">
    @if ($successMessage)
        <div class="status-banner status-banner--success">{{ $successMessage }}</div>
    @endif
    @if ($errorMessage)
        <div class="status-banner status-banner--danger">{{ $errorMessage }}</div>
    @endif

    <div class="spread" style="margin-bottom: 18px;">
        <div>
            <h3 class="card-heading" style="margin: 0;">Guest requests</h3>
            <p class="subtle" style="font-size: 13px; margin: 4px 0 0;">
                Requests raised by guests from the in-room TV. {{ $openCount }} open.
            </p>
        </div>
        <span class="eyebrow">Superadmin</span>
    </div>

    <section class="card prop-list">
        <div class="prop-toolbar spread" style="gap:12px; flex-wrap:wrap;">
            <div class="hstack" style="gap:6px;">
                <button type="button" class="btn btn--sm {{ $filter === 'open' ? '' : 'btn--outline' }}" wire:click="setFilter('open')">Open</button>
                <button type="button" class="btn btn--sm {{ $filter === 'all' ? '' : 'btn--outline' }}" wire:click="setFilter('all')">All</button>
            </div>
            <div class="hstack" style="gap:8px;">
                <label class="field-label" style="margin:0;">Property</label>
                <select wire:model="propertyId" class="input" style="min-width:200px;">
                    <option value="">All properties</option>
                    @foreach ($properties as $p)
                        <option value="{{ $p->PropertyID }}">{{ $p->PropertyName }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div style="overflow-x:auto;">
            <table class="table">
                <thead>
                    <tr>
                        <th style="width:140px;">When</th>
                        <th>Request</th>
                        <th style="width:160px;">Room / guest</th>
                        <th style="width:130px;">Property</th>
                        <th style="width:90px;">Status</th>
                        <th style="width:200px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($requests as $req)
                        <tr wire:key="req-{{ $req->id }}">
                            <td class="subtle" style="font-size:12px;">{{ $req->created_at?->diffForHumans() }}</td>
                            <td>
                                <div class="prop-name__main">{{ $req->label }}</div>
                                @if ($req->note)
                                    <div class="muted" style="font-size:12px;">{{ $req->note }}</div>
                                @endif
                                <div class="mono muted" style="font-size:11px;">{{ $req->type }}</div>
                            </td>
                            <td>
                                <div>{{ $req->unit_name ?: '—' }}</div>
                                <div class="muted" style="font-size:12px;">{{ $req->guest_name ?: '' }}</div>
                            </td>
                            <td class="subtle" style="font-size:12px;">{{ $req->property_id }}</td>
                            <td>
                                @if ($req->status === 'new')
                                    <span class="pill pill--active"><span class="dot"></span>New</span>
                                @elseif ($req->status === 'ack')
                                    <span class="pill">Ack’d</span>
                                @else
                                    <span class="pill">Done</span>
                                @endif
                            </td>
                            <td>
                                <div class="hstack" style="gap:6px; flex-wrap:wrap;">
                                    @if ($req->type === 'late_checkout' && $req->status !== 'done')
                                        <button type="button" class="btn btn--sm" wire:click="approveLateCheckout({{ $req->id }})"
                                            onclick="confirm('Approve late checkout? This will extend the room\'s smart lock by +2h.') || event.stopImmediatePropagation()"><x-lucide name="clock" size="13" /> Approve &amp; extend</button>
                                    @endif
                                    @if ($req->status === 'new')
                                        <button type="button" class="btn btn--outline btn--sm" wire:click="acknowledge({{ $req->id }})">Acknowledge</button>
                                    @endif
                                    @if ($req->status !== 'done')
                                        <button type="button" class="btn btn--sm" wire:click="resolve({{ $req->id }})"><x-lucide name="check" size="13" /> Done</button>
                                    @else
                                        <button type="button" class="btn btn--outline btn--sm" wire:click="reopen({{ $req->id }})">Re-open</button>
                                    @endif
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="deleteRequest({{ $req->id }})"
                                        onclick="confirm('Delete this request? It disappears from the room TV.') || event.stopImmediatePropagation()"
                                        title="Delete"><x-lucide name="trash-2" size="13" /></button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" style="padding:32px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No requests{{ $filter === 'open' ? ' open' : '' }}.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div style="padding:12px 16px;">
            {{ $requests->links() }}
        </div>
    </section>
</div>