{{--
    brafa Systems — Google TV launcher management.
    Livewire backing: App\Http\Livewire\SuperAdmin\TvBrandingManagement.
    Manages the isolated tv_ tables (branding, channels, devices). Existing
    property/booking data is read-only.
--}}
<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;">Hotel TV — branding &amp; channels</h3>
            <p class="subtle" style="font-size: 13px; margin: 4px 0 0;">
                Configure the Google TV launcher per property: branding, IPTV channels and devices.
            </p>
        </div>
        <span class="eyebrow">Superadmin</span>
    </div>

    <div style="display:grid; grid-template-columns: 280px 1fr; gap: 20px; align-items:start;">

        {{-- Property picker --}}
        <div class="card prop-list" style="display:flex; flex-direction:column; max-height: 78vh;">
            <div class="prop-toolbar" style="display:flex; flex-direction:column; gap:10px; align-items:stretch;">
                <h3 class="card-heading" style="margin:0;">Properties</h3>
                <div style="position:relative;">
                    <span style="position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.5; pointer-events:none;">
                        <x-lucide name="search" size="14" />
                    </span>
                    <input type="text" wire:model.debounce.300ms="search" class="input"
                           placeholder="Search name or ID…" style="padding-left:32px;">
                </div>
            </div>
            <div style="overflow-y:auto;">
                @forelse ($properties as $prop)
                    <button type="button"
                            wire:click="selectProperty('{{ $prop['PropertyID'] }}')"
                            class="brafa-nav-item {{ $selectedPropertyId === $prop['PropertyID'] ? 'is-active' : '' }}"
                            style="width:100%; text-align:left; border:none; background:{{ $selectedPropertyId === $prop['PropertyID'] ? 'var(--bg-surface)' : 'transparent' }};">
                        <x-lucide name="building" size="15" />
                        <span class="brafa-nav-item__label" style="display:flex; flex-direction:column;">
                            <span>{{ $prop['PropertyName'] }}</span>
                            <span class="subtle mono" style="font-size:11px;">ID {{ $prop['PropertyID'] }}</span>
                        </span>
                    </button>
                @empty
                    <p class="subtle" style="padding:16px; font-size:13px;">No properties match “{{ $search }}”.</p>
                @endforelse
                @if (count($properties) >= 60)
                    <p class="subtle" style="padding:10px 16px; font-size:11px;">Showing first 60 — refine your search to narrow down.</p>
                @endif
            </div>
        </div>

        {{-- Editor --}}
        <div>
            @if (! $selectedPropertyId)
                <section class="card card--pad-lg">
                    <p class="subtle" style="margin:0; font-size:13px;">Select a property to manage its TV launcher.</p>
                </section>
            @else
                {{-- Editor tabs --}}
                <div class="hstack" style="gap:6px; margin-bottom:16px; flex-wrap:wrap;">
                    @foreach (['branding' => '🎨 Branding & Theme', 'stay' => '🛎 Stay & Services', 'channels' => '📺 Channels & EPG', 'around' => '📍 Around You', 'devices' => '📱 Apps & Devices'] as $tabKey => $tabLabel)
                        <button type="button" wire:click="$set('tab', '{{ $tabKey }}')"
                                class="btn btn--sm {{ $tab === $tabKey ? '' : 'btn--outline' }}">{{ $tabLabel }}</button>
                    @endforeach
                </div>

                @if ($tab === 'branding')
                {{-- Branding --}}
                <section class="card card--pad-lg" style="margin-bottom: 20px;">
                    <div class="spread" style="margin-bottom: 14px;">
                        <h3 class="card-heading" style="margin:0;">Branding — {{ $selectedName }}</h3>
                        <span class="eyebrow">Live preview →</span>
                    </div>

                    <div style="display:grid; grid-template-columns: 1.4fr 1fr; gap:24px; align-items:start;">
                        <form wire:submit.prevent="saveBranding">
                            <div class="input-row" style="grid-template-columns: 1fr 1fr;">
                                <div>
                                    <label class="field-label">Logo URL <span class="subtle">(optional)</span></label>
                                    <input wire:model.lazy="logoUrl" type="text" class="input @error('logoUrl') is-invalid @enderror"
                                           placeholder="Leave blank to use property image">
                                    @error('logoUrl') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label class="field-label">Upload logo <span class="subtle">(replaces URL)</span></label>
                                    <input wire:model="logoUpload" type="file" accept="image/*" class="input @error('logoUpload') is-invalid @enderror">
                                    @error('logoUpload') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                            </div>

                            @if (! filled($logoUrl) && $existingImage)
                                <p class="subtle" style="font-size:12px; margin:2px 0 12px;">Using the property's existing image — set a URL or upload to override.</p>
                            @elseif (! filled($logoUrl) && ! $existingImage)
                                <p class="subtle" style="font-size:12px; margin:2px 0 12px;">No existing property image found — add a URL or upload a logo.</p>
                            @endif

                            <div class="input-row" style="grid-template-columns: 1fr 1fr;">
                                <div>
                                    <label class="field-label">Background image URL</label>
                                    <input wire:model.lazy="backgroundUrl" type="text" class="input @error('backgroundUrl') is-invalid @enderror" placeholder="https://…">
                                    @error('backgroundUrl') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label class="field-label">Welcome video URL</label>
                                    <input wire:model.defer="welcomeVideoUrl" type="text" class="input @error('welcomeVideoUrl') is-invalid @enderror" placeholder="https://… (mp4/HLS)">
                                    @error('welcomeVideoUrl') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                            </div>

                            <div class="input-row" style="grid-template-columns: 1fr 1fr;">
                                <div>
                                    <label class="field-label">Primary colour</label>
                                    <div class="hstack" style="gap:8px;">
                                        <input wire:model.lazy="primaryColor" type="color" class="input" style="width:46px; height:38px; padding:2px;">
                                        <input wire:model.lazy="primaryColor" type="text" class="input mono @error('primaryColor') is-invalid @enderror" placeholder="#0A2540">
                                    </div>
                                    @error('primaryColor') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label class="field-label">Accent colour</label>
                                    <div class="hstack" style="gap:8px;">
                                        <input wire:model.lazy="accentColor" type="color" class="input" style="width:46px; height:38px; padding:2px;">
                                        <input wire:model.lazy="accentColor" type="text" class="input mono @error('accentColor') is-invalid @enderror" placeholder="#C8A24B">
                                    </div>
                                    @error('accentColor') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                            </div>

                            <div class="input-row" style="grid-template-columns: 1fr;">
                                <div>
                                    <label class="field-label">Theme template <span class="subtle">(look, fonts &amp; mood of the whole TV UI)</span></label>
                                    <select wire:model.defer="theme" class="input @error('theme') is-invalid @enderror">
                                        <option value="nordic">Nordic Editorial — warm paper, brass, Scandinavian grotesque (default)</option>
                                        <option value="aurora">Midnight Aurora — always-dark teal night sky, aurora-green accent</option>
                                        <option value="lodge">Alpine Lodge — warm cream &amp; timber, copper, classic serif</option>
                                        <option value="harbor">Harbor — cool sea-glass blues, harbor-blue accent</option>
                                        <option value="lava">Lava — always-dark volcanic black, ember-orange accent</option>
                                        <option value="mono">Mono — gallery black &amp; white, ink accent</option>
                                    </select>
                                    <p class="subtle" style="font-size:12px; margin:4px 0 0;">
                                        Leave the accent at the default (#C8A24B) to use the theme's own colour; a custom accent overrides it.
                                    </p>
                                    @error('theme') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                            </div>

                            <div class="input-row" style="grid-template-columns: 1fr;">
                                <div>
                                    <label class="field-label">Welcome message</label>
                                    <input wire:model.lazy="welcomeMessage" type="text" class="input @error('welcomeMessage') is-invalid @enderror" placeholder="Welcome">
                                    @error('welcomeMessage') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                            </div>

                            <div class="hstack" style="margin-top: 8px;">
                                <button type="submit" class="btn"><x-lucide name="check" size="14" /> Save branding</button>
                                <span wire:loading class="subtle" style="font-size:12px;">Saving…</span>
                            </div>
                        </form>

                        {{-- Live welcome-screen preview --}}
                        <div>
                            <label class="field-label">Welcome screen preview</label>
                            <div style="border-radius:12px; overflow:hidden; border:1px solid var(--border);">
                                <div style="position:relative; aspect-ratio:16/9; background:linear-gradient(180deg, {{ $primaryColor ?: '#0A2540' }} 0%, #000 100%); display:flex; align-items:center; justify-content:center; padding:18px; text-align:center;">
                                    @if ($backgroundUrl)
                                        <img src="{{ $backgroundUrl }}" alt="" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35;">
                                    @endif
                                    <div style="position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;">
                                        @if ($effectiveLogo)
                                            <img src="{{ $effectiveLogo }}" alt="logo" style="max-height:46px; max-width:70%; object-fit:contain;">
                                        @endif
                                        <div style="color:#fff; font-size:18px; font-weight:600;">{{ $welcomeMessage ?: 'Welcome' }}</div>
                                        <div style="color:{{ $accentColor ?: '#C8A24B' }}; font-size:30px; font-weight:800; line-height:1;">Guest Name</div>
                                        <div style="color:rgba(255,255,255,.7); font-size:12px;">{{ $selectedName }}</div>
                                    </div>
                                </div>
                            </div>
                            <p class="subtle" style="font-size:11px; margin-top:8px;">Approximate TV welcome screen. Updates as you pick colours.</p>
                        </div>
                    </div>
                </section>
                @endif

                @if ($tab === 'around')
                {{-- Location, Eat nearby & Ambience --}}
                <section class="card card--pad-lg" style="margin-bottom: 20px;">
                    <h3 class="card-heading" style="margin:0 0 4px;">Around You — {{ $selectedName }}</h3>
                    <p class="subtle" style="font-size:12px; margin:0 0 14px;">Location-aware features on the TV: local weather, "Eat nearby" and ambience streams.</p>
                    <form wire:submit.prevent="saveBranding">
                        <div class="input-row" style="grid-template-columns: 1fr;">
                            <div style="position:relative;">
                                <label class="field-label">Property address <span class="subtle">(powers "Eat nearby" + local weather — start typing and pick a suggestion)</span></label>
                                <input wire:model.debounce.500ms="placeAddress" type="text" autocomplete="off"
                                       class="input @error('placeAddress') is-invalid @enderror" placeholder="Laugavegur 1, 101 Reykjavík">
                                @if (!empty($addressSuggestions))
                                    <div style="position:absolute; z-index:30; left:0; right:0; margin-top:4px; background:var(--bg, #fff); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); overflow:hidden;">
                                        @foreach ($addressSuggestions as $s)
                                            <button type="button" wire:click="pickAddress('{{ $s['id'] }}')"
                                                    style="display:block; width:100%; text-align:left; padding:9px 14px; border:0; background:transparent; cursor:pointer; font-size:13px;"
                                                    onmouseover="this.style.background='rgba(0,0,0,.05)'" onmouseout="this.style.background='transparent'">
                                                📍 {{ $s['text'] }}
                                            </button>
                                        @endforeach
                                    </div>
                                @endif
                                @if ($pickedLat !== null && $placeAddress === $pickedAddress)
                                    <p class="subtle" style="font-size:12px; margin:4px 0 0;">📌 Pinned at {{ number_format((float) $pickedLat, 4) }}, {{ number_format((float) $pickedLng, 4) }} — saved with the form.</p>
                                @endif
                                @error('placeAddress') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="input-row" style="grid-template-columns: 1fr 1fr;">
                            <div>
                                <label class="field-label">"Eat nearby" picks <span class="subtle">(one name per line — pinned with a ⭐ badge)</span></label>
                                <textarea wire:model.defer="foodPicks" rows="3" class="input @error('foodPicks') is-invalid @enderror" placeholder="Dill&#10;Hereford"></textarea>
                                @error('foodPicks') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="field-label">Ambience streams <span class="subtle">(one per line: "Label | stream URL")</span></label>
                                <textarea wire:model.defer="ambience" rows="3" class="input @error('ambience') is-invalid @enderror" placeholder="Fireplace | https://…/fireplace.m3u8&#10;Rás 2 radio | https://…/ras2.m3u8"></textarea>
                                @error('ambience') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="hstack" style="margin-top: 8px;">
                            <button type="submit" class="btn"><x-lucide name="check" size="14" /> Save</button>
                            <span wire:loading class="subtle" style="font-size:12px;">Saving…</span>
                        </div>
                    </form>
                </section>
                @endif

                @if ($tab === 'stay')
                {{-- Stay settings --}}
                <section class="card card--pad-lg" style="margin-bottom: 20px;">
                    <h3 class="card-heading" style="margin:0 0 4px;">Stay settings — {{ $selectedName }}</h3>
                    <p class="subtle" style="font-size:12px; margin:0 0 14px;">Wi-Fi, checkout behavior, reviews and automatic nudges on the room TV.</p>
                    <form wire:submit.prevent="saveBranding">
                        <div class="input-row" style="grid-template-columns: 1fr 1fr;">
                            <div>
                                <label class="field-label">Guest Wi-Fi network <span class="subtle">(optional)</span></label>
                                <input wire:model.defer="wifiSsid" type="text" class="input @error('wifiSsid') is-invalid @enderror" placeholder="Hotel-Guest">
                                @error('wifiSsid') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="field-label">Wi-Fi password <span class="subtle">(shown as a QR on the TV)</span></label>
                                <input wire:model.defer="wifiPassword" type="text" class="input @error('wifiPassword') is-invalid @enderror" placeholder="••••••••">
                                @error('wifiPassword') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="input-row" style="grid-template-columns: 1fr 1fr;">
                            <div>
                                <label class="field-label">Late checkout on the room TV</label>
                                <select wire:model.defer="lateCheckoutMode" class="input @error('lateCheckoutMode') is-invalid @enderror">
                                    <option value="approval">Request &amp; approve — guest asks, front desk confirms (recommended)</option>
                                    <option value="auto">Automatic — guest extends the smart lock instantly (+2h)</option>
                                    <option value="disabled">Disabled — hide it; guest contacts the front desk</option>
                                </select>
                                @error('lateCheckoutMode') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="field-label">Review link <span class="subtle">(shown to happy guests at checkout)</span></label>
                                <input wire:model.defer="reviewUrl" type="text" class="input @error('reviewUrl') is-invalid @enderror" placeholder="https://g.page/r/…/review">
                                @error('reviewUrl') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="input-row" style="grid-template-columns: 1fr;">
                            <div>
                                <label class="field-label">Smart notifications <span class="subtle">(automatic nudges shown on the room TV)</span></label>
                                <label class="hstack" style="gap:8px; font-size:13px; margin-top:4px;">
                                    <input type="checkbox" wire:model.defer="notifyCheckout"> Checkout reminder <span class="subtle">— ~1–2h before checkout on departure day</span>
                                </label>
                                <label class="hstack" style="gap:8px; font-size:13px; margin-top:4px;">
                                    <input type="checkbox" wire:model.defer="notifyAurora"> Aurora alert <span class="subtle">— in season, when the northern-lights forecast is strong</span>
                                </label>
                            </div>
                        </div>

                        <div class="hstack" style="margin-top: 8px;">
                            <button type="submit" class="btn"><x-lucide name="check" size="14" /> Save</button>
                            <span wire:loading class="subtle" style="font-size:12px;">Saving…</span>
                        </div>
                    </form>
                </section>

                {{-- Book your tour --}}
                <section class="card card--pad-lg" style="margin-bottom: 20px;">
                    <h3 class="card-heading" style="margin:0 0 10px;">Book your tour</h3>
                    @if ($tourdeskUrl)
                        <p class="subtle" style="font-size:13px; margin:0 0 8px;">
                            The launcher shows this Tourdesk link as a QR code on the “Book your tour” screen.
                        </p>
                        <code class="mono" style="word-break:break-all; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; display:inline-block; color:var(--fg);">{{ $tourdeskUrl }}</code>
                    @else
                        <p class="subtle" style="font-size:13px; margin:0;">
                            No <span class="mono">tourdesk_url</span> set for this property (in <span class="mono">property_emails</span>).
                            Add one there and it will appear on the TV automatically.
                        </p>
                    @endif
                </section>
                @endif

                @if ($tab === 'channels')
                {{-- Channel lists & EPG --}}
                <section class="card card--pad-lg" style="margin-bottom: 20px;">
                    <div class="spread" style="margin-bottom:10px;">
                        <h3 class="card-heading" style="margin:0;">Channel lists &amp; EPG — {{ $selectedName }}</h3>
                        @if ($epgStatus)
                            <span class="pill pill--active" title="Merged guide built by tv:epg-build"><span class="dot"></span>Merged EPG built {{ $epgStatus['age'] }} · {{ $epgStatus['kb'] }} KB</span>
                        @else
                            <span class="pill" title="Run: php artisan tv:epg-build">Merged EPG not built yet</span>
                        @endif
                    </div>

                    <div style="margin-top:6px;">
                        <label class="field-label">Channel lists <span class="subtle">(stack multiple — order is the channel order; the lineup is auto-numbered)</span></label>
                        @if ($assignedLists->isEmpty())
                            <p class="subtle" style="font-size:12px; margin:4px 0;">None assigned — the default list applies.</p>
                        @else
                            <div style="display:flex; flex-direction:column; gap:6px; margin:4px 0;">
                                @foreach ($assignedLists as $i => $al)
                                    <div class="hstack" style="gap:8px; justify-content:space-between; border:1px solid var(--border); border-radius:8px; padding:6px 10px;">
                                        <span><span class="mono muted" style="font-size:12px;">{{ $i + 1 }}.</span> {{ $al->name }}@if ($al->is_default) <span class="subtle">(default)</span>@endif</span>
                                        <div class="hstack" style="gap:4px;">
                                            <button type="button" class="btn btn--outline btn--sm" wire:click="moveAssignedList({{ $al->id }}, 'up')" @disabled($loop->first)>↑</button>
                                            <button type="button" class="btn btn--outline btn--sm" wire:click="moveAssignedList({{ $al->id }}, 'down')" @disabled($loop->last)>↓</button>
                                            <button type="button" class="btn btn--outline btn--sm" wire:click="removeAssignedList({{ $al->id }})" style="border-color: var(--brafa-red); color: var(--brafa-red);">Remove</button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                        <div class="hstack" style="gap:6px; margin-top:4px;">
                            <select wire:model.defer="addListId" class="select" style="max-width:300px;">
                                <option value="">Add a channel list…</option>
                                @foreach ($availableLists as $cl)
                                    <option value="{{ $cl->id }}">{{ $cl->name }}@if ($cl->is_default) (default)@endif</option>
                                @endforeach
                            </select>
                            <button type="button" class="btn btn--sm" wire:click="addAssignedList"><x-lucide name="plus" size="13" /> Add</button>
                        </div>
                    </div>

                    <form wire:submit.prevent="saveBranding" style="margin-top:14px;">
                        <div class="input-row" style="grid-template-columns: 1fr auto; align-items:end;">
                            <div>
                                <label class="field-label">Extra EPG guide URL <span class="subtle">(optional; merged into the guide by tv:epg-build)</span></label>
                                <input wire:model.defer="epgUrl" type="text" class="input @error('epgUrl') is-invalid @enderror" placeholder="https://…/guide.xml">
                                @error('epgUrl') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                            <button type="submit" class="btn btn--sm"><x-lucide name="check" size="13" /> Save</button>
                        </div>
                    </form>
                </section>

                {{-- Channels --}}
                <section class="card prop-list" style="margin-bottom: 20px;">
                    <div class="prop-toolbar" style="display:flex; flex-direction:column; gap:2px; align-items:flex-start;">
                        <h3 class="card-heading" style="margin:0;">Property-specific channels</h3>
                        <span class="subtle" style="font-size:11px;">Added after the assigned channel list. Manage shared lists in <strong>TV Channel Lists</strong>.</span>
                    </div>
                    <div style="padding: 0 16px 16px;">
                        <form wire:submit.prevent="addChannel">
                            <div class="input-row" style="grid-template-columns: 90px 1.2fr 2fr 1fr;">
                                <div>
                                    <label class="field-label">No.</label>
                                    <input wire:model.defer="chNumber" type="number" min="1" class="input @error('chNumber') is-invalid @enderror">
                                </div>
                                <div>
                                    <label class="field-label">Name</label>
                                    <input wire:model.defer="chName" type="text" class="input @error('chName') is-invalid @enderror" placeholder="Channel name">
                                </div>
                                <div>
                                    <label class="field-label">Stream URL (HLS/M3U)</label>
                                    <input wire:model.defer="chStreamUrl" type="text" class="input @error('chStreamUrl') is-invalid @enderror" placeholder="https://…m3u8">
                                </div>
                                <div>
                                    <label class="field-label">Group</label>
                                    <input wire:model.defer="chGroup" type="text" class="input" placeholder="Hotel">
                                </div>
                            </div>
                            <div class="input-row" style="grid-template-columns: 2fr 1.4fr auto; align-items:end; margin-top:10px;">
                                <div>
                                    <label class="field-label">Logo URL <span class="subtle">(optional)</span></label>
                                    <input wire:model.defer="chLogoUrl" type="text" class="input @error('chLogoUrl') is-invalid @enderror" placeholder="https://…/logo.png">
                                </div>
                                <div>
                                    <label class="field-label">EPG channel id <span class="subtle">(optional)</span></label>
                                    <input wire:model.defer="chEpgId" type="text" class="input @error('chEpgId') is-invalid @enderror" placeholder="matches XMLTV channel id">
                                </div>
                                <button type="submit" class="btn btn--sm"><x-lucide name="plus" size="13" /> Add channel</button>
                            </div>
                            @error('chNumber') <p class="field-error">{{ $message }}</p> @enderror
                            @error('chName') <p class="field-error">{{ $message }}</p> @enderror
                            @error('chStreamUrl') <p class="field-error">{{ $message }}</p> @enderror
                            @error('chLogoUrl') <p class="field-error">{{ $message }}</p> @enderror
                        </form>
                    </div>
                    <div style="overflow-x:auto;">
                        <p class="subtle" style="font-size:11px; padding:0 16px 8px;">Drag the ⠿ handle to reorder — the order is saved automatically and used as the channel order on the TV.</p>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th style="width:30px;"></th>
                                    <th style="width:70px;">Logo</th>
                                    <th style="width:52px;">No.</th>
                                    <th>Name / stream</th>
                                    <th>Logo URL</th>
                                    <th style="width:120px;">EPG id</th>
                                    <th style="width:80px;">Status</th>
                                    <th style="width:150px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="tv-ch-sortable">
                                @forelse ($channels as $ch)
                                    <tr wire:key="ch-{{ $ch->id }}" data-id="{{ $ch->id }}">
                                        <td class="tv-drag-handle" style="cursor:grab; text-align:center; color:var(--fg-subtle); user-select:none;" title="Drag to reorder">⠿</td>
                                        <td>
                                            @if ($ch->logo_url)
                                                <img src="{{ $ch->logo_url }}" alt="" style="height:24px; max-width:58px; object-fit:contain; background:#0A2540; border-radius:4px; padding:2px;">
                                            @else
                                                <span class="subtle" style="font-size:11px;">—</span>
                                            @endif
                                        </td>
                                        <td class="mono">{{ str_pad($ch->number, 3, '0', STR_PAD_LEFT) }}</td>
                                        <td>
                                            <div class="prop-name__main">{{ $ch->name }}</div>
                                            <div class="mono muted" style="font-size:11px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ $ch->stream_url }}</div>
                                        </td>
                                        <td>
                                            <input type="text" class="input" style="min-width:160px; font-size:12px;"
                                                   value="{{ $ch->logo_url }}" placeholder="https://…/logo.png"
                                                   wire:change="updateChannelLogo({{ $ch->id }}, $event.target.value)">
                                        </td>
                                        <td class="mono muted">{{ $ch->epg_channel_id ?? '—' }}</td>
                                        <td>
                                            @if ($ch->is_active)
                                                <span class="pill pill--active"><span class="dot"></span>Active</span>
                                            @else
                                                <span class="pill">Hidden</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="hstack" style="gap:6px; flex-wrap:wrap;">
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="toggleChannel({{ $ch->id }})">{{ $ch->is_active ? 'Hide' : 'Show' }}</button>
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="deleteChannel({{ $ch->id }})" style="border-color: var(--brafa-red); color: var(--brafa-red);">Delete</button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="8" style="padding:32px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No channels yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </section>
                @endif

                @if ($tab === 'stay')
                {{-- Information tabs --}}
                <section class="card prop-list" style="margin-bottom: 20px;">
                    <div class="prop-toolbar" style="display:flex; flex-direction:column; gap:2px; align-items:flex-start;">
                        <h3 class="card-heading" style="margin:0;">Information tabs</h3>
                        <span class="subtle" style="font-size:11px;">Guest compendium shown on the TV's Information screen (WiFi, dining, checkout, local guide…).</span>
                    </div>
                    <div style="padding: 0 16px 16px;">
                        <form wire:submit.prevent="addInfoTab">
                            <div class="input-row" style="grid-template-columns: 1fr 1.4fr;">
                                <div>
                                    <label class="field-label">Title</label>
                                    <input wire:model.defer="infoTitle" type="text" class="input @error('infoTitle') is-invalid @enderror" placeholder="WiFi">
                                    @error('infoTitle') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label class="field-label">Icon URL <span class="subtle">(optional)</span></label>
                                    <input wire:model.defer="infoIconUrl" type="text" class="input @error('infoIconUrl') is-invalid @enderror" placeholder="https://…/icon.png">
                                    @error('infoIconUrl') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                            </div>
                            <div class="input-row" style="grid-template-columns: 1fr; margin-top:10px;">
                                <div>
                                    <label class="field-label">Body</label>
                                    <textarea wire:model.defer="infoBody" rows="3" class="input @error('infoBody') is-invalid @enderror" placeholder="Network: GrandBrafa-Guest&#10;Password: welcome2026"></textarea>
                                    @error('infoBody') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                            </div>
                            <div class="hstack" style="margin-top:8px;">
                                <button type="submit" class="btn btn--sm"><x-lucide name="plus" size="13" /> Add tab</button>
                            </div>
                        </form>
                    </div>
                    <div style="overflow-x:auto;">
                        <p class="subtle" style="font-size:11px; padding:0 16px 8px;">Drag ⠿ to reorder.</p>
                        <table class="table">
                            <thead>
                                <tr><th style="width:30px;"></th><th style="width:160px;">Title</th><th>Body</th><th style="width:80px;">Status</th><th style="width:150px;">Actions</th></tr>
                            </thead>
                            <tbody id="tv-info-sortable">
                                {{-- NB: loop var must not shadow the component's $tab (active editor tab). --}}
                                @forelse ($infoTabs as $infoTab)
                                    <tr wire:key="info-{{ $infoTab->id }}" data-id="{{ $infoTab->id }}">
                                        <td class="tv-info-drag-handle" style="cursor:grab; text-align:center; color:var(--fg-subtle); user-select:none;">⠿</td>
                                        <td><div class="prop-name__main">{{ $infoTab->title }}</div></td>
                                        <td class="muted" style="font-size:12px; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ \Illuminate\Support\Str::limit($infoTab->body, 90) }}</td>
                                        <td>
                                            @if ($infoTab->is_active)
                                                <span class="pill pill--active"><span class="dot"></span>Active</span>
                                            @else
                                                <span class="pill">Hidden</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="hstack" style="gap:6px; flex-wrap:wrap;">
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="toggleInfoTab({{ $infoTab->id }})">{{ $infoTab->is_active ? 'Hide' : 'Show' }}</button>
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="deleteInfoTab({{ $infoTab->id }})" style="border-color: var(--brafa-red); color: var(--brafa-red);">Delete</button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" style="padding:28px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No information tabs yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </section>

                {{-- Upsell offers --}}
                <section class="card prop-list" style="margin-bottom: 20px;">
                    <div class="prop-toolbar" style="display:flex; flex-direction:column; gap:2px; align-items:flex-start;">
                        <h3 class="card-heading" style="margin:0;">Upsell offers</h3>
                        <span class="subtle" style="font-size:11px;">Paid extras shown on the TV (late checkout, early check-in, room upgrade…). The guest requests one → it lands in Guest requests + emails you; you charge it via the PMS.</span>
                    </div>
                    <div style="padding: 0 16px 16px;">
                        <form wire:submit.prevent="addUpsell">
                            <div class="input-row" style="grid-template-columns: 1.4fr 0.6fr;">
                                <div>
                                    <label class="field-label">Offer</label>
                                    <input wire:model.defer="upTitle" type="text" class="input @error('upTitle') is-invalid @enderror" placeholder="Room upgrade">
                                    @error('upTitle') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label class="field-label">Price <span class="subtle">(optional)</span></label>
                                    <input wire:model.defer="upPrice" type="text" class="input @error('upPrice') is-invalid @enderror" placeholder="€30">
                                    @error('upPrice') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                            </div>
                            <div class="input-row" style="grid-template-columns: 1fr; margin-top:10px;">
                                <div>
                                    <label class="field-label">Description <span class="subtle">(optional)</span></label>
                                    <input wire:model.defer="upDescription" type="text" class="input @error('upDescription') is-invalid @enderror" placeholder="A bigger room with a sea view, subject to availability.">
                                    @error('upDescription') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                            </div>
                            <div class="hstack" style="margin-top:8px;">
                                <button type="submit" class="btn btn--sm"><x-lucide name="plus" size="13" /> Add offer</button>
                            </div>
                        </form>
                    </div>
                    <div style="overflow-x:auto;">
                        <table class="table">
                            <thead>
                                <tr><th style="width:200px;">Offer</th><th style="width:90px;">Price</th><th>Description</th><th style="width:80px;">Status</th><th style="width:150px;">Actions</th></tr>
                            </thead>
                            <tbody>
                                @forelse ($upsells as $up)
                                    <tr wire:key="upsell-{{ $up->id }}">
                                        <td><div class="prop-name__main">{{ $up->title }}</div></td>
                                        <td class="mono">{{ $up->price ?: '—' }}</td>
                                        <td class="muted" style="font-size:12px; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ $up->description }}</td>
                                        <td>
                                            @if ($up->is_active)
                                                <span class="pill pill--active"><span class="dot"></span>Active</span>
                                            @else
                                                <span class="pill">Hidden</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="hstack" style="gap:6px; flex-wrap:wrap;">
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="toggleUpsell({{ $up->id }})">{{ $up->is_active ? 'Hide' : 'Show' }}</button>
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="deleteUpsell({{ $up->id }})" style="border-color: var(--brafa-red); color: var(--brafa-red);">Delete</button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" style="padding:28px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No upsell offers yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </section>

                {{-- Room service / dining menu --}}
                <section class="card prop-list" style="margin-bottom: 20px;">
                    <div class="prop-toolbar" style="display:flex; flex-direction:column; gap:2px; align-items:flex-start;">
                        <h3 class="card-heading" style="margin:0;">Room service menu</h3>
                        <span class="subtle" style="font-size:11px;">Items the guest can order from the TV. Orders land in Guest requests + email you; you charge via the PMS. Group with a category (e.g. Breakfast, Drinks).</span>
                    </div>
                    <div style="padding: 0 16px 16px;">
                        <form wire:submit.prevent="addMenuItem">
                            <div class="input-row" style="grid-template-columns: 0.8fr 1.2fr 0.6fr;">
                                <div>
                                    <label class="field-label">Category <span class="subtle">(optional)</span></label>
                                    <input wire:model.defer="miCategory" type="text" class="input @error('miCategory') is-invalid @enderror" placeholder="Breakfast">
                                    @error('miCategory') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label class="field-label">Item</label>
                                    <input wire:model.defer="miName" type="text" class="input @error('miName') is-invalid @enderror" placeholder="Club sandwich">
                                    @error('miName') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label class="field-label">Price <span class="subtle">(optional)</span></label>
                                    <input wire:model.defer="miPrice" type="text" class="input @error('miPrice') is-invalid @enderror" placeholder="2.400 kr">
                                    @error('miPrice') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                            </div>
                            <div class="input-row" style="grid-template-columns: 1fr; margin-top:10px;">
                                <div>
                                    <label class="field-label">Description <span class="subtle">(optional)</span></label>
                                    <input wire:model.defer="miDescription" type="text" class="input @error('miDescription') is-invalid @enderror" placeholder="Chicken, bacon, egg & fries">
                                    @error('miDescription') <p class="field-error">{{ $message }}</p> @enderror
                                </div>
                            </div>
                            <div class="hstack" style="margin-top:8px;">
                                <button type="submit" class="btn btn--sm"><x-lucide name="plus" size="13" /> Add item</button>
                            </div>
                        </form>
                    </div>
                    <div style="overflow-x:auto;">
                        <table class="table">
                            <thead>
                                <tr><th style="width:120px;">Category</th><th style="width:180px;">Item</th><th>Description</th><th style="width:90px;">Price</th><th style="width:80px;">Status</th><th style="width:150px;">Actions</th></tr>
                            </thead>
                            <tbody>
                                @forelse ($menuItems as $mi)
                                    <tr wire:key="menu-{{ $mi->id }}">
                                        <td class="subtle" style="font-size:12px;">{{ $mi->category ?: '—' }}</td>
                                        <td><div class="prop-name__main">{{ $mi->name }}</div></td>
                                        <td class="muted" style="font-size:12px; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ $mi->description }}</td>
                                        <td class="mono">{{ $mi->price ?: '—' }}</td>
                                        <td>
                                            @if ($mi->is_available)
                                                <span class="pill pill--active"><span class="dot"></span>Available</span>
                                            @else
                                                <span class="pill">Hidden</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="hstack" style="gap:6px; flex-wrap:wrap;">
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="toggleMenuItem({{ $mi->id }})">{{ $mi->is_available ? 'Hide' : 'Show' }}</button>
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="deleteMenuItem({{ $mi->id }})" style="border-color: var(--brafa-red); color: var(--brafa-red);">Delete</button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="6" style="padding:28px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No menu items yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </section>
                @endif

                @if ($tab === 'devices')
                {{-- Apps on the TVs --}}
                <section class="card card--pad-lg" style="margin-bottom: 20px;">
                    <div class="spread" style="margin-bottom:8px;">
                        <h3 class="card-heading" style="margin:0;">Apps on this property's TVs</h3>
                        @if ($appsCustomized)
                            <button type="button" class="btn btn--outline btn--sm" wire:click="resetApps">Use the global list</button>
                        @else
                            <span class="pill">Following the global list</span>
                        @endif
                    </div>
                    <p class="subtle" style="font-size:12px; margin:0 0 12px;">
                        Tick which streaming apps appear on this property's TVs. The first change copies the global list and customises it for this property only. Manage the global catalogue in <strong>TV Apps</strong>.
                    </p>
                    <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:8px;">
                        @forelse ($allApps as $app)
                            <label class="hstack" style="gap:8px; font-size:13px; border:1px solid var(--border); border-radius:8px; padding:8px 12px; cursor:pointer;">
                                <input type="checkbox" wire:click="toggleApp({{ $app->id }})" @checked(in_array($app->id, $enabledAppIds, true))>
                                @if ($app->icon_url)
                                    <img src="{{ $app->icon_url }}" alt="" style="height:20px; width:20px; object-fit:contain; border-radius:4px;">
                                @endif
                                <span>{{ $app->label }}</span>
                                @if ($app->is_required)<span class="subtle" style="font-size:11px;">(required)</span>@endif
                            </label>
                        @empty
                            <p class="subtle" style="font-size:13px;">No apps in the global catalogue yet — add some under TV Apps.</p>
                        @endforelse
                    </div>
                </section>

                {{-- Devices --}}
                <section class="card prop-list">
                    <div class="prop-toolbar"><h3 class="card-heading" style="margin:0;">Registered devices</h3></div>
                    <div style="padding:0 16px 12px;">
                        <div class="input-row" style="grid-template-columns: 1fr 2fr; align-items:end;">
                            <div>
                                <label class="field-label">Message title <span class="subtle">(optional)</span></label>
                                <input wire:model.defer="msgTitle" type="text" class="input" placeholder="Front desk">
                            </div>
                            <div>
                                <label class="field-label">Message to a room TV</label>
                                <input wire:model.defer="msgBody" type="text" class="input @error('msgBody') is-invalid @enderror" placeholder="Type a message, then press Send on a device row…">
                                @error('msgBody') <p class="field-error">{{ $message }}</p> @enderror
                            </div>
                        </div>
                        <label class="hstack" style="gap:8px; font-size:13px; margin-top:8px;">
                            <input type="checkbox" wire:model.defer="msgQuiet"> Quiet <span class="subtle">— small bottom toast on the TV instead of the full-screen message</span>
                        </label>
                    </div>
                    <div style="overflow-x:auto;">
                        <table class="table">
                            <thead>
                                <tr><th>Unit / Room</th><th>Device ID</th><th>Last seen</th><th>Status</th><th style="width:360px;">Actions</th></tr>
                            </thead>
                            <tbody>
                                @forelse ($devices as $device)
                                    <tr>
                                        <td><div class="prop-name__main">{{ $device->unit_name ?? '—' }}</div></td>
                                        <td class="mono muted">{{ $device->device_identifier }}</td>
                                        <td class="mono muted">{{ optional($device->last_seen_at)->diffForHumans() ?? 'Never' }}</td>
                                        <td>
                                            @if ($device->is_active)
                                                <span class="pill pill--active"><span class="dot"></span>Active</span>
                                            @else
                                                <span class="pill">Disabled</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="hstack" style="gap:6px; flex-wrap:wrap;">
                                                <button type="button" class="btn btn--sm" wire:click="sendMessage({{ $device->id }})"><x-lucide name="mail" size="13" /> Send</button>
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="sendCommand({{ $device->id }}, 'reload')"><x-lucide name="refresh-ccw" size="13" /> Reload</button>
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="sendCommand({{ $device->id }}, 'reboot')"
                                                        onclick="confirm('Reboot this device?') || event.stopImmediatePropagation()"><x-lucide name="power" size="13" /> Reboot</button>
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="sendCommand({{ $device->id }}, 'wipe')"
                                                        onclick="confirm('Wipe guest app data on this TV (checkout)?') || event.stopImmediatePropagation()"
                                                        style="border-color: var(--brafa-red); color: var(--brafa-red);"><x-lucide name="trash-2" size="13" /> Wipe apps</button>
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="toggleDevice({{ $device->id }})">{{ $device->is_active ? 'Disable' : 'Enable' }}</button>
                                                <button type="button" class="btn btn--outline btn--sm" wire:click="removeDevice({{ $device->id }})"
                                                        style="border-color: var(--brafa-red); color: var(--brafa-red);">Remove</button>
                                                <select class="input" style="width:auto; padding:4px 8px; font-size:12px;"
                                                        title="Occasion — changes the TV greeting until checkout"
                                                        onchange="@this.setOccasion({{ $device->id }}, this.value)">
                                                    <option value="" @selected(empty($device->occasion) || ($device->occasion_until && $device->occasion_until->isPast()))>🎈 Occasion…</option>
                                                    <option value="birthday" @selected($device->occasion === 'birthday' && $device->occasion_until && ! $device->occasion_until->isPast())>Birthday</option>
                                                    <option value="honeymoon" @selected($device->occasion === 'honeymoon' && $device->occasion_until && ! $device->occasion_until->isPast())>Honeymoon</option>
                                                    <option value="anniversary" @selected($device->occasion === 'anniversary' && $device->occasion_until && ! $device->occasion_until->isPast())>Anniversary</option>
                                                </select>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" style="padding:32px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No devices provisioned for this property yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </section>
                @endif
            @endif
        </div>
    </div>
</div>

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.6/Sortable.min.js" defer></script>
    <script>
        (function () {
            var tvSortable = null;

            function initTvChannelSort() {
                var el = document.getElementById('tv-ch-sortable');
                if (!el || !window.Sortable) return;
                if (tvSortable) { try { tvSortable.destroy(); } catch (e) {} tvSortable = null; }
                tvSortable = window.Sortable.create(el, {
                    handle: '.tv-drag-handle',
                    animation: 150,
                    onEnd: function () {
                        var ids = Array.prototype.slice
                            .call(el.querySelectorAll('tr[data-id]'))
                            .map(function (r) { return r.getAttribute('data-id'); });
                        if (window.Livewire) window.Livewire.emit('tvChannelsReordered', ids);
                    }
                });
            }

            var tvInfoSortable = null;
            function initTvInfoSort() {
                var el = document.getElementById('tv-info-sortable');
                if (!el || !window.Sortable) return;
                if (tvInfoSortable) { try { tvInfoSortable.destroy(); } catch (e) {} tvInfoSortable = null; }
                tvInfoSortable = window.Sortable.create(el, {
                    handle: '.tv-info-drag-handle',
                    animation: 150,
                    onEnd: function () {
                        var ids = Array.prototype.slice
                            .call(el.querySelectorAll('tr[data-id]'))
                            .map(function (r) { return r.getAttribute('data-id'); });
                        if (window.Livewire) window.Livewire.emit('tvInfoTabsReordered', ids);
                    }
                });
            }

            function initAll() { initTvChannelSort(); initTvInfoSort(); }

            document.addEventListener('DOMContentLoaded', initAll);
            document.addEventListener('livewire:load', initAll);
            if (window.Livewire) {
                window.Livewire.hook('message.processed', initAll);
            }
            // Sortable's script is deferred — retry once it has loaded.
            setTimeout(initAll, 1200);
        })();
    </script>
@endpush