@extends('layouts.dashboard')

@section('content')
@php
/**
 * Vendor → TV Screens → slideshow form: link saved boards into one rotation. The boards
 * are picked by CLICKING them in play order (numbered badges show the sequence), then the
 * swap transition and dwell time are chosen — and the saved row pairs to a TV exactly the
 * way a single board does (same pairing panel below).
 *
 * @var array|null $screen     the slideshow row being edited (null = creating)
 * @var array      $playlist   ['screens' => [ids], 'transition' => …, 'seconds' => …]
 * @var array      $boards     the restaurant's plain boards (id, name, config)
 * @var array      $devices    TVs paired to this row (edit only)
 * @var array      $schedules  the restaurant's serving times (dayparting, optional)
 * @var array      $restaurant
 */
$screen     = $screen ?? null;
$playlist   = $playlist ?? ['screens' => [], 'transition' => 'fade', 'seconds' => 8];
$boards     = $boards ?? [];
$devices    = $devices ?? [];
$schedules  = $schedules ?? [];
$scheduleId = (int) ($screen['schedule_id'] ?? 0);
$sid        = $screen ? (int) $screen['id'] : 0;
$slug       = (string) ($restaurant['slug'] ?? '');
$playUrl    = rtrim((string) route('tv.play'), '/');

/** The same live thumbnail seam the screens list uses. */
$previewUrl = static function (\App\Models\TvScreen|array $b) use ($slug, $__env): string {
    $c = \App\Models\TvScreen::config($b);
    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),
    ]));
};
$chosen = array_map('intval', $playlist['screens'] ?? []);
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">

<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($screen ? 'vendor.screens.edit' : 'vendor.screens.show_add') }}</h2>
        <p class="qm-ops-sub mb-0">{{ t_raw('vendor.screens.show_sub') }}</p>
    </div>
    <div class="d-flex align-items-center gap-2">
        <a class="qm-btn qm-btn-outline disabled" data-show-preview href="#" target="_blank" rel="noopener"><i class="fas fa-play me-1" aria-hidden="true"></i> {{ t_raw('vendor.screens.show_preview') }}</a>
        <a class="qm-btn qm-btn-outline" href="{{ route('vendor.screens') }}"><i class="fas fa-arrow-left me-1" aria-hidden="true"></i> {{ t_raw('common.back') }}</a>
    </div>
</div>

<form method="post" action="{{ route('vendor.screens.save-slideshow') }}">
    @csrf
    @if ($screen)<input type="hidden" name="id" value="{{ $sid }}">@endif

    <div class="qm-card qm-card-pad mb-3">
        <div class="row g-3">
            <div class="col-md-5">
                <label class="form-label" for="show-name">{{ t_raw('vendor.screens.f_name') }}</label>
                <input type="text" class="form-control" id="show-name" name="name" maxlength="120" required
                       value="{{ old('name', (string) ($screen['name'] ?? ($suggestedName ?? ''))) }}">
            </div>
            <div class="col-md-3">
                <label class="form-label" for="show-tr">{{ t_raw('admin.tvshow.transition') }}</label>
                <select class="form-select" id="show-tr" name="transition">
                    @foreach (\App\Models\TvScreen::PLAYLIST_TRANSITIONS as $tr)
                    <option value="{{ $tr }}"{{ $playlist['transition'] === $tr ? ' selected' : '' }}>{{ t_raw('admin.tvshow.tr_' . $tr) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label" for="show-secs">{{ t_raw('admin.tvshow.seconds') }}</label>
                <input type="number" class="form-control" id="show-secs" name="seconds" min="2" max="120" step="1"
                       value="{{ (int) $playlist['seconds'] }}">
            </div>
            @if ($schedules)
            <div class="col-md-2">
                <label class="form-label" for="show-schedule">{{ t_raw('vendor.screens.f_schedule') }}</label>
                <select class="form-select" id="show-schedule" name="schedule_id">
                    <option value="0">{{ t_raw('vendor.screens.schedule_always') }}</option>
                    @foreach ($schedules as $sch)
                    <option value="{{ (int) $sch['id'] }}"{{ $scheduleId === (int) $sch['id'] ? ' selected' : '' }}>{{ (string) $sch['name'] }}</option>
                    @endforeach
                </select>
            </div>
            @endif
        </div>
    </div>

    <div class="qm-card qm-card-pad mb-3">
        <h3 class="h6 mb-1">{{ t_raw('vendor.screens.show_pick') }}</h3>
        <p class="qm-ops-sub mb-3">{{ t_raw('vendor.screens.show_pick_hint') }}</p>
        <div class="qm-showpick" data-show-pick>
            @foreach ($boards as $b)
@php $bid = (int) $b['id']; @endphp
            <button type="button" class="qm-showpick-card" data-board="{{ $bid }}" aria-pressed="false">
                <span class="qm-showpick-frame"><iframe src="{!! $previewUrl($b) !!}" loading="lazy" tabindex="-1" scrolling="no" title="{{ (string) $b['name'] }}"></iframe></span>
                <span class="qm-showpick-badge" aria-hidden="true"></span>
                <span class="qm-showpick-name">{{ (string) $b['name'] }}</span>
            </button>
            @endforeach
        </div>
        <div data-show-inputs></div>
    </div>

    <div class="d-flex align-items-center justify-content-end gap-2">
        <a class="qm-btn qm-btn-ghost" href="{{ route('vendor.screens') }}">{{ t_raw('common.cancel') }}</a>
        <button type="submit" class="qm-btn"><i class="fas fa-check me-1" aria-hidden="true"></i> {!! $screen ? t('vendor.screens.btn_save') : t('vendor.screens.btn_create') !!}</button>
    </div>
</form>

@if ($screen)
@partial('tv-pair', ['sid' => $sid, 'devices' => $devices, 'playUrl' => $playUrl])
@endif

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

<script>
(function () {
  'use strict';
  var wrap = document.querySelector('[data-show-pick]');
  var holder = document.querySelector('[data-show-inputs]');
  if (!wrap || !holder) { return; }
  var order = {!! json_encode(array_values($chosen)) !!};   // play order, board ids

  function paint() {
    wrap.querySelectorAll('.qm-showpick-card').forEach(function (card) {
      var id = parseInt(card.getAttribute('data-board'), 10);
      var pos = order.indexOf(id);
      card.classList.toggle('is-on', pos !== -1);
      card.setAttribute('aria-pressed', pos !== -1 ? 'true' : 'false');
      card.querySelector('.qm-showpick-badge').textContent = pos === -1 ? '' : String(pos + 1);
    });
    holder.innerHTML = '';
    order.forEach(function (id) {
      var inp = document.createElement('input');
      inp.type = 'hidden'; inp.name = 'screens[]'; inp.value = id;
      holder.appendChild(inp);
    });
  }
  wrap.addEventListener('click', function (e) {
    var card = e.target.closest('.qm-showpick-card');
    if (!card) { return; }
    var id = parseInt(card.getAttribute('data-board'), 10);
    var pos = order.indexOf(id);
    if (pos === -1) { order.push(id); } else { order.splice(pos, 1); }
    paint();
  });
  // Preview plays what is picked RIGHT NOW (before saving): the link carries the
  // current order, transition and pace, and stands down under two boards.
  var prev = document.querySelector('[data-show-preview]');
  var trSel = document.getElementById('show-tr');
  var secsIn = document.getElementById('show-secs');
  var base = {!! json_encode(route('vendor.screens.preview-slideshow')) !!};
  function syncPreview() {
    prev.classList.toggle('disabled', order.length < 2);
    prev.setAttribute('href', order.length < 2 ? '#'
      : base + '?ids=' + order.join(',') + '&tr=' + encodeURIComponent(trSel.value) + '&secs=' + encodeURIComponent(secsIn.value));
  }
  var origPaint = paint;
  paint = function () { origPaint(); syncPreview(); };
  trSel.addEventListener('change', syncPreview);
  secsIn.addEventListener('change', syncPreview);
  paint();
})();
</script>
@endsection