<?php
// ============================================================
//  V_BARBER.PHP — FINAL MOBILE RESPONSIVE + ZOOM BUTTON
//  - Filter Jadwal & Aksi + Panel Libur
//  - Tampilan Kartu di HP (tidak perlu scroll horizontal)
//  - Tombol Zoom Manual (A- / A+) untuk aplikasi web2app
// ============================================================
if (!function_exists('bb_fmt')) { function bb_fmt($x){ return number_format((int)$x,0,',','.'); } }

$g = array_merge(array(
  'n_bill'=>0,'n_pcs'=>0,'n_terlambat'=>0,'pcs_terlambat'=>0,'n_hari_ini'=>0,'pcs_hari_ini'=>0,
  'n_besok'=>0,'pcs_besok'=>0,'n_rentang'=>0,'pcs_rentang'=>0,'n_express'=>0,'pcs_express'=>0,
  'n_proses'=>0,'pcs_proses'=>0,'n_menunggu'=>0,'pcs_menunggu'=>0,'n_catatan'=>0,'n_siap'=>0,'n_dstb'=>0,
  'sum_telat'=>0,'max_telat'=>0,
), (array)(isset($g)?$g:array()));

$aging     = isset($aging)?(array)$aging:array();
$top_jenis = isset($top_jenis)?(array)$top_jenis:array();
$groups    = isset($groups)?(array)$groups:array();
$is_all_outlet = !empty($is_all_outlet);
$outlet_title  = isset($outlet_title)?$outlet_title:'SEMUA OUTLET';
$date_1 = isset($date_1)?$date_1:''; $date_2 = isset($date_2)?$date_2:'';
$tanggal_cetak = isset($tanggal_cetak)?$tanggal_cetak:date('d F Y');

foreach ($groups as $gi => $gr) {
  $groups[$gi]['m'] = array_merge(array(
    'n_bill'=>0,'n_pcs'=>0,'n_terlambat'=>0,'pcs_terlambat'=>0,'n_hari_ini'=>0,'pcs_hari_ini'=>0,
    'n_express'=>0,'pcs_express'=>0,'n_proses'=>0,'pcs_proses'=>0,'n_menunggu'=>0,'pcs_menunggu'=>0,
    'n_catatan'=>0,'n_siap'=>0,'n_dstb'=>0,
  ), (array)$gr['m']);
  if (!isset($groups[$gi]['rows'])) $groups[$gi]['rows'] = array();
}

$bi = isset($besok_info) ? $besok_info : array(
  'mode'=>'auto','minggu_libur'=>1,'skip_days'=>1,'skip'=>1,
  'besok'=>date('Y-m-d',strtotime('+1 day')),
  'besok_label'=>date('l, d/m/Y',strtotime('+1 day')),
  'rentang'=>array(),'libur_map'=>array()
);
$libur_list = isset($libur_list) ? $libur_list : array();
$qs = isset($_SERVER['QUERY_STRING']) ? $_SERVER['QUERY_STRING'] : '';

function brb_row_class($b){
  $cat = isset($b['cat']) ? $b['cat'] : 'flat';
  $st  = isset($b['state']) ? $b['state'] : 'A';
  $flag = ($cat==='late')?'f-late':(($cat==='today')?'f-today':(($cat==='besok')?'f-besok':(($cat==='rentang')?'f-rentang':'')));
  if ($st === 'C') { $rc = 'row-done'; }
  elseif ($st === 'B') { $rc = ($cat==='late')?'row-late-dark':(($cat==='today')?'row-today-dark':(($cat==='besok')?'row-besok-dark':(($cat==='rentang')?'row-rentang-dark':'row-flat-dark'))); }
  else { $rc = ($cat==='late')?'row-late':(($cat==='today')?'row-today':(($cat==='besok')?'row-besok':(($cat==='rentang')?'row-rentang':''))); }
  return trim('brb-row '.$flag.' '.$rc);
}
function brb_act_html($b){
  $id = (int)$b['id'];
  $st = isset($b['state']) ? $b['state'] : 'A';
  if ($st === 'C') {
    return '<span class="brb-dstb">📦 DSTB Bersih<br><b>'.htmlspecialchars((string)$b['dstb_code']).'</b></span>';
  }
  if ($st === 'B') {
    $tip = '';
    if (!empty($b['ready_by_name'])) { $tip = 'Ditandai '.htmlspecialchars($b['ready_by_name']).(!empty($b['ready_at'])?' · '.htmlspecialchars($b['ready_at']):''); }
    return '<button type="button" class="brb-act undo" data-id="'.$id.'" title="'.$tip.'"><span class="ic">↺</span> Belum Selesai</button>'
         . '<div class="brb-act-note"><span class="dot"></span> Bill siap Dikirim</div>';
  }
  return '<button type="button" class="brb-act go" data-id="'.$id.'"><span class="ic">✓</span> Selesai Proses</button>';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Viewport untuk HP: izinkan zoom manual & set lebar sesuai device -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<title>Barber — Pantauan Produksi</title>
<style type="text/css">
:root{
  --ink:#16202e; --muted:#69748a; --line:#e3e8ef; --bg1:#eef6f2; --bg2:#e2f0ea;
  --teal:#0f766e; --tealbg:#e3f3f0; --green:#1f9d63; --greenbg:#e7f7ef;
  --red:#d6453f; --redbg:#fdecea; --amber:#c9821a; --amberbg:#fdf3e2;
  --blue:#2f6fb0; --bluebg:#eaf2fa; --violet:#6f42c1; --violetbg:#f1ecfb;
  --cyan:#0e7490; --cyanbg:#e0f4fa; --grey:#56657a; --greybg:#eef1f5;
  --red-d:#f3c9c6; --amber-d:#f6e0b6; --blue-d:#cfe0f2; --cyan-d:#c4e6f0; --flat-d:#e7ebf1; --done:#eceff3;
}
*{box-sizing:border-box;}
body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:13px; /* Base font 13px agar lebih besar di HP */
  background:linear-gradient(160deg,var(--bg1),var(--bg2));background-attachment:fixed; padding-bottom: 60px;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.45;
  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:1380px;margin:0 auto;padding:14px;}

.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);}
.b-print{background:var(--teal);} .b-pdf{background:var(--violet);} .b-close{background:var(--grey);margin-left:auto;}
.hint{width:100%;color:var(--muted);font-size:11px;margin-top:2px;line-height:1.5;}

.brb-filter{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;margin-top:6px;padding-top:10px;border-top:1px dashed #d7e0e8;}
.brb-filter-label{font-size:10px;font-weight:800;letter-spacing:.8px;color:#69748a;text-transform:uppercase;margin-right:2px;}
.brb-seg{display:inline-flex;gap:4px;background:#eef1f5;border:1px solid #dfe6ee;border-radius:12px;padding:4px;}
.brb-fbtn{border:0;background:transparent;color:#16202e;font-weight:800;font-size:12px;padding:8px 14px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .18s cubic-bezier(.2,.8,.2,1);}
.brb-fbtn .ic{font-size:12px;line-height:1;}
.seg-all.is-idle{color:#0f766e;} .seg-today{color:#9a6310;} .seg-besok{color:#1d4f86;}
.seg-rentang{color:#0b5e74;} .seg-express{color:#5a32a3;} .seg-act-all{color:#3c4658;}
.seg-act-done{color:#157347;} .seg-act-not{color:#b3261f;}
.brb-fbtn:hover{background:rgba(20,32,43,.07);transform:translateY(-1px);}
.brb-fbtn.is-active{color:#fff !important;transform:translateY(-1px);box-shadow:0 4px 12px var(--sh,rgba(0,0,0,.18));}
.seg-all.is-active{background:var(--teal);--sh:rgba(15,118,110,.4);} .seg-today.is-active{background:var(--amber);--sh:rgba(201,130,26,.4);}
.seg-besok.is-active{background:var(--blue);--sh:rgba(47,111,176,.4);} .seg-rentang.is-active{background:var(--cyan);--sh:rgba(14,116,144,.4);}
.seg-express.is-active{background:var(--violet);--sh:rgba(111,66,193,.4);} .seg-act-all.is-active{background:var(--grey);--sh:rgba(86,101,122,.4);}
.seg-act-done.is-active{background:var(--green);--sh:rgba(31,157,99,.4);} .seg-act-not.is-active{background:var(--red);--sh:rgba(214,69,63,.4);}

.brb-fchip{font-size:11.5px;color:#69748a;background:#f6faf8;border:1px dashed #cfe2db;border-radius:20px;padding:5px 12px;display:inline-flex;align-items:center;gap:6px;}
.brb-fchip b{display:inline-block;min-width:20px;text-align:center;background:var(--teal);color:#fff;border-radius:10px;padding:1px 8px;font-size:11px;}
.brb-fbanner{max-height:0;opacity:0;overflow:hidden;margin:0;padding:0 14px;border-radius:10px;background:#fdf3e2;border:1px solid #f0dcb4;color:#8a5a12;font-size:11.5px;line-height:1.5;transition:all .3s ease;display:flex;align-items:center;gap:8px;}
.brb-fbanner.show{max-height:90px;opacity:1;margin:0 0 14px;padding:9px 14px;}
.brb-fbanner .x{font-weight:800;}

.brb-setting{padding:0;overflow:hidden;margin-bottom:16px;}
.brb-setting-toggle{width:100%;border:0;background:linear-gradient(120deg,#134e4a,#0f766e);color:#fff;padding:13px 18px;font-size:13.5px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:10px;letter-spacing:.3px;}
.brb-setting-toggle .chev{margin-left:auto;transition:transform .25s;}
.brb-setting-toggle.open .chev{transform:rotate(180deg);}
.brb-setting-body{max-height:0;overflow:hidden;transition:max-height .4s ease;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;}
.brb-setting-body.open{max-height:1000px;}
.set-inner{padding:16px 18px;}
.set-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;}
.set-label{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#69748a;margin-bottom:9px;}
.set-radio,.set-check{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;margin-bottom:8px;cursor:pointer;background:#fbfdfc;}
.set-radio input,.set-check input{accent-color:#0f766e;width:15px;height:15px;}
.set-num{width:60px;padding:4px 6px;border:1px solid #cfe2db;border-radius:7px;text-align:center;font-weight:800;color:#0f766e;}
.set-addrow{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.set-date,.set-text{padding:8px 10px;border:1px solid #cfe2db;border-radius:9px;font-size:12.5px;background:#fbfdfc;}
.set-text{flex:1;min-width:140px;}
.set-add{border:0;background:var(--cyan);color:#fff;border-radius:9px;padding:8px 14px;font-weight:800;cursor:pointer;}
.set-chips{display:flex;flex-wrap:wrap;gap:7px;}
.set-chip{display:inline-flex;align-items:center;gap:7px;background:var(--cyanbg);color:var(--cyan);border:1px solid #bfe6f0;border-radius:20px;padding:5px 11px;font-size:11.5px;font-weight:700;}
.set-chip .set-del{color:#b91c1c;font-weight:900;text-decoration:none;font-size:14px;line-height:1;}
.set-empty{color:var(--muted);font-size:11.5px;font-style:italic;}
.set-preview{margin-top:14px;background:#f0fdf9;border:1px dashed #9ad6c6;border-radius:10px;padding:10px 14px;font-size:12.5px;line-height:1.6;}
.set-preview .set-besok{color:#0f766e;font-weight:900;font-size:14px;}
.set-actions{margin-top:14px;text-align:right;}
.set-save{border:0;background:linear-gradient(120deg,#0f766e,#1f9d63);color:#fff;border-radius:10px;padding:11px 22px;font-size:13.5px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(15,118,110,.3);}

.head{background:linear-gradient(120deg,#0c3b36,#138074);color:#fff;border-radius:14px;padding:20px 22px;margin-bottom:16px;box-shadow:0 6px 20px rgba(12,59,54,.25);position:relative;overflow:hidden;}
.head::after{content:"🏭";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:64px;opacity:.12;}
.head h1{font-size:23px;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;}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
.kpi{background:#fff;border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:12px;padding:13px 14px;box-shadow:0 2px 8px rgba(31,39,51,.05);}
.kpi .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;line-height:1.25;min-height:26px;}
.kpi .val{font-family:'Trebuchet MS',system-ui,sans-serif;font-size:23px;font-weight:800;margin-top:5px;line-height:1.1;}
.kpi .ext{font-size:10.5px;color:var(--muted);margin-top:3px;}
.kpi.red{border-left-color:var(--red);} .kpi.red .val{color:var(--red);} .kpi.amber{border-left-color:var(--amber);} .kpi.amber .val{color:var(--amber);}
.kpi.violet{border-left-color:var(--violet);} .kpi.violet .val{color:var(--violet);} .kpi.blue{border-left-color:var(--blue);} .kpi.blue .val{color:var(--blue);}
.kpi.cyan{border-left-color:var(--cyan);} .kpi.cyan .val{color:var(--cyan);} .kpi.teal{border-left-color:var(--teal);} .kpi.teal .val{color:var(--teal);}
.kpi.green{border-left-color:var(--green);} .kpi.green .val{color:var(--green);}

.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 small{color:var(--muted);}
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.row-late td{background:var(--redbg);} tr.row-today td{background:var(--amberbg);} tr.row-besok td{background:var(--bluebg);} tr.row-rentang td{background:var(--cyanbg);}
tr.row-late-dark td{background:var(--red-d);} tr.row-today-dark td{background:var(--amber-d);} tr.row-besok-dark td{background:var(--blue-d);} tr.row-rentang-dark td{background:var(--cyan-d);} tr.row-flat-dark td{background:var(--flat-d);}
tr.row-done td{background:var(--done);color:#7b8696;}
tr.row-done td b{color:#5b6675;}
tbody tr{transition:background .18s ease;}
.brb-row{transition:opacity .2s ease,background .25s ease;}

th.aksi-h{background:#eaf3ef;}
td.brb-act-cell{vertical-align:middle;text-align:center;white-space:nowrap;}
.brb-act{border:0;border-radius:9px;padding:7px 11px;font-size:11px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1;}
.brb-act .ic{font-size:12px;line-height:1;}
.brb-act.go{color:#fff;background:linear-gradient(120deg,#0f766e,#1f9d63);box-shadow:0 3px 9px rgba(15,118,110,.30);}
.brb-act.undo{color:#7a4a12;background:#fff;border:1px solid #e7c79a;box-shadow:0 2px 6px rgba(201,130,26,.15);}
.brb-act-note{margin-top:5px;font-size:9.5px;font-weight:800;color:#1f9d63;display:flex;align-items:center;justify-content:center;gap:5px;}
.brb-act-note .dot{width:7px;height:7px;border-radius:50%;background:#1f9d63;box-shadow:0 0 0 0 rgba(31,157,99,.6);animation:brbPulse 1.6s infinite;}
@keyframes brbPulse{0%{box-shadow:0 0 0 0 rgba(31,157,99,.55)}70%{box-shadow:0 0 0 6px rgba(31,157,99,0)}100%{box-shadow:0 0 0 0 rgba(31,157,99,0)}}
.brb-dstb{display:inline-block;font-size:10px;font-weight:700;color:#5b6675;background:#e3e8ef;border:1px dashed #c4ccd6;border-radius:8px;padding:5px 9px;line-height:1.3;text-align:center;}
.brb-dstb b{color:#3d4756;font-size:10.5px;}

.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.amber{background:var(--amberbg);color:var(--amber);}
.pill.violet{background:var(--violetbg);color:var(--violet);} .pill.blue{background:var(--bluebg);color:var(--blue);}
.pill.cyan{background:var(--cyanbg);color:var(--cyan);} .pill.teal{background:var(--tealbg);color:var(--teal);} .pill.grey{background:var(--greybg);color:var(--grey);}
.cat{max-width:300px;} .cat .ln{margin:1px 0;line-height:1.35;} .cat .ic{font-weight:800;margin-right:3px;}
.jenis{max-width:200px;} .muted{color:var(--muted);}

.barline{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:11px;}
.barline .name{flex:0 0 150px;} .barline .track{flex:1;height:14px;border-radius:7px;background:#eef1f5;overflow:hidden;position:relative;}
.barline .bar{height:100%;border-radius:7px;transition:width .6s ease;} .barline .bar.r{background:var(--red);} .barline .bar.a{background:var(--amber);}
.barline .bar.g{background:var(--green);} .barline .bar.v{background:var(--violet);} .barline .bar.b{background:var(--blue);}
.barline .num{flex:0 0 130px;text-align:right;color:var(--muted);font-weight:700;font-size:10.5px;}
.barline .pct{position:absolute;right:4px;top:0;line-height:14px;font-size:9px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);}
.empty{color:var(--muted);text-align:center;padding:14px;}
.pcs-small{font-size:9px;color:rgba(255,255,255,.75);font-weight:600;display:block;margin-top:1px;}
td .pcs-small{color:var(--muted);}

/* ===== MODAL ===== */
.brb-overlay{position:fixed;inset:0;background:rgba(16,28,40,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:9999;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;}
.brb-overlay.show{opacity:1;visibility:visible;}
.brb-modal{width:100%;max-width:560px;max-height:88vh;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(12,30,40,.4);display:flex;flex-direction:column;overflow:hidden;}
.brb-modal-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;background:linear-gradient(120deg,#0c3b36,#138074);color:#fff;position:relative;}
.brb-modal-ico{font-size:26px;line-height:1;}
.brb-modal-head h3{font-size:16px;margin:0 0 3px;line-height:1.3;}
.brb-modal-head p{margin:0;font-size:12px;opacity:.9;font-weight:700;}
.brb-modal-x{position:absolute;top:12px;right:12px;border:0;background:rgba(255,255,255,.16);color:#fff;width:30px;height:30px;border-radius:8px;font-size:15px;cursor:pointer;}
.brb-modal-body{padding:14px 18px;overflow-y:auto;background:linear-gradient(180deg,#f7faf8,#fff);}
.brb-loading{color:var(--muted);text-align:center;padding:24px;font-size:13px;}
.brb-item{display:flex;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:9px;background:#fff;}
.brb-item-num{flex:0 0 46px;font-family:'Trebuchet MS',sans-serif;font-size:18px;font-weight:900;color:var(--teal);text-align:center;align-self:center;background:var(--tealbg);border-radius:9px;padding:6px 0;}
.brb-item-main{flex:1;min-width:0;}
.brb-item-name{font-size:13px;font-weight:800;color:var(--ink);}
.brb-item-phys{font-size:11px;color:#56657a;margin-top:2px;font-weight:600;}
.brb-item-note{font-size:11px;color:#7a4a12;background:var(--amberbg);border-radius:7px;padding:4px 8px;margin-top:5px;display:inline-block;}
.brb-modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--line);background:#fbfdfc;}
.brb-btn{border:0;border-radius:10px;padding:11px 20px;font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
.brb-btn.ghost{background:#eef1f5;color:#56657a;border:1px solid #d7dde6;}
.brb-btn.confirm{color:#fff;background:linear-gradient(120deg,#0f766e,#1f9d63);box-shadow:0 4px 14px rgba(15,118,110,.32);}
.brb-btn:disabled{opacity:.55;cursor:wait;}
body.brb-noscroll{overflow:hidden;}

/* ===== TOMBOL ZOOM MANUAL (Floating) ===== */
.zoom-controls {
  position: fixed; bottom: 20px; right: 20px; z-index: 9998;
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; padding: 8px; border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15); border: 1px solid var(--line);
}
.zoom-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--teal); color: #fff; font-size: 18px; font-weight: bold;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.1s;
}
.zoom-btn:active { transform: scale(0.9); }
.zoom-btn.reset { background: var(--grey); font-size: 12px; }
#zoomLevel { text-align: center; font-size: 10px; font-weight: bold; color: var(--muted); margin-top: -4px; }

/* ===== RESPONSIVE MOBILE (HP) ===== */
@media (max-width: 768px) {
  body { font-size: 14px; } /* Base lebih besar */
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { padding: 10px; }
  .kpi .val { font-size: 20px; }
  .two { grid-template-columns: 1fr; }
  .set-grid { grid-template-columns: 1fr; }
  .brb-filter { flex-direction: column; align-items: flex-start; }
  .brb-seg { flex-wrap: wrap; width: 100%; }
  .brb-fbtn { flex: 1; justify-content: center; min-width: 80px; padding: 10px 8px; font-size: 12px; }
  
  /* Ubah Tabel Rincian Bill jadi Kartu */
  table.brb-table, table.brb-table thead, table.brb-table tbody, table.brb-table th, table.brb-table td, table.brb-table tr {
    display: block;
  }
  table.brb-table thead tr { position: absolute; top: -9999px; left: -9999px; }
  table.brb-table tr {
    border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; background: #fff; padding: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }
  table.brb-table td {
    border: none; border-bottom: 1px dashed #eee; position: relative; padding: 8px 10px 8px 45%; text-align: right; min-height: 36px; display: flex; align-items: center; justify-content: flex-end;
  }
  table.brb-table td:last-child { border-bottom: none; }
  table.brb-table td::before {
    content: attr(data-label); position: absolute; left: 10px; top: 8px; width: 40%; text-align: left; font-weight: 800; color: var(--muted); font-size: 11px;
  }
  /* Penyesuaian khusus untuk baris Group & Empty */
  table.brb-table tr.grp td, table.brb-table tr.brb-empty td {
    padding-left: 10px; text-align: left; display: block;
  }
  table.brb-table tr.grp td::before, table.brb-table tr.brb-empty td::before { content: none; }
  /* Penyesuaian kolom Aksi agar tombol tidak kepotong */
  table.brb-table td.brb-act-cell { padding-left: 10px; justify-content: center; }
  table.brb-table td.brb-act-cell::before { content: none; }
  
  .barline .name { flex: 0 0 100px; font-size: 10px; }
  .barline .num { flex: 0 0 80px; font-size: 10px; }
}
@media print{
  .toolbar,.brb-fbanner,.brb-setting,.zoom-controls{display:none !important;} body{background:#fff;} .wrap{max-width:none;padding:0;}
  .kpi,.card,.head{box-shadow:none;} @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-late td,tr.row-today td,tr.row-besok td,tr.row-rentang td,tr.row-late-dark td,tr.row-today-dark td,tr.row-besok-dark td,tr.row-rentang-dark td,tr.row-flat-dark td,tr.row-done td,.pill,.barline .bar,.kpi,.brb-act,.brb-dstb,.brb-act-note .dot{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .brb-empty,.brb-grp-empty{display:none !important;}
  .brb-act{box-shadow:none !important;}
}
</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="brb-filter">
      <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;">
        <span class="brb-filter-label">Jadwal:</span>
        <div class="brb-seg" id="segJadwal" role="group" aria-label="Filter jadwal keluar">
          <button type="button" class="brb-fbtn seg-all is-active" data-filter="all" aria-pressed="true"><span class="ic">🗂</span> Semua</button>
          <button type="button" class="brb-fbtn seg-today" data-filter="today" aria-pressed="false"><span class="ic">🟠</span> Hari Ini</button>
          <button type="button" class="brb-fbtn seg-besok" data-filter="besok" aria-pressed="false"><span class="ic">🔵</span> Besok</button>
          <button type="button" class="brb-fbtn seg-rentang" data-filter="rentang" aria-pressed="false"><span class="ic">📅</span> Rentang</button>
          <button type="button" class="brb-fbtn seg-express" data-filter="express" aria-pressed="false"><span class="ic">⚡</span> Express</button>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;margin-top:8px;">
        <span class="brb-filter-label">Aksi:</span>
        <div class="brb-seg" id="segAksi" role="group" aria-label="Filter status aksi proses">
          <button type="button" class="brb-fbtn seg-act-all is-active" data-act="all" aria-pressed="true"><span class="ic">📋</span> Semua</button>
          <button type="button" class="brb-fbtn seg-act-done" data-act="done" aria-pressed="false"><span class="ic">✅</span> Selesai</button>
          <button type="button" class="brb-fbtn seg-act-not" data-act="not" aria-pressed="false"><span class="ic">⏳</span> Belum</button>
        </div>
      </div>
      <div class="brb-fchip" style="margin-top:8px;">Menampilkan <b id="brb_filter_count">0</b> bill · <span id="brb_filter_status">Semua Bill</span></div>
    </div>
    <div class="hint">💡 <b>Besok efektif: <?php echo htmlspecialchars($bi['besok_label']); ?></b><?php if(count($bi['rentang'])>0){ ?> · bill jatuh di <b><?php $rl=array(); foreach($bi['rentang'] as $rd){$rl[]=date('D d/m',strtotime($rd));} echo htmlspecialchars(implode(', ',$rl)); ?></b> ikut dipantau sebagai <b> Rentang</b>.<?php } ?> · Gunakan tombol <b>A+/A-</b> di pojok kanan bawah untuk memperbesar tampilan.</div>
  </div>

  <div class="brb-fbanner" id="brb_fbanner"><span class="x">⚠</span><span>Tabel sedang difilter: <b id="brb_fbanner_name">-</b>. Angka KPI di atas tetap <b>TOTAL seluruh bill</b>. Ringkasan per Outlet &amp; header group <b>ikut berubah</b> sesuai filter.</span></div>

  <div class="brb-setting no-print">
    <button type="button" class="brb-setting-toggle" id="btnSetting"><span>⚙</span> Pengaturan "Besok" &amp; Kalender Libur <span class="chev">▾</span></button>
    <div class="brb-setting-body" id="settingBody">
      <div class="set-inner">
        <form method="post" action="<?php echo app_url(); ?>barber/save_barber_setting">
          <input type="hidden" name="back_qs" value="<?php echo htmlspecialchars($qs); ?>">
          <div class="set-grid">
            <div class="set-col">
              <div class="set-label">Mode penentuan "Besok"</div>
              <label class="set-radio"><input type="radio" name="libur_mode" value="auto" <?php echo $bi['mode']=='auto'?'checked':''; ?>> <span><b>Otomatis</b> — besok = hari kerja berikutnya (lewati Minggu &amp; tanggal merah)</span></label>
              <label class="set-radio"><input type="radio" name="libur_mode" value="manual" <?php echo $bi['mode']=='manual'?'checked':''; ?>> <span><b>Manual</b> — besok = hari ini + <input type="number" name="skip_days" min="1" max="30" value="<?php echo (int)$bi['skip_days']; ?>" class="set-num"> hari (misal libur 4 hari → isi 4)</span></label>
              <label class="set-check"><input type="checkbox" name="minggu_libur" value="1" <?php echo $bi['minggu_libur']?'checked':''; ?>> <span>Anggap hari <b>Minggu</b> sebagai libur</span></label>
            </div>
            <div class="set-col">
              <div class="set-label">Kalender libur (tanggal merah)</div>
              <div class="set-addrow">
                <input type="date" name="libur_date" class="set-date">
                <input type="text" name="libur_label" placeholder="Nama libur (cth: Idul Fitri)" class="set-text">
                <button type="submit" class="set-add">+ Tambah &amp; Simpan</button>
              </div>
              <div class="set-chips">
                <?php if(count($libur_list)==0){ echo '<span class="set-empty">Belum ada tanggal libur. Tambahkan di atas bila perlu.</span>'; } ?>
                <?php foreach($libur_list as $lb){ ?>
                <span class="set-chip">📅 <?php echo date('D, d/m/Y', strtotime($lb->libur_date)); ?><?php echo strlen($lb->label)?' · '.htmlspecialchars($lb->label):''; ?>
                  <a class="set-del" href="<?php echo app_url(); ?>barber/delete_barber_libur?id=<?php echo (int)$lb->idbarber_libur; ?>&qs=<?php echo urlencode($qs); ?>" title="Hapus tanggal libur ini" onclick="return confirm('Hapus tanggal libur ini?');">×</a>
                </span>
                <?php } ?>
              </div>
            </div>
          </div>
          <div class="set-preview">
            📅 <b>Besok efektif:</b> <span class="set-besok"><?php echo htmlspecialchars($bi['besok_label']); ?></span>
            <?php if(count($bi['rentang'])>0){ ?>
              &nbsp;·&nbsp; 📆 Hari dalam rentang (ikut dipantau): <b><?php $rl=array(); foreach($bi['rentang'] as $rd){$rl[]=date('D, d/m/Y',strtotime($rd));} echo htmlspecialchars(implode(', ',$rl)); ?></b>
            <?php } else { ?>&nbsp;·&nbsp; Tidak ada hari dalam rentang — besok = besok normal.<?php } ?>
          </div>
          <div class="set-actions"><button type="submit" class="set-save">💾 Simpan Pengaturan</button></div>
        </form>
      </div>
    </div>
  </div>

  <div class="head">
    <h1>🏭 BARBER — PANTAUAN PRODUKSI (<?php echo strtoupper($outlet_title); ?>)</h1>
    <div class="sub">Status dipantau: BARU (express) · DIJEMPUT (express) · DIPROSES (semua) &nbsp;|&nbsp; DIANTAR &amp; END PROCESS tidak ikut</div>
    <div class="meta">Periode tgl selesai <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 bb_fmt($g['n_bill']); ?></b> bill &nbsp;/&nbsp; <b><?php echo bb_fmt($g['n_pcs']); ?></b> pcs
      &nbsp;·&nbsp; Siap dikirim <b><?php echo bb_fmt($g['n_siap']); ?></b> &nbsp;·&nbsp; Sudah DSTB <b><?php echo bb_fmt($g['n_dstb']); ?></b></div>
    <div class="def"><b>Cara baca:</b> <b>Express</b> = selesai − masuk ≤ 1 hari (⚡). <b>Terlambat</b> = selesai lewat hari ini (🔴). <b>Hari ini</b> = harus keluar (). <b>Besok</b> = <?php echo htmlspecialchars($bi['besok_label']); ?> (🔵). <b>Rentang</b> = hari di antara besok normal &amp; besok efektif, tetap dipantau (📅).</div>
  </div>

  <?php if ($g['n_bill'] == 0): ?>
    <div class="card"><div class="empty">🎉 Tidak ada bill yang perlu dipantau produksi pada periode &amp; outlet ini.</div></div>
  <?php else: ?>

  <div class="kpis">
    <div class="kpi teal"><div class="lbl">Total Bill Dipantau</div><div class="val"><?php echo bb_fmt($g['n_bill']); ?></div><div class="ext"><?php echo bb_fmt($g['n_pcs']); ?> pcs</div></div>
    <div class="kpi red"><div class="lbl">🔴 Terlambat</div><div class="val"><?php echo bb_fmt($g['n_terlambat']); ?></div><div class="ext"><?php echo bb_fmt($g['pcs_terlambat']); ?> pcs — segera!</div></div>
    <div class="kpi amber"><div class="lbl">🟠 Jatuh Tempo Hari Ini</div><div class="val"><?php echo bb_fmt($g['n_hari_ini']); ?></div><div class="ext"><?php echo bb_fmt($g['pcs_hari_ini']); ?> pcs harus keluar</div></div>
    <div class="kpi blue"><div class="lbl">🔵 Besok (<?php echo date('d/m', strtotime($bi['besok'])); ?>)</div><div class="val"><?php echo bb_fmt($g['n_besok']); ?></div><div class="ext"><?php echo bb_fmt($g['pcs_besok']); ?> pcs · <?php echo htmlspecialchars($bi['besok_label']); ?></div></div>
    <div class="kpi cyan"><div class="lbl">📅 Dalam Rentang Libur</div><div class="val"><?php echo bb_fmt($g['n_rentang']); ?></div><div class="ext"><?php echo bb_fmt($g['pcs_rentang']); ?> pcs ikut dipantau</div></div>
    <div class="kpi violet"><div class="lbl">⚡ Express</div><div class="val"><?php echo bb_fmt($g['n_express']); ?></div><div class="ext"><?php echo bb_fmt($g['pcs_express']); ?> pcs prioritas</div></div>
    <div class="kpi green"><div class="lbl">✅ Siap Dikirim</div><div class="val"><?php echo bb_fmt($g['n_siap']); ?></div><div class="ext">sudah selesai proses</div></div>
    <div class="kpi"><div class="lbl">📦 Sudah DSTB</div><div class="val"><?php echo bb_fmt($g['n_dstb']); ?></div><div class="ext">masuk DSTB Bersih</div></div>
  </div>

  <div class="two">
    <div class="card">
      <h2><span class="dot" style="background:var(--red)"></span> Umur Keterlambatan</h2>
      <?php
      $mx=1; $tot_aging_pcs=0;
      foreach($aging as $a){ if($a['pcs']>$mx)$mx=$a['pcs']; $tot_aging_pcs+=$a['pcs']; }
      $ac=array('r','a','r');
      foreach($aging as $i=>$a){
        $w=($mx>0)?round($a['pcs']/$mx*100):0;
        $cls=isset($ac[$i])?$ac[$i]:'r';
        $pct=($tot_aging_pcs>0)?round($a['pcs']/$tot_aging_pcs*100):0;
      ?>
      <div class="barline">
        <span class="name"><?php echo $a['label']; ?></span>
        <span class="track"><span class="bar <?php echo $cls; ?>" style="width:<?php echo $w; ?>%"><?php if($w>12){ ?><span class="pct"><?php echo $pct; ?>%</span><?php } ?></span></span>
        <span class="num"><?php echo bb_fmt($a['n']); ?> bill · <?php echo bb_fmt($a['pcs']); ?> pcs (<?php echo $pct; ?>%)</span>
      </div>
      <?php } ?>
      <div class="hint" style="margin-top:8px">Skala: bar terpanjang = pcs terbanyak. Telat terlama: <b><?php echo bb_fmt($g['max_telat']); ?> hari</b>.</div>
    </div>
    <div class="card">
      <h2><span class="dot" style="background:var(--green)"></span> Jenis Barang Terbanyak Dipantau</h2>
      <?php if (count($top_jenis)==0){ echo '<div class="empty">-</div>'; } else {
        $mx2=1; $tot_jenis_pcs=0;
        foreach($top_jenis as $t){ if($t->pcs>$mx2)$mx2=$t->pcs; $tot_jenis_pcs+=(int)$t->pcs; }
        $i=0; foreach($top_jenis as $t){ if($i>=8)break;
          $w=($mx2>0)?round($t->pcs/$mx2*100):0;
          $pct=($tot_jenis_pcs>0)?round((int)$t->pcs/$tot_jenis_pcs*100):0;
      ?>
      <div class="barline">
        <span class="name"><?php echo htmlspecialchars($t->name); ?></span>
        <span class="track"><span class="bar g" style="width:<?php echo $w; ?>%"><?php if($w>12){ ?><span class="pct"><?php echo $pct; ?>%</span><?php } ?></span></span>
        <span class="num"><?php echo bb_fmt($t->pcs); ?> pcs (<?php echo $pct; ?>%)</span>
      </div>
      <?php $i++; } ?>
      <div class="hint" style="margin-top:8px">Skala: bar terpanjang = jenis terbanyak.</div>
      <?php } ?>
    </div>
  </div>

<?php if (isset($pu_items) && count($pu_items) > 0): ?>
<div class="card" id="cardPu">
<h2><span class="dot" style="background:var(--amber)"></span> Barang Proses Ulang (PU) — Wajib Diselesaikan</h2>
<div class="scrollx">
<table>
<thead><tr>
<th class="c" width="26">No</th>
<th width="120">Kode Bill</th>
<th>Pelanggan</th>
<th>Barang</th>
<th>Alasan PU</th>
<th class="c" width="90">Est. Selesai</th>
<th class="c" width="110">Status</th>
<th class="c" width="110">Aksi</th>
</tr></thead>
<tbody>
<?php $no = 0; foreach ($pu_items as $p): $no++; ?>
<tr>
<td class="c"><?php echo $no; ?></td>
<td><b><?php echo htmlspecialchars($p->bill_code); ?></b></td>
<td><?php echo htmlspecialchars($p->customer_name); ?></td>
<td><?php echo htmlspecialchars($p->product_name . ' (' . $p->item_code . ')'); ?></td>
<td><?php echo htmlspecialchars($p->reason); ?></td>
<td class="c"><?php echo date('d/m/Y', strtotime($p->est_finish_date)); ?></td>
<td class="c">
<?php if ((int)$p->status === 1): ?>
<span class="pill green">✔ SUDAH SELESAI</span>
<?php else: ?>
<span class="pill amber">PROSES</span>
<?php endif; ?>
</td>
<td class="c">
<?php if ((int)$p->status === 1): ?>
<button type="button" class="brb-act undo btn-pu-undo" data-id="<?php echo (int)$p->iddstb_clean_pu; ?>"><span class="ic">↺</span> Batal</button>
<?php else: ?>
<button type="button" class="brb-act go btn-pu-done" data-id="<?php echo (int)$p->iddstb_clean_pu; ?>"><span class="ic">✓</span> Selesai</button>
<?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<div class="hint" style="margin-top:8px">Klik <b>✓ Selesai</b> saat barang PU selesai dikerjakan — badge <b>SUDAH SELESAI</b> akan muncul di halaman DSTB Bersih. Klik <b>Batal</b> untuk membatalkan tanda selesai.</div>
</div>
<?php endif; ?>

  <?php if ($is_all_outlet && count($groups)>0): ?>
  <div class="card" id="cardRingkasan">
    <h2><span class="dot" style="background:var(--teal)"></span> Ringkasan per Outlet <small style="font-weight:400;color:var(--muted);font-size:11px;">(ikut berubah sesuai filter aktif)</small></h2>
    <div class="scrollx">
      <table id="tblRingkasan">
        <thead><tr><th>Outlet</th><th class="c">Bill <small>/ Pcs</small></th><th class="c">🔴 Telat</th><th class="c">🟠 Hari Ini</th><th class="c">⚡ Express</th><th class="c">✅ Siap</th><th class="c">📦 DSTB</th><th class="c">📌 Note</th></tr></thead>
        <tbody>
        <?php foreach ($groups as $gi=>$gr){ $m=$gr['m']; ?>
          <tr data-grp="<?php echo $gi; ?>">
            <td><b><?php echo htmlspecialchars((string)$gr['outlet_name']); ?></b></td>
            <td class="c"><span class="rk-bill"><?php echo bb_fmt($m['n_bill']); ?></span><span class="pcs-small"><span class="rk-pcs"><?php echo bb_fmt($m['n_pcs']); ?></span> pcs</span></td>
            <td class="c"><span class="rk-late"><?php echo bb_fmt($m['n_terlambat']); ?></span></td>
            <td class="c"><span class="rk-today"><?php echo bb_fmt($m['n_hari_ini']); ?></span></td>
            <td class="c"><span class="rk-express"><?php echo bb_fmt($m['n_express']); ?></span></td>
            <td class="c"><span class="rk-ready"><?php echo bb_fmt($m['n_siap']); ?></span></td>
            <td class="c"><span class="rk-dstb"><?php echo bb_fmt($m['n_dstb']); ?></span></td>
            <td class="c"><span class="rk-note"><?php echo bb_fmt($m['n_catatan']); ?></span></td>
          </tr>
        <?php } ?>
        </tbody>
        <tfoot><tr>
          <td>TOTAL</td>
          <td class="c"><span class="rk-bill"><?php echo bb_fmt($g['n_bill']); ?></span><span class="pcs-small"><span class="rk-pcs"><?php echo bb_fmt($g['n_pcs']); ?></span> pcs</span></td>
          <td class="c"><span class="rk-late"><?php echo bb_fmt($g['n_terlambat']); ?></span></td>
          <td class="c"><span class="rk-today"><?php echo bb_fmt($g['n_hari_ini']); ?></span></td>
          <td class="c"><span class="rk-express"><?php echo bb_fmt($g['n_express']); ?></span></td>
          <td class="c"><span class="rk-ready"><?php echo bb_fmt($g['n_siap']); ?></span></td>
          <td class="c"><span class="rk-dstb"><?php echo bb_fmt($g['n_dstb']); ?></span></td>
          <td class="c"><span class="rk-note"><?php echo bb_fmt($g['n_catatan']); ?></span></td>
        </tr></tfoot>
      </table>
    </div>
  </div>
  <?php endif; ?>

  <div class="card">
    <h2><span class="dot" style="background:var(--red)"></span> Rincian Bill</h2>
    <div class="scrollx">
      <table class="brb-table">
        <thead><tr>
          <th class="c" width="26">No</th>
          <th class="aksi-h" width="130">Aksi Proses</th>
          <th width="120">Kode Bill</th>
          <th>Pelanggan</th>
          <th class="c" width="78">Tgl Masuk</th>
          <th class="c" width="78">Tgl Selesai</th>
          <th class="c" width="40">Pcs</th>
          <th width="100">Status</th>
          <th width="200">Situasi</th>
          <th class="jenis">Jenis Barang</th>
          <th class="cat">Catatan / Pesan</th>
        </tr></thead>
        <tbody>
        <?php
        $no_all = 0;
        foreach ($groups as $gi => $gr) {
          echo "<tr class='grp brb-grp' data-grp='".$gi."'><td colspan='11'>📍 ".htmlspecialchars((string)$gr['outlet_name'])
            ." <span class='sub'><span class='grp-bill'>".bb_fmt($gr['m']['n_bill'])."</span> bill · <span class='grp-pcs'>".bb_fmt($gr['m']['n_pcs'])."</span> pcs · 🔴<span class='grp-late'>".bb_fmt($gr['m']['n_terlambat'])."</span> · <span class='grp-today'>".bb_fmt($gr['m']['n_hari_ini'])."</span> · ✅<span class='grp-ready'>".bb_fmt($gr['m']['n_siap'])."</span> · 📦<span class='grp-dstb'>".bb_fmt($gr['m']['n_dstb'])."</span></span></td></tr>";
          foreach ($gr['rows'] as $b) {
            $no_all++;
            $rowcls = brb_row_class($b);
            if (!empty($b['express']))  { $rowcls .= ' f-express'; }
            if (!empty($b['rentang']))  { $rowcls .= ' f-rentang'; }
            $st_cls = !empty($b['is_proses']) ? 'blue' : ($b['dstb'] === 'DIJEMPUT' ? 'grey' : 'teal');
            $urg = '';
            if (!empty($b['terlambat'])) $urg .= '<span class="pill red">🔴 TERLAMBAT '.(int)$b['telat_hari'].'h</span> ';
            if (!empty($b['hari_ini']))  $urg .= '<span class="pill amber">🟠 JATUH TEMPO HARI INI</span> ';
            if (!empty($b['besok']))     $urg .= '<span class="pill blue">🔵 BESOK ('.date('d/m', strtotime($bi['besok'])).')</span> ';
            if (!empty($b['rentang']))   $urg .= '<span class="pill cyan">📅 RENTANG LIBUR</span> ';
            if (!empty($b['express']))   $urg .= '<span class="pill violet">⚡ EXPRESS</span> ';
            if ($urg === '')             $urg  = '<span class="pill grey">DIPROSES</span>';
            $jenis_html = (strlen($b['jenis'])>0) ? htmlspecialchars($b['jenis']) : '<span class="muted">-</span>';
            $cat_html = '';
            if (!empty($b['ada_catatan']) && is_array($b['notes'])) { foreach ($b['notes'] as $n){ $cat_html .= "<div class='ln'><span class='ic'>".$n['i']."</span>".htmlspecialchars($n['t'])."</div>"; } }
            else { $cat_html = '<span class="muted">-</span>'; }
            echo "<tr class='".$rowcls."' data-id='".(int)$b['id']."' data-cat='".htmlspecialchars($b['cat'])."' data-state='".htmlspecialchars($b['state'])."' data-grp='".$gi."'"
              ." data-pcs='".(int)$b['pcs']."'"
              ." data-late='".(!empty($b['terlambat'])?'1':'0')."'"
              ." data-today='".(!empty($b['hari_ini'])?'1':'0')."'"
              ." data-besok='".(!empty($b['besok'])?'1':'0')."'"
              ." data-rentang='".(!empty($b['rentang'])?'1':'0')."'"
              ." data-express='".(!empty($b['express'])?'1':'0')."'"
              ." data-note='".(!empty($b['ada_catatan'])?'1':'0')."'"
              .">";
            echo "<td class='c' data-label='No'>".$no_all."</td>";
            echo "<td class='brb-act-cell' data-label='Aksi Proses'>".brb_act_html($b)."</td>";
            echo "<td data-label='Kode Bill'><b>".htmlspecialchars((string)$b['code'])."</b></td>";
            echo "<td data-label='Pelanggan'>".htmlspecialchars((string)$b['customer'])."</td>";
            echo "<td class='c' data-label='Tgl Masuk'>".$b['tgl_masuk']."</td>";
            echo "<td class='c' data-label='Tgl Selesai'>".$b['tgl_selesai']."</td>";
            echo "<td class='c' data-label='Pcs'><b>".bb_fmt($b['pcs'])."</b></td>";
            echo "<td data-label='Status'><span class='pill ".$st_cls."'>".htmlspecialchars($b['dstb'])."</span></td>";
            echo "<td data-label='Situasi'>".$urg."</td>";
            echo "<td class='jenis' data-label='Jenis Barang'>".$jenis_html."</td>";
            echo "<td class='cat' data-label='Catatan'>".$cat_html."</td>";
            echo "</tr>";
          }
          echo "<tr class='brb-empty' data-grp='".$gi."' style='display:none'><td colspan='11' class='empty'>🔍 Tidak ada bill sesuai filter aktif di outlet ini.</td></tr>";
        }
        ?>
        </tbody>
      </table>
    </div>
  </div>

  <?php endif; ?>
</div>

<!-- ===== TOMBOL ZOOM MANUAL ===== -->
<div class="zoom-controls no-print">
  <button class="zoom-btn" onclick="adjustZoom(10)" title="Perbesar">A+</button>
  <button class="zoom-btn reset" onclick="adjustZoom(0)" title="Reset">100%</button>
  <button class="zoom-btn" onclick="adjustZoom(-10)" title="Perkecil">A-</button>
  <div id="zoomLevel">100%</div>
</div>

<!-- ===== MODAL KONFIRMASI ===== -->
<div class="brb-overlay" id="brbOverlay">
  <div class="brb-modal" role="dialog" aria-modal="true" aria-labelledby="brbModalTitle">
    <div class="brb-modal-head">
      <div class="brb-modal-ico">✅</div>
      <div style="flex:1;padding-right:24px;">
        <h3 id="brbModalTitle">Apakah Barang-Barang Pada Bill Sudah Selesai?</h3>
        <p id="brbModalSub">—</p>
      </div>
      <button type="button" class="brb-modal-x" id="brbModalX" aria-label="Tutup">✕</button>
    </div>
    <div class="brb-modal-body" id="brbModalBody"><div class="brb-loading">Memuat daftar pakaian…</div></div>
    <div class="brb-modal-foot">
      <button type="button" class="brb-btn ghost" id="brbModalBack">↩ Kembali</button>
      <button type="button" class="brb-btn confirm" id="brbModalYes">✓ Ya, sudah selesai</button>
    </div>
  </div>
</div>

<!-- ===== SCRIPT: FILTER + RINGKASAN + ZOOM ===== -->
<script type="text/javascript">
var BRB_AJAX = '<?php echo app_url(); ?>barber/';
(function(){
  var btnsJadwal = document.querySelectorAll('#segJadwal .brb-fbtn');
  var btnsAksi   = document.querySelectorAll('#segAksi .brb-fbtn');
  var rows    = document.querySelectorAll('.brb-row');
  var grps    = document.querySelectorAll('.brb-grp');
  var empties = document.querySelectorAll('.brb-empty');
  var countEl = document.getElementById('brb_filter_count');
  var statusEl= document.getElementById('brb_filter_status');
  var banner  = document.getElementById('brb_fbanner');
  var bannerNm= document.getElementById('brb_fbanner_name');
  var curJadwal='all', curAksi='all';
  var labelJadwal={all:'Semua Bill',today:'Jatuh Tempo Hari Ini (+ Terlambat)',besok:'Besok Efektif',rentang:'Dalam Rentang Libur',express:'Express'};
  var labelAksi={all:'',done:' · Aksi: Selesai',not:' · Aksi: Belum'};
  function fmt(n){ return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g,'.'); }
  function matchJadwal(row,f){
    if(f==='all')return true;
    if(f==='today')return row.classList.contains('f-today')||row.classList.contains('f-late');
    if(f==='besok')return row.classList.contains('f-besok');
    if(f==='rentang')return row.classList.contains('f-rentang');
    if(f==='express')return row.classList.contains('f-express');
    return true;
  }
  function matchAksi(row,f){
    if(f==='all')return true;
    var st=row.getAttribute('data-state')||'A';
    if(f==='done')return (st==='B'||st==='C');
    if(f==='not')return (st==='A');
    return true;
  }
  function recalcGroups(){
    var stats={};
    rows.forEach(function(r){
      if(r.style.display==='none')return;
      var gi=r.getAttribute('data-grp');
      if(!stats[gi])stats[gi]={bill:0,pcs:0,late:0,today:0,express:0,ready:0,dstb:0,note:0};
      var s=stats[gi];
      s.bill++; s.pcs+=parseInt(r.getAttribute('data-pcs')||'0',10);
      s.late+=(r.getAttribute('data-late')==='1')?1:0;
      s.today+=(r.getAttribute('data-today')==='1')?1:0;
      s.express+=(r.getAttribute('data-express')==='1')?1:0;
      s.note+=(r.getAttribute('data-note')==='1')?1:0;
      var st=r.getAttribute('data-state')||'A';
      if(st==='B')s.ready++; if(st==='C')s.dstb++;
    });
    grps.forEach(function(g){
      var gi=g.getAttribute('data-grp');
      var s=stats[gi]||{bill:0,pcs:0,late:0,today:0,express:0,ready:0,dstb:0,note:0};
      var el;
      el=g.querySelector('.grp-bill');  if(el)el.textContent=fmt(s.bill);
      el=g.querySelector('.grp-pcs');   if(el)el.textContent=fmt(s.pcs);
      el=g.querySelector('.grp-late');  if(el)el.textContent=fmt(s.late);
      el=g.querySelector('.grp-today'); if(el)el.textContent=fmt(s.today);
      el=g.querySelector('.grp-ready'); if(el)el.textContent=fmt(s.ready);
      el=g.querySelector('.grp-dstb');  if(el)el.textContent=fmt(s.dstb);
    });
    var rkRows=document.querySelectorAll('#tblRingkasan tbody tr[data-grp]');
    var tB=0,tP=0,tL=0,tT=0,tE=0,tR=0,tD=0,tN=0;
    rkRows.forEach(function(tr){
      var gi=tr.getAttribute('data-grp');
      var s=stats[gi]||{bill:0,pcs:0,late:0,today:0,express:0,ready:0,dstb:0,note:0};
      tB+=s.bill;tP+=s.pcs;tL+=s.late;tT+=s.today;tE+=s.express;tR+=s.ready;tD+=s.dstb;tN+=s.note;
      var el;
      el=tr.querySelector('.rk-bill');    if(el)el.textContent=fmt(s.bill);
      el=tr.querySelector('.rk-pcs');     if(el)el.textContent=fmt(s.pcs);
      el=tr.querySelector('.rk-late');    if(el)el.textContent=fmt(s.late);
      el=tr.querySelector('.rk-today');   if(el)el.textContent=fmt(s.today);
      el=tr.querySelector('.rk-express'); if(el)el.textContent=fmt(s.express);
      el=tr.querySelector('.rk-ready');   if(el)el.textContent=fmt(s.ready);
      el=tr.querySelector('.rk-dstb');    if(el)el.textContent=fmt(s.dstb);
      el=tr.querySelector('.rk-note');    if(el)el.textContent=fmt(s.note);
    });
    var foot=document.querySelector('#tblRingkasan tfoot tr');
    if(foot){var el;
      el=foot.querySelector('.rk-bill');    if(el)el.textContent=fmt(tB);
      el=foot.querySelector('.rk-pcs');     if(el)el.textContent=fmt(tP);
      el=foot.querySelector('.rk-late');    if(el)el.textContent=fmt(tL);
      el=foot.querySelector('.rk-today');   if(el)el.textContent=fmt(tT);
      el=foot.querySelector('.rk-express'); if(el)el.textContent=fmt(tE);
      el=foot.querySelector('.rk-ready');   if(el)el.textContent=fmt(tR);
      el=foot.querySelector('.rk-dstb');    if(el)el.textContent=fmt(tD);
      el=foot.querySelector('.rk-note');    if(el)el.textContent=fmt(tN);}
  }
  function apply(){
    var vis=0;
    rows.forEach(function(r){ var show=matchJadwal(r,curJadwal)&&matchAksi(r,curAksi); r.style.display=show?'':'none'; if(show)vis++; });
    grps.forEach(function(g){
      var gi=g.getAttribute('data-grp'),c=0;
      rows.forEach(function(r){ if(r.getAttribute('data-grp')===gi&&r.style.display!=='none')c++; });
      empties.forEach(function(e){ if(e.getAttribute('data-grp')===gi)e.style.display=(c===0)?'':'none'; });
      if(c===0)g.classList.add('brb-grp-empty'); else g.classList.remove('brb-grp-empty');
    });
    btnsJadwal.forEach(function(b){var on=(b.getAttribute('data-filter')===curJadwal);b.classList.toggle('is-active',on);b.setAttribute('aria-pressed',on?'true':'false');});
    btnsAksi.forEach(function(b){var on=(b.getAttribute('data-act')===curAksi);b.classList.toggle('is-active',on);b.setAttribute('aria-pressed',on?'true':'false');});
    var label=(labelJadwal[curJadwal]||'')+(labelAksi[curAksi]||'');
    if(statusEl)statusEl.textContent=label;
    if(countEl){countEl.textContent=vis;countEl.classList.remove('bump');void countEl.offsetWidth;countEl.classList.add('bump');}
    if(banner){ if(curJadwal==='all'&&curAksi==='all'){banner.classList.remove('show');} else {if(bannerNm)bannerNm.textContent=label;banner.classList.add('show');} }
    recalcGroups();
  }
  btnsJadwal.forEach(function(b){b.addEventListener('click',function(){curJadwal=b.getAttribute('data-filter');apply();});});
  btnsAksi.forEach(function(b){b.addEventListener('click',function(){curAksi=b.getAttribute('data-act');apply();});});
  apply();
  window.__brbApplyFilter=apply;
  var btnSet=document.getElementById('btnSetting'), bodySet=document.getElementById('settingBody');
  if(btnSet){btnSet.addEventListener('click',function(){bodySet.classList.toggle('open');btnSet.classList.toggle('open');});}
})();

// ===== SCRIPT ZOOM MANUAL =====
let currentZoom = 100;
function adjustZoom(delta) {
  if (delta === 0) { currentZoom = 100; } 
  else { currentZoom += delta; }
  if (currentZoom < 80) currentZoom = 80;
  if (currentZoom > 150) currentZoom = 150;
  document.body.style.fontSize = currentZoom + '%';
  document.getElementById('zoomLevel').innerText = currentZoom + '%';
}
</script>

<!-- ===== SCRIPT: AKSI PROSES + MODAL ===== -->
<script type="text/javascript">
(function(){
  var overlay=document.getElementById('brbOverlay'), body=document.getElementById('brbModalBody'),
  sub=document.getElementById('brbModalSub'), btnYes=document.getElementById('brbModalYes'),
  btnBack=document.getElementById('brbModalBack'), btnX=document.getElementById('brbModalX');
  var curId=null, curTr=null;
  function esc(s){ s=(s==null?'':String(s)); return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
  function flagClass(cat){ return cat==='late'?'f-late':(cat==='today'?'f-today':(cat==='besok'?'f-besok':(cat==='rentang'?'f-rentang':''))); }
  function rowStateClass(state,cat){
    if(state==='C')return 'row-done';
    if(state==='B')return cat==='late'?'row-late-dark':(cat==='today'?'row-today-dark':(cat==='besok'?'row-besok-dark':(cat==='rentang'?'row-rentang-dark':'row-flat-dark')));
    return cat==='late'?'row-late':(cat==='today'?'row-today':(cat==='besok'?'row-besok':(cat==='rentang'?'row-rentang':'')));
  }
  function actCellHTML(state,id,meta){
    meta=meta||{};
    if(state==='C'){return '<span class="brb-dstb">📦 DSTB Bersih<br><b>'+esc(meta.dstb_code)+'</b></span>';}
    if(state==='B'){
      var tip='';
      if(meta.ready_by_name){tip='Ditandai '+esc(meta.ready_by_name)+(meta.ready_at?(' · '+esc(meta.ready_at)):'');}
      return '<button type="button" class="brb-act undo" data-id="'+id+'" title="'+tip+'"><span class="ic">↺</span> Belum Selesai</button>'
        +'<div class="brb-act-note"><span class="dot"></span> Bill siap Dikirim</div>';
    }
    return '<button type="button" class="brb-act go" data-id="'+id+'"><span class="ic">✓</span> Selesai Proses</button>';
  }
  function setRowState(tr,state,meta){
    var id=tr.getAttribute('data-id'), cat=tr.getAttribute('data-cat')||'flat';
    tr.setAttribute('data-state',state);
    var cls='brb-row '+flagClass(cat)+' '+rowStateClass(state,cat);
    if(tr.classList.contains('f-express'))cls+=' f-express';
    if(tr.classList.contains('f-rentang'))cls+=' f-rentang';
    tr.className=cls;
    var cell=tr.querySelector('.brb-act-cell');
    if(cell)cell.innerHTML=actCellHTML(state,id,meta);
    if(window.__brbApplyFilter)window.__brbApplyFilter();
  }
  function renderItem(it){
    var phys=[it.colour,it.hue,it.spot].filter(function(x){return x&&String(x).length;}).join(', ');
    var h='<div class="brb-item"><div class="brb-item-num">'+it.n+'/'+it.tot+'</div><div class="brb-item-main">';
    h+='<div class="brb-item-name">'+esc(it.product_name||'(tanpa jenis)')+'</div>';
    if(phys)h+='<div class="brb-item-phys">'+esc(phys)+'</div>';
    if(it.trx_note)h+='<div class="brb-item-note"><span class="ic">📌</span>'+esc(it.trx_note)+'</div>';
    h+='</div></div>';
    return h;
  }
  function openModal(){overlay.classList.add('show');document.body.classList.add('brb-noscroll');}
  function closeModal(){overlay.classList.remove('show');document.body.classList.remove('brb-noscroll');curId=null;curTr=null;}
  function openReady(id,tr){
    curId=id;curTr=tr;
    sub.textContent='Memuat…';
    body.innerHTML='<div class="brb-loading">Memuat daftar pakaian…</div>';
    btnYes.disabled=true;btnBack.disabled=false;
    openModal();
    var fd=new FormData();fd.append('id',id);
    fetch(BRB_AJAX+'get_ready_items',{method:'POST',body:fd}).then(function(r){return r.json();}).then(function(res){
      if(res.err_code!==0){body.innerHTML='<div class="brb-loading" style="color:#c0392b;">'+esc(res.err_message||'Gagal memuat')+'</div>';btnYes.disabled=true;return;}
      sub.textContent=esc(res.code)+' · '+esc(res.customer||'');
      if(!res.items||res.items.length===0){body.innerHTML='<div class="brb-loading">Tidak ada rincian pakaian pada bill ini.</div>';btnYes.disabled=true;return;}
      var h='';for(var i=0;i<res.items.length;i++){h+=renderItem(res.items[i]);}
      body.innerHTML=h;btnYes.disabled=false;
    }).catch(function(){body.innerHTML='<div class="brb-loading" style="color:#c0392b;">Gagal menghubungi server.</div>';btnYes.disabled=true;});
  }
  function ajaxToggle(id,val,tr,after){
    var fd=new FormData();fd.append('id',id);fd.append('val',val);
    fetch(BRB_AJAX+'toggle_ready',{method:'POST',body:fd}).then(function(r){return r.json();}).then(function(res){
      if(res.err_code!==0){alert(res.err_message||'Gagal menyimpan');if(after)after(false);return;}
      setRowState(tr,res.state,{ready_at:res.ready_at,ready_by_name:res.ready_by_name,dstb_code:res.dstb_code});
      if(after)after(true);
    }).catch(function(){alert('Gagal menghubungi server');if(after)after(false);});
  }
  document.addEventListener('click',function(e){
    var go=e.target.closest('.brb-act.go');
    if(go){var tr=go.closest('tr');openReady(go.getAttribute('data-id'),tr);return;}
    var undo=e.target.closest('.brb-act.undo');
    if(undo){var tr2=undo.closest('tr');undo.disabled=true;ajaxToggle(undo.getAttribute('data-id'),0,tr2,function(ok){if(!ok)undo.disabled=false;});return;}
  });
  btnYes.addEventListener('click',function(){
    if(!curId||!curTr||btnYes.disabled)return;
    btnYes.disabled=true;btnBack.disabled=true;
    var tr=curTr;
    ajaxToggle(curId,1,tr,function(ok){ if(ok){closeModal();} else {btnYes.disabled=false;btnBack.disabled=false;} });
  });
  btnBack.addEventListener('click',closeModal);
  btnX.addEventListener('click',closeModal);
  overlay.addEventListener('click',function(e){if(e.target===overlay)closeModal();});
  document.addEventListener('keydown',function(e){if(e.key==='Escape'&&overlay.classList.contains('show'))closeModal();});
})();
</script>
<script>
document.addEventListener('click', function(e){
var done = e.target.closest('.btn-pu-done');
var undo = e.target.closest('.btn-pu-undo');
if (done) {
if (!confirm('Tandai barang PU ini SUDAH SELESAI?')) return;
puSet(done.getAttribute('data-id'), 1);
} else if (undo) {
if (!confirm('Batalkan tanda selesai barang PU ini?')) return;
puSet(undo.getAttribute('data-id'), 0);
}
});
function puSet(id, val){
var fd = new FormData(); fd.append('id', id); fd.append('val', val);
fetch('<?php echo app_url(); ?>barber/pu_done', {method:'POST', body:fd})
.then(function(r){ return r.json(); })
.then(function(res){
if (res.err_code === 0) { location.reload(); }
else { alert(res.err_message || 'Gagal menyimpan'); }
})
.catch(function(){ alert('Gagal menghubungi server'); });
}
</script>
<?php $this->load->view('sales_transaction/v_barber_nws_part'); ?>
<?php $this->load->view('sales_transaction/v_barber_pmg_part'); ?>
</body>
</html>