@extends('layouts.dashboard')

@section('content')
@php
/**
 * Admin → Design templates → slideshow TEMPLATE form (create + edit). A slideshow
 * template links the platform's board templates into one rotation — picked by
 * clicking them in play order, exactly like the vendor's slideshow form — and is
 * saved as a tv_screen template row vendors apply from their gallery: applying it
 * copies every member board into their restaurant and links the copies. Preview
 * plays the CURRENT selection full screen before anything is saved.
 *
 * @var array      $boards    [['id' => …, 'name' => …, 'url' => …], …] board templates only
 * @var array|null $tpl       the slideshow template being edited (null = creating)
 * @var array      $playlist  ['screens' => [ids], 'transition' => …, 'seconds' => …]
 */
$boards   = $boards ?? [];
$tpl      = $tpl ?? null;
$playlist = $playlist ?? ['screens' => [], 'transition' => 'fade', 'seconds' => 8];
$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($tpl ? 'common.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-play 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('admin.design-templates.type', 'tv_screen') }}"><i class="fas fa-arrow-left me-1" aria-hidden="true"></i> {{ t_raw('common.back') }}</a>
    </div>
</div>

<form method="post" action="{{ route('admin.design-templates.save-slideshow') }}">
    @csrf
    @if ($tpl)<input type="hidden" name="tpl_id" value="{{ (int) $tpl['id'] }}">@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) ($tpl['name'] ?? '')) }}">
            </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>
        </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)
            <button type="button" class="qm-showpick-card" data-board="{{ (int) $b['id'] }}" aria-pressed="false">
                <span class="qm-showpick-frame"><iframe src="{{ (string) $b['url'] }}" 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('admin.design-templates.type', 'tv_screen') }}">{{ t_raw('common.cancel') }}</a>
        <button type="submit" class="qm-btn"><i class="fas fa-check me-1" aria-hidden="true"></i> {{ t_raw('common.save') }}</button>
    </div>
</form>

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

<script>
(function () {
  'use strict';
  var wrap = document.querySelector('[data-show-pick]');
  var holder = document.querySelector('[data-show-inputs]');
  var play = document.querySelector('[data-show-play]');
  if (!wrap || !holder || !play) { return; }
  var order = {!! json_encode(array_values($chosen)) !!};
  var trSel = document.getElementById('show-tr');
  var secsIn = document.getElementById('show-secs');
  var base = {!! json_encode(route('admin.design-templates.tv-slideshow.play')) !!};

  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);
    });
    play.classList.toggle('disabled', order.length < 2);
    play.setAttribute('href', order.length < 2 ? '#'
      : base + '?ids=' + order.join(',') + '&tr=' + encodeURIComponent(trSel.value) + '&secs=' + encodeURIComponent(secsIn.value));
  }
  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();
  });
  trSel.addEventListener('change', paint);
  secsIn.addEventListener('change', paint);
  paint();
})();
</script>
@endsection