{{--
    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.

    QR filenames/URLs come from $room->qrs (App\Support\RoomQr) — the view no
    longer derives slugs or touches the filesystem.
--}}
<div class="brafa-screen">
    <style>
        .rooms-qr-cell { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
        .rooms-qr-chip { width: 104px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
        .rooms-qr-chip__thumb { width: 76px; height: 76px; padding: 5px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); display: block; }
        .rooms-qr-chip__ph { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
        .rooms-qr-chip__label { font-size: 11px; line-height: 1.2; color: var(--fg-subtle); text-align: center; }
        .rooms-qr-chip__actions { display: flex; gap: 4px; }
        .rooms-qr-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--fg-subtle); cursor: pointer; text-decoration: none; }
        .rooms-qr-iconbtn:hover { color: var(--fg); border-color: var(--fg-subtle); }
        th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
        th.sortable .caret { opacity: .4; font-size: 11px; margin-left: 2px; }
        th.sortable.is-sorted { color: var(--fg); }
        th.sortable.is-sorted .caret { opacity: 1; }
    </style>
    <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 wire:click="sortBy('properties.PropertyName')" class="sortable {{ $sortField === 'properties.PropertyName' ? 'is-sorted' : '' }}">
                            Property <span class="caret">@if($sortField === 'properties.PropertyName'){{ $sortDirection === 'asc' ? '↑' : '↓' }}@else↕@endif</span>
                        </th>
                        <th wire:click="sortBy('rooms.PropertyID')" class="sortable {{ $sortField === 'rooms.PropertyID' ? 'is-sorted' : '' }}">
                            Property ID <span class="caret">@if($sortField === 'rooms.PropertyID'){{ $sortDirection === 'asc' ? '↑' : '↓' }}@else↕@endif</span>
                        </th>
                        <th wire:click="sortBy('rooms.RoomID')" class="sortable {{ $sortField === 'rooms.RoomID' ? 'is-sorted' : '' }}">
                            Room ID <span class="caret">@if($sortField === 'rooms.RoomID'){{ $sortDirection === 'asc' ? '↑' : '↓' }}@else↕@endif</span>
                        </th>
                        <th wire:click="sortBy('rooms.UnitName')" class="sortable {{ $sortField === 'rooms.UnitName' ? 'is-sorted' : '' }}">
                            Unit <span class="caret">@if($sortField === 'rooms.UnitName'){{ $sortDirection === 'asc' ? '↑' : '↓' }}@else↕@endif</span>
                        </th>
                        <th wire:click="sortBy('rooms.RoomName')" class="sortable {{ $sortField === 'rooms.RoomName' ? 'is-sorted' : '' }}">
                            Room name <span class="caret">@if($sortField === 'rooms.RoomName'){{ $sortDirection === 'asc' ? '↑' : '↓' }}@else↕@endif</span>
                        </th>
                        <th>QR codes</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($rooms as $room)
                        @php
                            $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="QR codes">
                                <div class="rooms-qr-cell">
                                    @foreach ($room->qrs as $qr)
                                        <div class="rooms-qr-chip" wire:key="qr-{{ $room->id }}-{{ $qr['type'] }}">
                                            @if ($qr['exists'])
                                                <img class="rooms-qr-chip__thumb"
                                                     src="{{ asset('storage/qrcodes/'.$qr['filename']) }}?v={{ $qrVersion }}"
                                                     alt="{{ $qr['label'] }} QR" loading="lazy">
                                            @else
                                                <div class="rooms-qr-chip__ph">
                                                    <button type="button" class="btn btn--outline btn--sm"
                                                            wire:click="generateQr({{ $room->id }}, '{{ $qr['type'] }}')"
                                                            wire:loading.attr="disabled" wire:target="generateQr">
                                                        Generate
                                                    </button>
                                                </div>
                                            @endif
                                            <div class="rooms-qr-chip__label">{{ $qr['label'] }}</div>
                                            <div class="rooms-qr-chip__actions">
                                                @if ($qr['exists'])
                                                    <a class="rooms-qr-iconbtn" title="Download {{ $qr['label'] }} QR"
                                                       href="{{ asset('storage/qrcodes/'.$qr['filename']) }}?v={{ $qrVersion }}"
                                                       download="{{ $qr['filename'] }}">
                                                        <x-lucide name="download" size="14" />
                                                    </a>
                                                    <button type="button" class="rooms-qr-iconbtn" title="Regenerate {{ $qr['label'] }} QR"
                                                            wire:click="generateQr({{ $room->id }}, '{{ $qr['type'] }}')"
                                                            wire:loading.attr="disabled" wire:target="generateQr">
                                                        <x-lucide name="refresh-ccw" size="14" />
                                                    </button>
                                                @endif
                                                @if ($qr['link'])
                                                    <a class="rooms-qr-iconbtn" title="Open {{ $qr['label'] }} link"
                                                       href="{{ $qr['url'] }}" target="_blank" rel="noopener">
                                                        <x-lucide name="external-link" size="14" />
                                                    </a>
                                                @endif
                                                <button type="button" class="rooms-qr-iconbtn" title="Copy {{ $qr['label'] }} link"
                                                        onclick="brafaCopy(@js($qr['url']))">
                                                    <x-lucide name="copy" size="14" />
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" 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>
        window.brafaCopy = function (text) {
            var done = function () {
                if (window.Swal) {
                    Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: 'Link copied', showConfirmButton: false, timer: 1400 });
                }
            };
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text).then(done).catch(function () {});
            } else {
                var ta = document.createElement('textarea');
                ta.value = text;
                ta.style.position = 'fixed';
                ta.style.opacity = '0';
                document.body.appendChild(ta);
                ta.select();
                try { document.execCommand('copy'); done(); } catch (e) {}
                document.body.removeChild(ta);
            }
        };

        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>