<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker Sedang 75x125</title>
<style type="text/css">
	/* ====== MARKER SEDANG — lebar 7,5 cm ; tinggi per baris 1,25 cm ======
	   1 pakaian = 2 baris duplikat (nomor sama) = 2,5 cm.
	   Baris-1 zona kanan = KODE OUTLET besar.
	   Baris-2 zona kanan = "Stopwash" + nama outlet.
	   Kode bill = 5 angka terakhir. */
	* { box-sizing: border-box; }
	html, body {
		margin: 0; padding: 0;
		width: 7.5cm;                 /* lebar marker */
		background: #fff; color: #000;
		font-family: 'Helvetica', 'Arial', sans-serif;
		-webkit-print-color-adjust: exact; print-color-adjust: exact;
	}
	table.mk { width: 100%; border-collapse: collapse; table-layout: fixed; }
	/* tinggi tiap baris dikunci 1,25 cm (rapat, tanpa spasi putih ekstra) */
	table.mk tr, table.mk td { height: 1.25cm; }
	table.mk td {
		border: 1px solid #000;
		vertical-align: middle;
		overflow: hidden;             /* jaga tinggi tetap 1,25 cm */
		padding: 0.3mm 1mm;
	}
	/* lebar 4 zona + aturan garis (kiri-tengah menyatu, seperti foto) */
	td.colA { width: 20%; border-right: none; padding-right: 0.3mm; text-align: center; }
	td.colB { width: 48%; border-left:  none; padding-left:  0.8mm; }
	td.colC { width: 20%; text-align: left; }
	td.colD { width: 15%; }           /* kotak kanan kosong (sesuai foto) */

	/* semua teks 1 baris (nowrap) + ellipsis supaya tinggi tidak jebol */
	.num, .nobill, .cname, .cmeta, .cket, .cnote, .ocode, .obrand, .oname {
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	/* ZONA KIRI: nomor urut + 5 angka bill */
	.num    { font-size: 16px; font-weight: 900; line-height: 0.90; letter-spacing: -0.5px; }
	.nobill { font-size: 12px;  font-weight: 700; line-height: 1.00; margin-top: 0.3mm; }
	/* ZONA TENGAH */
	.cname  { font-size: 12px;   font-weight: 800; line-height: 1.00; }
	.cmeta  { font-size: 9px;   font-weight: 700; line-height: 1.05; margin-top: 0.2mm; }
	.cket   { font-size: 8px; font-weight: 600; line-height: 1.05; margin-top: 0.2mm; }
	.cnote  { font-size: 12px; font-weight: 600; line-height: 1.05; margin-top: 0.2mm; }
	.cnote b{ font-weight: 800; }
	/* ZONA KANAN-TENGAH */
	.ocode  { font-size: 16px; font-weight: 900; line-height: 0.90; letter-spacing: -0.4px; }
	.obrand { font-size: 12px;  font-weight: 800; line-height: 1.00; }
	.oname  { font-size: 8px;  font-weight: 800; line-height: 1.00; }

	@media print {
		@page { margin: 0; }
		html, body { margin: 0; }
		table.mk tr { page-break-inside: avoid; break-inside: avoid; }
	}
</style>
</head>
<body onload="window.print();">
<?php
	$tot = count($trx);

	/* tgl selesai ringkas (1x, dipakai semua baris) */
	$tgl_selesai = '';
	if (isset($data['duedate']) && strlen($data['duedate']) > 0 && $data['duedate'] != '0000-00-00 00:00:00') {
		$tgl_selesai = Date('d/m H:i', strtotime($data['duedate']));
	}

	/* kode outlet (zona kanan baris-1) + nama outlet (zona kanan baris-2) */
	$ocode = (isset($outlet['outlet_code']) && strlen(trim($outlet['outlet_code'])) > 0) ? trim($outlet['outlet_code']) : '';
	$oname = isset($outlet['outlet_name']) ? $outlet['outlet_name'] : '';

	/* kode bill = 5 angka terakhir  (BILLHLT-01988 -> 01988) */
	$nobill = substr((string)$data['code'], -5);
?>
<table class="mk">
<?php
	foreach ($trx as $key => $value) {

		/* keterangan fisik pakaian = warna, corak, noda */
		$ket_parts = array();
		if (strlen($value['colour']) > 0) $ket_parts[] = $value['colour'];
		if (strlen($value['hue'])    > 0) $ket_parts[] = $value['hue'];
		if (strlen($value['spot'])   > 0) $ket_parts[] = $value['spot'];
		$ket  = implode(', ', $ket_parts);
		$note = isset($value['trx_note']) ? trim($value['trx_note']) : '';

		/* nomor urut pakaian (sama untuk kedua baris duplikat) */
		$num = ($key + 1) . '/' . $tot;

		/* ====== 1 PAKAIAN = 2 BARIS (duplikat) ====== */
		for ($dup = 0; $dup < 2; $dup++) {
			$second = ($dup == 1);   // baris ke-2 dari pasangan
?>
	<tr>
		<!-- ZONA KIRI: nomor + 5 angka bill -->
		<td class="colA">
			<div class="num"><?php echo $num; ?></div>
			<div class="nobill"><?php echo htmlspecialchars($nobill); ?></div>
		</td>

		<!-- ZONA TENGAH: nama + (tgl selesai & jenis) + [ket di baris-1 / NOTE di baris-2] -->
		<td class="colB">
			<div class="cname"><?php echo htmlspecialchars($data['customer_name']); ?></div>
			<div class="cmeta"><?php echo $tgl_selesai; ?> <?php echo htmlspecialchars($value['product_name']); ?></div>
			<?php if (!$second && strlen($ket) > 0): ?>
				<div class="cket"><?php echo htmlspecialchars($ket); ?></div>
			<?php elseif ($second && strlen($note) > 0): ?>
				<div class="cnote"><b>NOTE</b> <?php echo htmlspecialchars($note); ?></div>
			<?php endif; ?>
		</td>

		<!-- ZONA KANAN-TENGAH: baris-1 = kode outlet ; baris-2 = Stopwash + nama outlet -->
		<td class="colC">
			<?php if (!$second): ?>
				<?php if ($ocode !== ''): ?>
					<div class="ocode"><?php echo htmlspecialchars($ocode); ?></div>
				<?php else: ?>
					<div class="oname"><?php echo htmlspecialchars($oname); ?></div>
				<?php endif; ?>
			<?php else: ?>
				<div class="obrand">Stop</div>
				<div class="obrand">Wash</div>
				<div class="oname"><?php echo htmlspecialchars($oname); ?></div>
			<?php endif; ?>
		</td>

		<!-- ZONA KANAN: kotak kosong (sesuai foto) -->
		<td class="colD"></td>
	</tr>
<?php
		} // end for dup
	} // end foreach trx
?>
</table>
</body>
</html>