@extends('layouts.dashboard')

@section('content')
@php
/**
 * @var array|null $restaurant
 * Template mode: the admin authors a receipt STARTER with this same designer. Defaults keep the vendor
 * flow (posting to /vendor/receipt) unchanged; in template mode it posts to the admin save with a name.
 */
$tplMode    = $tplMode ?? false;
$tplType    = $tplType ?? 'receipt';
$tplId      = (int) ($tplId ?? 0);
$formAction = $formAction ?? route('vendor.receipt');
$r = $restaurant ?? [];
// Receipt designer config (defaults overlaid with the saved blob, or a template's config) — drives the
// controls' initial state and the sample preview; the live preview then tracks the controls via receipt-editor.js.
$rcfg  = (isset($config) && is_array($config))
    ? array_merge(\App\Services\Receipt::defaults(), array_intersect_key($config, \App\Services\Receipt::defaults()))
    : \App\Services\Receipt::config($r);
$rcQr  = \App\Services\Receipt::qrUrl($r);      // QR target: website (General) or storefront fallback
$rcCur = setting('currency_symbol', '$');
$rcOn  = static fn (string $k): string => !empty($rcfg[$k]) ? '' : ' hidden';   // preview element hidden when off
$rcChk = static fn (string $k): string => !empty($rcfg[$k]) ? ' checked' : '';  // control checkbox state
@endphp
            @if ($tplMode)
@php ob_start(); @endphp
                <a class="qm-btn qm-btn-outline" href="{{ $backUrl ?? route('admin.design-templates.type', 'receipt') }}"><i class="fas fa-arrow-left me-1" aria-hidden="true"></i> {{ t_raw('common.back') }}</a>
            @php
\App\Support\View::slot('subhead', ob_get_clean());
@endphp
@elseif (!empty($hasTemplates))
@php
ob_start();
@endphp
                <a class="qm-btn qm-btn-outline" href="{{ route('vendor.receipt.templates') }}"><i class="fas fa-swatchbook me-1" aria-hidden="true"></i> {{ t_raw('vendor.templates.start_from') }}</a>
            @php
\App\Support\View::slot('subhead', ob_get_clean());
@endphp
@endif
            <form method="post" action="{{ $formAction }}">
                @csrf
                @if ($tplMode)
                    <input type="hidden" name="type" value="{{ $tplType }}">
                    <input type="hidden" name="tpl_id" value="{{ $tplId }}">
                    <div class="qm-card qm-card-pad mb-3">
                        <label class="form-label" for="rc-tpl-name">{{ t_raw('admin.design_templates.name_label') }}</label>
                        <input type="text" class="form-control" id="rc-tpl-name" name="name" maxlength="120" required value="{{ $suggestedName ?? '' }}">
                    </div>
                @endif

                <div class="row g-4 qm-editpreview" data-receipt-editor data-ep-view="edit">
                    @php // Mobile-only Edit ⇄ Preview toggle; desktop shows both columns side by side.
@endphp
                    <div class="col-12 d-lg-none">
                        <div class="qm-seg" role="group" aria-label="{{ t_raw('common.edit') }} / {{ t_raw('common.preview') }}">
                            <button type="button" class="qm-seg-btn active" data-ep-btn="edit" aria-pressed="true"><i class="fas fa-sliders-h" aria-hidden="true"></i> {{ t_raw('common.edit') }}</button>
                            <button type="button" class="qm-seg-btn" data-ep-btn="preview" aria-pressed="false"><i class="fas fa-eye" aria-hidden="true"></i> {{ t_raw('common.preview') }}</button>
                        </div>
                    </div>
                    <!-- Controls -->
                    <div class="col-lg-5 qm-ep-controls">
                        <div class="accordion qm-acc" id="rcAcc">
                            <div class="accordion-item">
                                <h3 class="accordion-header" id="rcH-paper"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#rcC-paper" aria-expanded="true" aria-controls="rcC-paper"><i class="fas fa-print" aria-hidden="true"></i> {{ t_raw('vendor.receipt.sec_paper') }}</button></h3>
                                <div id="rcC-paper" class="accordion-collapse collapse show" aria-labelledby="rcH-paper" data-bs-parent="#rcAcc"><div class="accordion-body">
                            <div class="qm-form-grid">
                                <div>
                                    <label class="form-label" for="rc-width">{{ t_raw('vendor.receipt.paper_width') }}</label>
                                    <select class="form-select" id="rc-width" name="width">
                                        <option value="80"{{ ($rcfg['width'] === '80') ? ' selected' : '' }}>{{ t_raw('vendor.receipt.width_80') }}</option>
                                        <option value="58"{{ ($rcfg['width'] === '58') ? ' selected' : '' }}>{{ t_raw('vendor.receipt.width_58') }}</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="form-label" for="rc-font">{{ t_raw('vendor.receipt.font') }}</label>
                                    <select class="form-select" id="rc-font" name="font_family">
                                        <option value="mono"{{ ($rcfg['font_family'] === 'mono') ? ' selected' : '' }}>{{ t_raw('vendor.receipt.font_mono') }}</option>
                                        <option value="sans"{{ ($rcfg['font_family'] === 'sans') ? ' selected' : '' }}>{{ t_raw('vendor.receipt.font_sans') }}</option>
                                        <option value="serif"{{ ($rcfg['font_family'] === 'serif') ? ' selected' : '' }}>{{ t_raw('vendor.receipt.font_serif') }}</option>
                                        <option value="condensed"{{ ($rcfg['font_family'] === 'condensed') ? ' selected' : '' }}>{{ t_raw('vendor.receipt.font_condensed') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="qm-form-grid mt-3">
                                <div>
                                    <label class="form-label" for="rc-size">{{ t_raw('vendor.receipt.font_size') }}</label>
                                    <select class="form-select" id="rc-size" name="font_size">
                                        <option value="s"{{ ($rcfg['font_size'] === 's') ? ' selected' : '' }}>{{ t_raw('vendor.receipt.size_s') }}</option>
                                        <option value="m"{{ ($rcfg['font_size'] === 'm') ? ' selected' : '' }}>{{ t_raw('vendor.receipt.size_m') }}</option>
                                        <option value="l"{{ ($rcfg['font_size'] === 'l') ? ' selected' : '' }}>{{ t_raw('vendor.receipt.size_l') }}</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="form-label" for="rc-density">{{ t_raw('vendor.receipt.spacing') }}</label>
                                    <select class="form-select" id="rc-density" name="density">
                                        <option value="compact"{{ ($rcfg['density'] === 'compact') ? ' selected' : '' }}>{{ t_raw('vendor.receipt.density_compact') }}</option>
                                        <option value="normal"{{ ($rcfg['density'] === 'normal') ? ' selected' : '' }}>{{ t_raw('vendor.receipt.density_normal') }}</option>
                                        <option value="roomy"{{ ($rcfg['density'] === 'roomy') ? ' selected' : '' }}>{{ t_raw('vendor.receipt.density_roomy') }}</option>
                                    </select>
                                </div>
                            </div>

                                </div></div></div>
                            <div class="accordion-item">
                                <h3 class="accordion-header" id="rcH-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rcC-header" aria-expanded="false" aria-controls="rcC-header"><i class="fas fa-heading" aria-hidden="true"></i> {{ t_raw('vendor.receipt.sec_header') }}</button></h3>
                                <div id="rcC-header" class="accordion-collapse collapse" aria-labelledby="rcH-header" data-bs-parent="#rcAcc"><div class="accordion-body">
                            <label class="qm-switch-row"><span><strong>{{ t_raw('vendor.receipt.show_logo') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="logo" value="1"{!! $rcChk('logo') !!}></label>
                            @if (!$tplMode)
@php // a template carries no header line — DesignTemplate::normalize() blanks it, so offering the box would take a value it then discards; @endphp
                            <div class="mt-2 mb-2">
                                <label class="form-label" for="rc-headline">{{ t_raw('vendor.receipt.header_line') }}</label>
                                <input type="text" class="form-control" id="rc-headline" name="headline" maxlength="80" value="{{ $rcfg['headline'] }}" placeholder="{{ t_raw('vendor.receipt.header_line_ph') }}">
                            </div>
                            @endif
                            <label class="qm-switch-row"><span><strong>{{ t_raw('vendor.receipt.show_address') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="address" value="1"{!! $rcChk('address') !!}></label>
                            <label class="qm-switch-row"><span><strong>{{ t_raw('vendor.receipt.show_phone') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="phone" value="1"{!! $rcChk('phone') !!}></label>
                            <label class="qm-switch-row mb-0"><span><strong>{{ t_raw('vendor.receipt.show_website') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="website" value="1"{!! $rcChk('website') !!}></label>

                                </div></div></div>
                            <div class="accordion-item">
                                <h3 class="accordion-header" id="rcH-order"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rcC-order" aria-expanded="false" aria-controls="rcC-order"><i class="fas fa-receipt" aria-hidden="true"></i> {{ t_raw('vendor.receipt.sec_order') }}</button></h3>
                                <div id="rcC-order" class="accordion-collapse collapse" aria-labelledby="rcH-order" data-bs-parent="#rcAcc"><div class="accordion-body">
                            <label class="qm-switch-row"><span><strong>{{ t_raw('vendor.receipt.show_orderno') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="orderno" value="1"{!! $rcChk('orderno') !!}></label>
                            <label class="qm-switch-row"><span><strong>{{ t_raw('vendor.receipt.show_server') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="server" value="1"{!! $rcChk('server') !!}></label>
                            <label class="qm-switch-row"><span><strong>{{ t_raw('vendor.receipt.show_datetime') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="datetime" value="1"{!! $rcChk('datetime') !!}></label>
                            <label class="qm-switch-row mb-0"><span><strong>{{ t_raw('vendor.receipt.show_ticket') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="ticket" value="1"{!! $rcChk('ticket') !!}></label>

                                </div></div></div>
                            <div class="accordion-item">
                                <h3 class="accordion-header" id="rcH-items"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rcC-items" aria-expanded="false" aria-controls="rcC-items"><i class="fas fa-list-ul" aria-hidden="true"></i> {{ t_raw('vendor.receipt.sec_items') }}</button></h3>
                                <div id="rcC-items" class="accordion-collapse collapse" aria-labelledby="rcH-items" data-bs-parent="#rcAcc"><div class="accordion-body">
                            <label class="qm-switch-row"><span><strong>{{ t_raw('vendor.receipt.show_modifiers') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="modifiers" value="1"{!! $rcChk('modifiers') !!}></label>
                            <label class="qm-switch-row mb-0"><span><strong>{{ t_raw('vendor.receipt.show_item_notes') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="item_notes" value="1"{!! $rcChk('item_notes') !!}></label>

                                </div></div></div>
                            <div class="accordion-item">
                                <h3 class="accordion-header" id="rcH-payment"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rcC-payment" aria-expanded="false" aria-controls="rcC-payment"><i class="fas fa-money-bill-wave" aria-hidden="true"></i> {{ t_raw('vendor.receipt.sec_payment') }}</button></h3>
                                <div id="rcC-payment" class="accordion-collapse collapse" aria-labelledby="rcH-payment" data-bs-parent="#rcAcc"><div class="accordion-body">
                            <label class="qm-switch-row"><span><strong>{{ t_raw('vendor.receipt.show_pay_method') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="pay_method" value="1"{!! $rcChk('pay_method') !!}></label>
                            <label class="qm-switch-row"><span><strong>{{ t_raw('vendor.receipt.show_tip') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="tip" value="1"{!! $rcChk('tip') !!}></label>
                            <label class="qm-switch-row"><span><strong>{{ t_raw('vendor.receipt.show_change') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="change" value="1"{!! $rcChk('change') !!}></label>
                            <label class="qm-switch-row mb-0"><span><strong>{{ t_raw('vendor.receipt.show_tax_number') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="show_tax_number" value="1"{!! $rcChk('show_tax_number') !!}></label>

                                </div></div></div>
                            <div class="accordion-item">
                                <h3 class="accordion-header" id="rcH-footer"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rcC-footer" aria-expanded="false" aria-controls="rcC-footer"><i class="fas fa-shoe-prints" aria-hidden="true"></i> {{ t_raw('vendor.receipt.sec_footer') }}</button></h3>
                                <div id="rcC-footer" class="accordion-collapse collapse" aria-labelledby="rcH-footer" data-bs-parent="#rcAcc"><div class="accordion-body">
                            <div class="mb-2">
                                <label class="form-label" for="rc-footer">{{ t_raw('vendor.receipt.footer_message') }}</label>
                                <input type="text" class="form-control" id="rc-footer" name="footer" maxlength="160" value="{{ $rcfg['footer'] }}" placeholder="{{ t_raw('vendor.receipt.footer_message_ph') }}">
                            </div>
                            <label class="qm-switch-row"><span><strong>{{ t_raw('vendor.receipt.show_qr') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="qr" value="1"{!! $rcChk('qr') !!}></label>
                            <label class="qm-switch-row mb-0"><span><strong>{{ t_raw('vendor.receipt.show_powered') }}</strong></span><input class="form-check-input" type="checkbox" role="switch" name="powered" value="1"{!! $rcChk('powered') !!}></label>

                                </div></div></div>
                            <div class="accordion-item">
                                <h3 class="accordion-header" id="rcH-back"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rcC-back" aria-expanded="false" aria-controls="rcC-back"><i class="fas fa-align-left" aria-hidden="true"></i> {{ t_raw('vendor.receipt.sec_back') }}</button></h3>
                                <div id="rcC-back" class="accordion-collapse collapse" aria-labelledby="rcH-back" data-bs-parent="#rcAcc"><div class="accordion-body">
                            <textarea class="form-control" name="back_text" rows="4" maxlength="600" placeholder="{{ t_raw('vendor.receipt.back_ph') }}">{{ $rcfg['back_text'] }}</textarea>
                                </div></div></div>
                        </div>
                    </div>

                    <!-- Live preview (sticks while the controls scroll) -->
                    <div class="col-lg-7 qm-ep-preview">
                        <div class="qm-card qm-card-pad qm-sticky-preview">
                            <p class="qm-ops-sub mb-3">{{ t_raw('vendor.receipt.preview') }}</p>

                            <div class="qm-ot-k mb-2 text-center">{{ t_raw('vendor.receipt.side_front') }}</div>
                            <div class="qm-card p-0 mx-auto" data-rc-paper style="max-width: {{ \App\Services\Receipt::paperWidth($rcfg) }};">
                                <div class="qm-posm-receipt-body" data-rc-body style="{{ \App\Services\Receipt::previewStyle($rcfg) }}">
                                    <div class="qm-posm-rc-head">
                                        <div class="mb-2" data-rc="logo"{!! $rcOn('logo') !!}>{!! restaurant_logo_html($r, 'md', 'qm-brandmark--round') !!}</div>
                                        <strong>{{ $r['name'] ?? t_raw('common.restaurant') }}</strong>
                                        <div data-rc-textwrap="headline"{{ $rcfg['headline'] !== '' ? '' : ' hidden' }}><span data-rc-text="headline">{{ $rcfg['headline'] }}</span></div>
                                        <p class="mb-0">
                                            <span data-rc="address"{!! $rcOn('address') !!}>{{ $r['address'] ?? '123 Market Street' }}<br></span>
                                            <span data-rc="phone"{!! $rcOn('phone') !!}>{{ $r['phone'] ?? '+1 555 0100' }}<br></span>
                                            <span data-rc="website"{!! $rcOn('website') !!}>{{ $r['website'] ?? 'www.yourrestaurant.com' }}</span>
                                        </p>
                                    </div>
                                    <hr class="qm-posm-rc-rule">
                                    <div class="d-flex justify-content-between" data-rc="orderno"{!! $rcOn('orderno') !!}><span>{{ t_raw('vendor.receipt.lbl_order') }}</span><span>#A-0042</span></div>
                                    <div class="d-flex justify-content-between" data-rc="ticket"{!! $rcOn('ticket') !!}><span>{{ t_raw('vendor.receipt.lbl_table') }}</span><span>{{ t_raw('vendor.receipt.svc_dinein') }} &middot; 5</span></div>
                                    <div class="d-flex justify-content-between" data-rc="server"{!! $rcOn('server') !!}><span>{{ t_raw('vendor.receipt.lbl_server') }}</span><span>Grace S.</span></div>
                                    <div class="d-flex justify-content-between" data-rc="datetime"{!! $rcOn('datetime') !!}><span>{{ t_raw('vendor.receipt.lbl_date') }}</span><span>25 Jul, 7:42 PM</span></div>
                                    <hr class="qm-posm-rc-rule">
                                    <div class="d-flex justify-content-between"><span>1 &times; Margherita Pizza</span><span>{{ $rcCur }}14.00</span></div>
                                    <div class="ps-3" data-rc="modifiers"{!! $rcOn('modifiers') !!}><small class="text-muted">+ Extra cheese</small></div>
                                    <div class="ps-3" data-rc="item_notes"{!! $rcOn('item_notes') !!}><small class="text-muted">{{ t_raw('vendor.receipt.sample_note') }}</small></div>
                                    <div class="d-flex justify-content-between"><span>2 &times; Garlic Bread</span><span>{{ $rcCur }}9.00</span></div>
                                    <div class="d-flex justify-content-between"><span>1 &times; Sparkling Water</span><span>{{ $rcCur }}3.00</span></div>
                                    <hr class="qm-posm-rc-rule">
                                    <div class="d-flex justify-content-between"><span>{{ t_raw('checkout.subtotal') }}</span><span>{{ $rcCur }}26.00</span></div>
                                    <div class="d-flex justify-content-between"><span>{{ t_raw('checkout.tax') }}</span><span>{{ $rcCur }}2.34</span></div>
                                    <div class="d-flex justify-content-between" data-rc="tip"{!! $rcOn('tip') !!}><span>{{ t_raw('checkout.tip') }}</span><span>{{ $rcCur }}3.00</span></div>
                                    <div class="d-flex justify-content-between"><strong>{{ t_raw('common.total') }}</strong><strong>{{ $rcCur }}31.34</strong></div>
                                    <hr class="qm-posm-rc-rule">
                                    <div class="d-flex justify-content-between" data-rc="pay_method"{!! $rcOn('pay_method') !!}><span>{{ t_raw('vendor.receipt.lbl_paid') }} &mdash; {{ t_raw('status.payment_method.cash') }}</span><span>{{ $rcCur }}40.00</span></div>
                                    <div class="d-flex justify-content-between" data-rc="change"{!! $rcOn('change') !!}><span>{{ t_raw('vendor.receipt.lbl_change') }}</span><span>{{ $rcCur }}8.66</span></div>
                                    @php /* Same ?? guard as the address / phone / website lines above: $r is a
                                             restaurant-SHAPED array here, and the sample backdrop the template
                                             designer falls back to (DesignTemplateController::sampleRestaurant)
                                             carries no tax_number at all, so the bare index warned into the page. */
@endphp
                                    <p class="text-center mt-2 mb-0" data-rc="show_tax_number"{!! $rcOn('show_tax_number') !!}><small>{{ ($r['tax_number'] ?? '') ?: 'VAT 12-3456789' }}</small></p>
                                    <hr class="qm-posm-rc-rule">
                                    <div class="qm-posm-rc-head">
                                        <p class="mb-0" data-rc-textwrap="footer"{{ $rcfg['footer'] !== '' ? '' : ' hidden' }}><span data-rc-text="footer">{{ $rcfg['footer'] }}</span></p>
                                        <div class="my-2" data-rc="qr"{!! $rcOn('qr') !!}><span data-rc-qr data-qr-text="{{ $rcQr }}" class="d-inline-block"></span></div>
                                        <p class="mb-0" data-rc="powered"{!! $rcOn('powered') !!}>{{ t_raw('vendor.receipt.powered_by') }} {{ setting('site_name', 'QuickMunch') }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="qm-ot-k mb-2 mt-4 text-center">{{ t_raw('vendor.receipt.side_back') }}</div>
                            <div class="qm-card p-0 mx-auto" data-rc-paper data-rc-textwrap="back_text" style="max-width: {{ \App\Services\Receipt::paperWidth($rcfg) }};"{{ $rcfg['back_text'] !== '' ? '' : ' hidden' }}>
                                <div class="qm-posm-receipt-body" data-rc-body style="{{ \App\Services\Receipt::previewStyle($rcfg) }}">
                                    <div class="qm-posm-rc-head"><strong>{{ $r['name'] ?? t_raw('common.restaurant') }}</strong></div>
                                    <hr class="qm-posm-rc-rule">
                                    <p class="text-center mb-0"><small data-rc-text="back_text">{!! nl2br(e($rcfg['back_text'])) !!}</small></p>
                                </div>
                            </div>

                            <p class="qm-ops-sub mt-3 mb-0"><small>{{ t_raw('vendor.receipt.preview_note') }}</small></p>
                        </div>
                    </div>
                </div>

                @php /* The same component every printable surface uses. No multiple-per-sheet:
                         a thermal roll has no sheet to put several on. Test print is here and
                         nowhere else, because only this output targets fixed hardware. */
@endphp
                <div class="d-flex justify-content-end gap-2 mt-4">
                    @partial('print-actions', ['target' => '.qm-posm-receipt-body',
                        'name' => 'receipt', 'nup' => false, 'test' => true])
                    <button type="submit" class="qm-btn">{{ t_raw('vendor.receipt.save_btn') }}</button>
                </div>
            </form>
@endsection