@extends('layouts.dashboard')

@section('content')
@php
/**
 * Admin → Design templates → ONE surface. The nested nav pages under the "Design templates" group each
 * render this: the platform's starter designs for a single surface (menu boards · table QR · payment QR
 * · printable menus · receipts) as a LIVE preview-thumbnail grid through the SAME studio-grid the vendor
 * pages use - so admin + vendor read identically. Each template is authored in its own designer
 * (template mode) and picked by vendors (copied into their own instance).
 *
 * @var string $surfaceType  the surface this page shows
 * @var array  $rows         its templates (id, name, config, is_active, _thumb)
 */
$surfaceType = $surfaceType ?? 'tv_screen';
$rows = $rows ?? [];

// Per-surface presentation: label, preview aspect + tone, and a comfortable column count.
$meta = [
    'tv_screen'  => ['label' => t('admin.design_templates.type_tv_screen'),  'ratio' => '16 / 9', 'tone' => 'dark',  'cols' => 4, 'flush' => true],
    'qr_card'    => ['label' => t('admin.design_templates.type_qr_card'),    'ratio' => '3 / 4',  'tone' => 'paper', 'cols' => 4],
    'qr_pay'     => ['label' => t('admin.design_templates.type_qr_pay'),     'ratio' => '3 / 4',  'tone' => 'paper', 'cols' => 4],
    'print_menu' => ['label' => t('admin.design_templates.type_print_menu'), 'ratio' => '4 / 3',  'tone' => 'paper', 'cols' => 3],
    'receipt'    => ['label' => t('admin.design_templates.type_receipt'),    'ratio' => '3 / 4',  'tone' => 'paper', 'cols' => 4],
];
$m = $meta[$surfaceType] ?? $meta['tv_screen'];
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php ob_start();
@endphp
@if ($surfaceType === 'tv_screen' && count($rows) >= 2)
<a class="qm-btn qm-btn-outline" href="{{ route('admin.design-templates.tv-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="{{ url('/admin/design-templates/new/' . $surfaceType) }}"><i class="fas fa-plus me-1" aria-hidden="true"></i> {{ t_raw('admin.design_templates.new') }}</a>
@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>{{ $m['label'] }}</h2>
        <p class="qm-ops-sub mb-0">{{ t_raw('admin.design_templates.subtitle') }}</p>
    </div>
</div>

@if (count($rows) === 0)
    <div class="qm-card qm-card-pad text-center">
        <p class="qm-ops-sub mb-3">{{ t_raw('admin.design_templates.empty') }}</p>
        <a class="qm-btn" href="{{ url('/admin/design-templates/new/' . $surfaceType) }}"><i class="fas fa-plus me-1" aria-hidden="true"></i> {{ t_raw('admin.design_templates.new') }}</a>
    </div>
@else
@php
$cards = [];
@endphp
@foreach ($rows as $r)
@php
$id = (int) $r['id'];
$active = (int) $r['is_active'] === 1;
// A SHIPPED starter can be edited, duplicated or hidden — never deleted (see the shipped roles for
// the same contract). Duplicating it produces the operator's own, fully deletable copy.
$system = (int) ($r['is_system'] ?? 0) === 1;
// Printable menus are grouped BY STYLE (skin) so each style's variants sit together on one row.
$cfg   = json_decode((string) ($r['config'] ?? ''), true);
$skin  = is_array($cfg) ? (string) ($cfg['skin'] ?? '') : '';
$group = $surfaceType === 'print_menu' ? (string) (\App\Services\PrintMenuSkins::get($skin)['label'] ?? $r['name']) : '';
ob_start();
@endphp
            <span class="qm-pill">{!! $active ? t('admin.design_templates.active') : t('admin.design_templates.inactive') !!}</span>
        @php $status = trim(ob_get_clean());
        ob_start();
@endphp
            <form method="post" action="{{ route('admin.design-templates.toggle') }}">
                @csrf<input type="hidden" name="id" value="{{ $id }}">
                <button class="qm-btn qm-btn-sm qm-btn-ghost" type="submit">{!! $active ? t('admin.design_templates.deactivate') : t('admin.design_templates.activate') !!}</button>
            </form>
            <form method="post" action="{{ url('/admin/design-templates/' . $id . '/duplicate') }}">
                @csrf
                <button class="qm-btn qm-btn-sm qm-btn-ghost" type="submit" title="{{ t_raw('admin.design_templates.duplicate') }}"><i class="fas fa-copy" aria-hidden="true"></i></button>
            </form>
            @if (!$system)
            <form method="post" action="{{ route('admin.design-templates.delete') }}" data-confirm="{{ t('admin.design_templates.confirm_delete') }}">
                @csrf<input type="hidden" name="id" value="{{ $id }}">
                <button class="qm-btn qm-btn-sm qm-btn-danger" type="submit" 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('/admin/design-templates/' . $id . '/edit') }}">{{ t_raw('common.edit') }}</a>
        @php
$actions = ob_get_clean();
// A DOUBLE-SIDED printable menu shows only the FRONT on its card and flips (in 3D, on hover) to the
// BACK — the same interaction as the QR flip card, not both sides side by side.
$thumb  = (string) ($r['_thumb'] ?? '');
$double = $surfaceType === 'print_menu' && is_array($cfg) && !empty($cfg['doubleSided']);
$ifr    = static fn (string $u): string => '<iframe src="' . e($u) . '" loading="lazy" tabindex="-1" scrolling="no" title="' . e($r['name']) . '"></iframe>';
$media  = $double
            ? '<div class="pm-flip"><div class="pm-flip-inner">'
              . '<div class="pm-flip-face pm-flip-front">' . $ifr($thumb . '&side=front') . '</div>'
              . '<div class="pm-flip-face pm-flip-back">' . $ifr($thumb . '&side=back') . '</div>'
              . '</div><span class="pm-flip-badge" title="' . e(t('admin.design_templates.two_sided')) . '" aria-label="' . e(t('admin.design_templates.two_sided')) . '"><i class="fas fa-sync-alt" aria-hidden="true"></i></span></div>'
            : ($thumb !== '' ? $ifr($thumb) : '<span class="qm-show-blank"><i class="fas fa-layer-group" aria-hidden="true"></i></span>');
// A slideshow template announces itself with the member-count chip.
if (isset($r['_showCount'])) {
            $media .= '<span class="qm-show-chip"><i class="fas fa-play" aria-hidden="true"></i> '
                . e(t('vendor.screens.show_count', [':n' => (int) $r['_showCount']])) . '</span>';
        }
        /* QR ONLY: a landscape card there is a different product from a portrait one and has to read
           as such. Everywhere else the surface's single ratio stands — giving each card its own
           shape makes a grid row as tall as its tallest member, which left a band of white inside
           every other card on the row, so boards and printable menus keep one frame and letterbox
           inside it. */
        $orient    = is_array($cfg) ? (string) ($cfg['orientation'] ?? '') : '';
$perCard   = in_array($surfaceType, ['qr_card', 'qr_pay'], true);
$cardRatio = $m['ratio'];
if ($perCard && in_array($orient, ['landscape', 'horizontal'], true)) {
            $cardRatio = '4 / 3';
        }
        $cards[] = [
            'media'   => $media,
            'href'    => url('/admin/design-templates/' . $id . '/edit'),
            'name'    => $r['name'],
            'status'  => $status,
            'actions' => $actions,
            'group'   => $group,
            'ratio'   => $cardRatio,
        ];
@endphp
@endforeach
@if ($surfaceType === 'print_menu')
@php
// One labelled row per STYLE (skin): its variants side by side, so each look is compared at a glance.
$byStyle = [];
foreach ($cards as $c) { $byStyle[$c['group'] !== '' ? $c['group'] : $c['name']][] = $c; }

        /*
         * Paginate by STYLE, not by card.
         *
         * Every thumbnail is a live iframe rendering a real sheet, and a double-sided template
         * renders twice — 24 templates meant 48 documents painting at once and a page of ~340 KB.
         * Slicing the flat card list would split a style's variants across a page break and
         * destroy the one thing this layout exists for: comparing a look's folds side by side.
         * Two styles per page keeps that row intact and lands at eight thumbnails, matching the
         * nine the vendor gallery shows.
         */
        $perPage    = 2;
$styleNames = array_keys($byStyle);
$pages      = max(1, (int) ceil(count($styleNames) / $perPage));
$pageNo     = min(max(1, (int) request()->query('page', 1)), $pages);
$pager      = [
            'total'   => count($styleNames),
            'perPage' => $perPage,
            'pages'   => $pages,
            'page'    => $pageNo,
            'offset'  => ($pageNo - 1) * $perPage,
        ];
@endphp
@foreach (array_slice($styleNames, $pager['offset'], $perPage) as $styleLabel)
@php
$styleCards = $byStyle[$styleLabel];
@endphp
            <h3 class="h6 fw-bold mt-4 mb-2">{{ $styleLabel }}</h3>
            @partial('studio-grid', ['cards' => $styleCards, 'mode' => 'frame', 'cols' => 4, 'ratio' => $m['ratio'], 'tone' => $m['tone']])
        @endforeach
@php
// Same pager as every list page; counts read as styles, which is what a page holds here.
// Written as an expression, not an if-block: a braced `if` here would swallow the
// alternative-syntax `else:` that closes the surrounding surface check.
echo $pages > 1 ? partial('table-toolbar', ['pager' => $pager]) : '';
@endphp
@else
@php
echo partial('studio-grid', ['cards' => $cards, 'mode' => 'frame', 'cols' => $m['cols'], 'ratio' => $m['ratio'], 'tone' => $m['tone'], 'flush' => !empty($m['flush'])]);
@endphp
@endif
@endif

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