@extends('layouts.dashboard')

@section('content')
@php
/**
 * Vendor → TV Screens → editor. Compose a board from 1–4 columns (each a menu category, an image,
 * a video/YouTube, or featured products) with a live preview, board settings, and TV pairing.
 * Built on the dashboard's own components (qm-card / qm-form-grid / qm-switch-row / form-select).
 * @var array|null $screen  @var array $config  @var array $devices  @var array $creatives
 * @var array $categories  @var array $items  @var array $restaurant
 */
$screen  = $screen ?? null;
$config  = $config ?? \App\Models\TvScreen::defaultConfig();
$devices = $devices ?? [];
// Dayparting is a property of the SCREEN ROW, not of the board config, so it is offered only where a
// row exists to carry it — the vendor editor. The admin authoring a platform template gets no list.
$schedules  = $schedules ?? [];
$scheduleId = (int) ($screen['schedule_id'] ?? 0);
$sid     = $screen ? (int) $screen['id'] : 0;
$slug    = (string) ($restaurant['slug'] ?? '');
$playUrl = rtrim((string) route('tv.play'), '/');
// Template mode: the admin authors a platform board template with this same editor. Values default to
// the vendor's own screen flow, so a normal vendor edit is unchanged.
$tplMode    = $tplMode ?? false;
$tplType    = $tplType ?? 'tv_screen';
$tplId      = (int) ($tplId ?? 0);
$formAction = $formAction ?? route('vendor.screens');
$backUrl    = $backUrl ?? route('vendor.screens');
$jsData  = [
    'slug'       => $slug,
    // The editor needs to know it is authoring a TEMPLATE: a template cannot keep a specific dish,
    // so it must not offer one. See the product overlay in tv-editor.js.
    'tplMode'    => (bool) $tplMode,
    'previewUrl' => route('tv.preview'),
    'board'      => [
        'orientation' => $config['orientation'], 'theme' => $config['theme'], 'accent' => $config['accent'], 'bgColor' => $config['bgColor'],
        'header' => (bool) $config['header'], 'headerText' => $config['headerText'], 'showCuisine' => (bool) $config['showCuisine'],
        'footer' => (bool) $config['footer'], 'footerText' => $config['footerText'],
        'poweredBy' => (bool) $config['poweredBy'], 'spacing' => $config['spacing'],
    ],
    'themeBg'    => \App\Models\TvScreen::THEME_BG,
    'columns'    => array_values($config['columns'] ?? []),
    'categories' => array_map(static fn ($c) => ['id' => (int) $c['id'], 'name' => $c['name']], $categories ?? []),
    'items'      => array_map(static fn ($i) => ['id' => (int) $i['id'], 'name' => $i['name'], 'cat' => (int) $i['menu_category_id']], $items ?? []),
    'creatives'  => array_map(static fn ($c) => ['src' => $c['image'], 'url' => media($c['image']), 'video' => (bool) preg_match('/\.(mp4|webm)$/i', (string) $c['image'])], $creatives ?? []),
    'i18n'       => [
        'menu' => t_raw('vendor.screens.type_menu'), 'image' => t_raw('vendor.screens.type_image'),
        'video' => t_raw('vendor.screens.type_video'), 'feature' => t_raw('vendor.screens.type_feature'),
        'column' => t_raw('vendor.screens.column'), 'auto' => t_raw('vendor.screens.cat_auto'),
        'items' => t_raw('vendor.screens.f_items'), 'width' => t_raw('vendor.screens.f_width'),
        'category' => t_raw('vendor.screens.f_category'), 'heading' => t_raw('vendor.screens.f_heading'),
        't_images' => t_raw('vendor.screens.t_images'), 't_numbers' => t_raw('vendor.screens.t_numbers'), 't_desc' => t_raw('vendor.screens.t_desc'),
        't_calories' => t_raw('vendor.screens.t_calories'), 'cal_pos' => t_raw('vendor.screens.cal_pos'),
        'cal_name' => t_raw('vendor.screens.cal_name'), 'cal_desc' => t_raw('vendor.screens.cal_desc'), 'cal_price' => t_raw('vendor.screens.cal_price'),
        'show_hide' => t_raw('vendor.screens.t_show_hide'),
        'upload' => t_raw('vendor.screens.media_upload'), 'youtube' => t_raw('vendor.screens.media_youtube'),
        'pick' => t_raw('vendor.screens.media_pick_hint'), 'yt_ph' => t_raw('vendor.screens.youtube_ph'),
        'choose' => t_raw('vendor.screens.feat_choose'), 'type' => t_raw('vendor.screens.f_type'), 'source' => t_raw('vendor.screens.f_source'),
        'overlay_none' => t_raw('vendor.screens.overlay_none'), 'overlay_auto' => t_raw('vendor.screens.overlay_auto'), 'overlay_product' => t_raw('vendor.screens.overlay_product'),
        'overlay_position' => t_raw('vendor.screens.overlay_position'), 'overlay_show' => t_raw('vendor.screens.overlay_show'), 'overlay_size' => t_raw('vendor.screens.overlay_size'),
        'overlay_name' => t_raw('vendor.screens.overlay_name'), 'overlay_desc' => t_raw('vendor.screens.overlay_desc'), 'overlay_price' => t_raw('vendor.screens.overlay_price'),
    ],
];
@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('vendor.screens.form_heading') }}</h2>
        <p class="qm-ops-sub mb-0">{{ t_raw('vendor.screens.editor_sub') }}</p>
    </div>
    <a class="qm-btn qm-btn-outline" href="{{ $backUrl }}"><i class="fas fa-arrow-left me-1" aria-hidden="true"></i> {{ t_raw('common.back') }}</a>
</div>

<div class="tv-editor">
<form method="post" action="{{ $formAction }}" enctype="multipart/form-data" id="tv-form">
    @csrf
    @if ($tplMode)
        <input type="hidden" name="type" value="{{ $tplType }}">
        <input type="hidden" name="tpl_id" value="{{ $tplId }}">
    @elseif ($sid)
        <input type="hidden" name="id" value="{{ $sid }}">
    @endif
    <input type="hidden" name="columns_json" id="columns_json">
    <input type="hidden" name="orientation" id="b-orientation">
    <input type="hidden" name="theme" id="b-theme">
    <input type="hidden" name="accent" id="b-accent">
    <input type="hidden" name="bgColor" id="b-bgColor">
    <input type="hidden" name="header" id="b-header">
    <input type="hidden" name="showCuisine" id="b-showCuisine">
    <input type="hidden" name="footer" id="b-footer">
    <input type="hidden" name="poweredBy" id="b-poweredBy">
    <input type="hidden" name="spacing" id="b-spacing">

        <div class="tv-settings">
            <div class="qm-card qm-card-pad">
                <div class="mb-3">
                    <label class="form-label" for="scr-name">{{ t_raw('vendor.screens.f_name') }}</label>
                    <input type="text" class="form-control" id="scr-name" name="name" maxlength="120" required
                           value="{{ old('name', (string) ($screen['name'] ?? ($suggestedName ?? ''))) }}" placeholder="{{ t_raw('vendor.screens.f_name_ph') }}">
                </div>
                <div class="qm-form-grid">
                    <div>
                        <label class="form-label">{{ t_raw('vendor.screens.f_orientation') }}</label>
                        <select class="form-select" data-board="orientation">
                            <option value="horizontal">{{ t_raw('vendor.screens.orient_h') }}</option>
                            <option value="vertical">{{ t_raw('vendor.screens.orient_v') }}</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">{{ t_raw('vendor.screens.f_spacing') }}</label>
                        <select class="form-select" data-board="spacing">
                            <option value="auto">{{ t_raw('vendor.screens.spacing_auto') }}</option>
                            <option value="cozy">{{ t_raw('vendor.screens.spacing_cozy') }}</option>
                            <option value="roomy">{{ t_raw('vendor.screens.spacing_roomy') }}</option>
                        </select>
                    </div>
                </div>
                @php $bgHex = $config['bgColor'] !== '' ? $config['bgColor'] : (\App\Models\TvScreen::THEME_BG[$config['theme']] ?? '#f4f1ec');
@endphp
                <div class="qm-form-grid qm-form-grid-3 mt-3">
                    <div>
                        <label class="form-label">{{ t_raw('vendor.screens.f_theme') }}</label>
                        <select class="form-select" data-board="theme">
                            <option value="light">{{ t_raw('vendor.screens.theme_light') }}</option>
                            <option value="dark">{{ t_raw('vendor.screens.theme_dark') }}</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">{{ t_raw('vendor.screens.f_accent') }}</label>
                        <input type="color" class="form-control qm-color-swatch-sq" data-board="accent" value="{{ $config['accent'] }}">
                    </div>
                    <div>
                        <label class="form-label">{{ t_raw('vendor.screens.f_background') }}</label>
                        <input type="color" class="form-control qm-color-swatch-sq" data-board="bgColor" value="{{ $bgHex }}">
                    </div>
                </div>

                @if ($schedules)
                <div class="mt-3">
                    <label class="form-label" for="scr-schedule">{{ t_raw('vendor.screens.f_schedule') }}</label>
                    <select class="form-select" id="scr-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' : '' }}>
                            {{ $sch['name'] }} · {{ \App\Services\MenuSchedule::describe($sch) }}
                        </option>
                        @endforeach
                    </select>
                </div>
                @endif

                <div class="mt-3">
                    <div class="tv-switch-group">
                        <label class="qm-switch-row">
                            <span><strong>{{ t_raw('vendor.screens.t_header') }}</strong><small>{{ t_raw('vendor.screens.header_help') }}</small></span>
                            <input class="form-check-input" type="checkbox" role="switch" data-board="header">
                        </label>
                        <input type="text" class="form-control" name="headerText" id="b-headerText" maxlength="60" value="{{ $config['headerText'] }}" placeholder="{{ t_raw('vendor.screens.f_header_ph') }}">
                    </div>
                    <label class="qm-switch-row">
                        <span><strong>{{ t_raw('vendor.screens.t_cuisine') }}</strong><small>{{ t_raw('vendor.screens.cuisine_help') }}</small></span>
                        <input class="form-check-input" type="checkbox" role="switch" data-board="showCuisine">
                    </label>
                    <div class="tv-switch-group">
                        <label class="qm-switch-row">
                            <span><strong>{{ t_raw('vendor.screens.t_footer') }}</strong><small>{{ t_raw('vendor.screens.footer_help') }}</small></span>
                            <input class="form-check-input" type="checkbox" role="switch" data-board="footer">
                        </label>
                        <input type="text" class="form-control" name="footerText" id="b-footerText" maxlength="160" value="{{ $config['footerText'] }}" placeholder="{{ t_raw('vendor.screens.f_footer_ph') }}">
                    </div>
                    <label class="qm-switch-row mb-0">
                        <span><strong>{{ t_raw('vendor.screens.t_powered') }}</strong><small>{{ t_raw('vendor.screens.powered_help') }}</small></span>
                        <input class="form-check-input" type="checkbox" role="switch" data-board="poweredBy">
                    </label>
                </div>
            </div>
        </div>

        <div class="tv-columns-wrap">
            <div class="qm-card qm-card-pad">
                <div class="d-flex align-items-center justify-content-between mb-1">
                    <h3 class="h6 mb-0">{{ t_raw('vendor.screens.columns_title') }}</h3>
                    <button type="button" class="qm-btn qm-btn-outline qm-btn-sm" id="tv-add-col"><i class="fas fa-plus me-1" aria-hidden="true"></i> {{ t_raw('vendor.screens.add_column') }}</button>
                </div>
                <p class="qm-ops-sub mb-3">{{ t_raw('vendor.screens.columns_hint') }}</p>
                <div class="tv-starters-row mb-3">
                    <span class="form-label d-block mb-0">{{ t_raw('vendor.screens.starters_label') }}</span>
                    <div class="tv-starters mt-2" id="tv-starters"></div>
                </div>
                <div id="tv-columns"></div>
            </div>

            <div class="tv-actions-right mt-3">
                <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>
        </div>
</form>
        <div class="tv-preview-wrap">
            <div class="qm-card qm-card-pad">
                <h3 class="h6 mb-2">{{ t_raw('vendor.screens.preview_label') }}</h3>
                <div class="qm-tv-frame" id="tv-frame"><iframe id="tv-preview" title="{{ t_raw('vendor.screens.preview_label') }}"></iframe></div>
                <p class="qm-ops-sub mt-2 mb-0"><small>{{ t_raw('vendor.screens.preview_note') }}</small></p>
            </div>
            @php /* Pairing lives under the live preview — the slack this column had
                     is exactly the panel's seat, and its own forms stay outside the
                     editor form (nested forms are not a thing HTML allows). */
@endphp
            @if ($screen)
            @partial('tv-pair', ['sid' => $sid, 'devices' => $devices, 'playUrl' => $playUrl])
            @endif
        </div>
</div>
</div>@php /* /.qm-d2 */
@endphp

@php
/* THE MEDIA FIELD, rendered ONCE as a <template> the composer clones per media column.
 *
 * The board builds its columns in JavaScript while media_field_html() is a PHP helper, so the field
 * cannot simply be echoed inside a column. A <template> resolves that without either of the wrong
 * answers: the markup is still written in exactly one place (the helper every other upload in the
 * product uses), and the editor never reimplements it.
 *
 * Cloning is safe because qm-media-picker binds by DELEGATION on document, not per field — a clone
 * added at any moment is live immediately. Filling one from script is a supported path too:
 * window.QM.mediaField.set() exists for precisely this, and Admin -> Taxonomy already uses it.
 */
$tvMediaEndpoint = ($tplMode ?? false) ? '/admin/media' : '/vendor/media';
@endphp
<template id="tv-media-field-tpl">
    @php /* modal => false is essential here, not an optimisation. media_field_html() appends the
             page-level picker modal to the FIRST field it renders, and this page's only field lives
             inside this <template> — so the modal landed in inert template.content, where
             qm-media-picker.js's document.querySelector('[data-media-modal]') can never find it.
             The picker then bound to nothing and every "Select image" button did nothing at all,
             silently, on any board that had no media column at load — which is the default for a
             blank board. The modal is emitted once below instead, in the real document. */
@endphp
    {!! media_field_html('tvmedia', '', [
        'accept'     => 'image',
        'allowClear' => true,
        'endpoint'   => $tvMediaEndpoint,
        'modal'      => false,
    ]) !!}
</template>
{{ media_picker_modal($tvMediaEndpoint) }}

@php // The crop helper the picker reaches for, then the picker itself — the same pair every other
// page using a media field loads. Both must be bound before tv-editor.js starts moving the fields.
@endphp
<script src="{!! asset('js/qm-pickers.js') !!}"></script>
<script src="{!! asset('js/qm-media-picker.js') !!}"></script>
@php // JSON_HEX_TAG guards this inline <script>: $jsData carries vendor-authored screen text, so a
// value containing </script> would otherwise break out of the block.
@endphp
<script>window.TV_EDITOR = {!! json_encode($jsData, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!};</script>
<script src="{!! asset('js/tv-editor.js') !!}"></script>
@endsection