{{--
    80mm thermal receipt — the same InvoiceDocument the A4 layout renders, laid
    out for a 72mm printable width. Monochrome and monospace by design: thermal
    heads print no colour and receipt fonts are fixed-pitch, so alignment has to
    come from character cells rather than from table widths.

    Like A4: `preview => true` renders the letterhead fields unconditionally
    behind data-* markers so the Master Control bridge can repaint them as the
    landlord types; the print keeps its server-side @if guards, and amounts are
    wrapped in data-inv-amount spans in both modes. Only the TOTAL carries the
    currency symbol — the column is too narrow to repeat it per row.
--}}
@php
    $isPreview = $preview ?? false;
    $contacts = $doc->business->contactLines();
    $reg = $doc->business->registrationLines();
    $showBalance = $doc->netTotal - $doc->paidAmount > 0.005;
    $branchAddress = $doc->printedBranches()[0]['address'] ?? null;
    $barcode = $doc->barcodeSvg();
@endphp

<style>
    .inv-80 { width: 72mm; margin: 0 auto; background: #fff; color: #000;
        font-family: "Cascadia Mono", "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;
        font-size: 8.5pt; line-height: 1.35; padding: 3mm 2mm 6mm; }
    .inv-80 * { box-sizing: border-box; }
    .inv-80 p { margin: 0; }
    .inv-80 .c { text-align: center; }
    .inv-80 .r { text-align: right; }
    .inv-80 .b { font-weight: 700; }
    .inv-80 .logo { display: block; margin: 0 auto 2mm; max-width: 34mm; max-height: 16mm; object-fit: contain;
        filter: grayscale(1) contrast(1.4); }
    .inv-80 .shop { font-size: 11pt; font-weight: 700; line-height: 1.2; }
    .inv-80 .tagline { font-size: 7.5pt; }
    .inv-80 .small { font-size: 7.5pt; }
    .inv-80 .rule { border-top: 1px dashed #000; margin: 2mm 0; }
    .inv-80 .rule-solid { border-top: 1px solid #000; margin: 2mm 0; }
    .inv-80 .kv { display: flex; justify-content: space-between; gap: 4mm; }
    .inv-80 .kv span:last-child { text-align: right; white-space: nowrap; }
    .inv-80 .item { margin-top: 1.5mm; }
    .inv-80 .item-name { font-weight: 700; word-break: break-word; }
    .inv-80 .item-sub { font-size: 7pt; padding-left: 2mm; }
    .inv-80 .grand { font-size: 11pt; font-weight: 700; }
    .inv-80 .note { font-size: 7pt; margin-top: 2mm; }
    .inv-80 .sample { margin-top: 3mm; border: 1px dashed #000; padding: 1.5mm; font-size: 7pt; text-align: center; }
    .inv-80 .barcode { margin: 2mm 0; text-align: center; }
    .inv-80 .barcode svg { width: 60mm; height: 14mm; }
</style>

<div class="inv-80">
    @if ($doc->business->logo !== null)
        <img class="logo" src="{{ $doc->business->logo }}" alt="" />
    @endif

    <p class="c shop" data-inv-bind="business_name">{{ $doc->business->displayName() }}</p>

    @if ($isPreview || $doc->business->description !== null)
        <p class="c tagline" data-inv-bind="business_description">{{ $doc->business->description }}</p>
    @endif

    @if ($isPreview || $doc->business->address !== null)
        <p class="c small" data-inv-bind="business_address">{{ $doc->business->address }}</p>
    @endif

    @if (! empty($branchAddress))
        <p class="c small">{{ $branchAddress }}</p>
    @endif

    @if ($isPreview)
        <p class="c small" data-inv-bind="business_phone" data-inv-prefix="Tel: ">Tel: {{ $doc->business->phone }}</p>
        <p class="c small" data-inv-bind="business_email" data-inv-prefix="Email: ">Email: {{ $doc->business->email }}</p>
        <p class="c small" data-inv-bind="business_website" data-inv-prefix="Web: ">Web: {{ $doc->business->website }}</p>
    @else
        @foreach ($contacts as $contact)
            <p class="c small">{{ $contact['label'] }}: {{ $contact['value'] }}</p>
        @endforeach
    @endif

    @if ($isPreview)
        <p class="c small" data-inv-bind="business_registration_no" data-inv-prefix="Reg. No: ">Reg. No: {{ $doc->business->registrationNo }}</p>
        <p class="c small" data-inv-bind="tax_registration_no" data-inv-prefix="VAT/TIN: ">VAT/TIN: {{ $doc->business->taxRegistrationNo }}</p>
    @else
        @foreach ($reg as $line)
            <p class="c small">{{ $line['label'] }}: {{ $line['value'] }}</p>
        @endforeach
    @endif

    <div class="rule-solid"></div>

    <p class="c b" data-inv-title="upper">{{ strtoupper($doc->title()) }}</p>

    <div class="rule"></div>

    <div class="kv small"><span>No</span><span class="b">{{ $doc->number }}</span></div>
    <div class="kv small"><span>Date</span><span>{{ $doc->issuedAt }}</span></div>
    @if ($doc->physicalReference !== null)
        <div class="kv small"><span>Book ref</span><span>{{ $doc->physicalReference }}</span></div>
    @endif
    @if (! empty($doc->meta['rep']))
        <div class="kv small"><span>Served by</span><span>{{ $doc->meta['rep'] }}</span></div>
    @endif
    @if (! empty($doc->customer['isRegistered']))
        <div class="kv small"><span>Customer</span><span>{{ $doc->customer['name'] }}</span></div>
        @if (! empty($doc->customer['phone']))
            <div class="kv small"><span>{{ $doc->customer['phone'] }}</span></div>
        @endif
    @endif

    @if ($barcode !== '')
        <div class="barcode">{!! $barcode !!}</div>
    @endif

    <div class="rule-solid"></div>

    @foreach ($doc->lines as $line)
        <div class="item">
            <p class="item-name">{{ $line->name }}</p>

            <div class="kv">
                <span>{{ $line->quantityLabel() }} × <span data-inv-amount="{{ $line->unitPrice }}">{{ number_format($line->unitPrice, 2) }}</span></span>
                <span data-inv-amount="{{ $line->grossTotal }}">{{ number_format($line->grossTotal, 2) }}</span>
            </div>

            @if ($line->hasDiscount())
                <div class="kv item-sub">
                    <span>Discount {{ $line->discountLabel() }}</span>
                    <span data-inv-amount="-{{ $line->discountAmount }}">-{{ number_format($line->discountAmount, 2) }}</span>
                </div>
                <div class="kv">
                    <span></span>
                    <span class="b" data-inv-amount="{{ $line->lineTotal }}">{{ number_format($line->lineTotal, 2) }}</span>
                </div>
            @endif

            @foreach ($line->traceLines() as $trace)
                <p class="item-sub">{{ $trace }}</p>
            @endforeach
        </div>
    @endforeach

    <div class="rule-solid"></div>

    <div class="kv"><span>Subtotal</span><span data-inv-amount="{{ $doc->grossSubtotal }}">{{ number_format($doc->grossSubtotal, 2) }}</span></div>

    @if ($doc->lineDiscountTotal > 0)
        <div class="kv"><span>Line discounts</span><span data-inv-amount="-{{ $doc->lineDiscountTotal }}">-{{ number_format($doc->lineDiscountTotal, 2) }}</span></div>
    @endif

    @foreach ($doc->discountBreakdown as $discount)
        <div class="kv small"><span>{{ $discount['label'] }}</span><span data-inv-amount="-{{ $discount['amount'] }}">-{{ number_format($discount['amount'], 2) }}</span></div>
    @endforeach

    @if ($doc->hasVatBreakdown())
        @foreach ($doc->vatBreakdown as $vat)
            <div class="kv small">
                <span>VAT {{ rtrim(rtrim(number_format($vat['rate'], 2, '.', ''), '0'), '.') }}% on {{ number_format($vat['base'], 2) }}</span>
                <span data-inv-amount="{{ $vat['vat'] }}">{{ number_format($vat['vat'], 2) }}</span>
            </div>
        @endforeach
    @elseif ($doc->business->vatEnabled && $doc->vatTotal > 0)
        <div class="kv"><span>VAT</span><span data-inv-amount="{{ $doc->vatTotal }}">{{ number_format($doc->vatTotal, 2) }}</span></div>
    @endif

    <div class="rule-solid"></div>

    <div class="kv grand">
        <span>TOTAL</span>
        <span data-inv-amount="{{ $doc->netTotal }}" data-inv-symbol="1">{{ $doc->currencySymbol }} {{ number_format($doc->netTotal, 2) }}</span>
    </div>

    <div class="rule"></div>

    @foreach ($doc->payments as $payment)
        <div class="kv">
            <span>{{ $payment['method'] }}{{ $payment['pending'] ? ' (pending)' : '' }}</span>
            <span data-inv-amount="{{ $payment['amount'] }}">{{ number_format($payment['amount'], 2) }}</span>
        </div>
        @if ($payment['reference'] !== null)
            <p class="item-sub">{{ $payment['reference'] }}</p>
        @endif
    @endforeach

    @if ($doc->hasChangeReturned())
        <div class="kv b"><span>Tendered</span><span data-inv-amount="{{ $doc->tenderedAmount }}">{{ number_format($doc->tenderedAmount, 2) }}</span></div>
        <div class="kv b"><span>Change given</span><span data-inv-amount="{{ $doc->changeAmount }}">{{ number_format($doc->changeAmount, 2) }}</span></div>
    @endif

    <div class="kv b"><span>Paid</span><span data-inv-amount="{{ $doc->paidAmount }}">{{ number_format($doc->paidAmount, 2) }}</span></div>

    @if ($showBalance)
        <div class="kv b"><span>BALANCE DUE</span><span data-inv-amount="{{ $doc->balance }}">{{ number_format($doc->balance, 2) }}</span></div>
    @endif

    @if ($doc->hasPendingTender())
        <p class="note">* Pending tenders are not settled until cleared.</p>
    @endif

    <div class="rule"></div>

    @if ($doc->note !== null)
        <p class="note">{{ $doc->note }}</p>
    @endif

    <p class="c small" style="margin-top:3mm">Thank you for your business</p>
    <p class="c small" style="margin-top:1.5mm">Come again!</p>
    <p class="c small" style="margin-top:1.2mm">Software by Vellix Global | +94 77 320 8478</p>

    @if ($doc->isSample)
        <div class="sample">SAMPLE PREVIEW — nothing was sold</div>
    @endif
</div>
