@extends('layouts.dashboard')

@section('content')
@php
/**
 * Vendor → TV Screens: every saved board as a live preview card (studio-grid),
 * plus where to point a TV to connect it.
 * @var iterable $screens          rows: id, name, config, media_path
 * @var array $devicesByScreen  [screen_id => [device rows]]
 * @var bool  $canManage
 * @var array $restaurant        the vendor's restaurant (merged in by render())
 */
$screens         = $screens ?? [];
$devicesByScreen = $devicesByScreen ?? [];
$playlistMeta    = $playlistMeta ?? [];   // [screen_id => ['count' =>, 'first' =>]] for slideshow rows
$scheduleNames   = $scheduleNames ?? [];   // [schedule_id => name] for the dayparted boards
$canManage       = $canManage ?? false;
$slug            = (string) ($restaurant['slug'] ?? '');

/** Build the live-preview URL for a screen from its saved column config. */
$previewUrl = static function (\App\Models\TvScreen|array $screen) use ($slug, $__env): string {
    $c = \App\Models\TvScreen::config($screen);
    return url('/tv/preview?' . http_build_query([
        'slug'        => $slug,
        'orientation' => $c['orientation'],
        'theme'       => $c['theme'],
        'accent'      => $c['accent'],
        'bgColor'     => $c['bgColor'],
        'header'      => $c['header'] ? 1 : 0,
        'headerText'  => $c['headerText'],
        'showCuisine' => $c['showCuisine'] ? 1 : 0,
        'footer'      => $c['footer'] ? 1 : 0,
        'footerText'  => $c['footerText'],
        'poweredBy'   => $c['poweredBy'] ? 1 : 0,
        'spacing'     => $c['spacing'],
        'columns'     => json_encode($c['columns'], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE),
    ]));
};
$playUrl = rtrim((string) route('tv.play'), '/');
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php // Page primary action → top-bar subheader slot (leaves the table card header for the title).
@endphp
@php ob_start();
@endphp
@if ($canManage)
@if (count($screens) - count($playlistMeta) >= 2)
<a class="qm-btn qm-btn-outline" href="{{ route('vendor.screens.new-slideshow') }}"><i class="fas fa-layer-group me-1" aria-hidden="true"></i> {{ t_raw('vendor.screens.show_add') }}</a>
@endif
<a class="qm-btn" href="{{ route('vendor.screens.new') }}"><i class="fas fa-plus me-1" aria-hidden="true"></i> {{ t_raw('vendor.screens.btn_add') }}</a>
@endif
@php \App\Support\View::slot('subhead', ob_get_clean());
@endphp

<div class="qm-ops-head">
    <div>
        <h2 class="qm-snap-section-title mb-1"><span class="qm-snap-title-bar" aria-hidden="true"></span>{{ t_raw('vendor.screens.list_heading') }}</h2>
        <p class="qm-ops-sub mb-0">{{ t_raw('vendor.screens.subtitle') }}</p>
    </div>
</div>

<div class="qm-card qm-card-pad mb-3">
    <div class="d-flex align-items-center gap-2 flex-wrap">
        <i class="fas fa-tv" aria-hidden="true"></i>
        <span>{{ t_raw('vendor.screens.connect_hint') }}</span>
        <code class="qm-pill">{{ $playUrl }}</code>
    </div>
</div>

@if (count($screens) === 0)
<div class="qm-card qm-card-pad text-center">
    <p class="mb-2"><strong>{{ t_raw('vendor.screens.empty_title') }}</strong></p>
    <p class="qm-ops-sub mb-3">{{ t_raw('vendor.screens.empty_body') }}</p>
    @if ($canManage)
    <a class="qm-btn" href="{{ route('vendor.screens.new') }}"><i class="fas fa-plus me-1" aria-hidden="true"></i> {{ t_raw('vendor.screens.btn_add') }}</a>
    @endif
</div>
@else
@php
$cards = [];
@endphp
@foreach ($screens as $s)
@php
$sid    = (int) $s['id'];
$paired = count($devicesByScreen[$sid] ?? []);
ob_start();
@endphp
            @if ($paired)<span class="live">{{ t_raw('vendor.screens.on_tvs', [':n' => $paired]) }}</span>
            @else{{ t_raw('vendor.screens.not_paired') }}@endif
            @php $sch = $scheduleNames[(int) ($s['schedule_id'] ?? 0)] ?? '';
@endphp
            @if ($sch !== '') · <i class="fas fa-clock" aria-hidden="true"></i> {{ $sch }}@endif
        @php $status = trim(ob_get_clean());
        ob_start();
@endphp
            @if ($canManage)
            <form method="post" action="{{ url('/vendor/screens/' . $sid . '/duplicate') }}">
                @csrf
                <button type="submit" class="qm-btn qm-btn-sm qm-btn-ghost" title="{{ t_raw('vendor.screens.duplicate') }}"><i class="fas fa-copy" aria-hidden="true"></i></button>
            </form>
            <form method="post" action="{{ route('vendor.screens.delete') }}" data-confirm="{{ t('vendor.screens.confirm_delete') }}">
                @csrf
                <input type="hidden" name="id" value="{{ $sid }}">
                <button type="submit" class="qm-btn qm-btn-sm qm-btn-danger" title="{{ t_raw('common.delete') }}"><i class="fas fa-trash" aria-hidden="true"></i></button>
            </form>
            @endif
            <a class="qm-btn qm-btn-sm qm-btn-outline" href="{{ url('/vendor/screens/' . $sid) }}">{{ t_raw('common.edit') }}</a>
        @php
$actions = ob_get_clean();
// A slideshow card plays its own rotation shell (/vendor/screens/{id}/play — the same
// chrome-free player its Preview opens), so the card transitions exactly as the TV
// will, saved pace and transition included. It froze on the first member's board
// before, which read as a broken slideshow. Everything else (edit/duplicate/delete/
// pairing) is unchanged because a slideshow IS a screen row.
$plMeta = $playlistMeta[$sid] ?? null;
if ($plMeta !== null) {
            $chip  = '<span class="qm-show-chip"><i class="fas fa-play" aria-hidden="true"></i> '
                   . e(t('vendor.screens.show_count', [':n' => (int) $plMeta['count']])) . '</span>';
            $media = ($plMeta['first']
                    ? '<iframe src="' . e(url('/vendor/screens/' . $sid . '/play')) . '" loading="lazy" tabindex="-1" scrolling="no" title="' . e($s['name']) . '"></iframe>'
                    : '<span class="qm-show-blank"><i class="fas fa-layer-group" aria-hidden="true"></i></span>')
                . $chip;
            $status = t('vendor.screens.show_badge') . ' · ' . $status;
        } else {
            $media = '<iframe src="' . e($previewUrl($s)) . '" loading="lazy" tabindex="-1" scrolling="no" title="' . e($s['name']) . '"></iframe>';
        }
        $cards[] = [
            'media'   => $media,
            'href'    => url('/vendor/screens/' . $sid),
            'name'    => $s['name'],
            'status'  => $status,
            'actions' => $actions,
        ];
@endphp
@endforeach
@php
echo partial('studio-grid', ['cards' => $cards, 'mode' => 'frame', 'cols' => 4, 'ratio' => '16 / 9', 'tone' => 'dark', 'flush' => true]);
@endphp
@endif

</div>@php /* /.qm-d2 */
@endphp
@endsection