{{--
    A run of shop-printed barcode labels, as a bare document.

    Every label is laid out at its real physical size in millimetres, because
    that is the only unit a label printer respects — a design that looks right
    on screen but is sized in pixels comes off the roll cropped.

    The `@page` size is set from the same numbers, with zero margin: roll stock
    IS the page, so any margin the browser adds is stock the printer skips.
    The A4 option is the exception — there the page is a real A4 sheet and the
    labels tile across it in a grid.
--}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Barcode labels</title>
    <style>
        @php
            $w = $size['width'];
            $h = $size['height'];
            $isSheet = $sizeKey === 'a4';
        @endphp

        @page {
            size: {{ $isSheet ? 'A4' : $w.'mm '.$h.'mm' }};
            margin: {{ $isSheet ? '8mm 5mm' : '0' }};
        }

        * { box-sizing: border-box; }

        html, body {
            margin: 0;
            padding: 0;
            background: #f3f4f6;
            font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
            color: #111827;
        }

        .toolbar {
            position: sticky;
            top: 0;
            display: flex;
            align-items: center;
            gap: .75rem;
            padding: .75rem 1rem;
            background: #111827;
            color: #fff;
            font-size: 13px;
        }

        .toolbar button {
            font: inherit;
            font-weight: 600;
            padding: .4rem .9rem;
            border: 0;
            border-radius: 6px;
            background: #f59e0b;
            color: #111827;
            cursor: pointer;
        }

        .toolbar .muted { opacity: .75; }

        .sheet {
            display: {{ $isSheet ? 'grid' : 'block' }};
            @if ($isSheet)
            grid-template-columns: repeat(3, {{ $w }}mm);
            gap: 0;
            justify-content: center;
            @endif
            padding: {{ $isSheet ? '8mm 5mm' : '0' }};
        }

        .label {
            width: {{ $w }}mm;
            height: {{ $h }}mm;
            padding: {{ $h >= 40 ? '3mm' : '1.5mm' }};
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            background: #fff;
            /* Screen-only guides so the operator can see where each label ends;
               removed for print so no border lands on the stock. */
            outline: 1px dashed #d1d5db;
            outline-offset: -1px;
            /* A label must never be split across two pages of stock. */
            break-inside: avoid;
            page-break-inside: avoid;
        }

        @if (! $isSheet)
        /* One label per page on roll stock. */
        .label { break-after: page; page-break-after: always; }
        .label:last-child { break-after: auto; page-break-after: auto; }
        @endif

        .label .name {
            width: 100%;
            text-align: center;
            font-weight: 700;
            font-size: {{ $h >= 40 ? '11pt' : '7.5pt' }};
            line-height: 1.1;
            /* Two lines of product name, then ellipsis — a long name must
               never push the barcode off the label. */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .label .meta {
            width: 100%;
            text-align: center;
            font-size: {{ $h >= 40 ? '8pt' : '5.5pt' }};
            line-height: 1.2;
            color: #374151;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .label .price {
            font-weight: 800;
            font-size: {{ $h >= 40 ? '13pt' : '9pt' }};
            line-height: 1;
        }

        .label .barcode {
            width: 100%;
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* The generator emits a fixed-size SVG; these make it scale to the
           label instead of overflowing it. */
        .label .barcode svg {
            width: 100%;
            height: 100%;
            max-height: {{ $h >= 40 ? '16mm' : '9mm' }};
            display: block;
        }

        .label .code {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: {{ $h >= 40 ? '8pt' : '5.5pt' }};
            letter-spacing: .04em;
        }

        @media print {
            html, body { background: #fff; }
            .toolbar { display: none; }
            .sheet { padding: 0; }
            .label { outline: none; }
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <button type="button" onclick="window.print()">Print</button>
        <span class="muted">
            {{ $labels->count() }} {{ Str::plural('label', $labels->count()) }}
            &times; {{ $copies }} {{ Str::plural('copy', $copies) }}
            &mdash; {{ $size['label'] }}
        </span>
        <span class="muted">Set your printer's paper to the same size, and scale to 100%.</span>
    </div>

    <div class="sheet">
        @foreach ($labels as $label)
            @php
                // The lot is the price owner, so a pinned lot is the only thing
                // that can put a figure on the label. A label with no lot (a
                // unified-pool product) prints without one rather than guessing
                // a price the till would then contradict.
                $unitPrice = $label->batch?->sale_price;
                $linePrice = $unitPrice !== null
                    ? (float) $unitPrice * (float) $label->base_quantity
                    : null;
            @endphp

            @for ($copy = 0; $copy < $copies; $copy++)
                <div class="label">
                    <div class="name">{{ $label->displayName() }}</div>

                    <div class="meta">
                        {{ $label->quantityLabel() }}
                        @if ($label->serial)
                            &middot; SN {{ $label->serial->serial_number }}
                        @elseif ($label->batch?->internal_batch_number)
                            &middot; {{ $label->batch->internal_batch_number }}
                        @endif
                        @if ($label->batch?->expiry_date)
                            &middot; exp {{ $label->batch->expiry_date->format('Y-m-d') }}
                        @endif
                    </div>

                    @if ($linePrice !== null)
                        <div class="price">{{ $currency }} {{ number_format($linePrice, 2) }}</div>
                    @endif

                    <div class="barcode">{!! $svgByCode[$label->code] !!}</div>

                    <div class="code">{{ $label->code }}</div>
                </div>
            @endfor
        @endforeach
    </div>

    <script>
        // Opens the print dialog once the sheet has actually laid out. The
        // barcodes are inline SVG, so there is nothing left to load — but a
        // frame of layout still has to happen before the browser measures the
        // page, and printing before that yields a blank first label.
        window.addEventListener('load', () => requestAnimationFrame(() => window.print()));
    </script>
</body>
</html>
