<?php
$kon = pilih('konsumen', 'id', $row->id_konsumen);
if ($kon['tampil'] == 1) {
	$nama = $kon['perusahaan'];
	$telp = $kon['no_telp'];
	$alamat = $kon['alamat_lembaga'];
} else {
	$nama = $kon['nama'];
	$telp = $kon['no_hp'];
	$alamat = $kon['alamat'];
}

$readonly = $status > 0 ? 'readonly' : '';
$appInfo = info();
$themeColor = !empty($appInfo['tema']) ? $appInfo['tema'] : '#1958ac';
if (strpos($themeColor, '#') !== 0) {
	$themeColor = '#'.$themeColor;
}
$logoUrl = base_url('uploads/'.$appInfo['logo']);
$companyDescription = cleanString(base64_decode($appInfo['deskripsi']));
?>
<style>
	#surat_jalan .modal-dialog.sj-modal-dialog { width: calc(100% - 32px); max-width: 1240px; margin: 16px auto; }
	#surat_jalan .modal-content { border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(15,23,42,.28); }
	#surat_jalan .modal-header { padding: 14px 20px; border-bottom: 1px solid #e5e7eb; background: #fff; }
	#surat_jalan .modal-title { display: flex; align-items: center; gap: 10px; color: #172033; font-size: 18px; font-weight: 700; }
	#surat_jalan .modal-title-icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; background: <?=$themeColor;?>; color: #fff; }
	#surat_jalan .modal-body { max-height: calc(100vh - 150px); padding: 20px; overflow: auto; background: #eef2f7; }
	#surat_jalan .modal-footer { padding: 12px 20px; border-top: 1px solid #e5e7eb; background: #fff; }
	#surat_jalan .sj-action { min-height: 42px; padding: 9px 18px; border: 0; border-radius: 10px; font-weight: 700; box-shadow: none; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
	#surat_jalan .sj-action-primary { background: <?=$themeColor;?>; color: #fff; }
	#surat_jalan .sj-action-secondary { background: #eef2f7; color: #344054; }
	#surat_jalan .sj-action-edit { border: 1px solid <?=$themeColor;?>; background: #fff; color: <?=$themeColor;?>; }
	#surat_jalan .sj-action:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(15,23,42,.15); }
	#surat_jalan .sj-action:focus { outline: 3px solid rgba(25,88,172,.18); outline-offset: 2px; }

	.sj-sheet { width: 1120px; max-width: 100%; min-height: 690px; margin: 0 auto; padding: 24px 28px; border: 1px solid #dbe3ec; border-radius: 14px; background: #fff; color: #20242a; box-shadow: 0 8px 28px rgba(15,23,42,.10); font-family: Arial, Helvetica, sans-serif; }
	.sj-sheet * { box-sizing: border-box; }
	.sj-top { display: grid; grid-template-columns: 31% 69%; gap: 16px; }
	.sj-company-logo { display: block; max-width: 230px; max-height: 86px; margin-bottom: 7px; }
	.sj-company-address { max-width: 285px; font-size: 12px; font-weight: 700; line-height: 1.35; }
	.sj-company-contact { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
	.sj-company-contact span { padding: 3px 7px; background: <?=$themeColor;?>; color: #fff; font-size: 11px; }
	.sj-heading-top { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 18px; align-items: start; }
	.sj-vehicle { padding-top: 4px; font-size: 12px; line-height: 1.7; }
	.sj-vehicle-row { display: flex; align-items: center; gap: 7px; }
	.sj-title { text-align: center; }
	.sj-title h2 { margin: 0; padding-bottom: 3px; border-bottom: 3px solid <?=$themeColor;?>; font-family: Georgia, 'Times New Roman', serif; font-size: 34px; letter-spacing: 1px; }
	.sj-number { display: inline-block; min-width: 160px; margin-top: 5px; padding: 4px 14px; border: 1px solid <?=$themeColor;?>; border-radius: 999px; color: <?=$themeColor;?>; font-size: 11px; font-weight: 800; text-transform: uppercase; }
	.sj-line-input { min-width: 120px; height: 24px; padding: 0 4px; border: 0; border-bottom: 1px solid #667085; border-radius: 0; background: transparent; font-size: 12px; outline: none; }
	.sj-line-input:focus, .sj-meta-value:focus, .sj-customer-line:focus, .sj-sender-select:focus { border-bottom: 2px solid <?=$themeColor;?>; }
	.sj-meta { display: grid; grid-template-columns: 42% 58%; margin-top: 8px; border: 1px solid <?=$themeColor;?>; border-radius: 11px; overflow: hidden; }
	.sj-meta-left, .sj-meta-right { padding: 10px 13px; }
	.sj-meta-left { border-right: 1px solid <?=$themeColor;?>; }
	.sj-meta-row { display: grid; grid-template-columns: 90px 8px minmax(0,1fr); align-items: center; min-height: 28px; font-size: 12px; }
	.sj-meta-value { padding: 3px 5px; border: 0; border-bottom: 1px dotted #98a2b3; border-radius: 0; background: transparent; font-size: 12px; outline: none; }
	.sj-customer-title { margin-bottom: 4px; font-size: 13px; }
	.sj-customer-line { display: block; width: 100%; min-height: 26px; padding: 3px 0; border: 0; border-bottom: 1px dotted #98a2b3; border-radius: 0; background: transparent; font-size: 12px; outline: none; }

	.sj-items { margin-top: 12px; border: 1px solid <?=$themeColor;?>; border-radius: 11px; overflow: hidden; }
	.sj-items table { width: 100%; border-collapse: collapse; table-layout: fixed; }
	.sj-items th { padding: 9px 8px; background: <?=$themeColor;?>; color: #fff; font-size: 12px; text-align: center; }
	.sj-items td { height: 34px; padding: 8px 10px; border-right: 1px solid <?=$themeColor;?>; border-bottom: 1px dotted #d0d5dd; font-size: 12px; vertical-align: top; }
	.sj-items th:last-child, .sj-items td:last-child { border-right: 0; }
	.sj-note-input { display: block; width: 100%; min-height: 30px; padding: 5px 7px; border: 1px solid #d0d5dd; border-radius: 7px; background: #fff; font-size: 12px; outline: none; }
	.sj-note-input:focus { border-color: <?=$themeColor;?>; box-shadow: 0 0 0 3px rgba(25,88,172,.12); }
	.sj-items-empty td { height: 190px; }
	.sj-check { margin-top: 7px; padding: 8px; border-radius: 7px; background: <?=$themeColor;?>; color: #fff; font-size: 12px; font-weight: 800; text-align: center; text-transform: uppercase; }
	.sj-bottom { display: grid; grid-template-columns: 30% 70%; gap: 12px; margin-top: 9px; }
	.sj-note-title { margin-bottom: 4px; font-size: 12px; font-weight: 800; }
	.sj-note-box { height: 112px; border: 1px solid <?=$themeColor;?>; border-radius: 9px; overflow: hidden; }
	.sj-note-space { height: 72px; }
	.sj-note-warning { display: flex; height: 40px; padding: 5px 9px; align-items: center; justify-content: center; background: <?=$themeColor;?>; color: #fff; font-size: 10px; line-height: 1.3; text-align: center; }
	.sj-arrival { height: 26px; font-size: 12px; }
	.sj-signatures { display: grid; grid-template-columns: repeat(4,1fr); }
	.sj-signature { min-height: 86px; padding: 0 10px; }
	.sj-signature-title { min-height: 34px; font-size: 11px; font-weight: 800; }
	.sj-signature-space { height: 28px; }
	.sj-signature-line { padding-top: 3px; border-bottom: 1px dotted #98a2b3; font-size: 11px; }
	.sj-sender-select { width: 100%; padding: 2px 0; border: 0; border-bottom: 1px dotted #98a2b3; border-radius: 0; background: transparent; font-size: 11px; outline: none; }
	.sj-hidden { display: none; }

	@media (max-width: 900px) {
		#surat_jalan .modal-dialog.sj-modal-dialog { width: calc(100% - 16px); margin: 8px auto; }
		#surat_jalan .modal-body { padding: 10px; }
		.sj-sheet { min-width: 760px; padding: 18px; }
		.sj-modal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	}
</style>

<div class="sj-modal-scroll">
	<input type="hidden" id="sj_saved_status" value="<?=intval($status);?>">
	<div class="sj-sheet" data-saved="<?=intval($status) > 0 ? '1' : '0';?>">
		<div class="sj-top">
			<div>
				<img class="sj-company-logo" src="<?=$logoUrl;?>" alt="Logo perusahaan">
				<div class="sj-company-address"><?=$companyDescription;?></div>
				<div class="sj-company-contact">
					<?php if ($appInfo['phone'] != '-') { ?><span>Telp. <?=html_escape($appInfo['phone']);?></span><?php } ?>
					<?php if ($appInfo['email'] != '-') { ?><span><?=html_escape($appInfo['email']);?></span><?php } ?>
				</div>
			</div>
			<div>
				<div class="sj-heading-top">
					<div class="sj-vehicle">
						<div class="sj-vehicle-row"><span>Bersama ini kendaraan:</span><input class="sj-line-input" type="text" id="nama_kendaraan" name="nama_kendaraan" value="<?=html_escape($nama_kendaraan);?>" data-sj-editable <?=$readonly;?> aria-label="Nama kendaraan"></div>
						<div class="sj-vehicle-row"><span>Nomor Polisi:</span><input class="sj-line-input" id="nopol" name="nopol" value="<?=html_escape($no_pol);?>" data-sj-editable <?=$readonly;?>></div>
						<div>kami kirim barang-barang tersebut di bawah ini</div>
					</div>
					<div class="sj-title"><h2>SURAT JALAN</h2><div class="sj-number">Nomor Surat &nbsp; <?=html_escape($id);?></div></div>
				</div>
				<div class="sj-meta">
					<div class="sj-meta-left">
						<div class="sj-meta-row"><span>Tanggal Order</span><span>:</span><input type="date" class="sj-meta-value" id="tgl_invoice" value="<?=$row->tgl_trx;?>" readonly></div>
						<div class="sj-meta-row"><span>Tanggal Kirim</span><span>:</span><input type="date" class="sj-meta-value" id="tgl_kirim" name="tgl_kirim" value="<?=$tanggal;?>" data-sj-editable <?=$readonly;?>></div>
						<div class="sj-meta-row"><span>No. Invoice</span><span>:</span><input class="sj-meta-value" id="no_order" name="no_order" value="<?=html_escape($row->id_transaksi);?>" readonly></div>
					</div>
					<div class="sj-meta-right">
						<div class="sj-customer-title">Kepada Yth, <strong><?=html_escape($nama);?></strong></div>
						<input class="sj-customer-line" id="alamat" name="alamat" value="<?=html_escape($alamat_kirim ?: $alamat);?>" data-sj-editable <?=$readonly;?> aria-label="Alamat kirim">
						<div class="sj-customer-line">Telp. <?=html_escape($telp);?></div>
					</div>
				</div>
			</div>
		</div>

		<div class="sj-items">
			<table>
				<colgroup><col style="width:6%"><col style="width:16%"><col style="width:50%"><col style="width:28%"></colgroup>
				<thead><tr><th>No.</th><th>Banyaknya</th><th>Nama Barang</th><th>Keterangan</th></tr></thead>
				<tbody>
				<?php $itemNo = 0; foreach ($detail as $val) { if (jkategori($val['id_produk']) == 9) continue; $itemNo++; ?>
					<tr>
						<td class="text-center"><?=$itemNo;?><input type="hidden" name="id[]" value="<?=$val['id_rincianinvoice'];?>"></td>
						<td><?=html_escape($val['jumlah']);?><input type="hidden" name="jumlah[]" value="<?=html_escape($val['jumlah']);?>"></td>
						<td><strong><?=html_escape($val['nbahan']);?></strong><input type="hidden" name="title[]" value="<?=html_escape($val['title']);?>"><input type="hidden" name="bahan[]" value="<?=html_escape($val['nbahan']);?>"></td>
						<td><input type="hidden" name="ukuran[]" value="<?=html_escape($val['ukuran']);?>"><input class="sj-note-input" type="text" name="keterangan[]" value="<?=html_escape($val['keterangan']);?>" data-sj-editable <?=$readonly;?> placeholder="Isi keterangan" aria-label="Keterangan item <?=$itemNo;?>"></td>
					</tr>
				<?php } ?>
				<tr class="sj-items-empty"><td></td><td></td><td></td><td></td></tr>
				</tbody>
			</table>
		</div>
		<div class="sj-check">Cek secara teliti barang yang diterima, dengan keadaan barang baik dan jumlah barang sesuai</div>
		<div class="sj-bottom">
			<div>
				<div class="sj-note-title">Catatan:</div>
				<div class="sj-note-box"><div class="sj-note-space"></div><div class="sj-note-warning">Jika barang tidak sesuai, coret pada surat jalan yang diterima. Terima kasih.</div></div>
			</div>
			<div>
				<div class="sj-arrival">Jam Datang &nbsp;: ................................</div>
				<div class="sj-signatures">
					<div class="sj-signature"><div class="sj-signature-title">Telah diperiksa dan<br>Diterima oleh,</div><div class="sj-signature-space"></div><div class="sj-signature-line">Nama: <?=html_escape($nama);?></div><div>Tgl:</div></div>
					<div class="sj-signature"><div class="sj-signature-title">Dikirim oleh,</div><div class="sj-signature-space"></div><select id="pengirim" name="pengirim" class="sj-sender-select" data-sj-editable <?=$status > 0 ? 'disabled' : '';?>><option value="">Pilih pengirim</option><?php foreach ($user as $val) { ?><option value="<?=$val->id_user;?>" <?=$val->id_user == $id_user ? 'selected' : '';?>><?=html_escape($val->nama_lengkap);?></option><?php } ?></select><div>Tgl:</div></div>
					<div class="sj-signature"><div class="sj-signature-title">Disetujui oleh,</div><div class="sj-signature-space"></div><div class="sj-signature-line">Nama:</div><div>Tgl:</div></div>
					<div class="sj-signature"><div class="sj-signature-title">Disiapkan oleh,</div><div class="sj-signature-space"></div><div class="sj-signature-line">Nama:</div><div>Tgl:</div></div>
				</div>
			</div>
		</div>

		<div class="sj-hidden">
			<input type="hidden" id="no_surat" name="no_surat" value="<?=html_escape($id);?>">
			<input type="hidden" id="sj_print_token" value="<?=encrypt_url($id);?>">
			<input type="hidden" id="id_invoive" name="id_invoive" value="<?=encrypt_url($row->id_invoice);?>">
		</div>
	</div>
</div>
