{{--
    brafa Systems — Rooms. Mirror of the brafa list-card pattern.
    Livewire backing: App\Http\Livewire\RoomList. Bindings preserved:
    wire:model perPage/search/selectedProperty, wire:click sortBy/generateQr/
    downloadQrCodes/downloadApiQrCodes/downloadAllQrCodes/downloadSelfCheckInQr,
    $rooms pagination, and the SweetAlert .download-qr-btn JS hooks.
--}}
<div class="brafa-screen">
    <div class="card prop-list">
        {{-- Toolbar --}}
        <div class="prop-toolbar">
            <div class="prop-toolbar__search">
                <x-lucide name="search" size="16" />
                <input wire:model.debounce.300ms="search" type="text" class="input" placeholder="Search rooms…">
            </div>
            <div class="prop-toolbar__right">
                <label class="prop-toolbar__perpage">
                    <span class="eyebrow">Show</span>
                    <select wire:model="perPage" class="select">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                        <option value="100">100</option>
                    </select>
                    <span class="eyebrow">entries</span>
                </label>
            </div>
        </div>

        {{-- QR toolbar — property select + bulk download actions --}}
        <div class="prop-toolbar" style="border-top: 0;">
            <select wire:model="selectedProperty" class="select" style="max-width: 280px;">
                <option value="">Select property…</option>
                @foreach ($properties as $property)
                    <option value="{{ $property->PropertyID }}">{{ $property->PropertyName }}</option>
                @endforeach
            </select>
            <div class="prop-toolbar__right">
                <button wire:click="downloadQrCodes" class="btn btn--outline btn--sm download-qr-btn" @if(!$selectedProperty) disabled @endif>
                    <x-lucide name="upload" size="14" /> Guest QR
                </button>
                <button wire:click="downloadApiQrCodes" class="btn btn--outline btn--sm download-qr-btn" @if(!$selectedProperty) disabled @endif>
                    API QR
                </button>
                <button wire:click="downloadAllQrCodes" class="btn btn--outline btn--sm download-qr-btn" @if(!$selectedProperty) disabled @endif>
                    All QR
                </button>
                <button wire:click="downloadSelfCheckInQr" class="btn btn--sm download-qr-btn" @if(!$selectedProperty) disabled @endif>
                    Self check-in QR
                </button>
            </div>
        </div>

        {{-- Table --}}
        <div style="overflow-x: auto;">
            <table class="table table--cards">
                <thead>
                    <tr>
                        <th style="width: 56px;">Logo</th>
                        <th>Property</th>
                        <th wire:click="sortBy('rooms.PropertyID')" style="cursor:pointer;">Property ID</th>
                        <th>Room ID</th>
                        <th wire:click="sortBy('rooms.UnitName')" style="cursor:pointer;">Unit</th>
                        <th>Room name</th>
                        <th>URLs</th>
                        <th>Guest QR</th>
                        <th>Housekeeping QR</th>
                        <th>API checkout QR</th>
                        <th>API clean QR</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($rooms as $room)
                        @php
                            $slug = 'room-'.Str::slug($room->UnitName.'-'.$room->PropertyName);
                            $guestFilename = $slug.'-guest-checkout.png';
                            $hkFilename = $slug.'-housekeeping.png';
                            $coFilename = $slug.'-api-checkout.png';
                            $cleanFilename = $slug.'-api-clean.png';
                            $initials = collect(explode(' ', trim((string) $room->PropertyName)))
                                ->filter()->take(2)->map(fn ($p) => strtoupper(mb_substr($p, 0, 1)))->implode('');
                        @endphp
                        <tr wire:key="row-{{ $room->PropertyID }}-{{ $room->RoomID }}">
                            <td class="cards-hide">
                                <div class="prop-logo" style="background: var(--brafa-ink);">
                                    <span class="prop-logo__initials">{{ $initials ?: '?' }}</span>
                                    <img src="{{ asset('storage/assets/img') }}/{{ Str::slug($room->PropertyName) }}.png"
                                         alt="" loading="lazy"
                                         onload="this.closest('.prop-logo').classList.add('has-image');"
                                         onerror="this.remove();">
                                </div>
                            </td>
                            <td class="cards-title"><div class="prop-name__main">{{ $room->PropertyName }}</div></td>
                            <td class="mono muted" data-label="Property ID">{{ $room->PropertyID }}</td>
                            <td class="mono muted" data-label="Room ID">{{ $room->RoomID }}</td>
                            <td data-label="Unit">{{ $room->UnitName }}</td>
                            <td data-label="Room name">{{ $room->RoomName }}</td>
                            <td class="cards-block" data-label="URLs" style="text-align:left; max-width: 280px;">
                                <div class="vstack" style="gap:4px; font-size:12px;">
                                    <a href="{{ $room->url }}" target="_blank" class="muted" style="word-break:break-all;">Guest: {{ $room->url }}</a>
                                    <a href="{{ $room->housekeepingUrl }}" target="_blank" class="muted" style="word-break:break-all;">Housekeeping: {{ $room->housekeepingUrl }}</a>
                                    <span class="subtle mono" style="word-break:break-all;">API checkout: {{ $room->checkoutUrl }}</span>
                                    <span class="subtle mono" style="word-break:break-all;">API clean: {{ $room->cleanUrl }}</span>
                                </div>
                            </td>
                            <td class="cards-block" data-label="Guest QR">
                                @if (Storage::disk('public')->exists('qrcodes/'.$guestFilename))
                                    <a href="{{ asset('storage/qrcodes/'.$guestFilename) }}" download="{{ $guestFilename }}">
                                        <img src="{{ asset('storage/qrcodes/'.$guestFilename) }}" alt="Guest QR" style="width:84px;height:84px;border:1px solid var(--border);border-radius:var(--radius-sm);">
                                    </a>
                                @else
                                    <button wire:click="generateQr({{ $room->id }}, 'guest')" class="btn btn--outline btn--sm">Generate</button>
                                @endif
                            </td>
                            <td class="cards-block" data-label="Housekeeping QR">
                                @if (Storage::disk('public')->exists('qrcodes/'.$hkFilename))
                                    <a href="{{ asset('storage/qrcodes/'.$hkFilename) }}" download="{{ $hkFilename }}">
                                        <img src="{{ asset('storage/qrcodes/'.$hkFilename) }}" alt="Housekeeping QR" style="width:84px;height:84px;border:1px solid var(--border);border-radius:var(--radius-sm);">
                                    </a>
                                @else
                                    <button wire:click="generateQr({{ $room->id }}, 'housekeeping')" class="btn btn--outline btn--sm">Generate</button>
                                @endif
                            </td>
                            <td class="cards-block" data-label="API checkout QR">
                                @if (Storage::disk('public')->exists('qrcodes/'.$coFilename))
                                    <a href="{{ asset('storage/qrcodes/'.$coFilename) }}" download="{{ $coFilename }}">
                                        <img src="{{ asset('storage/qrcodes/'.$coFilename) }}" alt="API checkout QR" style="width:84px;height:84px;border:1px solid var(--border);border-radius:var(--radius-sm);">
                                    </a>
                                @else
                                    <button wire:click="generateQr({{ $room->id }}, 'checkout')" class="btn btn--outline btn--sm">Generate</button>
                                @endif
                            </td>
                            <td class="cards-block" data-label="API clean QR">
                                @if (Storage::disk('public')->exists('qrcodes/'.$cleanFilename))
                                    <a href="{{ asset('storage/qrcodes/'.$cleanFilename) }}" download="{{ $cleanFilename }}">
                                        <img src="{{ asset('storage/qrcodes/'.$cleanFilename) }}" alt="API clean QR" style="width:84px;height:84px;border:1px solid var(--border);border-radius:var(--radius-sm);">
                                    </a>
                                @else
                                    <button wire:click="generateQr({{ $room->id }}, 'clean')" class="btn btn--outline btn--sm">Generate</button>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="11" style="padding:48px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">
                                No rooms found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Footer --}}
        <div class="prop-list__footer">
            <div>
                @if ($rooms->total() > 0)
                    Showing <strong style="color:var(--fg);">{{ $rooms->firstItem() }}–{{ $rooms->lastItem() }}</strong>
                    of <strong style="color:var(--fg);">{{ $rooms->total() }}</strong>
                @else
                    No entries
                @endif
            </div>
            <div>{{ $rooms->links('vendor.pagination.brafa') }}</div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.download-qr-btn').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    if (btn.disabled) return;
                    Swal.fire({
                        title: 'Generating QR Codes...',
                        html: 'Please wait while we prepare your download.',
                        allowOutsideClick: false,
                        didOpen: () => { Swal.showLoading(); }
                    });
                });
            });
            window.addEventListener('qr-generation-finished', function () {
                Swal.close();
            });
        });
    </script>
</div>