@extends('layouts.authenticated')

@section('title', 'Preview Label Barcode')
@section('page-title', 'Preview Label Barcode')

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
@endpush

@php
    $paperDimensions = [
        '30x40' => ['width' => 30, 'height' => 40, 'label' => '30mm x 40mm'],
        '50x30' => ['width' => 50, 'height' => 30, 'label' => '50mm x 30mm'],
        '60x40' => ['width' => 60, 'height' => 40, 'label' => '60mm x 40mm'],
        '80x50' => ['width' => 80, 'height' => 50, 'label' => '80mm x 50mm'],
        'A4' => ['width' => 210, 'height' => 297, 'label' => 'A4'],
    ];
    $currentPaper = $paperDimensions[$paperSize] ?? $paperDimensions['30x40'];
    $paperWidth = $currentPaper['width'];
    $paperHeight = $currentPaper['height'];
    $paperLabel = $currentPaper['label'];
    $isThermalDirect = in_array($paperSize, ['30x40', '50x30'], true);
    
    // Preview uses the same aspect ratio as the print size.
    $previewScale = 7.2;
    $previewW = (int) round($paperWidth * $previewScale);
    $previewH = (int) round($paperHeight * $previewScale);
@endphp

@section('page-content')
<div class="space-y-6 animate-fade-in print:space-y-0">
    <div class="flex items-center justify-between print:hidden">
        <div>
            <h1 class="text-xl font-semibold text-slate-900 dark:text-white">Preview Label Barcode</h1>
            <p class="text-slate-500 dark:text-slate-400 mt-1 text-sm">{{ $products->count() }} produk × {{ $quantity }} label · {{ $paperLabel }}</p>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('labels.index') }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 font-medium rounded-lg transition-colors text-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                Kembali
            </a>
            <button type="submit" form="print-label-form" formtarget="_blank" class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors text-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
                Cetak Label
            </button>
        </div>
    </div>

    <!-- Labels Grid -->
    <div class="preview-shell bg-white rounded-xl border border-gray-200 dark:border-slate-700 p-8 print:border-none print:p-0 print:shadow-none print:m-0">
        <div class="print-area flex flex-col items-center gap-6 py-4 print:py-0 print:gap-0 print:mx-0 print:px-0">
            @php $labelIndex = 0; @endphp
            @php $isQrBarcode = $barcodeType === 'QR'; @endphp
            @foreach($products as $product)
                @for($i = 0; $i < $quantity; $i++)
                @php
                    $price = $product->price ?? 0;
                @endphp
                @if($isThermalDirect)
                <div class="thermal-page">
                    <div class="label-card thermal-label-card bg-white" style="width: {{ $previewW }}px; height: {{ $previewH }}px; border: 1px solid #e5e7eb;">
                        @if($paperSize === '30x40' && $isQrBarcode)
                        <!-- Layout seperti gambar referensi untuk 30x40mm QR -->
                        <div class="ref-30x40-qr-label">
                            <!-- Product Name di atas -->
                            <div class="ref-product-name">
                                {{ strtoupper($product->name) }}
                            </div>
                            
                            <!-- QR Code dengan badge di tengah -->
                            <div class="ref-qr-container">
                                <div class="qr-{{ $labelIndex }}"></div>
                                @if(!empty($storeLogo))
                                    <div class="ref-qr-badge ref-qr-badge--logo">
                                        <img src="{{ $storeLogo }}" alt="{{ $storeName ?? 'Logo toko' }}" class="ref-qr-logo">
                                    </div>
                                @else
                                    <div class="ref-qr-badge ref-qr-badge--text">
                                        {{ $storeName ?? 'ABBA BENDO' }}
                                    </div>
                                @endif
                            </div>
                            
                            <!-- Price di bawah -->
                            <div class="ref-price-text">
                                <span class="ref-price-prefix">Rp.</span>
                                <span class="ref-price-value">{{ number_format($price, 0, ',', '.') }}</span>
                            </div>
                        </div>
                        @else
                        <div class="thermal-row h-full w-full">
                            <div class="thermal-main">
                                <p class="thermal-price">Rp {{ number_format($price, 0, ',', '.') }}</p>
                                <p class="thermal-name">{{ $product->name }}</p>
                                <div class="thermal-spacer"></div>
                                @if(isset($notes) && $notes)
                                <p class="thermal-note">{{ $notes }}</p>
                                @elseif($product->notes)
                                <p class="thermal-note">{{ $product->notes }}</p>
                                @endif
                            </div>

                        <div class="thermal-barcode">
                            @if($isQrBarcode)
                            <div class="qr-{{ $labelIndex }}" style="width: 60px; height: 60px;"></div>
                            @else
                            <svg class="barcode-{{ $labelIndex }}" style="width: 64px; height: 24px;"></svg>
                            @endif
                            <p class="barcode-number">{{ preg_replace('/^ABBA/i', '', $product->barcode ?? '') }}</p>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                @else
                <div class="label-card bg-white" style="width: {{ $previewW }}px; height: {{ $previewH }}px; border: 1px solid #e5e7eb;">
                    <div class="flex items-stretch h-full w-full">
                        <!-- Left: Price (bold, large) -->
                        <div class="label-content flex flex-col flex-1" style="overflow: hidden;">
                            <p class="text-2xl font-black text-slate-900 leading-none mb-1">Rp {{ number_format($price, 0, ',', '.') }}</p>
                            <!-- Product Name (smaller) -->
                            <p class="product-name text-sm font-semibold text-slate-800 leading-tight mb-0.5">{{ $product->name }}</p>
                            <!-- Tagline (smallest) -->
                            @if(isset($notes) && $notes)
                            <p class="text-[8px] text-slate-500 italic leading-tight mt-0.5 tagline-text">{{ $notes }}</p>
                            @elseif($product->notes)
                            <p class="text-[8px] text-slate-500 italic leading-tight mt-0.5 tagline-text">{{ $product->notes }}</p>
                            @endif
                        </div>

                        <!-- Right: QR Code -->
                        <div class="flex flex-col items-center justify-center flex-shrink-0">
                            <div class="qr-{{ $labelIndex }}" style="width: 60px; height: 60px;"></div>
                            <p class="text-[7px] font-mono text-slate-500 leading-none mt-0.5 truncate text-center" style="max-width: 60px;">{{ preg_replace('/^ABBA/i', '', $product->barcode ?? '') }}</p>
                        </div>
                    </div>
                </div>
                @endif
                @php $labelIndex++; @endphp
                @endfor
            @endforeach
        </div>
    </div>

    <form id="print-label-form" method="POST" action="{{ route('labels.print') }}" target="_blank" class="hidden">
        @csrf
        @foreach($products as $product)
            <input type="hidden" name="product_ids[]" value="{{ $product->id }}">
        @endforeach
        <input type="hidden" name="quantity" value="{{ $quantity }}">
        <input type="hidden" name="barcode_type" value="{{ $barcodeType }}">
        <input type="hidden" name="paper_size" value="{{ $paperSize }}">
        <input type="hidden" name="notes" value="{{ $notes ?? '' }}">
    </form>

    <!-- Print Styles -->
    <style>
        @media screen {
            .preview-shell {
                background:
                    linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.96));
            }

            .print-area {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(340px, max-content));
                justify-content: center;
                gap: 1.5rem;
            }

            .label-card {
                border-radius: 18px;
                border: 1px solid #dbe4ee !important;
                box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
                overflow: visible;
            }

            .label-card > .flex {
                height: 100%;
                padding: 1rem 1.1rem;
                gap: 0.9rem;
                align-items: stretch;
            }

            .label-card .label-content {
                padding: 0;
                max-width: calc(100% - 76px);
                justify-content: flex-start;
            }

            .label-card .text-2xl {
                font-size: 1.75rem;
                line-height: 1;
                margin-bottom: 0.45rem;
                letter-spacing: -0.04em;
            }

            .label-card .product-name {
                font-size: 0.95rem;
                line-height: 1.2;
                margin-bottom: 0;
                color: #0f172a;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }

            .label-card .tagline-text,
            .label-card .text-\[7px\].tagline-text {
                font-size: 0.75rem;
                line-height: 1.2;
                color: #64748b;
                margin-top: auto;
                padding-top: 0.35rem;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }

            .label-card .flex-shrink-0 {
                width: 76px;
                min-width: 76px;
                max-width: 76px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            .label-card .flex-shrink-0 [class^="qr-"],
            .label-card .flex-shrink-0 [class^="qr-"] canvas,
            .label-card .flex-shrink-0 [class^="qr-"] img {
                width: 64px !important;
                height: 64px !important;
            }

            .label-card .text-\[7px\].font-mono {
                font-size: 0.56rem;
                max-width: 76px;
                color: #64748b;
            }

            .thermal-label-card {
                border-radius: 14px;
                overflow: hidden;
            }

            /* Layout baru untuk 30x40mm QR Code seperti gambar referensi */
            .ref-30x40-qr-label {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                padding: 2mm 1.5mm;
                box-sizing: border-box;
                gap: 1.5mm;
            }

            .ref-product-name {
                width: 100%;
                text-align: center;
                font-size: 7.5pt;
                font-weight: 900;
                letter-spacing: 0.5px;
                color: #000;
                text-transform: uppercase;
                line-height: 1.1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                overflow-wrap: anywhere;
                word-break: break-word;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                flex: 0 0 auto;
            }

            .ref-qr-container {
                position: relative;
                width: 24mm;
                height: 24mm;
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1 1 auto;
                min-height: 0;
            }

            .ref-qr-container [class^="qr-"],
            .ref-qr-container [class^="qr-"] canvas,
            .ref-qr-container [class^="qr-"] img {
                width: 24mm !important;
                height: 24mm !important;
                position: relative;
                z-index: 1;
            }

            .ref-qr-badge {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: fit-content;
                height: fit-content;
                min-width: 0;
                min-height: 0;
                padding: 0;
                z-index: 2;
                line-height: 1;
            }

            .ref-qr-badge--logo {
                background: #fff;
                width: 8.4mm;
                height: 8.4mm;
                padding: 0;
                border: 0.15mm solid #111;
                box-shadow: 0 0 0 0.1mm #fff;
                box-sizing: border-box;
                overflow: hidden;
            }

            .ref-qr-badge--text {
                background: #000;
                color: #fff;
                font-size: 4.2pt;
                font-weight: 900;
                letter-spacing: 0.5px;
                text-align: center;
                text-transform: uppercase;
                white-space: nowrap;
            }

            .ref-qr-logo {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .ref-price-text {
                color: #111827;
                line-height: 1;
                text-align: center;
                flex: 0 0 auto;
            }

            .ref-price-prefix {
                font-size: 4.5pt;
                font-weight: 700;
                letter-spacing: 0;
                margin-right: 0.5mm;
                vertical-align: middle;
            }

            .ref-price-value {
                font-size: 9pt;
                font-weight: 900;
                white-space: nowrap;
                vertical-align: middle;
            }

            .thermal-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.75rem;
                height: 100%;
                width: 100%;
                padding: 0.75rem 0.85rem;
                box-sizing: border-box;
            }

            .thermal-main {
                display: flex;
                flex-direction: column;
                justify-content: center;
                min-width: 0;
                flex: 1 1 auto;
                overflow: hidden;
            }

            .thermal-price {
                font-size: 1rem;
                line-height: 1;
                font-weight: 900;
                color: #0f172a;
                margin: 0 0 0.25rem 0;
            }

            .thermal-name {
                font-size: 0.78rem;
                line-height: 1.15;
                font-weight: 700;
                color: #1f2937;
                margin: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .thermal-note {
                font-size: 0.56rem;
                line-height: 1.1;
                color: #64748b;
                margin: 0.2rem 0 0 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .thermal-barcode {
                flex: 0 0 80px;
                width: 80px;
                min-width: 80px;
                max-width: 80px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }

            .thermal-barcode svg {
                width: 64px;
                height: 24px;
            }

            .thermal-barcode [class^="qr-"],
            .thermal-barcode [class^="qr-"] canvas,
            .thermal-barcode [class^="qr-"] img {
                width: 54px !important;
                height: 54px !important;
            }

            .thermal-barcode .barcode-number {
                font-size: 0.48rem;
                line-height: 1;
                margin-top: 0.15rem;
                color: #64748b;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        @media screen and (max-width: 640px) {
            .print-area {
                grid-template-columns: 1fr;
            }

            .label-card {
                width: 100% !important;
                max-width: 100%;
                height: auto !important;
                min-height: 144px;
            }
        }

        @page {
            size: {{ $paperWidth }}mm {{ $paperHeight }}mm;
            margin: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding: 0 !important;
        }

        @media print {
            /* Hide sidebar and topbar */
            aside, header {
                display: none !important;
            }
            /* Enforce print:hidden utility */
            .print\:hidden {
                display: none !important;
            }

            /* Remove all margins for print */
            html, body {
                margin: 0 !important;
                padding: 0 !important;
                width: {{ $paperWidth }}mm !important;
                min-width: {{ $paperWidth }}mm !important;
                max-width: {{ $paperWidth }}mm !important;
                height: auto !important;
                overflow: visible !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                transform: none !important;
                zoom: 1 !important;
            }

            * {
                box-sizing: border-box !important;
            }

            /* Reset all parent container margins and padding */
            .space-y-6,
            .space-y-6 > div,
            .space-y-6 > div > div,
            .bg-white.rounded-xl,
            .bg-white.rounded-xl > div,
            .print-area,
            .print-area > *,
            .page-content,
            .page-content > *,
            main,
            main > *,
            .min-h-screen,
            .flex-1 {
                margin: 0 !important;
                padding: 0 !important;
            }

            .print-area {
                display: block !important;
                margin: 0 !important;
                padding: 0 !important;
                width: {{ $paperWidth }}mm !important;
                min-width: {{ $paperWidth }}mm !important;
                max-width: {{ $paperWidth }}mm !important;
                top: 0 !important;
                transform: none !important;
                zoom: 1 !important;
            }

            /* Label card {{ $paperLabel }} */
            .label-card {
                width: {{ $paperWidth }}mm !important;
                min-width: {{ $paperWidth }}mm !important;
                max-width: {{ $paperWidth }}mm !important;
                height: {{ $paperHeight }}mm !important;
                padding: 0 !important;
                margin: 0 !important;
                margin-top: 0 !important;
                border: 1px solid #000 !important;
                box-shadow: none !important;
                page-break-after: always !important;
                break-after: page !important;
                page-break-inside: avoid !important;
                display: flex !important;
                overflow: hidden !important;
                background: white !important;
                box-sizing: border-box !important;
                position: relative !important;
                transform: none !important;
                zoom: 1 !important;
            }

            /* First label card - no top margin */
            .label-card:first-child,
            .label-card:first-of-type {
                margin-top: 0 !important;
                padding-top: 0 !important;
            }

            .print-area > *:first-child {
                margin-top: 0 !important;
                padding-top: 0 !important;
            }

            .label-card > .flex {
                height: {{ $paperHeight }}mm !important;
                width: 100% !important;
                padding: 1mm !important;
                gap: 1mm !important;
                align-items: stretch !important;
                justify-content: space-between !important;
            }
            .label-card:last-child {
                page-break-after: auto !important;
            }

            .thermal-label-card {
                display: block !important;
                box-sizing: border-box !important;
                border: none !important;
                box-shadow: inset 0 0 0 0.25mm #000 !important;
            }

            /* Layout 30x40mm QR Code - Print Version */
            .ref-30x40-qr-label {
                width: 100% !important;
                height: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: space-between !important;
                padding: 2mm 1.5mm !important;
                box-sizing: border-box !important;
                gap: 1.5mm !important;
            }

            .ref-product-name {
                width: 100% !important;
                text-align: center !important;
                font-size: 7pt !important;
                font-weight: 900 !important;
                letter-spacing: 0.5px !important;
                color: #000 !important;
                text-transform: uppercase !important;
                line-height: 1.1 !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: normal !important;
                overflow-wrap: anywhere !important;
                word-break: break-word !important;
                display: -webkit-box !important;
                -webkit-box-orient: vertical !important;
                -webkit-line-clamp: 2 !important;
                flex: 0 0 auto !important;
            }

            .ref-qr-container {
                position: relative !important;
                width: 24mm !important;
                height: 24mm !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                flex: 1 1 auto !important;
                min-height: 0 !important;
            }

            .ref-qr-container [class^="qr-"],
            .ref-qr-container [class^="qr-"] canvas,
            .ref-qr-container [class^="qr-"] img {
                width: 24mm !important;
                height: 24mm !important;
                position: relative !important;
                z-index: 1 !important;
            }

            .ref-qr-badge {
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                transform: translate(-50%, -50%) !important;
                width: fit-content !important;
                height: fit-content !important;
                min-width: 0 !important;
                min-height: 0 !important;
                padding: 0 !important;
                z-index: 2 !important;
                line-height: 1 !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                overflow: visible !important;
            }

            .ref-qr-badge--logo {
                background: #fff !important;
                width: 8.4mm !important;
                height: 8.4mm !important;
                padding: 0 !important;
                border: 0.15mm solid #111 !important;
                box-shadow: 0 0 0 0.1mm #fff !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
            }

            .ref-qr-badge--text {
                background: #000 !important;
                color: #fff !important;
                font-size: 4pt !important;
                font-weight: 900 !important;
                letter-spacing: 0.5px !important;
                text-align: center !important;
                text-transform: uppercase !important;
                white-space: nowrap !important;
            }

            .ref-qr-logo {
                display: block !important;
                width: 100% !important;
                height: 100% !important;
                object-fit: contain !important;
            }

            .ref-price-text {
                color: #111827 !important;
                line-height: 1 !important;
                text-align: center !important;
                flex: 0 0 auto !important;
            }

            .ref-price-prefix {
                font-size: 4.5pt !important;
                font-weight: 700 !important;
                letter-spacing: 0 !important;
                margin-right: 0.5mm !important;
                vertical-align: middle !important;
            }

            .ref-price-value {
                font-size: 9pt !important;
                font-weight: 900 !important;
                white-space: nowrap !important;
                vertical-align: middle !important;
            }

            .thermal-row {
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 1mm !important;
                width: 100% !important;
                height: 100% !important;
                padding: 0.95mm 1.15mm !important;
                box-sizing: border-box !important;
            }

            .thermal-main {
                flex: 1 1 auto !important;
                min-width: 0 !important;
                height: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                overflow: hidden !important;
            }

            .thermal-price {
                font-size: 9pt !important;
                line-height: 1 !important;
                font-weight: 800 !important;
                color: #0f172a !important;
                margin: 0 0 0.6mm 0 !important;
            }

            .thermal-name {
                font-size: 6.8pt !important;
                line-height: 1.1 !important;
                font-weight: 700 !important;
                color: #111827 !important;
                margin: 0 !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            .thermal-note {
                font-size: 4.2pt !important;
                line-height: 1.1 !important;
                color: #6b7280 !important;
                margin: 0.4mm 0 0 0 !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            .thermal-barcode {
                flex: 0 0 21mm !important;
                width: 21mm !important;
                min-width: 21mm !important;
                max-width: 21mm !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                overflow: hidden !important;
            }

            .thermal-barcode [class^="barcode-"] {
                width: 16mm !important;
                height: 6mm !important;
                overflow: hidden !important;
            }

            .thermal-barcode [class^="barcode-"] svg,
            .thermal-barcode [class^="barcode-"] canvas,
            .thermal-barcode [class^="barcode-"] img {
                width: 16mm !important;
                height: 6mm !important;
            }

            .thermal-barcode .barcode-number {
                font-size: 3.4pt !important;
                line-height: 1 !important;
                color: #374151 !important;
                margin-top: 0.4mm !important;
                text-align: center !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            /* Left content area */
            .label-card .label-content {
                padding: 1mm 1mm 1mm 2mm !important;
                padding-right: 1mm !important;
                overflow: hidden !important;
                max-width: calc(100% - 16mm) !important;
                height: 100% !important;
                justify-content: flex-start !important;
            }

            /* Right side QR code container - stays visible, never cut off */
            .label-card .flex-shrink-0 {
                padding: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-left: 0 !important;
                flex-shrink: 0 !important;
                flex-grow: 0 !important;
                width: 14mm !important;
                min-width: 14mm !important;
                max-width: 14mm !important;
                overflow: hidden !important;
                justify-content: center !important;
            }

            .label-card .flex-shrink-0 [class^="qr-"],
            .label-card .flex-shrink-0 [class^="qr-"] canvas,
            .label-card .flex-shrink-0 [class^="qr-"] img {
                width: 14mm !important;
                height: 14mm !important;
            }

            /* Price (large, bold) */
            .label-card .text-2xl {
                font-size: 12.5pt !important;
                margin-bottom: 0.8mm !important;
            }

            /* Product name - prevent overflow */
            .label-card .product-name {
                font-size: 7.5pt !important;
                margin-bottom: 0 !important;
                max-width: 100% !important;
                overflow: hidden !important;
                text-overflow: clip !important;
                white-space: normal !important;
                word-wrap: break-word !important;
                word-break: break-word !important;
                line-height: 1.2 !important;
                max-height: 5mm !important;
                display: block !important;
                flex: 0 0 auto !important;
            }

            /* Tagline - wrap to next line if long, but stay within container bounds */
            .label-card .tagline-text,
            .label-card .text-\[7px\].tagline-text {
                font-size: 4.4pt !important;
                max-width: 100% !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: normal !important;
                word-wrap: break-word !important;
                word-break: break-word !important;
                line-height: 1.2 !important;
                color: #9ca3af !important;
                filter: blur(0.2px) !important;
                display: block !important;
                max-height: 4.2mm !important;
                margin-top: auto !important;
                padding-top: 0.2mm !important;
                flex: 0 0 auto !important;
            }

            /* Override Tailwind's leading-tight and mt-0.5 */
            .label-card .tagline-text[class*="leading"] {
                line-height: 1.3 !important;
            }

            /* Barcode text under QR */
            .label-card .text-\[7px\].font-mono {
                font-size: 3.2pt !important;
                max-width: 15mm !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
            }

            body.thermal-print-mode .preview-shell,
            body.thermal-print-mode .print-area,
            body.thermal-print-mode .label-card,
            body.thermal-print-mode .thermal-page,
            body.thermal-print-mode .thermal-label-card {
                width: {{ $paperWidth }}mm !important;
                min-width: {{ $paperWidth }}mm !important;
                max-width: {{ $paperWidth }}mm !important;
                margin: 0 !important;
                padding: 0 !important;
                transform: none !important;
                zoom: 1 !important;
            }

            body.thermal-print-mode .preview-shell {
                border: 0 !important;
                box-shadow: none !important;
                background: transparent !important;
                overflow: visible !important;
            }

            body.thermal-print-mode .print-area {
                display: block !important;
                overflow: visible !important;
                min-height: {{ $paperHeight }}mm !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }

            body.thermal-print-mode .thermal-page {
                display: block !important;
                width: {{ $paperWidth }}mm !important;
                min-width: {{ $paperWidth }}mm !important;
                max-width: {{ $paperWidth }}mm !important;
                margin: 0 !important;
                padding: 0 !important;
                page-break-inside: avoid !important;
                break-inside: avoid !important;
                page-break-after: always !important;
                break-after: page !important;
                overflow: visible !important;
            }

            body.thermal-print-mode .thermal-page:last-child {
                page-break-after: auto !important;
                break-after: auto !important;
            }

            body.thermal-print-mode .thermal-label-card {
                border: none !important;
                box-shadow: none !important;
                page-break-after: auto !important;
                break-after: auto !important;
                overflow: hidden !important;
                display: flex !important;
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                align-items: center !important;
                justify-content: center !important;
                width: {{ $paperWidth }}mm !important;
                height: {{ $paperHeight }}mm !important;
            }

            body.thermal-print-mode .label-card {
                border: none !important;
                box-shadow: none !important;
                page-break-after: auto !important;
                break-after: auto !important;
            }

            body.thermal-print-mode .thermal-row {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                height: 100% !important;
                align-content: center !important;
                align-items: center !important;
                justify-content: space-between !important;
            }

            body.thermal-print-mode .label-card > .flex,
            body.thermal-print-mode .thermal-row {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }

            body.thermal-print-mode .print-area {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }

            body.thermal-print-mode .thermal-row {
                padding-left: 0.6mm !important;
                padding-right: 0.6mm !important;
                padding-top: 0.5mm !important;
                padding-bottom: 0.5mm !important;
                gap: 1mm !important;
                align-items: center !important;
                justify-content: space-between !important;
            }

            body.thermal-print-mode .thermal-main {
                justify-content: center !important;
                align-items: flex-start !important;
                text-align: left !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                height: 100% !important;
                align-self: center !important;
                margin-top: 0.1mm !important;
                margin-bottom: 0.1mm !important;
            }

            body.thermal-print-mode .thermal-price {
                font-size: 10.2pt !important;
                line-height: 1 !important;
                margin: 0 0 0.45mm 0 !important;
            }

            body.thermal-print-mode .thermal-name {
                font-size: 6.8pt !important;
                line-height: 1.05 !important;
                white-space: normal !important;
                overflow: visible !important;
                text-overflow: clip !important;
                word-break: break-word !important;
                overflow-wrap: anywhere !important;
                max-height: none !important;
                margin: 0 !important;
                max-height: 2.2em !important;
            }

            body.thermal-print-mode .thermal-spacer {
                flex: 0 0 0 !important;
                min-height: 1mm !important;
            }

            body.thermal-print-mode .thermal-note {
                display: block !important;
                font-size: 3.5pt !important;
                line-height: 1.1 !important;
                font-style: italic !important;
                color: #6b7280 !important;
                margin: 0.9mm 0 0 0 !important;
                padding-top: 0 !important;
                max-width: 100% !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
            }

            body.thermal-print-mode .thermal-barcode {
                width: 21mm !important;
                min-width: 21mm !important;
                max-width: 21mm !important;
                flex-basis: 21mm !important;
                padding-top: 1.2mm !important;
                padding-bottom: 0 !important;
                justify-content: center !important;
                align-self: center !important;
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }

            body.thermal-print-mode .thermal-barcode [class^="qr-"] {
                width: 13.5mm !important;
                height: 13.5mm !important;
            }

            body.thermal-print-mode .thermal-barcode svg {
                width: 14.5mm !important;
                height: 5.2mm !important;
            }

            body.thermal-print-mode .thermal-barcode [class^="qr-"],
            body.thermal-print-mode .thermal-barcode [class^="qr-"] canvas,
            body.thermal-print-mode .thermal-barcode [class^="qr-"] img {
                width: 13.5mm !important;
                height: 13.5mm !important;
            }

            body.thermal-print-mode .thermal-barcode .barcode-number {
                margin-top: 0.35mm !important;
                font-size: 2.8pt !important;
            }
        }

        svg {
            visibility: visible !important;
        }
    </style>

    <!-- Generate Barcodes -->
    <script>
    const isThermalDirect = @json($isThermalDirect);
    const isQrBarcode = @json($barcodeType === 'QR');

    function generateBarcodes() {
        const barcodes = @json($products->pluck('barcode')->toArray());
        const quantity = {{ $quantity }};
        let index = 0;

        barcodes.forEach(function(barcode) {
            for (let i = 0; i < quantity; i++) {
                const barcodeElement = isThermalDirect
                    ? (isQrBarcode ? document.querySelector(`.qr-${index}`) : document.querySelector(`.barcode-${index}`))
                    : document.querySelector(`.qr-${index}`);

                if (barcodeElement && barcode) {
                    try {
                        if (isThermalDirect && !isQrBarcode) {
                            JsBarcode(barcodeElement, barcode, {
                                format: 'CODE128',
                                width: 1.1,
                                height: 24,
                                displayValue: false,
                                margin: 0,
                                background: '#ffffff',
                                lineColor: '#000000'
                            });
                        } else {
                            new QRCode(barcodeElement, {
                                text: barcode,
                                width: 220,
                                height: 220,
                                colorDark : "#000000",
                                colorLight : "#ffffff",
                                margin: 0,
                                correctLevel : QRCode.CorrectLevel.M
                            });
                        }
                    } catch (e) {
                        console.error('Barcode generation failed for:', barcode, e);
                        barcodeElement.innerHTML = '<p class="text-xs text-center">' + barcode + '</p>';
                    }
                }
                index++;
            }
        });
        console.log('Generated', index, 'barcodes');
    }

    // Generate on page load
    document.addEventListener('DOMContentLoaded', function() {
        // Small delay to ensure library is loaded
        setTimeout(generateBarcodes, 100);
    });

    </script>
</div>
@endsection