<?php
if ($konsumen['no_hp'] == '-') {
	$no_hp = '-';
} else {
	$no_hp = hp_1(hp_2($konsumen['no_hp']));
}

$logo = $logo_lunas;
$color = !empty($info['tema']) ? $info['tema'] : $info['warna_lunas'];
if (strpos($color, '#') !== 0) {
	$color = '#'.$color;
}

$deskripsi = cleanString(base64_decode($info['deskripsi']));
if ($konsumen['tampil'] == 1) {
	$nama = $konsumen['perusahaan'];
	$telp = $konsumen['no_telp'];
	$alamat = $konsumen['alamat_lembaga'];
} else {
	$nama = $konsumen['nama'];
	$telp = $konsumen['no_hp'];
	$alamat = $konsumen['alamat'];
}

$detail = json_decode($cetak->catatan, true);
$items = isset($detail['detail']) && is_array($detail['detail']) ? $detail['detail'] : array();
$catatan = isset($detail['catatan']) ? trim($detail['catatan']) : '';
$namaKendaraan = isset($detail['nama_kendaraan']) ? trim($detail['nama_kendaraan']) : '';
?>
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Cetak Surat Jalan</title>
	<link href="<?=$favicon;?>" rel="icon">
	<style>
		@page { margin: 8mm 10mm; }
		* { box-sizing: border-box; }
		body {
			margin: 0;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 11px;
			line-height: 1.35;
			color: #171717;
		}
		.surat-jalan { width: 100%; }
		table { width: 100%; border-collapse: collapse; }
		td { vertical-align: top; }
		.header { margin-bottom: 7px; table-layout: fixed; }
		.company { width: 34%; padding: 0 20px 0 4px; }
		.company-logo { max-width: 300px; max-height: 92px; }
		.company-address { margin-top: 4px; font-size: 11px; font-weight: bold; line-height: 14px; }
		.company-contact { margin-top: 5px; color: #fff; font-size: 11px; }
		.company-contact span {
			display: inline-block;
			margin: 0 2px 2px 0;
			padding: 2px 5px;
			background: <?=$color;?>;
		}
		.document { width: 66%; padding: 2px 0 0 4px; }
		.vehicle-line { height: 60px; padding: 1px 0 0 5px; font-size: 11px; line-height: 18px; }
		.vehicle-row { display: block; }
		.vehicle-subline { display: block; }
		.vehicle-fill { display: inline-block; min-width: 105px; border-bottom: 1px solid #555; }
		.police-fill { display: inline-block; min-width: 90px; border-bottom: 1px solid #555; }
		.document-title {
			float: right;
			width: 285px;
			margin-top: -60px;
			text-align: center;
			font-family: Georgia, 'Times New Roman', serif;
			font-size: 35px;
			font-weight: bold;
			letter-spacing: 1px;
			line-height: 38px;
		}
		.document-title-text { display: block; border-bottom: 3px solid <?=$color;?>; }
		.document-number { display: inline-block; min-width: 145px; margin-top: 4px; padding: 3px 12px; border: 1px solid <?=$color;?>; border-radius: 10px; color: <?=$color;?>; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; line-height: 13px; letter-spacing: .4px; text-transform: uppercase; }
		.meta-box { clear: both; border: 1px solid <?=$color;?>; border-collapse: separate; border-spacing: 0; border-radius: 9px; overflow: hidden; }
		.meta-left { width: 42%; border-right: 1px solid <?=$color;?>; padding: 9px 12px; }
		.meta-right { width: 58%; padding: 9px 12px; }
		.meta-row { margin-bottom: 9px; font-size: 11px; }
		.meta-row:last-child { margin-bottom: 0; }
		.meta-label { display: inline-block; min-width: 82px; }
		.meta-value { display: inline-block; min-width: 120px; border-bottom: 1px dotted #777; }
		.recipient-title { font-size: 11px; margin-bottom: 5px; }
		.recipient-line { min-height: 19px; border-bottom: 1px dotted #777; }

		.items { table-layout: fixed; }
		.items thead th {
			padding: 8px 6px;
			background: <?=$color;?>;
			color: #fff;
			font-size: 12px;
			text-align: center;
			border-right: 1px solid rgba(255,255,255,.65);
		}
		.items thead th:first-child { border-radius: 9px 0 0 9px; }
		.items thead th:last-child { border-radius: 0 9px 9px 0; border-right: 0; }
		.col-no { width: 6%; }
		.col-qty { width: 16%; }
		.col-name { width: 50%; }
		.col-note { width: 28%; }
		.items-body { position: relative; height: 308px; border: 1px solid <?=$color;?>; border-top: 0; border-radius: 0 0 9px 9px; overflow: hidden; }
		.items-body table { position: relative; z-index: 1; height: 100%; table-layout: fixed; }
		.column-rule { position: absolute; top: 0; height: 100%; width: 0; border-left: 1px solid <?=$color;?>; z-index: 2; }
		.rule-no { left: 6%; }
		.rule-qty { left: 22%; }
		.rule-name { left: 72%; }
		.item-row { height: 29px; }
		.item-cell {
			padding: 5px 8px;
			border-bottom: 1px dotted #d4d4d4;
		}
		.item-row:last-child .item-cell { border-bottom: 0; }
		.item-note { font-size: 11px; line-height: 15px; }
		.item-detail { margin-top: 2px; color: #555; font-size: 11px; line-height: 15px; }
		.item-detail-label { font-weight: bold; color: #333; }

		.notice {
			margin-top: 5px;
			padding: 7px 8px;
			border-radius: 6px;
			background: <?=$color;?>;
			color: #fff;
			font-size: 12px;
			font-weight: bold;
			text-align: center;
			text-transform: uppercase;
		}
		.bottom { margin-top: 8px; table-layout: fixed; }
		.notes-wrap { width: 30%; padding-right: 12px; }
		.notes-title { font-size: 12px; font-weight: bold; }
		.notes-box { height: 125px; border: 1px solid <?=$color;?>; border-radius: 9px; overflow: hidden; }
		.notes-text { height: 75px; padding: 8px; font-size: 11px; line-height: 15px; }
		.notes-warning-table { width: 100%; height: 50px; background: <?=$color;?>; color: #fff; font-size: 11px; line-height: 14px; }
		.notes-warning-table td { padding: 4px 10px; text-align: center; vertical-align: middle; }
		.signatures { width: 70%; }
		.arrival { height: 32px; font-size: 11px; }
		.arrival-line { display: inline-block; width: 76px; border-bottom: 1px dotted #777; }
		.signature { width: 25%; height: 112px; padding: 0 10px; font-size: 11px; }
		.signature-title { min-height: 32px; font-weight: bold; font-size: 11px; }
		.signature-space { height: 48px; }
		.signature-line { border-bottom: 1px dotted #777; min-height: 14px; }
		.signature-date { margin-top: 2px; }
	</style>
</head>
<body>
	<div class="surat-jalan">
		<table class="header" cellpadding="0" cellspacing="0">
			<tr>
				<td class="company">
					<img class="company-logo" src="<?=$logo;?>" alt="Logo perusahaan"><br>
					<div class="company-address"><?=$deskripsi;?></div>
					<div class="company-contact">
						<?php if ($info['phone'] != '-') { ?><span>Telp. <?=html_escape($info['phone']);?></span><?php } ?>
						<?php if ($info['email'] != '-') { ?><span><?=html_escape($info['email']);?></span><?php } ?>
					</div>
				</td>
				<td class="document">
					<div class="vehicle-line"><span class="vehicle-row">Bersama ini kendaraan: <span class="vehicle-fill"><?=!empty($namaKendaraan) ? html_escape($namaKendaraan) : '&nbsp;';?></span></span><span class="vehicle-row">Nomor Polisi: <span class="police-fill"><?=html_escape($cetak->no_pol);?></span></span><span class="vehicle-subline">kami kirim barang-barang tersebut di bawah ini</span></div>
					<div class="document-title"><span class="document-title-text">SURAT JALAN</span><span class="document-number">Nomor Surat &nbsp; <?=html_escape($cetak->id);?></span></div>
					<table class="meta-box" cellpadding="0" cellspacing="0">
						<tr>
							<td class="meta-left">
								<div class="meta-row"><span class="meta-label">Tanggal Order</span>: <span class="meta-value"><?=dtime($order->tgl_trx);?></span></div>
								<div class="meta-row"><span class="meta-label">Tanggal Kirim</span>: <span class="meta-value"><?=dtime($cetak->tanggal);?></span></div>
								<div class="meta-row"><span class="meta-label">No. Invoice</span>: <span class="meta-value"><?=html_escape($order->id_transaksi);?></span></div>
							</td>
							<td class="meta-right">
								<div class="recipient-title">Kepada Yth, <strong><?=html_escape($nama);?></strong></div>
								<div class="recipient-line"><?=html_escape($cetak->alamat_kirim);?></div>
								<div class="recipient-line">Telp. <?=html_escape($telp);?></div>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>

		<table class="items" cellpadding="0" cellspacing="0">
			<colgroup><col style="width:6%"><col style="width:16%"><col style="width:50%"><col style="width:28%"></colgroup>
			<thead><tr><th class="col-no">No.</th><th class="col-qty">Banyaknya</th><th class="col-name">Nama Barang</th><th class="col-note">Keterangan</th></tr></thead>
		</table>
		<div class="items-body">
			<div class="column-rule rule-no"></div>
			<div class="column-rule rule-qty"></div>
			<div class="column-rule rule-name"></div>
			<table cellpadding="0" cellspacing="0">
				<colgroup><col style="width:6%"><col style="width:16%"><col style="width:50%"><col style="width:28%"></colgroup>
				<?php $printedRows = max(11, count($items)); ?>
				<?php for ($rowIndex = 0; $rowIndex < $printedRows; $rowIndex++) { $val = isset($items[$rowIndex]) ? $items[$rowIndex] : null; ?>
					<tr class="item-row">
						<td class="item-cell col-no" style="text-align:center"><?=$val ? ($rowIndex + 1) : '&nbsp;';?></td>
						<td class="item-cell col-qty"><?=$val ? html_escape($val['jumlah']) : '&nbsp;';?></td>
						<td class="item-cell col-name"><?=$val ? '<strong>'.html_escape($val['bahan']).'</strong>' : '&nbsp;';?></td>
						<td class="item-cell col-note"><?=$val && !empty($val['keterangan']) ? html_escape($val['keterangan']) : '&nbsp;';?></td>
					</tr>
				<?php } ?>
			</table>
		</div>

		<div class="notice">Cek secara teliti barang yang diterima, dengan keadaan barang baik dan jumlah barang sesuai</div>
		<table class="bottom" cellpadding="0" cellspacing="0">
			<tr>
				<td class="notes-wrap">
					<div class="notes-title">Catatan:</div>
					<div class="notes-box">
						<div class="notes-text"><?=nl2br(html_escape($catatan));?></div>
						<table class="notes-warning-table" cellpadding="0" cellspacing="0"><tr><td>Jika barang tidak sesuai, coret pada surat jalan yang diterima. Terima kasih.</td></tr></table>
					</div>
				</td>
				<td class="signatures">
					<div class="arrival">Jam Datang &nbsp;: <span class="arrival-line">&nbsp;</span></div>
					<table cellpadding="0" cellspacing="0">
						<tr>
							<td class="signature"><div class="signature-title">Telah diperiksa dan<br>Diterima oleh,</div><div class="signature-space"></div><div class="signature-line">Nama: <?=html_escape($nama);?></div><div class="signature-date">Tgl:</div></td>
							<td class="signature"><div class="signature-title">Dikirim oleh,</div><div class="signature-space"></div><div class="signature-line">Nama: <?=html_escape($marketing['nama_lengkap']);?></div><div class="signature-date">Tgl:</div></td>
							<td class="signature"><div class="signature-title">Disetujui oleh,</div><div class="signature-space"></div><div class="signature-line">Nama:</div><div class="signature-date">Tgl:</div></td>
							<td class="signature"><div class="signature-title">Disiapkan oleh,</div><div class="signature-space"></div><div class="signature-line">Nama:</div><div class="signature-date">Tgl:</div></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>
