<?php $this->load->helper('az_core'); if(!function_exists('rp')){ function rp($x){ return number_format((float)round($x),0,',','.'); } } ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Analisa Pelayanan Per Jam</title>
<style type="text/css">
  :root{
    --ink:#16202e; --muted:#69748a; --line:#e3e8ef; --bg1:#eef3f9; --bg2:#e2ecf6;
    --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:Arial,Helvetica,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{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(--blue);} .b-pdf{background:var(--violet);} .b-xls{background:var(--green);}
  .hint{width:100%;color:var(--muted);font-size:11px;margin-top:2px;}
  .head{background:linear-gradient(120deg,#1c2b3d,#2f5277);color:#fff;border-radius:14px;padding:20px 22px;
       margin-bottom:16px;box-shadow:0 6px 20px rgba(28,43,61,.25);}
  .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:.85;line-height:1.7;}
  .head .meta b{background:rgba(255,255,255,.14);padding:1px 7px;border-radius:6px;}
  .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(--blue);border-radius:12px;
       padding:13px 14px;box-shadow:0 2px 8px rgba(31,39,51,.05);transition:transform .12s,box-shadow .12s;}
  .kpi:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(31,39,51,.12);}
  .kpi .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;}
  .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.green{border-left-color:var(--green);} .kpi.green .val{color:var(--green);}
  .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);}
  .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;}
  .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:middle;white-space:nowrap;}
  thead th{background:#f3f6fa;text-align:center;font-weight:700;}
  td.r,th.r{text-align:right;} td.c,th.c{text-align:center;}
  tr.acc td{background:#1c2b3d;color:#fff;font-weight:800;font-size:12.5px;border-color:#1c2b3d;}
  tr.acc td.r{color:#fff;}
  tr.busy td{background:var(--greenbg);} tr.quiet td{background:var(--redbg);}
  .tag{display:inline-block;font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:10px;margin-left:5px;vertical-align:middle;}
  .tag.b{background:var(--green);color:#fff;} .tag.q{background:var(--red);color:#fff;}
  /* matriks heat-map */
  .mtx th:first-child,.mtx td:first-child{position:sticky;left:0;background:#fff;z-index:2;text-align:left;font-weight:700;}
  .mtx thead th:first-child{background:#f3f6fa;}
  .mtx td.c{font-weight:700;}
  .mtx tfoot td{background:#f7f9fc;font-weight:800;}
  .legend{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted);margin-top:8px;}
  .legend .bar{width:120px;height:10px;border-radius:5px;background:linear-gradient(90deg,#eef3fb,#1763c4);}
  @media (max-width:820px){ .kpis{grid-template-columns:repeat(2,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;} @page{margin:8mm;}
    table{font-size:9px;} th,td{padding:3px 4px;} .kpi .val{font-size:15px;}
    .mtx th:first-child,.mtx td:first-child{position:static;}
    tr.busy td{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    tr.quiet td{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    tr.acc td{-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();">📄 Download PDF</button>
    <button type="button" class="b-xls"   onclick="exportExcelJam();">📊 Export Excel</button>
    <div class="hint">💡 PDF: pada dialog cetak pilih tujuan <b>“Save as PDF”</b> & orientasi <b>Landscape</b>. Definisi: <b>Kunjungan</b> = pelanggan unik (masuk ∪ ambil) di jam itu · <b>Kas Diterima</b> = uang riil masuk (DPT + pelunasan pickup) · <b>Pelanggan Baru</b> = akun dibuat pada hari transaksi (≈ pertama kali datang) · <b>AOV</b> = rata‑rata nilai transaksi masuk.</div>
  </div>

  <div id="printArea">
    <div class="head">
      <h1>⏱ ANALISA PELAYANAN PER JAM — <?php echo strtoupper($outlet_title);?></h1>
      <div class="sub">Periode <?php echo (strlen($date_1)?$date_1:'...').' s/d '.(strlen($date_2)?$date_2:'...');?></div>
      <div class="meta">Dicetak: <?php echo $tanggal_cetak;?>
        <?php if(strlen($f_outlet)>0){echo ' · Outlet <b>'.htmlspecialchars($outlet_title).'</b>';} ?>
        <?php if(strlen($f_status)>0){echo ' · Status <b>'.htmlspecialchars($f_status).'</b>';} ?>
        <?php if(strlen($f_process)>0){echo ' · Proses <b>'.htmlspecialchars($f_process).'</b>';} ?>
        <?php if(strlen($f_code)>0){echo ' · Kode <b>'.htmlspecialchars($f_code).'</b>';} ?>
        <?php if(strlen($f_customer)>0){echo ' · Pelanggan <b>#'.htmlspecialchars($f_customer).'</b>';} ?>
      </div>
    </div>

    <!-- KPI -->
    <div class="kpis">
      <div class="kpi"><div class="lbl">Total Kunjungan</div><div class="val"><?php echo $kpi['kunjungan'];?></div><div class="ext">pelanggan unik (masuk + ambil)</div></div>
      <div class="kpi green"><div class="lbl">Bill Masuk (DPT)</div><div class="val"><?php echo $kpi['masuk'];?></div><div class="ext">pelanggan titip laundry</div></div>
      <div class="kpi amber"><div class="lbl">Bill Ambil</div><div class="val"><?php echo $kpi['ambil'];?></div><div class="ext">pelanggan ambil cucian</div></div>
      <div class="kpi violet"><div class="lbl">Pelanggan Baru</div><div class="val"><?php echo $kpi['pel_baru'];?></div><div class="ext">akun baru di periode ini</div></div>
      <div class="kpi green"><div class="lbl">Omzet Tagihan</div><div class="val">Rp <?php echo rp($kpi['omzet']);?></div><div class="ext">total tagihan bill masuk</div></div>
      <div class="kpi"><div class="lbl">Kas Diterima</div><div class="val">Rp <?php echo rp($kpi['kas']);?></div><div class="ext">uang riil masuk (DPT+pickup)</div></div>
      <div class="kpi"><div class="lbl">Total Pcs Pakaian</div><div class="val"><?php echo rp($kpi['pcs']);?></div><div class="ext">dari bill masuk</div></div>
      <div class="kpi amber"><div class="lbl">Rata‑rata / Transaksi</div><div class="val">Rp <?php echo rp($kpi['aov']);?></div><div class="ext">AOV = omzet ÷ bill masuk</div></div>
      <div class="kpi green"><div class="lbl">Jam Tersibuk</div><div class="val" style="font-size:16px;"><?php echo $kpi['busy_label'];?></div><div class="ext">berdasar jumlah kunjungan</div></div>
      <div class="kpi red"><div class="lbl">Jam Tersepi</div><div class="val" style="font-size:16px;"><?php echo $kpi['quiet_label'];?></div><div class="ext">berdasar jumlah kunjungan</div></div>
      <div class="kpi"><div class="lbl">Transaksi Tunai</div><div class="val"><?php echo $kpi['cash_pct'];?>%</div><div class="ext">% bill masuk berstatus CASH</div></div>
      <div class="kpi violet"><div class="lbl">Pcs / Bill Masuk</div><div class="val"><?php echo ($kpi['masuk']>0)?round($kpi['pcs']/$kpi['masuk'],1):'0';?></div><div class="ext">rata‑rata bawaan per pelanggan</div></div>
    </div>

    <!-- TABEL PER JAM -->
    <div class="card">
      <h2><span class="dot" style="background:var(--blue)"></span> Aktifitas Per Jam (07:00 – 22:00)</h2>
      <div class="scrollx">
      <table>
        <thead><tr>
          <th class="c">Slot Jam</th><th class="c">Masuk</th><th class="c">Plg Masuk</th>
          <th class="c">Ambil</th><th class="c">Plg Ambil</th><th class="c">Kunjungan</th>
          <th class="c">Pcs</th><th class="r">Omzet Masuk</th><th class="r">Kas Diterima</th>
          <th class="c">Plg Baru</th><th class="r">AOV</th><th class="c">Rasio Ambil/Masuk</th>
        </tr></thead>
        <tbody>
        <?php
        // BARIS AKUMULASI TOTAL DI AWAL
        $tot_masuk=0;$tot_cm=0;$tot_ambil=0;$tot_cp=0;$tot_pcs=0;$tot_omzet=0;$tot_kas=0;$tot_baru=0;
        foreach($rows as $rw){$tot_masuk+=$rw['masuk'];$tot_ambil+=$rw['ambil'];$tot_pcs+=$rw['pcs'];$tot_omzet+=$rw['omzet'];$tot_kas+=$rw['kas'];$tot_baru+=$rw['baru'];}

        ?>
        <tr class="acc">
          <td>AKUMULASI TOTAL</td>
          <td class="c"><?php echo $kpi['masuk'];?></td>
          <td class="c"><?php echo $kpi['pel_unik'];?></td>
          <td class="c"><?php echo $kpi['ambil'];?></td>
          <td class="c">–</td>
          <td class="c"><?php echo $kpi['kunjungan'];?></td>
          <td class="c"><?php echo rp($kpi['pcs']);?></td>
          <td class="r"><?php echo rp($kpi['omzet']);?></td>
          <td class="r"><?php echo rp($kpi['kas']);?></td>
          <td class="c"><?php echo $kpi['pel_baru'];?></td>
          <td class="r"><?php echo rp($kpi['aov']);?></td>
          <td class="c"><?php echo ($kpi['masuk']>0)?round($kpi['ambil']/$kpi['masuk']*100).'%' :'–';?></td>
        </tr>
        <?php foreach($rows as $h=>$rw):
            $cls = $rw['is_busy']?'busy':($rw['is_quiet']?'quiet':''); ?>
        <tr class="<?php echo $cls;?>">
          <td><b><?php echo $rw['label'];?></b>
            <?php if($rw['is_busy']){echo '<span class="tag b">TERSIBUK</span>';} ?>
            <?php if($rw['is_quiet']){echo '<span class="tag q">TERSEPI</span>';} ?>
          </td>
          <td class="c"><?php echo $rw['masuk'];?></td>
          <td class="c"><?php echo $rw['cm'];?></td>
          <td class="c"><?php echo $rw['ambil'];?></td>
          <td class="c"><?php echo $rw['cp'];?></td>
          <td class="c"><b><?php echo $rw['kunj'];?></b></td>
          <td class="c"><?php echo $rw['pcs'];?></td>
          <td class="r"><?php echo rp($rw['omzet']);?></td>
          <td class="r"><?php echo rp($rw['kas']);?></td>
          <td class="c"><?php echo $rw['baru'];?></td>
          <td class="r"><?php echo ($rw['aov']!==null)?rp($rw['aov']):'–';?></td>
          <td class="c"><?php echo ($rw['ratio']!==null)?$rw['ratio'].'%':'–';?></td>
        </tr>
        <?php endforeach; ?>
        </tbody>
      </table>
      </div>
    </div>

    <!-- MATRIKS JENIS × JAM -->
    <div class="card">
      <h2><span class="dot" style="background:var(--violet)"></span> Jenis Pakaian Masuk per Jam (jumlah pcs)</h2>
      <?php if(count($matrix)==0){ echo '<div style="color:var(--muted);text-align:center;padding:10px;">Tidak ada data jenis pakaian pada periode ini.</div>'; } else { ?>
      <div class="scrollx">
      <table class="mtx">
        <thead><tr>
          <th>Jenis Pakaian</th>
          <?php foreach($hours as $h){ echo '<th class="c" title="'.str_pad($h,2,'0',STR_PAD_LEFT).':00–'.str_pad($h+1,2,'0',STR_PAD_LEFT).':00">'.str_pad($h,2,'0',STR_PAD_LEFT).'</th>'; } ?>
          <th class="c">Total</th>
        </tr></thead>
        <tbody>
        <?php foreach($jenis_total as $nm=>$tot): ?>
          <tr>
            <td><?php echo htmlspecialchars($nm);?></td>
            <?php foreach($hours as $h){
                $v = isset($matrix[$nm][$h]) ? (int)$matrix[$nm][$h] : 0;
                $a = ($max_cell>0 && $v>0) ? round(0.10 + ($v/$max_cell)*0.75, 2) : 0;
                $bg = $v>0 ? 'rgba(23,99,196,'.$a.')' : '#fbfcfe';
                $fg = $a>0.5 ? '#fff' : 'var(--ink)';
                echo '<td class="c" style="background:'.$bg.';color:'.$fg.';">'.($v>0?$v:'').'</td>';
            } ?>
            <td class="c"><b><?php echo $tot;?></b></td>
          </tr>
        <?php endforeach; ?>
        </tbody>
        <tfoot><tr>
          <td>TOTAL PCS / JAM</td>
          <?php foreach($hours as $h){ echo '<td class="c">'.((int)$rows[$h]['pcs']).'</td>'; } ?>
          <td class="c"><?php echo rp($kpi['pcs']);?></td>
        </tr></tfoot>
      </table>
      </div>
      <div class="legend"><span>Sepi</span><span class="bar"></span><span>Ramai</span> &nbsp;·&nbsp; warna makin gelap = pcs makin banyak di jam tersebut</div>
      <?php } ?>
    </div>
  </div><!-- /printArea -->
</div>

<script type="text/javascript">
function exportExcelJam(){
  var area = document.getElementById('printArea').cloneNode(true);
  var html = area.innerHTML;
  var doc = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>Analisa Per Jam</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body>' + html + '</body></html>';
  var blob = new Blob(['\uFEFF' + doc], {type:'application/vnd.ms-excel;charset=utf-8;'});
  var url = URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.href = url;
  a.download = 'Analisa_Per_Jam_<?php echo str_replace(' ','_',$outlet_title);?>_<?php echo date('Ymd');?>.xls';
  document.body.appendChild(a); a.click(); document.body.removeChild(a);
  URL.revokeObjectURL(url);
}
</script>
</body>
</html>