<!-- Container Fluid-->
<div class="container-fluid" id="container-wrapper">

  <style>
    :root{
      --surface:#ffffff;
      --page:#f5f7fb;
      --text:#0f172a;
      --muted:#64748b;
      --line:rgba(15,23,42,.10);
      --shadow:0 10px 30px rgba(2,6,23,.08);
      --radius:18px;

      --blue:#3b82f6;
      --green:#22c55e;
      --yellow:#f59e0b;
      --danger:#ef4444;
    }
    body{ background: var(--page); }

    .page-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom: 1rem;
    }
    .page-title{
      margin:0;
      font-weight:900;
      letter-spacing:.2px;
      color:var(--text);
      font-size:1.25rem;
    }
    .page-subtitle{
      margin: .15rem 0 0;
      color:var(--muted);
      font-size:.9rem;
    }

    .card-soft{
      border:0;
      border-radius:var(--radius);
      background:var(--surface);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .card-soft .card-header{
      background:#fff;
      border:0;
      padding:.9rem 1rem;
    }
    .card-soft .card-body{ padding: 1rem 1.1rem; }

    /* ===== KPI ===== */
    .kpi-grid{ margin-bottom: 1rem; }
    .kpi-card{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      min-height: 92px;
    }
    .kpi-left .kpi-label{
      font-size:.72rem;
      text-transform:uppercase;
      letter-spacing:.6px;
      color:var(--muted);
      margin-bottom:.25rem;
      font-weight:700;
    }
    .kpi-left .kpi-value{
      font-size:1.85rem;
      font-weight:900;
      line-height:1;
      color:var(--text);
    }
    .kpi-left .kpi-hint{
      margin-top:.35rem;
      font-size:.82rem;
      color:var(--muted);
    }

    .kpi-icon{
      width:54px;
      height:54px;
      border-radius:16px;
      display:grid;
      place-items:center;
      color:#fff;
      flex:0 0 auto;
      box-shadow: 0 12px 24px rgba(2,6,23,.10);
    }
    .kpi-icon i{ font-size:1.2rem; }
    .kpi-blue{ background: radial-gradient(120% 120% at 0% 0%, #60a5fa 0%, #2563eb 100%); }
    .kpi-yellow{ background: radial-gradient(120% 120% at 0% 0%, #fbbf24 0%, #f59e0b 100%); }
    .kpi-green{ background: radial-gradient(120% 120% at 0% 0%, #34d399 0%, #16a34a 100%); }

    /* ===== Header actions ===== */
    .header-wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .header-wrap h6{
      margin:0;
      font-weight:900;
      color:var(--text);
      letter-spacing:.2px;
    }
    .header-actions{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .btn-pill{ border-radius:999px !important; }
    .btn-light-soft{
      background:#f8fafc;
      border:1px solid rgba(15,23,42,.12);
      color:#0f172a;
    }
    .btn-light-soft:hover{ background:#eef2f7; }

    /* ===== summary (jumlah baris tampil) ===== */
    .table-summary{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      padding:.65rem 1rem;
      border-top:1px solid rgba(15,23,42,.06);
      border-bottom:1px solid rgba(15,23,42,.06);
      background: #fff;
    }
    .summary-left{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      color: var(--muted);
      font-size:.86rem;
    }
    .summary-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:.25rem .55rem;
      border-radius:999px;
      background: rgba(59,130,246,.10);
      border:1px solid rgba(59,130,246,.16);
      color:#1d4ed8;
      font-weight:800;
      font-size:.8rem;
      letter-spacing:.2px;
    }
    .summary-chip i{ opacity:.9; }

    /* ===== Table ===== */
    .table-wrap{
      overflow:auto;
      -webkit-overflow-scrolling:touch;
    }
    table.table-operator{
      width:100%;
      min-width: 980px;
      margin:0;
    }
    .table-operator thead th{
      position: sticky;
      top: 0;
      z-index: 2;
      background:#f3f6fb;
      border:0;
      font-size:.78rem;
      letter-spacing:.3px;
      text-transform:uppercase;
      color:#334155;
      font-weight:900;
      padding:.85rem .8rem;
      white-space:nowrap;
    }
    .table-operator tbody td{
      padding:.75rem .8rem;
      vertical-align: middle;
      border-top: 1px solid rgba(15,23,42,.06);
      color:#0f172a;
      font-size:.92rem;
    }
    .table-operator tbody tr:hover{ background: rgba(59,130,246,.06); }

    .td-ellipsis{
      max-width: 380px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    /* ===== badge status auto (WARNA SESUAI LEGEND) ===== */
.badge-soft{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.25rem .60rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.2px;
  border:1px solid transparent;
  white-space:nowrap;
}
.badge-soft .dot{ width:8px; height:8px; border-radius:99px; display:inline-block; }

/* BARU (abu) */
.b-baru{
  background: rgba(148,163,184,.16);
  border-color: rgba(148,163,184,.24);
  color:#475569;
}
.b-baru .dot{ background:#94a3b8; }

/* PROSES DESAIN (ungu) */
.b-desain{
  background: rgba(168,85,247,.16);
  border-color: rgba(168,85,247,.24);
  color:#7e22ce;
}
.b-desain .dot{ background:#a855f7; }

/* PROSES CETAK (biru) */
.b-cetak{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.22);
  color:#1d4ed8;
}
.b-cetak .dot{ background:#3b82f6; }

/* SELESAI (hijau) */
.b-selesai{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.22);
  color:#166534;
}
.b-selesai .dot{ background:#22c55e; }

/* DIAMBIL (kuning) */
.b-diambil{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.24);
  color:#92400e;
}
.b-diambil .dot{ background:#f59e0b; }

/* DIKIRIM (oranye) */
.b-dikirim{
  background: rgba(249,115,22,.16);
  border-color: rgba(249,115,22,.24);
  color:#9a3412;
}
.b-dikirim .dot{ background:#f97316; }

/* fallback */
.b-other{
  background: rgba(100,116,139,.14);
  border-color: rgba(100,116,139,.22);
  color:#334155;
}
.b-other .dot{ background:#64748b; }


    /* Search field */
    .searchbox{
      position:relative;
      min-width: 260px;
    }
    .searchbox input{
      border-radius:999px;
      padding-left: 2.25rem;
      border:1px solid rgba(15,23,42,.12);
      background:#fff;
    }
    .searchbox .ico{
      position:absolute;
      left:.8rem;
      top:50%;
      transform:translateY(-50%);
      color: #94a3b8;
      pointer-events:none;
    }

    @media (max-width: 575.98px){
      .page-title{ font-size: 1.1rem; }
      .kpi-left .kpi-value{ font-size: 1.55rem; }
      .searchbox{ min-width: 100%; }
      .table-summary{ padding:.6rem .8rem; }
    }
  </style>

  <!-- HEADER -->
  <div class="page-head">
    <div>
      <h1 class="page-title">Dashboard Operator</h1>
      <div class="page-subtitle">Ringkasan antrian pekerjaan & daftar pekerjaan terbaru</div>
    </div>
    <div class="header-actions">
      <button type="button" class="btn btn-light-soft btn-sm btn-pill" onclick="baru();proses();selesai();loadinvoice();">
        <i class="fa fa-refresh"></i> Refresh
      </button>
      <a class="btn btn-danger btn-sm btn-pill" href="<?=base_url('laporan/operator');?>">
        <i class="fa fa-list"></i> Detail
      </a>
    </div>
  </div>

  <!-- KPI GRID -->
  <div class="row kpi-grid">

    <div class="col-xl-4 col-md-6 mb-4">
      <div class="card card-soft h-100">
        <div class="card-body kpi-card" id="LoadingBaru">
          <div class="kpi-left">
            <div class="kpi-label">Baru</div>
            <div class="kpi-value load-baru">0</div>
            <div class="kpi-hint">Order masuk & belum dikerjakan</div>
          </div>
          <div class="kpi-icon kpi-blue"><i class="fa fa-inbox"></i></div>
        </div>
      </div>
    </div>

    <div class="col-xl-4 col-md-6 mb-4">
      <div class="card card-soft h-100">
        <div class="card-body kpi-card" id="LoadingProses">
          <div class="kpi-left">
            <div class="kpi-label">Proses</div>
            <div class="kpi-value load-proses">0</div>
            <div class="kpi-hint">Sedang dikerjakan operator</div>
          </div>
          <div class="kpi-icon kpi-yellow"><i class="fa fa-cogs"></i></div>
        </div>
      </div>
    </div>

    <div class="col-xl-4 col-md-6 mb-4">
      <div class="card card-soft h-100">
        <div class="card-body kpi-card" id="LoadingSelesai">
          <div class="kpi-left">
            <div class="kpi-label">Selesai</div>
            <div class="kpi-value load-selesai">0</div>
            <div class="kpi-hint">Selesai produksi / siap lanjut</div>
          </div>
          <div class="kpi-icon kpi-green"><i class="fa fa-check"></i></div>
        </div>
      </div>
    </div>

  </div>

  <!-- TABLE CARD -->
  <div class="card card-soft" id="LoadingInvoice">
    <div class="card-header">
      <div class="header-wrap">
        <div>
          <h6 class="m-0">Data Pekerjaan</h6>
          <small class="text-muted" style="color:var(--muted)!important;">Daftar pekerjaan terbaru untuk operator</small>
        </div>

        <div class="header-actions">
          <div class="searchbox">
            <i class="fa fa-search ico"></i>
            <input type="text" class="form-control form-control-sm"
                   placeholder="Cari order / produk / operator..."
                   onkeyup="searchFilter(this, '#dataListPekerjaan')">
          </div>
        </div>
      </div>
    </div>

    <!-- SUMMARY -->
    <div class="table-summary">
      <div class="summary-left">
        <span class="summary-chip" id="sumVisible">
          <i class="fa fa-eye"></i> Menampilkan: 0
        </span>
        <span class="summary-chip" style="background:rgba(100,116,139,.10);border-color:rgba(100,116,139,.18);color:#334155;" id="sumTotal">
          <i class="fa fa-database"></i> Total: 0
        </span>
        <span id="sumNote" class="text-muted" style="color:var(--muted)!important;">Gunakan pencarian untuk memfilter data</span>
      </div>
    </div>

    <div class="table-wrap">
      <table class="table table-operator align-items-center table-flush">
        <thead>
          <tr>
            <th>ORDER ID</th>
            <th class="text-left">JUMLAH</th>
            <th class="text-left">PRODUK</th>
            <th class="text-left">JENIS</th>
            <th class="text-left">KETERANGAN</th>
            <th class="text-left">OPERATOR</th>
            <th class="text-right">STATUS</th>
          </tr>
        </thead>
        <tbody id="dataListPekerjaan">
          <tr>
            <td colspan="7" class="text-center text-muted" style="padding:1.2rem;">
              Memuat data pekerjaan...
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="card-footer" style="background:#fff;border:0;"></div>
  </div>

</div>

<script>
  $(document).ready(function() {
    baru(); proses(); selesai(); loadinvoice();
  });

  // ===== Helpers: normalisasi teks =====
  function _normText(s){
    s = (s === null || s === undefined) ? '' : String(s);
    return s.replace(/\s+/g, ' ').trim().toUpperCase();
  }

  // ===== Summary: update baris tampil/total =====
  function _updateTableSummary(){
    try{
      var $rows = $('#dataListPekerjaan').find('tr');
      var total = 0;
      var visible = 0;

      $rows.each(function(){
        // skip placeholder "memuat" jika ada
        var txt = _normText($(this).text());
        if (!txt) return;

        // anggap baris valid kalau punya beberapa kolom td
        var tdCount = $(this).find('td').length;
        if (tdCount > 1) total++;

        if ($(this).is(':visible') && tdCount > 1) visible++;
      });

      $('#sumTotal').html('<i class="fa fa-database"></i> Total: ' + total);
      $('#sumVisible').html('<i class="fa fa-eye"></i> Menampilkan: ' + visible);

      if (visible < total) {
        $('#sumNote').text('Filter aktif (hasil disaring).');
      } else {
        $('#sumNote').text('Semua data ditampilkan.');
      }
    }catch(e){
      console.warn('summary error:', e);
    }
  }

  // ===== Badge status otomatis dari teks kolom STATUS =====
  function _applyStatusBadges(){
    try{
      // Ambil index kolom STATUS berdasarkan header (lebih aman)
      var statusIndex = -1;
      $('.table-operator thead th').each(function(i){
        if (_normText($(this).text()) === 'STATUS') statusIndex = i;
      });
      if (statusIndex < 0) statusIndex = 6; // fallback sesuai tabel: kolom ke-7

      $('#dataListPekerjaan tr').each(function(){
        var $tds = $(this).find('td');
        if ($tds.length < 2) return;

        var $statusTd = $tds.eq(statusIndex);
        if (!$statusTd.length) return;

        // kalau sudah dibadge sebelumnya, skip
        if ($statusTd.find('.badge-soft').length) return;

        var raw = _normText($statusTd.text());
        if (!raw) return;

        // deteksi kata kunci (sesuai legend + tahan variasi teks)
var cls = 'b-other';
var label = raw;

// urutan penting: spesifik dulu baru umum
if (raw.indexOf('BARU') > -1) {
  cls = 'b-baru';
  label = 'BARU';
}
else if (raw.indexOf('PROSES DESAIN') > -1 || raw.indexOf('DESAIN') > -1) {
  cls = 'b-desain';
  label = 'PROSES DESAIN';
}
else if (raw.indexOf('PROSES CETAK') > -1 || (raw.indexOf('PROSES') > -1 && raw.indexOf('CETAK') > -1)) {
  cls = 'b-cetak';
  label = 'PROSES CETAK';
}
else if (raw.indexOf('SELESAI') > -1 || raw.indexOf('DONE') > -1) {
  cls = 'b-selesai';
  label = 'SELESAI';
}
else if (raw.indexOf('DIAMBIL') > -1 || raw.indexOf('AMBIL') > -1) {
  cls = 'b-diambil';
  label = 'DIAMBIL';
}
else if (raw.indexOf('DIKIRIM') > -1 || raw.indexOf('KIRIM') > -1 || raw.indexOf('DELIVERY') > -1) {
  cls = 'b-dikirim';
  label = 'DIKIRIM';
}


        // replace isi status jadi badge
        $statusTd.html(
          '<span class="badge-soft '+cls+'">' +
            '<span class="dot"></span>' +
            '<span>'+label+'</span>' +
          '</span>'
        );
      });
    }catch(e){
      console.warn('badge error:', e);
    }
  }

  function loadinvoice(){
    $.ajaxQueue({
      url:  base_url+"operator/list_pekerjaan",
      cache: false,
      beforeSend: function(){
        $("#LoadingInvoice").loading();
      },
      success: function (data) {
        $("#LoadingInvoice").loading('stop');
        $('#dataListPekerjaan').html(data);

        // apply client-side enhancements
        _applyStatusBadges();
        _updateTableSummary();
      }
    });
  }

  function baru(){
    $.ajaxQueue({
      url:  base_url+"operator/baru",
      cache: false,
      beforeSend: function(){
        $("#LoadingBaru").loading();
      },
      success: function (data) {
        $("#LoadingBaru").loading('stop');
        $('.load-baru').html(data);
      }
    });
  }

  function proses(){
    $.ajaxQueue({
      url:  base_url+"operator/proses",
      cache: false,
      beforeSend: function(){
        $("#LoadingProses").loading();
      },
      success: function (data) {
        $("#LoadingProses").loading('stop');
        $('.load-proses').html(data);
      }
    });
  }

  function selesai(){
    $.ajaxQueue({
      url:  base_url+"operator/selesai",
      cache: false,
      beforeSend: function(){
        $("#LoadingSelesai").loading();
      },
      success: function (data) {
        $("#LoadingSelesai").loading('stop');
        $('.load-selesai').html(data);
      }
    });
  }

  function diambil(){
    $.ajaxQueue({
      url:  base_url+"operator/diambil",
      cache: false,
      beforeSend: function(){
        $("#LoadingDiambil").loading();
      },
      success: function (data) {
        $("#LoadingDiambil").loading('stop');
        $('.load-diambil').html(data);
      }
    });
  }

  // Search filter: filter DOM + update summary
  window.searchFilter = function(inputOrText, tbodySelector){
    try{
      var q = '';
      if (typeof inputOrText === 'string') q = inputOrText;
      else if (inputOrText && inputOrText.value !== undefined) q = inputOrText.value;

      q = (q || '').toString().toLowerCase();

      var $tbody = $(tbodySelector || '#dataListPekerjaan');
      if (!$tbody.length) return;

      $tbody.find('tr').each(function(){
        var $tr = $(this);
        var tdCount = $tr.find('td').length;

        // jangan sembunyikan baris placeholder (kalau ada)
        if (tdCount <= 1) return;

        var show = $tr.text().toLowerCase().indexOf(q) > -1;
        $tr.toggle(show);
      });

      _updateTableSummary();
    }catch(e){
      console.warn('searchFilter error:', e);
    }
  };
</script>
