<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=80mm, initial-scale=1.0">
    <title>SPK {{ $order->invoice_number }}</title>
    <style>
        @media print {
            @page { size: 80mm auto; margin: 0; }
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Courier New', monospace;
            font-size: 12px;
            width: 80mm;
            padding: 5mm;
            background: #fff;
            color: #000;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        .receipt-shell {
            position: relative;
            min-height: 120mm;
        }

        .watermark-demo {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            user-select: none;
            z-index: 0;
        }

        .watermark-demo span {
            display: block;
            transform: rotate(-32deg);
            font-size: 26px;
            line-height: 1;
            font-weight: 900;
            letter-spacing: 3px;
            text-transform: uppercase;
            white-space: nowrap;
            color: rgba(0, 0, 0, 0.07);
        }

        .receipt-content {
            position: relative;
            z-index: 1;
        }

        .header {
            text-align: center;
            border-bottom: 2px dashed #000;
            font-weight: 900;
            padding-bottom: 8px;
            margin-bottom: 10px;
        }

        .header h1 {
            font-size: 16px;
            letter-spacing: 2px;
            font-weight: 900;
            color: #000;
        }

        .header .subtitle {
            font-size: 12px;
            margin-top: 4px;
            font-weight: 900;
            color: #000;
        }

        .invoice-box {
            text-align: center;
            margin: 10px 0 12px 0;
        }

        .invoice-number {
            display: inline-block;
            width: 100%;
            font-size: 14px;
            font-weight: 900;
            padding: 6px 8px;
            border: 2px solid #000;
            color: #000;
            letter-spacing: .5px;
            background: transparent;
        }

        .section-title {
            font-size: 10px;
            color: #000;
            font-weight: 900;
            text-transform: uppercase;
            margin-bottom: 2px;
        }

        .customer-box {
            border: 2px solid #000;
            padding: 8px;
            margin-bottom: 10px;
            background: transparent;
        }

        .customer-name {
            font-size: 18px;
            font-weight: 900;
            color: #000;
            line-height: 1.1;
            word-break: break-word;
        }

        .order-notes {
            border: 1px solid #000;
            padding: 8px;
            margin-bottom: 12px;
            background: transparent;
        }

        .order-notes .content {
            font-size: 12px;
            font-weight: 900;
            color: #000;
            line-height: 1.15;
            word-break: break-word;
        }

        .item {
            border: 2px solid #000;
            padding: 10px;
            margin: 10px 0;
            font-weight: 900;
            background: transparent;
        }

        .item-number {
            font-size: 10px;
            font-weight: 900;
            background: #000 !important;
            color: #fff !important;
            padding: 2px 6px;
            display: inline-block;
            margin-bottom: 6px;
            letter-spacing: .5px;
        }

        .file-name {
            font-size: 14px;
            font-weight: 900;
            color: #000;
            word-break: break-word;
            margin-bottom: 8px;
            line-height: 1.15;
        }

        .specs-row {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 4px;
        }

        .specs-label {
            font-size: 10px;
            color: #000;
            font-weight: 900;
            text-transform: uppercase;
            min-width: 60px;
        }

        .specs-value {
            font-size: 12px;
            font-weight: 900;
            color: #000;
            text-align: right;
            flex: 1;
        }

        .badge-black {
            background: #000 !important;
            color: #fff !important;
            padding: 1px 5px;
            font-weight: 900;
        }

        .finishing-note {
            border-top: 1px dashed #000;
            padding-top: 6px;
            margin-top: 8px;
        }

        .finishing-note-title {
            font-size: 9px;
            font-weight: 900;
            text-transform: uppercase;
            color: #000;
        }

        .finishing-note-content {
            font-size: 12px;
            font-weight: 900;
            color: #000;
            line-height: 1.15;
        }

        .footer {
            border-top: 2px dashed #000;
            padding-top: 10px;
            margin-top: 12px;
            text-align: center;
            font-size: 10px;
            font-weight: 900;
            color: #000;
        }

        .designer-info {
            margin-top: 6px;
            padding-top: 8px;
            border-top: 1px dashed #000;
            font-weight: 900;
            color: #000;
        }

        .print-time {
            font-size: 10px;
            color: #000;
            font-weight: 900;
            margin-top: 6px;
        }

        @media screen {
            body {
                margin: 20px auto;
                border: 1px solid #ccc;
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
            }
        }
    </style>
</head>
<body onload="window.print()">

    <div class="receipt-shell">
        @if(env('APP_DEMO', false))
            <div class="watermark-demo">
                <span>DEMO MODE<br>/TRANSAKSI PALSU</span>
                
            </div>
        @endif

        <div class="receipt-content">
            <div class="header">
                @if(!empty($shopLogo))
                    <img src="{{ $shopLogo }}" alt="{{ $shopName ?? 'Logo' }}" style="max-height: 40px; margin-bottom: 8px;">
                @endif
                <h1>SPK PRODUKSI</h1>
                <div class="subtitle">SURAT PERINTAH KERJA</div>
            </div>

            <div class="invoice-box">
                <div class="invoice-number">{{ $order->invoice_number }}</div>
            </div>

            <div class="customer-box">
                <div class="section-title">Pelanggan</div>
                <div class="customer-name">{{ $order->customer_name }}</div>
            </div>

            @if(!empty($order->notes))
                <div class="order-notes">
                    <div class="section-title">Catatan</div>
                    <div class="content">{{ $order->notes }}</div>
                </div>
            @endif

            @foreach($order->items as $index => $item)
                @php
                    $unitRaw = strtolower(trim((string) ($item->size_unit ?? 'lembar')));

                    if ($unitRaw === 'm²') {
                        $unitRaw = 'm2';
                    }

                    if (in_array($unitRaw, ['pcs', 'pc', 'piece', 'sheet'])) {
                        $unitRaw = 'lembar';
                    }

                    $showSize = in_array($unitRaw, ['m2', 'meter', 'm'], true) && !empty($item->size_description);
                    $showSisi = !in_array($unitRaw, ['m2', 'meter', 'm'], true);

                    $qtyUnit = 'LEMBAR';
                    if ($unitRaw === 'meter' || $unitRaw === 'm') {
                        $qtyUnit = 'METER';
                    } elseif ($unitRaw === 'm2') {
                        $qtyUnit = 'M2';
                    }

                    $meterValue = null;
                    $m2Value = null;

                    $sizeText = strtolower(trim((string) ($item->size_description ?? '')));
                    $sizeText = str_replace(['×', '*', ' '], ['x', 'x', ''], $sizeText);

                    if (preg_match('/^(\d+(?:[.,]\d+)?)x(\d+(?:[.,]\d+)?)(cm|m)?$/', $sizeText, $matches)) {
                        $a = (float) str_replace(',', '.', $matches[1]);
                        $b = (float) str_replace(',', '.', $matches[2]);
                        $suffix = $matches[3] ?? '';

                        if ($suffix === 'cm') {
                            $aCm = $a;
                            $bCm = $b;
                        } elseif ($suffix === 'm') {
                            $aCm = $a * 100;
                            $bCm = $b * 100;
                        } else {
                            if ($a >= 10 && $b >= 10) {
                                $aCm = $a;
                                $bCm = $b;
                            } else {
                                $aCm = $a * 100;
                                $bCm = $b * 100;
                            }
                        }

                        if ($unitRaw === 'meter' || $unitRaw === 'm') {
                            $meterResult = min($aCm, $bCm) / 100;
                            $meterValue = rtrim(rtrim(number_format($meterResult, 4, ',', '.'), '0'), ',') . ' meter';
                        }

                        if ($unitRaw === 'm2') {
                            $m2Result = ($aCm * $bCm) / 10000;
                            $m2Value = rtrim(rtrim(number_format($m2Result, 4, ',', '.'), '0'), ',') . ' m²';
                        }
                    }

                    if (($unitRaw === 'meter' || $unitRaw === 'm') && !$meterValue && !empty($item->size_value)) {
                        $meterValue = rtrim(rtrim(number_format((float) $item->size_value, 4, ',', '.'), '0'), ',') . ' meter';
                    }

                    if ($unitRaw === 'm2' && !$m2Value && !empty($item->size_value)) {
                        $m2Value = rtrim(rtrim(number_format((float) $item->size_value, 4, ',', '.'), '0'), ',') . ' m²';
                    }
                @endphp

                <div class="item">
                    <div class="item-number">ITEM {{ $index + 1 }}</div>

                    <div class="file-name">{{ $item->file_name }}</div>

                    <div class="specs-row">
                        <span class="specs-label">Produk</span>
                        <span class="specs-value">{{ $item->product_name }}</span>
                    </div>

                    @if($item->material_name)
                        <div class="specs-row">
                            <span class="specs-label">Bahan</span>
                            <span class="specs-value">{{ $item->material_name }}</span>
                        </div>
                    @endif

                    @if($showSize)
                        <div class="specs-row">
                            <span class="specs-label">Ukuran</span>
                            <span class="specs-value">{{ $item->size_description }}</span>
                        </div>
                    @endif

                    @if(!empty($meterValue))
                        <div class="specs-row">
                            <span class="specs-label">Pakai</span>
                            <span class="specs-value">{{ $meterValue }}</span>
                        </div>
                    @endif

                    @if(!empty($m2Value))
                        <div class="specs-row">
                            <span class="specs-label">Luas</span>
                            <span class="specs-value">{{ $m2Value }}</span>
                        </div>
                    @endif

                    @if($showSisi)
                        <div class="specs-row">
                            <span class="specs-label">Sisi</span>
                            <span class="specs-value">
                                @if(($item->sisi ?? 1) == 2)
                                    <span class="badge-black">{{ $item->sisi ?? 1 }} SISI</span>
                                @else
                                    {{ $item->sisi ?? 1 }} SISI
                                @endif
                            </span>
                        </div>
                    @endif

                    <div class="specs-row">
                        <span class="specs-label">Qty</span>
                        <span class="specs-value">{{ $item->qty }} {{ $qtyUnit }}</span>
                    </div>

                    @if($item->finishing_note)
                        <div class="finishing-note">
                            <div class="finishing-note-title">Finishing</div>
                            <div class="finishing-note-content">{{ $item->finishing_note }}</div>
                        </div>
                    @endif
                </div>
            @endforeach

            <div class="footer">
                <div class="designer-info">
                    <strong>Designer: {{ $order->designer->name ?? '-' }}</strong>
                </div>
                <div class="print-time">
                    Dicetak: {{ now()->format('d/m/Y H:i') }}
                </div>
            </div>
        </div>
    </div>

</body>
</html>