@extends('layouts.dashboard')

@section('content')
@php
/**
 * Vendor dine-in QR page (/vendor/tables/qr): the restaurant's DESIGNED QR cards, in two clearly
 * separated entries so a vendor never confuses one for the other:
 *
 *   1. Table ordering QR — one card per table (a FRONT and a BACK), each carrying that table's own
 *      scan-to-order code. There is ONE design for the whole restaurant; only the QR is per-table.
 *   2. Payment QR — MANY named "scan to pay" cards, each its own design + static payment link
 *      (PayPal.Me / a Stripe link / a upi:// link), for stalls and trucks that take payment with no
 *      table. Managed add / click-to-edit / delete, like TV screens.
 *
 * On screen both render through the shared studio-grid (object mode) so the QR page matches the TV
 * Screens + Printable-menu managers 1:1; the 3D flip preview + the hidden per-card print blocks are
 * unchanged. On paper the print flows are independent — the table button prints every table's card;
 * each payment card carries its own @page rule so a landscape card prints landscape.
 *
 * @var array $rows      per-table [id, label, zone, path, table]
 * @var array $card      the table-card design (front/back + settings)
 * @var array $logo      the restaurant brand mark [src, initials, color]
 * @var array|null $frontProduct  resolved featured dish for the table front (or null)
 * @var array|null $backProduct   resolved featured dish for the table back (or null)
 * @var array $payCards  named payment cards, each [id, name, card, payUrl, frontProduct, backProduct]
 */
$rows       = $rows ?? [];
$card       = $card ?? \App\Models\QrCard::defaultConfig();
$logo       = $logo ?? [];
$payCards   = $payCards ?? [];

/** The @page rule for a card's paper size + orientation (cards differ; JS swaps it per print run). */
$pageRule = static function (array $c): string {
    $o = ($c['orientation'] ?? 'portrait') === 'landscape' ? 'landscape' : 'portrait';
    $p = \App\Models\QrCard::PAPERS[$c['paper'] ?? 'a5']['css'] ?? 'A5';
    return '@page { size: ' . $p . ' ' . $o . '; margin: 6mm; }';
};
$tableRule  = $pageRule($card);
$emptyTable = ['label' => '', 'zone' => ''];   // a payment card isn't tied to a table
@endphp
<style id="qm-qr-page">{!! $tableRule !!}</style>

@php /* ============================ 1 · Table ordering QR ============================ */
@endphp
<div class="qm-ops-head qrc-manage">
    <div>
        <div class="d-flex align-items-center gap-2 mb-1">
            <h2 class="qm-snap-section-title mb-0"><span class="qm-snap-title-bar" aria-hidden="true"></span>{{ t_raw('vendor.qr_card.section_table_title') }}</h2>
            <button type="button" class="qm-tip" aria-label="{{ t_raw('vendor.qr_print.regenerate_tip') }}" data-qm-tip="{{ t_raw('vendor.qr_print.regenerate_tip') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
        </div>
        <p class="qm-ops-sub mb-0">{{ t_raw('vendor.qr_print.page_subtitle') }}</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('vendor.tables') }}" class="qm-btn qm-btn-outline"><i class="fas fa-arrow-left" aria-hidden="true"></i> {{ t_raw('vendor.qr_print.back_to_floor_plan_btn') }}</a>
        <a href="{{ route('vendor.tables.qr.design') }}" class="qm-btn qm-btn-outline"><i class="fas fa-palette" aria-hidden="true"></i> {{ t_raw('vendor.qr_card.design_btn') }}</a>
        @if ($rows)
            @partial('print-actions', ['target' => '.qrc-print[data-print="table"]', 'name' => 'table-qr-cards', 'nup' => true, 'page' => $tableRule])
        @endif
    </div>
</div>

@if (!$rows)
    <div class="qm-card qrc-manage">
        <div class="qm-empty">
            <i class="fas fa-chair d-block" aria-hidden="true"></i>
            <p>{{ t_raw('vendor.qr_print.empty_no_tables') }}</p>
            <a href="{{ route('vendor.tables') }}" class="qm-btn">{{ t_raw('vendor.qr_print.go_to_floor_plan_btn') }}</a>
        </div>
    </div>
@else

    <!-- Screen: each table's FRONT/BACK flip card + its actions, through the shared studio-grid. -->
    <div class="qrc-manage">
        @php
$tableCards = [];
@endphp
@foreach ($rows as $r)
@php
ob_start();
@endphp
                <div class="qrc-flip">
                    <div class="qrc-flip-inner">
                        <div class="qrc-flip-face qrc-flip-front">@partial('qr-card-side', ['side' => $card['front'], 'card' => $card, 'product' => $frontProduct ?? null, 'qrPath' => $r['path'], 'logo' => $logo, 'table' => $r['table']])</div>
                        <div class="qrc-flip-face qrc-flip-back">@partial('qr-card-side', ['side' => $card['back'], 'card' => $card, 'product' => $backProduct ?? null, 'qrPath' => $r['path'], 'logo' => $logo, 'table' => $r['table']])</div>
                    </div>
                </div>
            @php $media = ob_get_clean();
            ob_start();
@endphp
                @php /* Icon-row actions (the screens-page convention): full labels made each button
                         wrap onto its own line inside the narrow card column, stacking three deep. */
@endphp
                @if ($r['path'] !== '')
                    <a href="{{ $r['path'] }}" target="_blank" rel="noopener" class="qm-btn qm-btn-sm qm-btn-ghost" title="{{ t('common.view') }}" aria-label="{{ t('common.view') }}"><i class="fas fa-eye" aria-hidden="true"></i></a>
                @endif
                <button type="button" class="qm-btn qm-btn-sm qm-btn-ghost" data-qr-regen data-id="{{ (int) $r['id'] }}" title="{{ t('vendor.qr_print.regenerate_btn') }}" aria-label="{{ t('vendor.qr_print.regenerate_btn') }}"><i class="fas fa-sync" aria-hidden="true"></i></button>
                <form method="post" action="{{ route('vendor.tables.delete') }}" class="d-inline" data-confirm="{{ t('vendor.qr_print.confirm_delete', [':label' => $r['label']]) }}">
                    @csrf
                    <input type="hidden" name="id" value="{{ (int) $r['id'] }}">
                    <input type="hidden" name="from" value="qr">
                    <button type="submit" class="qm-btn qm-btn-sm qm-btn-danger" title="{{ t('common.delete') }}" aria-label="{{ t('common.delete') }}"><i class="fas fa-trash-alt" aria-hidden="true"></i></button>
                </form>
            @php
$tableCards[] = ['media' => $media, 'actions' => ob_get_clean()];
@endphp
@endforeach
@php
echo partial('studio-grid', ['cards' => $tableCards, 'mode' => 'object', 'align' => 'center', 'min' => '210px']);
@endphp
    </div>

    <!-- Print: FRONT then BACK per table, one card per page (the default print run). -->
    <div class="qm-print-area qrc-print" data-print="table">
        <div class="qrc-stage">
            @foreach ($rows as $r)
                <div class="qrc-page">@partial('qr-card-side', ['side' => $card['front'], 'card' => $card, 'product' => $frontProduct ?? null, 'qrPath' => $r['path'], 'logo' => $logo, 'table' => $r['table']])</div>
                <div class="qrc-page">@partial('qr-card-side', ['side' => $card['back'], 'card' => $card, 'product' => $backProduct ?? null, 'qrPath' => $r['path'], 'logo' => $logo, 'table' => $r['table']])</div>
            @endforeach
        </div>
    </div>


@endif

@php /* ===================== 2 · Payment QR (many named cards) ===================== */
@endphp
<div class="qm-ops-head qrc-manage qrc-section-gap">
    <div>
        <div class="d-flex align-items-center gap-2 mb-1">
            <h2 class="qm-snap-section-title mb-0"><span class="qm-snap-title-bar" aria-hidden="true"></span>{{ t_raw('vendor.qr_card.section_pay_title') }}</h2>
            <button type="button" class="qm-tip" aria-label="{{ t_raw('vendor.qr_card.section_pay_tip') }}" data-qm-tip="{{ t_raw('vendor.qr_card.section_pay_tip') }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>
        </div>
        <p class="qm-ops-sub mb-0">{{ t_raw('vendor.qr_card.section_pay_sub') }}</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('vendor.tables.qr.pay.new') }}" class="qm-btn"><i class="fas fa-plus" aria-hidden="true"></i> {{ t_raw('vendor.qr_card.pay_add_btn') }}</a>
    </div>
</div>

@if (!$payCards)
    <div class="qm-card qrc-manage">
        <div class="qm-empty">
            <i class="fas fa-qrcode d-block" aria-hidden="true"></i>
            <p>{{ t_raw('vendor.qr_card.pay_empty') }}</p>
            <a href="{{ route('vendor.tables.qr.pay.new') }}" class="qm-btn">{{ t_raw('vendor.qr_card.pay_add_btn') }}</a>
        </div>
    </div>
@else

    <!-- Screen: one card per named payment card (the flip is the click-to-edit link). -->
    <div class="qrc-manage">
        @php
$payTiles = [];
@endphp
@foreach ($payCards as $pc)
@php
$pcard = $pc['card'];
$purl = (string) $pc['payUrl'];
$editUrl = url('/vendor/tables/qr/pay/' . $pc['id']);
ob_start();
@endphp
                <a href="{{ $editUrl }}" class="qrc-flip" aria-label="{{ t('vendor.qr_card.pay_edit_title') }}">
                    <div class="qrc-flip-inner">
                        <div class="qrc-flip-face qrc-flip-front">@partial('qr-card-side', ['side' => $pcard['front'], 'card' => $pcard, 'product' => $pc['frontProduct'], 'qrPath' => $purl, 'logo' => $logo, 'table' => $emptyTable])</div>
                        <div class="qrc-flip-face qrc-flip-back">@partial('qr-card-side', ['side' => $pcard['back'], 'card' => $pcard, 'product' => $pc['backProduct'], 'qrPath' => $purl, 'logo' => $logo, 'table' => $emptyTable])</div>
                    </div>
                </a>
            @php $media = ob_get_clean();
            ob_start();
@endphp
                @php /* Same icon-row treatment as the table cards; everything but the Print/Export
                         dropdown compacts to an icon so the four controls share one line. */
@endphp
                <a href="{{ $editUrl }}" class="qm-btn qm-btn-sm qm-btn-ghost" title="{{ t('common.edit') }}" aria-label="{{ t('common.edit') }}"><i class="fas fa-palette" aria-hidden="true"></i></a>
                @if ($purl !== '')
                    <a href="{{ $purl }}" target="_blank" rel="noopener nofollow" class="qm-btn qm-btn-sm qm-btn-ghost" title="{{ t('vendor.qr_card.pay_open_link') }}" aria-label="{{ t('vendor.qr_card.pay_open_link') }}"><i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
                    @partial('print-actions', ['target' => '.qrc-print[data-pay-id="' . (int) $pc['id'] . '"]', 'name' => 'payment-qr-' . (int) $pc['id'], 'nup' => true, 'compact' => true, 'page' => $pageRule($pcard)])
                @endif
                <form method="post" action="{{ route('vendor.tables.qr.pay.delete') }}" class="d-inline" data-confirm="{{ t('vendor.qr_card.pay_delete_confirm', [':name' => $pc['name']]) }}">
                    @csrf
                    <input type="hidden" name="id" value="{{ (int) $pc['id'] }}">
                    <button type="submit" class="qm-btn qm-btn-sm qm-btn-danger" title="{{ t('common.delete') }}" aria-label="{{ t('common.delete') }}"><i class="fas fa-trash-alt" aria-hidden="true"></i></button>
                </form>
            @php
$payTiles[] = ['media' => $media, 'name' => $pc['name'], 'actions' => ob_get_clean()];
@endphp
@endforeach
@php
/* 280px min: Edit + open-link + Print/Export + delete must share one row. */
echo partial('studio-grid', ['cards' => $payTiles, 'mode' => 'object', 'align' => 'center', 'min' => '280px']);
@endphp
    </div>

    <!-- Print: one hidden block per card (FRONT then BACK). JS reveals only the .is-printing one. -->
    @foreach ($payCards as $pc)
@php if ((string) $pc['payUrl'] === '') { continue; } $pcard = $pc['card']; $purl = (string) $pc['payUrl']; @endphp
        <div class="qm-print-area qrc-print" data-print="pay" data-pay-id="{{ (int) $pc['id'] }}">
            <div class="qrc-stage">
                <div class="qrc-page">@partial('qr-card-side', ['side' => $pcard['front'], 'card' => $pcard, 'product' => $pc['frontProduct'], 'qrPath' => $purl, 'logo' => $logo, 'table' => $emptyTable])</div>
                <div class="qrc-page">@partial('qr-card-side', ['side' => $pcard['back'], 'card' => $pcard, 'product' => $pc['backProduct'], 'qrPath' => $purl, 'logo' => $logo, 'table' => $emptyTable])</div>
            </div>
        </div>
    @endforeach

@endif

<script>window.QR_CARDS ={!! json_encode(['confirm' => t_raw('vendor.qr_print.confirm_regenerate'), 'title' => t_raw('vendor.qr_print.regenerate_btn'), 'pageTable' => $tableRule], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!};</script>
@endsection