<?php $this->load->helper('az_core'); if(!function_exists('fmt')){ function fmt($x){ return number_format((int)$x,0,',','.'); } } ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barkot — Barang Kotor</title>
<style type="text/css">
:root{
	--ink:#16202e; --muted:#69748a; --line:#e3e8ef; --bg1:#eef3f9; --bg2:#e2ecf6;
	--teal:#0f766e; --tealbg:#e3f3f0;
	--blue:#1763c4; --bluebg:#e8f0fc; --green:#1f9d63; --greenbg:#e7f7ef;
	--red:#d6453f; --redbg:#fdecea; --amber:#c9821a; --amberbg:#fdf3e2; --violet:#6f42c1; --violetbg:#f1ecfb;
}
*{box-sizing:border-box;}
body{margin:0;color:var(--ink);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:12px;
	background:linear-gradient(160deg,var(--bg1),var(--bg2));background-attachment:fixed;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
	background-image:radial-gradient(rgba(22,32,46,.05) 1px,transparent 1.4px);background-size:22px 22px;}
h1,h2,h3{font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif;margin:0;}
.wrap{position:relative;max-width:1320px;margin:0 auto;padding:18px;}

/* toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);
	border-radius:12px;padding:12px 14px;margin-bottom:16px;box-shadow:0 2px 10px rgba(31,39,51,.05);}
.toolbar button{border:0;border-radius:9px;padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer;color:#fff;
	display:inline-flex;align-items:center;gap:7px;transition:transform .12s,box-shadow .12s,filter .12s;}
.toolbar button:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(31,39,51,.18);filter:brightness(1.05);}
.toolbar button:active{transform:translateY(0);}
.b-print{background:var(--teal);} .b-pdf{background:var(--violet);} .b-close{background:#56657a;margin-left:auto;}
.hint{width:100%;color:var(--muted);font-size:11px;margin-top:2px;line-height:1.5;}

/* head */
.head{background:linear-gradient(120deg,#0c3b36,#13635b);color:#fff;border-radius:14px;padding:20px 22px;
	margin-bottom:16px;box-shadow:0 6px 20px rgba(12,59,54,.28);position:relative;overflow:hidden;}
.head::after{content:"🧺";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:64px;opacity:.12;}
.head h1{font-size:24px;letter-spacing:.3px;}
.head .sub{font-size:13px;opacity:.92;margin-top:4px;}
.head .meta{margin-top:10px;font-size:11px;opacity:.88;line-height:1.7;}
.head .meta b{background:rgba(255,255,255,.16);padding:1px 7px;border-radius:6px;}
.head .def{margin-top:10px;background:rgba(255,255,255,.12);border-radius:8px;padding:8px 11px;font-size:11px;line-height:1.55;}

/* kpi */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px;}
.kpi{background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:12px;
	padding:13px 14px;box-shadow:0 2px 8px rgba(31,39,51,.05);transition:transform .12s,box-shadow .12s;
	animation:pop .5s both;}
.kpi:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(31,39,51,.12);}
.kpi .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;line-height:1.25;min-height:24px;}
.kpi .val{font-family:'Trebuchet MS',system-ui,sans-serif;font-size:24px;font-weight:800;margin-top:5px;line-height:1.1;}
.kpi .ext{font-size:10.5px;color:var(--muted);margin-top:3px;}
.kpi.teal{border-left-color:var(--teal);} .kpi.teal .val{color:var(--teal);}
.kpi.amber{border-left-color:var(--amber);} .kpi.amber .val{color:var(--amber);}
.kpi.red{border-left-color:var(--red);} .kpi.red .val{color:var(--red);}
.kpi.violet{border-left-color:var(--violet);} .kpi.violet .val{color:var(--violet);}
.kpi:nth-child(1){animation-delay:.02s}.kpi:nth-child(2){animation-delay:.05s}.kpi:nth-child(3){animation-delay:.08s}
.kpi:nth-child(4){animation-delay:.11s}.kpi:nth-child(5){animation-delay:.14s}.kpi:nth-child(6){animation-delay:.17s}
.kpi:nth-child(7){animation-delay:.20s}.kpi:nth-child(8){animation-delay:.23s}.kpi:nth-child(9){animation-delay:.26s}
.kpi:nth-child(10){animation-delay:.29s}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* cards & tabel */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:16px;box-shadow:0 2px 8px rgba(31,39,51,.05);}
.card h2{font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.card h2 .dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.scrollx{overflow-x:auto;}
table{border-collapse:collapse;width:100%;font-size:11.5px;}
th,td{border:1px solid var(--line);padding:5px 7px;vertical-align:top;}
thead th{background:#f3f6fa;text-align:center;font-weight:700;}
td.c,th.c{text-align:center;} td.r,th.r{text-align:right;}
tfoot td{background:#f7f9fc;font-weight:800;}
tbody tr{transition:background .12s;}
tbody tr:hover td{background:#eef3fb;}
tr.grp td{background:var(--teal);color:#fff;font-weight:800;text-align:left;padding:7px 8px;border:1px solid var(--teal);border-top:3px solid #0c3b36;font-size:13px;}
tr.grp td .sub{float:right;font-weight:700;}
tr.grp:hover td{background:var(--teal);}
tr.row-danger td{background:var(--redbg);} tr.row-danger:hover td{background:#fbdedb;}
tr.row-warn td{background:var(--amberbg);} tr.row-warn:hover td{background:#fbeccf;}
.jenis{max-width:230px;} .cat{max-width:260px;} .cat b{color:var(--ink);}
.muted{color:var(--muted);}

/* pill & bar */
.pill{display:inline-block;padding:1px 8px;border-radius:20px;font-size:9.5px;font-weight:800;margin:1px 2px 1px 0;white-space:nowrap;}
.pill.red{background:var(--redbg);color:var(--red);} .pill.green{background:var(--greenbg);color:var(--green);}
.pill.amber{background:var(--amberbg);color:var(--amber);} .pill.teal{background:var(--tealbg);color:var(--teal);}
.barline{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:11px;}
.barline .name{flex:0 0 150px;color:var(--ink);}
.barline .track{flex:1;height:9px;border-radius:5px;background:#eef1f5;overflow:hidden;}
.barline .bar{height:100%;border-radius:5px;transform-origin:left;animation:grow .9s ease both;}
.barline .bar.b0{background:var(--green);} .barline .bar.b1{background:var(--amber);}
.barline .bar.b2{background:#e08a1e;} .barline .bar.b3{background:var(--red);}
.barline .num{flex:0 0 92px;text-align:right;color:var(--muted);font-weight:700;}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.empty{color:var(--muted);text-align:center;padding:18px;font-size:13px;}

@media (max-width:1100px){ .kpis{grid-template-columns:repeat(3,1fr);} }
@media (max-width:720px){ .kpis{grid-template-columns:repeat(2,1fr);} .two{grid-template-columns:1fr;} }
@media print{
	.toolbar{display:none !important;} body{background:#fff;} .wrap{max-width:none;padding:0;}
	.kpi,.card,.head{box-shadow:none;} .kpi:hover{transform:none;}
	.kpi{animation:none !important;} .barline .bar{animation:none !important;transform:none !important;}
	@page{margin:8mm;}
	thead{display:table-header-group;}
	tbody tr{page-break-inside:avoid;break-inside:avoid;}
	tr.grp{page-break-inside:avoid;break-inside:avoid;page-break-after:avoid;break-after:avoid;}
	table,tbody{page-break-inside:auto;break-inside:auto;}
	tr.grp td,tr.row-danger td,tr.row-warn td,.pill,.barline .bar,.kpi{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
</style>
</head>
<body>
<div class="wrap">

	<div class="toolbar no-print">
		<button type="button" class="b-print" onclick="window.print();">🖨 Cetak</button>
		<button type="button" class="b-pdf"   onclick="window.print();">📄 Simpan PDF</button>
		<button type="button" class="b-close" onclick="window.close();">✕ Tutup</button>
		<div class="hint">
			<b>Barkot</b> = barang kotor (status <b>BARU</b>) yang belum dijemput driver.
			<b>EXPRES</b> = tgl selesai sama dgn tgl masuk atau H+1.
			<b>Mengendap</b> = sudah lewat ≥ 1 malam sejak masuk tapi belum dijemput.
			<b>⚠ Expres Mengendap</b> = expres yang terlambat dijemput (prioritas!).
			Laporan ini <b>tidak menampilkan nilai Rupiah</b> — hanya hitungan bill &amp; pcs.
		</div>
	</div>

	<div class="head">
		<h1>🧺 BARKOT — BARANG KOTOR MENUNGGU DIJEMPUT</h1>
		<div class="sub"><?php echo strtoupper($outlet_title); ?> &nbsp;·&nbsp; Filter status: <b>BARU</b> (belum pickup)</div>
		<div class="meta">
			Periode <b><?php echo (strlen($date_1)?$date_1:'...').' s/d '.(strlen($date_2)?$date_2:'...'); ?></b>
			&nbsp;·&nbsp; Dicetak: <?php echo $tanggal_cetak; ?>
			&nbsp;·&nbsp; Total <b><?php echo fmt($g['n_bill']); ?></b> bill &nbsp;/&nbsp; <b><?php echo fmt($g['n_pcs']); ?></b> pcs kotor
		</div>
		<div class="def">
			Dibaca driver sebelum penjemputan: dahulukan baris berlabel <b>⚠ Expres Mengendap</b>, lalu <b>EXPRES</b>, lalu yang <b>Mengendap</b> paling lama.
			Baris berlatar merah = expres yang sudah terlambat dijemput.
		</div>
	</div>

	<?php if ($g['n_bill'] == 0): ?>
		<div class="card"><div class="empty">🎉 Tidak ada barang kotor (status BARU) pada periode &amp; outlet ini. Semua sudah dijemput / tidak ada transaksi baru.</div></div>
	<?php else: ?>

	<!-- KPI -->
	<div class="kpis">
		<div class="kpi teal"><div class="lbl">Total Bill Kotor</div><div class="val"><?php echo fmt($g['n_bill']); ?></div><div class="ext">status BARU, belum pickup</div></div>
		<div class="kpi teal"><div class="lbl">Total Pcs Kotor</div><div class="val"><?php echo fmt($g['n_pcs']); ?></div><div class="ext">menunggu dijemput</div></div>
		<div class="kpi amber"><div class="lbl">Bill Expres</div><div class="val"><?php echo fmt($g['n_expres']); ?></div><div class="ext">selesai = masuk / H+1</div></div>
		<div class="kpi amber"><div class="lbl">Pcs Expres</div><div class="val"><?php echo fmt($g['pcs_expres']); ?></div><div class="ext">prioritas jemput</div></div>
		<div class="kpi red"><div class="lbl">Bill Mengendap</div><div class="val"><?php echo fmt($g['n_endap']); ?></div><div class="ext">≥ 1 malam belum dijemput</div></div>
		<div class="kpi red"><div class="lbl">Pcs Mengendap</div><div class="val"><?php echo fmt($g['pcs_endap']); ?></div><div class="ext">volume terlambat</div></div>
		<div class="kpi red"><div class="lbl">⚠ Expres Mengendap</div><div class="val"><?php echo fmt($g['n_expres_endap']); ?></div><div class="ext"><?php echo fmt($g['pcs_expres_endap']); ?> pcs — telat!</div></div>
		<div class="kpi violet"><div class="lbl">Bill Ada Catatan</div><div class="val"><?php echo fmt($g['n_catatan']); ?></div><div class="ext">perlu perhatian khusus</div></div>
		<div class="kpi"><div class="lbl">Rata-rata Umur</div><div class="val"><?php echo $g['avg_malam']; ?></div><div class="ext">malam mengendap</div></div>
		<div class="kpi"><div class="lbl">Barang Tertua</div><div class="val"><?php echo fmt($g['max_malam']); ?></div><div class="ext">malam belum dijemput</div></div>
	</div>

	<!-- DISTRIBUSI UMUR + KETERLAMBATAN -->
	<div class="two">
		<div class="card">
			<h2><span class="dot" style="background:var(--blue)"></span> Distribusi Umur Barang Kotor</h2>
			<?php $mx=1; foreach($aging as $a){ if($a['pcs']>$mx) $mx=$a['pcs']; } ?>
			<?php foreach($aging as $i=>$a){ $w=($mx>0)?round($a['pcs']/$mx*100):0; ?>
				<div class="barline">
					<span class="name"><?php echo $a['label']; ?></span>
					<span class="track"><span class="bar b<?php echo $i; ?>" style="width:<?php echo $w; ?>%"></span></span>
					<span class="num"><?php echo fmt($a['n']); ?> bill · <?php echo fmt($a['pcs']); ?> pcs</span>
				</div>
			<?php } ?>
			<div class="hint" style="margin-top:8px">Makin ke kanan = makin lama mengendap di outlet.</div>
		</div>
		<div class="card">
			<h2><span class="dot" style="background:var(--red)"></span> Keterlambatan Penjemputan (Mengendap)</h2>
			<?php $mx2=1; foreach($endap as $a){ if($a['pcs']>$mx2) $mx2=$a['pcs']; } ?>
			<?php foreach($endap as $i=>$a){ $w=($mx2>0)?round($a['pcs']/$mx2*100):0; $bi=$i+1; ?>
				<div class="barline">
					<span class="name">Mengendap <?php echo $a['label']; ?></span>
					<span class="track"><span class="bar b<?php echo $bi; ?>" style="width:<?php echo $w; ?>%"></span></span>
					<span class="num"><?php echo fmt($a['n']); ?> bill · <?php echo fmt($a['pcs']); ?> pcs</span>
				</div>
			<?php } ?>
			<div class="hint" style="margin-top:8px">Barang yang seharusnya sudah dijemput tapi masih di outlet.</div>
		</div>
	</div>

	<!-- RINGKASAN PER OUTLET -->
	<?php if (!empty($is_all_outlet) && count($groups) > 0): ?>
		<div class="card">
			<h2><span class="dot" style="background:var(--teal)"></span> Ringkasan Barkot per Outlet</h2>
			<div class="scrollx">
			<table>
				<thead><tr>
					<th>Outlet</th><th class="c">Bill</th><th class="c">Pcs</th>
					<th class="c">Expres</th><th class="c">Mengendap</th><th class="c">⚠ Expres Telat</th>
					<th class="c">Ada Catatan</th><th class="c">Rata Umur</th><th class="c">Tertua</th>
				</tr></thead>
				<tbody>
				<?php foreach($groups as $gr){ $m=$gr['m']; ?>
					<tr>
						<td><b><?php echo htmlspecialchars((string)$gr['outlet_name']); ?></b></td>
						<td class="c"><?php echo fmt($m['n_bill']); ?></td>
						<td class="c"><?php echo fmt($m['n_pcs']); ?></td>
						<td class="c"><?php echo fmt($m['n_expres']); ?></td>
						<td class="c"><?php echo fmt($m['n_endap']); ?></td>
						<td class="c"><?php echo fmt($m['n_expres_endap']); ?></td>
						<td class="c"><?php echo fmt($m['n_catatan']); ?></td>
						<td class="c"><?php echo $m['avg_malam']; ?> mlm</td>
						<td class="c"><?php echo fmt($m['max_malam']); ?> mlm</td>
					</tr>
				<?php } ?>
				</tbody>
				<tfoot><tr>
					<td>TOTAL</td>
					<td class="c"><?php echo fmt($g['n_bill']); ?></td>
					<td class="c"><?php echo fmt($g['n_pcs']); ?></td>
					<td class="c"><?php echo fmt($g['n_expres']); ?></td>
					<td class="c"><?php echo fmt($g['n_endap']); ?></td>
					<td class="c"><?php echo fmt($g['n_expres_endap']); ?></td>
					<td class="c"><?php echo fmt($g['n_catatan']); ?></td>
					<td class="c"><?php echo $g['avg_malam']; ?> mlm</td>
					<td class="c"><?php echo fmt($g['max_malam']); ?> mlm</td>
				</tr></tfoot>
			</table>
			</div>
		</div>
	<?php endif; ?>

	<!-- RINCIAN PER OUTLET -->
	<div class="card">
		<h2><span class="dot" style="background:var(--red)"></span> Rincian Bill Kotor (urut dari yang paling lama mengendap)</h2>
		<div class="scrollx">
		<table>
			<thead><tr>
				<th class="c" width="26">No</th>
				<th width="120">Kode Bill</th>
				<th>Pelanggan</th>
				<th class="c" width="92">Tgl Masuk</th>
				<th class="c" width="78">Tgl Selesai</th>
				<th class="c" width="40">Pcs</th>
				<th class="c" width="46">Umur</th>
				<th width="150">Situasi</th>
				<th class="jenis">Jenis Barang</th>
				<th class="cat">Catatan / Pesan</th>
			</tr></thead>
			<tbody>
			<?php
			$no_all = 0;
			foreach ($groups as $gr) {
				// urutkan baris: mengendap terlama dulu, expres dulu
				$rows = $gr['rows'];
				usort($rows, function($a,$b){
					if ($b['malam'] != $a['malam']) return $b['malam'] - $a['malam'];
					if ($a['is_expres'] != $b['is_expres']) return $a['is_expres'] ? -1 : 1;
					return strcmp($a['code'], $b['code']);
				});
				echo "<tr class='grp'><td colspan='10'>📍 ".htmlspecialchars((string)$gr['outlet_name'])." <span class='sub'>".fmt($gr['m']['n_bill'])." bill · ".fmt($gr['m']['n_pcs'])." pcs · Expres ".fmt($gr['m']['n_expres'])." · Mengendap ".fmt($gr['m']['n_endap'])." · ⚠ ".fmt($gr['m']['n_expres_endap'])."</span></td></tr>";
				foreach ($rows as $b) {
					$no_all++;
					$rc = ($b['is_expres'] && $b['is_endap']) ? 'row-danger' : ($b['is_endap'] ? 'row-warn' : '');
					$cat = '';
					if ($b['note'] !== '')       $cat .= '<div><b>📝 Bill:</b> '.htmlspecialchars($b['note']).'</div>';
					if ($b['item_notes'] !== '') $cat .= '<div><b>🏷 Barang:</b> '.htmlspecialchars($b['item_notes']).'</div>';
					if ($cat === '') $cat = '<span class="muted">-</span>';
					echo "<tr class='".$rc."'>";
					echo "<td class='c'>".$no_all."</td>";
					echo "<td><b>".htmlspecialchars((string)$b['code'])."</b></td>";
					echo "<td>".htmlspecialchars((string)$b['customer'])."</td>";
					echo "<td class='c'>".$b['tgl_masuk']."</td>";
					echo "<td class='c'>".$b['tgl_selesai']."</td>";
					echo "<td class='c'><b>".fmt($b['pcs'])."</b></td>";
					echo "<td class='c'>".$b['malam']." mlm</td>";
					echo "<td>";
					if ($b['is_hari_ini']) echo '<span class="pill green">Hari ini</span>';
					if ($b['is_expres'] && $b['is_endap']) echo '<span class="pill red">⚠ EXPRES MENGENDAP '.$b['malam'].'mlm</span>';
					elseif ($b['is_expres']) echo '<span class="pill amber">EXPRES</span>';
					elseif ($b['is_endap'])  echo '<span class="pill red">Mengendap '.$b['malam'].'mlm</span>';
					if ($b['ada_catatan']) echo '<span class="pill teal">📝 ada catatan</span>';
					echo "</td>";
					echo "<td class='jenis'>".(strlen($b['jenis'])>0 ? htmlspecialchars($b['jenis']) : '<span class="muted">-</span>')."</td>";
					echo "<td class='cat'>".$cat."</td>";
					echo "</tr>";
				}
			}
			?>
			</tbody>
		</table>
		</div>
	</div>

	<?php endif; ?>

</div>
</body>
</html>