@php
/**
 * "Put this screen on a TV" — THE pairing panel, shared by the board editor and the
 * slideshow form so the two can never drift apart: a framed QR tile (the /tv/play
 * address rides under it as a readable link), the panel heading + hint, the TVs
 * already paired to this row, and the code + name + Pair form. Styles live in
 * app.css (.qm-tvpair…), the QR renders itself (script below, guarded so a page
 * that already drew it — tv-editor.js also knows how — never draws it twice).
 *
 * @var int    $sid      the screen row the TVs bind to
 * @var array  $devices  TVs currently paired to it
 * @var string $playUrl  the public /tv/play connect address
 */
@endphp
<div class="qm-card qm-card-pad mt-3">
    <div class="qm-tvpair">
        <div class="qm-tvpair-qr">
            <div id="tv-qr" data-url="{{ $playUrl }}"></div>
            <a class="qm-tvpair-url" href="{{ $playUrl }}" target="_blank" rel="noopener">{{ $playUrl }}</a>
        </div>
        <div class="qm-tvpair-main">
            <h3 class="h6 mb-1">{{ t_raw('vendor.screens.pair_title') }}</h3>
            <p class="qm-ops-sub mb-3">{{ t_raw('vendor.screens.pair_hint') }}</p>
            @if (count($devices))
            <div class="mb-3">
                @foreach ($devices as $d)
@php $online = !empty($d['last_seen_at']) && (time() - strtotime((string) $d['last_seen_at']) < 120); @endphp
                <span class="tv-device-chip">
                    <span class="dot {{ $online ? '' : 'off' }}" title="{!! $online ? t('vendor.screens.online') : t('vendor.screens.offline') !!}"></span>
                    {{ $d['label'] ?: t('vendor.screens.a_tv') }}
                    <form method="post" action="{{ url('/vendor/screens/' . (int) $sid . '/unpair') }}" class="m-0">
                        @csrf
                        <input type="hidden" name="device_id" value="{{ (int) $d['id'] }}">
                        <button type="submit" class="qm-btn qm-btn-sm qm-btn-ghost" aria-label="{{ t_raw('vendor.screens.unpair') }}"><i class="fas fa-times" aria-hidden="true"></i></button>
                    </form>
                </span>
                @endforeach
            </div>
            @endif
            <form method="post" action="{{ url('/vendor/screens/' . (int) $sid . '/pair') }}" class="d-flex flex-wrap align-items-end gap-2">
                @csrf
                <div>
                    <label class="form-label" for="pair-code">{{ t_raw('vendor.screens.pair_code_ph') }}</label>
                    <input type="text" class="form-control qm-field-w-sm qm-code-input" id="pair-code" name="code" maxlength="8" autocomplete="off">
                </div>
                <div>
                    <label class="form-label" for="pair-label">{{ t_raw('vendor.screens.tv_name') }}</label>
                    <input type="text" class="form-control qm-field-w-sm" id="pair-label" name="label" maxlength="120" placeholder="{{ t_raw('vendor.screens.tv_name_ph') }}">
                </div>
                <button type="submit" class="qm-btn"><i class="fas fa-link me-1" aria-hidden="true"></i> {{ t_raw('vendor.screens.btn_pair') }}</button>
            </form>
        </div>
    </div>
</div>
<script src="{!! asset('vendor/qrcode/qrcode.min.js') !!}"></script>
<script>
(function () {
  var el = document.getElementById('tv-qr');
  if (el && !el.childElementCount && window.QRCode) {
    new window.QRCode(el, { text: el.getAttribute('data-url'), width: 128, height: 128, correctLevel: window.QRCode.CorrectLevel.M });
  }
})();
</script>