<style>
  /* ======= ORDER TABLE LAYOUT MODERN RESPONSIVE ======= */
  :root {
    --bg-page: #f5f7fa;
    --bg-card: #ffffff;
    --text-main: #1f2937;
    --text-dim: #6b7280;
    --accent-grad-start: #8e2de2;
    --accent-grad-end: #4a00e0;
    --order-table-head-bg: #eef3f8;
    --order-table-head-border: #d8e2ec;
    --order-table-head-text: #334155;
    --radius-card: .5rem;
    --radius-control: .25rem;
    --shadow-card: 0 10px 24px rgba(0,0,0,.07);
  }

  /* wrapper area tabel */
  #dataTableOrder {
    background: var(--bg-page);
    padding: 1rem;
    border-radius: var(--radius-card);
  }

  .order-table-box {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  .order-table-box.is-action-menu-open,
  .order-table-box.is-action-menu-open .order-table-scroll,
  .order-table-box.is-action-menu-open .table-responsive {
    overflow: visible !important;
  }

  #dataTableOrderAtas .btn-group.show {
    z-index: 1040;
  }

  .order-table-box,
  #dataTableOrderAtas,
  #total-table,
  nav[aria-label="Page navigation example"] {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  }

  /* Hindari tampilan pill untuk kontrol aksi/status */
  #dataTableOrderAtas .btn,
  #dataTableOrderAtas .badge,
  #dataTableOrderAtas .dropdown-menu,
  #total-table .btn,
  #total-table .badge,
  #total-table .dropdown-menu {
    border-radius: var(--radius-control) !important;
  }

  #dataTableOrderAtas .btn-group > .btn:first-child,
  #dataTableOrderAtas .btn-group > .btn:last-child,
  #total-table .btn-group > .btn:first-child,
  #total-table .btn-group > .btn:last-child {
    border-radius: var(--radius-control) !important;
  }

  /* ===== BUTTON UI MODERN: SIMPLE + CLEAN ===== */
  #dataTableOrderAtas .btn,
  #total-table .btn {
    border-width: 1px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .28rem .62rem;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    box-shadow: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
  }

  #dataTableOrderAtas .btn:focus,
  #total-table .btn:focus {
    box-shadow: 0 0 0 .12rem rgba(0, 123, 255, .25);
  }

  #dataTableOrderAtas .btn:hover,
  #total-table .btn:hover {
    transform: translateY(-1px);
  }

  #dataTableOrderAtas .btn:active,
  #total-table .btn:active {
    transform: translateY(0);
  }

  #dataTableOrderAtas .btn-group,
  #total-table .btn-group {
    display: inline-flex;
    gap: .32rem;
  }

  #dataTableOrderAtas .btn-group > .btn + .btn,
  #total-table .btn-group > .btn + .btn {
    margin-left: 0;
  }

  #dataTableOrderAtas .btn-primary,
  #total-table .btn-primary {
    color: #fff;
    background: #007bff;
    border-color: #007bff;
  }

  #dataTableOrderAtas .btn-primary:hover,
  #total-table .btn-primary:hover {
    background: #0069d9;
    border-color: #0062cc;
  }

  #dataTableOrderAtas .btn-secondary,
  #total-table .btn-secondary {
    color: #fff;
    background: #6c757d;
    border-color: #6c757d;
  }

  #dataTableOrderAtas .btn-secondary:hover,
  #total-table .btn-secondary:hover {
    color: #fff;
    background: #5a6268;
    border-color: #545b62;
  }

  #dataTableOrderAtas .btn-info,
  #total-table .btn-info {
    color: #fff;
    background: #17a2b8;
    border-color: #17a2b8;
  }

  #dataTableOrderAtas .btn-info:hover,
  #total-table .btn-info:hover {
    color: #fff;
    background: #138496;
    border-color: #117a8b;
  }

  #dataTableOrderAtas .btn-success,
  #total-table .btn-success {
    color: #fff;
    background: #28a745;
    border-color: #28a745;
  }

  #dataTableOrderAtas .btn-success:hover,
  #total-table .btn-success:hover {
    color: #fff;
    background: #218838;
    border-color: #1e7e34;
  }

  #dataTableOrderAtas .btn-danger,
  #total-table .btn-danger {
    color: #fff;
    background: #dc3545;
    border-color: #dc3545;
  }

  #dataTableOrderAtas .btn-danger:hover,
  #total-table .btn-danger:hover {
    color: #fff;
    background: #c82333;
    border-color: #bd2130;
  }

  #dataTableOrderAtas .btn-warning,
  #total-table .btn-warning {
    color: #212529;
    background: #ffc107;
    border-color: #ffc107;
  }

  #dataTableOrderAtas .btn-warning:hover,
  #total-table .btn-warning:hover {
    color: #212529;
    background: #e0a800;
    border-color: #d39e00;
  }

  #dataTableOrderAtas .btn-outline-primary,
  #total-table .btn-outline-primary {
    color: #007bff;
    background: transparent;
    border-color: #007bff;
  }

  #dataTableOrderAtas .btn-outline-primary:hover,
  #total-table .btn-outline-primary:hover {
    color: #fff;
    background: #007bff;
    border-color: #007bff;
  }

  #dataTableOrderAtas .btn-outline-success,
  #total-table .btn-outline-success {
    color: #28a745;
    background: transparent;
    border-color: #28a745;
  }

  #dataTableOrderAtas .btn-outline-success:hover,
  #total-table .btn-outline-success:hover {
    color: #fff;
    background: #28a745;
    border-color: #28a745;
  }

  #dataTableOrderAtas .btn-outline-info,
  #total-table .btn-outline-info {
    color: #17a2b8;
    background: transparent;
    border-color: #17a2b8;
  }

  #dataTableOrderAtas .btn-outline-info:hover,
  #total-table .btn-outline-info:hover {
    color: #fff;
    background: #17a2b8;
    border-color: #17a2b8;
  }

  #dataTableOrderAtas .btn-outline-warning,
  #total-table .btn-outline-warning {
    color: #ffc107;
    background: transparent;
    border-color: #ffc107;
  }

  #dataTableOrderAtas .btn-outline-warning:hover,
  #total-table .btn-outline-warning:hover {
    color: #212529;
    background: #ffc107;
    border-color: #ffc107;
  }

  #dataTableOrderAtas .btn-outline-danger,
  #total-table .btn-outline-danger {
    color: #dc3545;
    background: transparent;
    border-color: #dc3545;
  }

  #dataTableOrderAtas .btn-outline-danger:hover,
  #total-table .btn-outline-danger:hover {
    color: #fff;
    background: #dc3545;
    border-color: #dc3545;
  }

  #dataTableOrderAtas .badge,
  #total-table .badge {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .28rem .52rem;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: .28rem;
  }

  #dataTableOrderAtas .badge-info,
  #total-table .badge-info {
    color: #fff;
    background: #17a2b8;
    border-color: #17a2b8;
  }

  #dataTableOrderAtas .badge-success,
  #total-table .badge-success {
    color: #fff;
    background: #28a745;
    border-color: #28a745;
  }

  #dataTableOrderAtas .badge-warning,
  #total-table .badge-warning {
    color: #212529;
    background: #ffc107;
    border-color: #ffc107;
  }

  #dataTableOrderAtas .badge-danger,
  #total-table .badge-danger {
    color: #fff;
    background: #dc3545;
    border-color: #dc3545;
  }

  #dataTableOrderAtas .badge-primary,
  #total-table .badge-primary {
    color: #fff;
    background: #007bff;
    border-color: #007bff;
  }

  #dataTableOrderAtas .badge-secondary,
  #total-table .badge-secondary {
    color: #fff;
    background: #6c757d;
    border-color: #6c757d;
  }

  #dataTableOrderAtas .dropdown-menu,
  #total-table .dropdown-menu {
    border: 1px solid #e2e8f0;
    box-shadow: 0 14px 28px rgba(2, 6, 23, .12);
    padding: .38rem;
    min-width: 13rem;
    z-index: 1045;
  }

  #dataTableOrderAtas .dropdown-item,
  #total-table .dropdown-item {
    padding: .36rem .5rem;
    border-radius: .34rem;
    font-size: .74rem;
    color: #334155;
    transition: background-color .16s ease, color .16s ease;
  }

  #dataTableOrderAtas .dropdown-item:hover,
  #total-table .dropdown-item:hover {
    background: #f1f5f9;
    color: #0f172a;
  }

  #dataTableOrderAtas .dropdown-item .badge,
  #total-table .dropdown-item .badge {
    width: 100%;
    justify-content: flex-start;
  }

  #dataTableOrderAtas .order-action-dropdown {
    position: relative;
  }

  #dataTableOrderAtas .order-action-dropdown .dropdown-menu {
    top: 0 !important;
    right: 100% !important;
    left: auto !important;
    margin-top: 0;
    margin-right: .32rem;
    max-width: calc(100vw - 1rem);
    transform: none !important;
  }

  /* biar scroll horizontal tetap aman di layar sedang */
  .order-table-scroll {
    width: 100%;
    overflow-x: auto;
  }

  /* table utama */
  #dataTableOrderAtas {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* ===== HEADER BLOK WARNA ===== */
  #dataTableOrderAtas thead.thead-modern th,
  #dataTableOrderAtas tfoot .tfoot-head th,
  #total-table thead.thead-modern th {
    background: var(--order-table-head-bg);
    color: var(--order-table-head-text);
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    border: 0;
    border-bottom: 1px solid var(--order-table-head-border);
    white-space: nowrap;
    vertical-align: middle;
    padding: .6rem .75rem;
    letter-spacing: .01em;
  }

  #dataTableOrderAtas thead.thead-modern th:first-child {
    border-top-left-radius: var(--radius-card);
  }

  #dataTableOrderAtas thead.thead-modern th:last-child {
    border-top-right-radius: var(--radius-card);
  }

  /* ===== BODY ROW ===== */
  #dataTableOrderAtas tbody tr td {
    font-size: .9rem;
    color: var(--text-main);
    vertical-align: middle;
    white-space: nowrap;
    background: var(--bg-card);
    padding: .3rem .75rem;
    border-top: 2px solid rgba(0,0,0,.05);
  }

  #dataTableOrderAtas tbody tr:nth-child(even) td {
    background: #fafafa;
  }

  /* ===== FOOTER (TOTAL PER PAGE) ===== */
  #dataTableOrderAtas tfoot tr th,
  #dataTableOrderAtas tfoot tr td {
    font-size: .9rem;
    background: #fff;
    vertical-align: middle;
    padding: .6rem .75rem;
    border-top: 1px solid rgba(0,0,0,.08);
    white-space: nowrap;
  }

  #dataTableOrderAtas tfoot tr:last-child td {
    background: #f9fafb;
    font-weight: 600;
  }

  /* ===== TABEL TOTAL KESELURUHAN (ADMIN/OWNER) ===== */
  #total-table {
    margin-top: 1rem;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--bg-card);
  }

  #total-table thead.thead-modern th {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  #total-table tbody tr td {
    font-size: .9rem;
    color: var(--text-main);
    background: var(--bg-card);
    padding: .6rem .75rem;
    border-top: 1px solid rgba(0,0,0,.05);
    white-space: nowrap;
    vertical-align: middle;
    font-weight: 600;
  }

  .mobile-order-card {
    display: none;
  }

  /* ===== RESPONSIVE MODE KARTU (HP / ≤768px) ===== */
  @media (max-width: 768px) {

    .order-table-scroll {
      overflow-x: visible; /* kita ubah jadi card, jadi gak perlu scroll horz */
    }

    /* ubah table jadi block/card */
    #dataTableOrderAtas,
    #dataTableOrderAtas thead,
    #dataTableOrderAtas tbody,
    #dataTableOrderAtas tfoot,
    #dataTableOrderAtas th,
    #dataTableOrderAtas td,
    #dataTableOrderAtas tr {
      display: block;
      width: 100%;
    }

    /* sembunyikan header tabel di mobile, karena kita pakai label di td::before */
    #dataTableOrderAtas thead.thead-modern {
      display: none;
    }

    /* setiap TR jadi card */
    #dataTableOrderAtas tbody tr {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-card);
      margin-bottom: 1rem;
      overflow: hidden;
      border: 1px solid rgba(0,0,0,.05);
    }

    /* setiap TD jadi row flex label:value */
    #dataTableOrderAtas tbody tr td {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-top: 0;
      border-bottom: 1px solid rgba(0,0,0,.05);
      white-space: normal;
      background: transparent;
      padding: .75rem .9rem;
      font-size: .8rem;
    }

    #dataTableOrderAtas tbody tr td:last-child {
      border-bottom: 0;
    }

    /* label sebelah kiri */
    #dataTableOrderAtas tbody tr td::before {
      content: attr(data-label);
      font-weight: 600;
      color: #4a00e0;
      font-size: .7rem;
      text-transform: uppercase;
      padding-right: .75rem;
      flex-shrink: 0;
      line-height: 1.2;
    }

    /* FOOTER / TOTAL PER PAGE jadi card juga */
    #dataTableOrderAtas tfoot {
      box-shadow: var(--shadow-card);
      border-radius: var(--radius-card);
      overflow: hidden;
      margin-bottom: 1rem;
    }

    /* baris pertama footer (thead ulang) tidak kita tampilkan di mobile */
    #dataTableOrderAtas tfoot tr.tfoot-head {
      display: none;
    }

    /* baris total per page tampil sebagai card */
    #dataTableOrderAtas tfoot tr.tfoot-total,
    #dataTableOrderAtas tfoot tr.tfoot-total td {
      display: block;
      width: 100%;
      border: 0;
      background: var(--bg-card);
    }

    #dataTableOrderAtas tfoot tr.tfoot-total {
      border: 1px solid rgba(0,0,0,.05);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-card);
      margin-bottom: 1rem;
    }

    #dataTableOrderAtas tfoot tr.tfoot-total td {
      display: flex;
      justify-content: space-between;
      padding: .75rem .9rem;
      border-bottom: 1px solid rgba(0,0,0,.05);
      font-size: .8rem;
      font-weight: 600;
      white-space: normal;
    }

    #dataTableOrderAtas tfoot tr.tfoot-total td:last-child {
      border-bottom: 0;
    }

    /* label untuk total per page */
    #dataTableOrderAtas tfoot tr.tfoot-total td:first-child::before {
      content: "TOTAL PER PAGE";
      font-weight: 600;
      color: #4a00e0;
      font-size: .7rem;
      text-transform: uppercase;
      flex-basis: 100%;
      margin-right: .75rem;
    }

    #dataTableOrderAtas tfoot tr.tfoot-total td:first-child {
      flex-direction: column;
      align-items: flex-start;
    }

    /* ===== tabel TOTAL KESELURUHAN juga jadi card ===== */
    #total-table,
    #total-table thead,
    #total-table tbody,
    #total-table tr,
    #total-table td,
    #total-table th {
      display: block;
      width: 100%;
    }

    #total-table thead.thead-modern {
      display: none;
    }

    #total-table tbody tr {
      background: var(--bg-card);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(0,0,0,.05);
      margin-bottom: 1rem;
    }

    #total-table tbody tr td {
      border-top: 0;
      display: flex;
      justify-content: space-between;
      font-size: .8rem;
      padding: .75rem .9rem;
      white-space: normal;
    }

    /* kolom pertama berisi judul TOTAL KESELURUHAN */
    #total-table tbody tr td:first-child {
      display: block;
      width: 100%;
      font-weight: 600;
      border-bottom: 1px solid rgba(0,0,0,.05);
    }

    #total-table tbody tr td:first-child::before {
      content: "TOTAL KESELURUHAN";
      font-weight: 600;
      color: #4a00e0;
      text-transform: uppercase;
      font-size: .7rem;
      display: block;
      margin-bottom: .4rem;
    }

    /* ===== MOBILE ORDER CARD: match smartphone transaction list ===== */
    #dataTableOrder {
      background: transparent;
      padding: 0;
    }

    .order-table-box {
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
    }

    .order-table-scroll,
    .order-table-box.is-action-menu-open,
    .order-table-box.is-action-menu-open .order-table-scroll {
      overflow: visible;
    }

    #dataTableOrderAtas tbody tr.order-row {
      display: block;
      position: relative;
      z-index: 1;
      margin: 0 0 14px;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
    }

    #dataTableOrderAtas tbody tr.order-row.is-action-menu-open {
      z-index: 50;
    }

    #dataTableOrderAtas tbody tr.order-row > td {
      display: none;
    }

    #dataTableOrderAtas tbody tr.order-row > td:first-child {
      display: block;
      padding: 0;
      border: 0;
      background: transparent;
    }

    #dataTableOrderAtas tbody tr.order-row > td:first-child::before {
      display: none;
      content: none;
    }

    .desktop-order-no {
      display: none !important;
    }

    .mobile-order-card {
      display: block;
      position: relative;
      z-index: 1;
      background: #fff;
      border: 1px solid #e7ebf2;
      border-radius: 18px;
      box-shadow: 0 14px 34px rgba(15,23,42,.11);
      overflow: visible;
    }

    .mobile-order-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 6px;
      background: #ef3349;
      border-radius: 18px 0 0 18px;
    }

    .mobile-order-card.is-paid::before {
      background: #22c55e;
    }

    .mobile-order-card.is-cancel::before {
      background: #6b7280;
    }

    .mobile-card-body {
      padding: 20px 18px 16px 22px;
    }

    .mobile-card-top {
      display: grid;
      grid-template-columns: minmax(100px, auto) auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
    }

    .mobile-trx-btn {
      min-width: 102px;
      min-height: 40px;
      border-radius: 10px !important;
      font-size: .98rem !important;
      font-weight: 800 !important;
      letter-spacing: .01em;
      box-shadow: 0 5px 12px rgba(15,23,42,.14) !important;
    }

    .mobile-date,
    .mobile-customer {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      gap: 7px;
      color: #111827;
      font-size: .96rem;
      line-height: 1.2;
      white-space: nowrap;
    }

    .mobile-date i,
    .mobile-customer i {
      color: #374151;
      font-size: 1rem;
      width: 18px;
      text-align: center;
    }

    .mobile-customer {
      color: #22a447 !important;
      text-decoration: none !important;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mobile-customer span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mobile-card-more .btn {
      width: 30px;
      height: 34px;
      padding: 0 !important;
      color: #374151;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      font-size: 1.35rem !important;
    }

    .mobile-card-more .dropdown-toggle::after {
      display: none;
    }

    .mobile-kasir {
      margin-top: 13px;
      color: #111827;
      font-size: .95rem;
      line-height: 1.25;
    }

    .mobile-kasir span {
      color: #4b5563;
    }

    .mobile-card-divider {
      height: 1px;
      margin: 14px 0 13px;
      background: #e5e7eb;
    }

    .mobile-card-bottom {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items: end;
      gap: 12px;
    }

    .mobile-money-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      min-width: 0;
    }

    .mobile-money-row > div {
      min-width: 0;
    }

    .mobile-money-label {
      display: block;
      color: #4b5563;
      font-size: .86rem;
      line-height: 1.1;
      margin-bottom: 6px;
    }

    .mobile-money-value {
      display: block;
      color: #080b22;
      font-size: 1rem;
      line-height: 1.1;
      font-weight: 700;
      white-space: nowrap;
    }

    .mobile-card-actions {
      display: inline-flex;
      position: relative;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .mobile-card-actions .btn {
      min-width: 72px;
      min-height: 40px;
      border-radius: 10px !important;
      padding: .4rem .62rem !important;
      font-size: .9rem !important;
      font-weight: 800 !important;
      box-shadow: none !important;
    }

    .mobile-card-actions .btn-outline-primary,
    .mobile-card-actions .btn-outline-success,
    .mobile-card-actions .btn-outline-info,
    .mobile-card-actions .btn-outline-warning,
    .mobile-card-actions .btn-outline-danger {
      background: #fff !important;
      color: #16a34a !important;
      border-color: #16a34a !important;
    }

    .mobile-card-actions .btn-info {
      background: #0ea5e9 !important;
      border-color: #0ea5e9 !important;
      color: #fff !important;
    }

    .mobile-card-actions .btn-success {
      background: #10a85a !important;
      border-color: #10a85a !important;
      color: #fff !important;
    }

    .mobile-card-actions .btn-danger {
      background: #ef3349 !important;
      border-color: #ef3349 !important;
      color: #fff !important;
    }

    .mobile-card-actions .mobile-action-dropdown {
      min-width: 46px;
      width: 46px;
      padding: 0 !important;
      background: #ef3349 !important;
      border-color: #ef3349 !important;
      color: #fff !important;
      font-size: 1rem !important;
    }

    .mobile-card-actions .mobile-action-dropdown::after {
      display: none;
    }

    .mobile-card-actions .dropdown-menu,
    .mobile-card-more .dropdown-menu {
      border-radius: 8px !important;
      min-width: 14rem;
      max-height: none !important;
      overflow: visible !important;
      z-index: 2050;
      box-shadow: 0 14px 28px rgba(15,23,42,.18);
    }

    .mobile-card-actions .dropdown-menu .dropdown-item,
    .mobile-card-more .dropdown-menu .dropdown-item {
      white-space: nowrap;
    }

    #dataTableOrderAtas tfoot {
      display: none;
    }

    #total-table {
      margin: 10px 0 0;
      padding: 0;
      border: 0;
      box-shadow: none;
      border-radius: 0;
      background: transparent;
    }

    #total-table tbody tr {
      display: grid;
      grid-template-columns: 76px repeat(4, minmax(0, 1fr));
      align-items: center;
      gap: 0;
      margin: 0;
      padding: 18px 16px;
      border: 1px solid #e5d8ff;
      border-radius: 18px;
      background: linear-gradient(180deg,#fff 0%,#fbf8ff 100%);
      box-shadow: 0 14px 34px rgba(15,23,42,.10);
    }

    #total-table tbody tr td {
      display: none;
      padding: 0 10px;
      border: 0;
      background: transparent;
      text-align: center !important;
      white-space: nowrap;
    }

    #total-table tbody tr td:first-child,
    #total-table tbody tr td:nth-child(2),
    #total-table tbody tr td:nth-child(4),
    #total-table tbody tr td:nth-child(5),
    #total-table tbody tr td:nth-child(6) {
      display: block;
    }

    #total-table tbody tr td:first-child {
      grid-column: 1;
      grid-row: 1 / span 2;
      width: 56px;
      height: 56px;
      padding: 0;
      border: 0;
      overflow: hidden;
      color: transparent;
      justify-self: center;
      align-self: center;
      background: linear-gradient(135deg,#8b5cf6,#5b18d8);
      border-radius: 14px;
      position: relative;
    }

    #total-table tbody tr td:first-child::before {
      content: "\f1ec";
      font-family: FontAwesome;
      color: #fff;
      font-size: 1.72rem;
      line-height: 56px;
      text-align: center;
      display: block;
      margin: 0;
    }

    #total-table tbody tr::before {
      content: "TOTAL KESELURUHAN";
      display: block;
      grid-column: 2 / -1;
      grid-row: 1;
      color: #6d16df;
      font-size: 1rem;
      font-weight: 800;
      text-align: left;
      margin-bottom: 12px;
    }

    #total-table tbody tr td:nth-child(2),
    #total-table tbody tr td:nth-child(4),
    #total-table tbody tr td:nth-child(6),
    #total-table tbody tr td:nth-child(5) {
      color: #080b22;
      font-size: 1.05rem;
      font-weight: 800;
      border-left: 1px solid #d8d8df;
      grid-row: 2;
    }

    #total-table tbody tr td:nth-child(2) { grid-column: 2; }
    #total-table tbody tr td:nth-child(4) { grid-column: 3; }
    #total-table tbody tr td:nth-child(6) { grid-column: 4; }
    #total-table tbody tr td:nth-child(5) { grid-column: 5; }

    #total-table tbody tr td:nth-child(2) {
      border-left: 0;
      text-align: left !important;
    }

    #total-table tbody tr td:nth-child(2)::before,
    #total-table tbody tr td:nth-child(4)::before,
    #total-table tbody tr td:nth-child(6)::before,
    #total-table tbody tr td:nth-child(5)::before {
      display: block;
      color: #5f6471;
      font-size: .78rem;
      line-height: 1;
      font-weight: 600;
      margin-bottom: 7px;
    }

    #total-table tbody tr td:nth-child(2)::before { content: "TOTAL"; }
    #total-table tbody tr td:nth-child(4)::before { content: "BAYAR"; }
    #total-table tbody tr td:nth-child(6)::before { content: "PIUTANG"; }
    #total-table tbody tr td:nth-child(5)::before { content: "DISKON"; }

    nav[aria-label="Page navigation example"] {
      padding: 14px 0 0 !important;
    }
  }

    @media (max-width: 430px) {
      .mobile-card-body {
        padding: 18px 14px 14px 18px;
      }

      .mobile-card-top {
        grid-template-columns: minmax(92px, auto) auto minmax(0, 1fr) auto;
        gap: 8px;
      }

      .mobile-trx-btn {
        min-width: 92px;
        min-height: 36px;
        font-size: .88rem !important;
      }

      .mobile-date,
      .mobile-customer {
        font-size: .86rem;
      }

      .mobile-date i,
      .mobile-customer i {
        font-size: .88rem;
        width: 14px;
      }

      .mobile-card-more {
        grid-column: 4;
        grid-row: 1;
      }

      .mobile-card-bottom {
        grid-template-columns: 1fr;
        gap: 9px;
      }

      .mobile-money-row {
        gap: 8px;
      }

      .mobile-money-label {
        font-size: .72rem;
        margin-bottom: 5px;
      }

      .mobile-money-value {
        font-size: .8rem;
        line-height: 1.05;
        letter-spacing: -.01em;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      .mobile-card-actions {
        justify-content: flex-end;
        gap: 6px;
        width: 100%;
      }

      .mobile-card-actions .btn {
        min-width: 62px;
        min-height: 38px;
        padding: .34rem .52rem !important;
        font-size: .76rem !important;
      }

      .mobile-card-actions .mobile-action-dropdown {
        min-width: 40px;
        width: 40px;
      }

      #total-table tbody tr {
        grid-template-columns: 58px repeat(4, minmax(0, 1fr));
        padding: 14px 10px;
      }

      #total-table tbody tr td:first-child {
        width: 46px;
        height: 46px;
      }

      #total-table tbody tr td:first-child::before {
        line-height: 46px;
        font-size: 1.42rem;
      }

      #total-table tbody tr td:nth-child(2),
      #total-table tbody tr td:nth-child(4),
      #total-table tbody tr td:nth-child(6),
      #total-table tbody tr td:nth-child(5) {
        font-size: .78rem;
        padding: 0 5px;
      }

      #total-table tbody tr::before {
        font-size: .82rem;
      }

      #total-table tbody tr td:nth-child(2)::before,
      #total-table tbody tr td:nth-child(4)::before,
      #total-table tbody tr td:nth-child(6)::before,
      #total-table tbody tr td:nth-child(5)::before {
        font-size: .64rem;
      }
    }
  .order-work-status { border-color:transparent!important; color:#fff!important; white-space:nowrap; }
  .order-work-status--baru { background:#738096!important; }
  .order-work-status--desain { background:#c20df2!important; }
  .order-work-status--cetak { background:#2d7ff9!important; }
  .order-work-status--selesai { background:#19bd61!important; }
  .order-work-status--diambil { background:#ffd83d!important; color:#171717!important; }
  .order-work-status--dikirim { background:#ffa51f!important; color:#171717!important; }
</style>

<div class="order-table-box">
  <div class="order-table-scroll">
    <table class="table table-sm table-striped table-hover" id="dataTableOrderAtas">
      <thead class="thead-modern">
        <tr>
          <th style="width:4% !important;">NO_ORDER</th>
          <th class="pl-0" style="width:11% !important;">TGL.ORDER</th>
          <th class="pl-0" style="width:11% !important;">TGL.DEADLINE</th>
          <th class="w-10">PELANGGAN</th>
          <th style="width:10% !important;">KASIR</th>
          <th class="text-right w-10">TOTAL</th>
          <th class="text-right w-10">PAJAK</th>
          <th class="text-right w-160px">BAYAR</th>
          <th class="text-right w-10">DISKON</th>
          <th class="text-right w-10">PIUTANG</th>
          <th class="text-right w-3">STATUS | AKSI</th>
        </tr>
      </thead>

      <tbody>
        <?php
          $no = 1;
          $totalorder = 0;
          $_totalbayar = 0;
          $totalbayar = 0;
          $totaldiskon = 0;
          $totalpajak = 0;
          $totalsisa = 0;
          $pajak = 0;
          $showOverallFromPage = isset($total_rec, $limit_used) && (int) $total_rec <= (int) $limit_used;
          $overallTotal = isset($sum['totalbeli']) ? $sum['totalbeli'] : 0;
          $overallBayar = isset($sum['totalbayar']) ? $sum['totalbayar'] : 0;
          $overallDiskon = isset($sum['totaldiskon']) ? $sum['totaldiskon'] : 0;
          $overallPiutang = isset($sum['sisa']) ? $sum['sisa'] : 0;

          if (!function_exists('render_order_work_status_button')) {
            function get_order_work_status_code($idInvoice)
            {
              $ci =& get_instance();
              $rows = $ci->db->select('status, ambil, jumlah_kirim')->from('invoice_detail')->where('id_invoice', (int) $idInvoice)->get()->result_array();
              $codes = array_map(static function($row){
                if ((int)($row['jumlah_kirim'] ?? 0) > 0 || (int)($row['status'] ?? 0) === 5) return 5;
                if (($row['ambil'] ?? '') === 'Y' || (int)($row['status'] ?? 0) === 4) return 4;
                return (int)($row['status'] ?? 0);
              }, $rows);
              return job_status_slowest($codes);
            }
            function render_order_work_status_button($idInvoice)
            {
			  $meta = job_status_meta(get_order_work_status_code($idInvoice));
			  $label = htmlspecialchars($meta['label'], ENT_QUOTES, 'UTF-8');
			  $color = htmlspecialchars($meta['color'], ENT_QUOTES, 'UTF-8');

			  return '<button type="button" class="btn btn-sm flat order-work-status" style="background-color:'.$color.';border-color:'.$color.';color:#fff" data-toggle="tooltip" data-original-title="STATUS PEKERJAAN: '.strtoupper($label).'">'.$label.'</button>';
            }
          }
        ?>
        <?php
          $active_printer = $this->model_app->view_where('printer', ['pub' => 1])->row_array();
          $is_invoice_printer = !empty($active_printer) && isset($active_printer['slug']) && $active_printer['slug'] == 'in';
        ?>
        <?php if (!empty($posts)) {
          foreach ($posts as $row) {
            $pdf = $pdf_struk = $print = $target = $pelunasan = $ditagih = $edit = $batal = $complaint = $view = '';
            $lunas = '<button type="button" class="btn btn-secondary btn-sm flat" data-toggle="tooltip" data-original-title="ORDER BELUM DISIMPAN">BELUM</button>';
            $id_invoice = encrypt_url($row['id_invoice']);
            $url_pdf = base_url().'produk/print_invoice/'.$id_invoice;
            $url_pdf_struk = base_url().'e-invoice-mobile/'.$id_invoice.'?pdf=1';
            $url_pdf_dropship = base_url().'dropshiper/print_invoice_dropship/'.$id_invoice;
            $url_print = base_url().'produk/print_invoice_html/'.$id_invoice;
            $url_print_raw = base_url().'produk/print_thermal_raw/'.$id_invoice; 
            $print_invoice_link = '<a class="dropdown-item" href=javascript:open_popup("'.$id_invoice.'"); ><span class="badge badge-primary flat"><i class="fa fa-print"></i> PRINT ORDER</span></a>';
            $print_raw_link = '<a class="dropdown-item" href="'.$url_print_raw.'" target="_blank">
            <span class="badge badge-primary flat"><i class="fa fa-print"></i> PRINT ORDER</span>
          </a>';
            $print_active_link = $is_invoice_printer ? $print_invoice_link : $print_raw_link;
            $work_status_code = get_order_work_status_code($row['id_invoice']);
            if ((int)$work_status_code === 3) {
              $complaint = '<a class="dropdown-item buat-komplain-order" href="#" data-invoice="'.htmlspecialchars($id_invoice,ENT_QUOTES,'UTF-8').'"><span class="badge badge-warning flat"><i class="fa fa-commenting"></i> BUAT KOMPLAIN</span></a>';
            }
            
            $sumOrderDiskon = sumOrderDiskon($row['id_invoice']);
            $sumOrder = sumOrder($row['id_invoice']);
            
            $diskon = $row['potongan_harga'];
            $cashback = $row['cashback'];
            $sumPiutang = sumPiutang($row['id_invoice']);
            $totalBayarMurni = isset($sumPiutang[0]['piutang']) ? (float) $sumPiutang[0]['piutang'] : 0;
            $is_ditagih = !empty($row['history']) && strpos($row['history'], '#DITAGIH#') !== false;
            $pajakPersen = isset($row['pajak']) ? (float) $row['pajak'] : 0;
            $pajak = isset($row['total_pajak']) ? (float) $row['total_pajak'] : 0;
            if ($pajak <= 0 && $pajakPersen > 0) {
              $pajak = round(($sumOrder * $pajakPersen) / 100);
            }
            $pajak = (int) round($pajak);
            $sumPiutang = $totalBayarMurni;
            $popper = rp($sumPiutang);
            $pajakDisplay = $pajak > 0
              ? '<a tabindex="0" class="btn btn-primary btn-sm flat" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="'.rp($pajak).'" data-original-title="Pajak '.rtrim(rtrim(number_format($pajakPersen, 2, '.', ''), '0'), '.').'%">'.rp($pajak).'</a>'
              : rp(0);
            $pdf_dropship = '';
            $sisa = ($sumOrder + $pajak) - $sumPiutang - $diskon;
            
            if ($row['oto'] == 0) {
              $status = 'BUKA';
              $view = 'edit';
            } elseif ($row['oto'] == 1) {
              $status = 'EDIT ORDER';
              $view = 'edit';
            } elseif ($row['oto'] == 2) {
              $status = 'HAPUS PEMBAYARAN';
              $view = 'view';
            } elseif ($row['oto'] == 3) {
              $status = 'EDIT ORDER LUNAS';
              $view = 'edit';
            } elseif ($row['oto'] == 4) {
              $status = 'PENDING';
              $view = 'view';
            } elseif ($row['oto'] == 5) {
              $status = 'BATAL';
              $view = 'batal';
            } else {
              $status = 'KUNCI';
              $view = 'view';
            }
            if ($row['cetak'] > 0) {
              $cetak = 'YA';
            } else {
              $cetak = 'BELUM';
            }

            if ($row['tampil'] == 0) {
              $nama = $row['nama'];
              $nama_popup = $row['nama'];
            } else {
              $nama = $row['perusahaan'];
              $nama_popup = $row['perusahaan'];
            }

            if ($row['status'] == 'baru') {
              $status = render_order_work_status_button($row['id_invoice']);
            } elseif ($row['status'] == 'simpan') {
              $status = render_order_work_status_button($row['id_invoice']);
            } elseif ($row['status'] == 'edit') {
              $status = '<button type="button" class="btn btn-outline-info btn-sm flat" data-toggle="tooltip" data-original-title="ORDER DI EDIT">EDIT ORDER</button>';
            } elseif ($row['status'] == 'pending') {
              $status = '<button type="button" class="btn btn-outline-warning btn-sm flat" data-toggle="tooltip" data-original-title="ORDER PENDING">PENDING</button>';
              $edit = '<a href="#" class="dropdown-item cek_order"  data-id="'.$id_invoice.'" data-modEdit="'.$view.'"  id="cart"><span class="badge badge-info flat">EDIT ORDER</span></a>';
            } elseif ($row['status'] == 'batal') {
              $status = '<button type="button" data-modEdit="hapus" data-id="'.$id_invoice.'" data-trx="'.$row['id_transaksi'].'"  class="btn btn-outline-danger btn-sm flat hapus_invoice" data-toggle="tooltip" data-original-title="HAPUS ORDER BATAL">HAPUS</button>';
            }
            if ($row['lunas'] == 1 and $row['status'] != 'simpan') {
              $lunas = '<button type="button" class="btn btn-success btn-sm flat" data-toggle="tooltip" data-original-title="ORDER LUNAS">LUNAS</button>';
              $pdf = '<a class="dropdown-item" href="'.$url_pdf.'" target="_blank"><span class="badge badge-success flat"><i class="fa fa-file-pdf-o"></i> PRINT PDF</span></a>';
              $print = $print_active_link;

              $target = '_blank';
              $pelunasan = '';
              if (!empty($row['id_dropshiper'])) {
                $pdf_dropship = '<a class="dropdown-item" href="'.$url_pdf_dropship.'" target="_blank"><span class="badge badge-secondary flat"><i class="fa fa-file-pdf-o"></i> PRINT DROPSHIP</span></a>';
              }
            } elseif ($row['lunas'] == 1 and $row['status'] == 'simpan') {
              $lunas = '<button type="button" class="btn btn-success btn-sm flat">LUNAS</button>';
              $pdf = '<a class="dropdown-item" href="'.$url_pdf.'" target="_blank"><span class="badge badge-success flat"><i class="fa fa-file-pdf-o"></i> PRINT PDF</span></a>';
              $print = '<a class="dropdown-item" href=javascript:open_popup("'.$id_invoice.'"); ><span class="badge badge-primary flat"><i class="fa fa-print"></i> PRINT ORDER</span></a>';
              if (!empty($row['id_dropshiper'])) {
                $pdf_dropship = '<a class="dropdown-item" href="'.$url_pdf_dropship.'" target="_blank"><span class="badge badge-secondary flat"><i class="fa fa-file-pdf-o"></i> PRINT DROPSHIP</span></a>';
              }
            }
            if ($row['status'] == 'baru' and $row['id_konsumen'] == 1) {
              $print = '';
              $edit = '<a href="#" class="dropdown-item cek_order"  data-id="'.$id_invoice.'" data-modEdit="'.$view.'"  id="cart"><span class="badge badge-info flat">EDIT ORDER</span></a>';
              $pelunasan = '';
              $batal = '<a class="dropdown-item pending_order" data-modEdit="pending" data-id="'.encrypt_url($row['id_invoice']).'" href="#"><span class="badge badge-warning flat">PENDING</span></a>';
            }
            if ($row['status'] == 'baru' and $row['id_konsumen'] != 1) {
              $print = '';
              $edit = '<a href="#" class="dropdown-item cek_order"  data-id="'.$id_invoice.'" data-modEdit="edit" id="cart"><span class="badge badge-info flat">EDIT ORDER</span></a>';
              $pelunasan = '';
              $batal = '<a class="dropdown-item pending_order" data-modEdit="pending" data-id="'.encrypt_url($row['id_invoice']).'" href="#"><span class="badge badge-warning flat">PENDING</span></a>';
            }
            if ($row['status'] == 'simpan' and $row['lunas'] == 0) {
              $pdf = '<a class="dropdown-item" href="'.$url_pdf.'" target="_blank"><span class="badge badge-success flat"><i class="fa fa-file-pdf-o"></i> PRINT PDF</span></a>';
              $print = $print_active_link;

              if (!empty($row['id_dropshiper'])) {
                $pdf_dropship = '<a class="dropdown-item" href="'.$url_pdf_dropship.'" target="_blank"><span class="badge badge-secondary flat"><i class="fa fa-file-pdf-o"></i> PRINT DROPSHIP</span></a>';
              }
              if (in_array($this->session->level, ['admin', 'owner'], true)) {
                $edit = '<a href="#" class="dropdown-item cek_order" data-id="'.$id_invoice.'" data-modEdit="edit"  id="cart"><span class="badge badge-info flat">EDIT ORDER</span></a>';
                $batal = '<a class="dropdown-item batal_order" data-modEdit="batal" data-id="'.$id_invoice.'" href="#"><span class="badge badge-danger flat"><i class="fa fa-times"></i>  BATAL ORDER</span></a>';
              }
              $pelunasan = '<a class="dropdown-item bayar_sisa" data-modEdit="bayar" data-id="'.$id_invoice.'" data-trx="'.$row['id_transaksi'].'"  data-bayar="'.$sumPiutang.'" data-sisa="'.$sisa.'" data-total="'.($sumOrder + $pajak).'" data-status="'.$row['status'].'" href="#"><span class="badge badge-success flat">PELUNASAN</span></a>';
            }
            if ($row['status'] == 'simpan' and $row['lunas'] == 1) {
              $pdf = '<a class="dropdown-item" href="'.$url_pdf.'" target="_blank"><span class="badge badge-success flat"><i class="fa fa-file-pdf-o"></i> PRINT PDF</span></a>';
              $print = $print_active_link;

              if (!empty($row['id_dropshiper'])) {
                $pdf_dropship = '<a class="dropdown-item" href="'.$url_pdf_dropship.'" target="_blank"><span class="badge badge-secondary flat"><i class="fa fa-file-pdf-o"></i> PRINT DROPSHIP</span></a>';
              }
              if (in_array($this->session->level, ['admin', 'owner'], true)) {
                $edit = '';
                $batal = '<a class="dropdown-item batal_order" data-modEdit="batal" data-id="'.$id_invoice.'" href="#"><span class="badge badge-danger flat"><i class="fa fa-times"></i> BATAL ORDER</span></a>';
              }
              $pelunasan = '';
            }
            if ($row['status'] == 'simpan' and $sisa == 0) {
              $lunas = '<button type="button" class="btn btn-success btn-sm flat" data-toggle="tooltip" data-original-title="ORDER LUNAS">LUNAS</button>';
              $pdf = '<a class="dropdown-item" href="'.$url_pdf.'" target="_blank"><span class="badge badge-success flat"><i class="fa fa-file-pdf-o"></i> PRINT PDF</span></a>';
              if (!empty($row['id_dropshiper'])) {
                $pdf_dropship = '<a class="dropdown-item" href="'.$url_pdf_dropship.'" target="_blank"><span class="badge badge-secondary flat"><i class="fa fa-file-pdf-o"></i> PRINT DROPSHIP</span></a>';
              }
              $print = $print_active_link;

              if (in_array($this->session->level, ['admin', 'owner'], true)) {
                $edit = '';
                $batal = '<a class="dropdown-item batal_order" data-modEdit="batal" data-id="'.$id_invoice.'" href="#"><span class="badge badge-danger flat"><i class="fa fa-times"></i> BATAL ORDER</span></a>';
              }
              $pelunasan = '';
            }

            if (($row['status'] == 'baru' and $row['id_konsumen'] != 1) or (($sumOrder + $pajak - $diskon) != $sumPiutang and $row['id_konsumen'] != 1)) {
              $lunas = '<button data-toggle="tooltip" data-original-title="BAYAR PIUTANG" class="btn btn-info btn-sm flat bayar_sisa" data-modEdit="bayar" data-id="'.$id_invoice.'" data-trx="'.$row['id_transaksi'].'"  data-bayar="'.$sumPiutang.'" data-sisa="'.$sisa.'" data-total="'.($sumOrder + $pajak).'" data-status="'.$row['status'].'"  href="javascript:void(0)">BAYAR</button>';
            }

            if ($row['status'] == 'batal') {
              $lunas = '<button type="button" class="btn btn-danger btn-sm flat">BATAL</button>';
            }
            $warna_button = 'btn-success';
            $totalTagihan = ($sumOrder + $pajak) - $diskon;
            if (!empty($pelunasan) && $totalBayarMurni < $totalTagihan && $row['status'] != 'batal' && !$is_ditagih) {
              $ditagih = '<a class="dropdown-item di_tagih" data-id="'.$id_invoice.'" data-trx="'.$row['id_transaksi'].'" href="#"><span class="badge badge-primary flat">DITAGIH</span></a>';
            }
            if ($totalBayarMurni <= 0) {
              $warna_button = 'btn-danger';
            } elseif ($totalBayarMurni < $totalTagihan) {
              $warna_button = 'btn-warning';
            }
            if ($is_ditagih && $row['status'] != 'batal' && $row['lunas'] == 0) {
              $warna_button = 'btn-primary';
            }
            if ($row['status'] == 'baru') {
              $warna_button = 'btn-secondary';
            }
            if (!empty($pdf)) {
              $pdf_struk = '<a class="dropdown-item" href="'.$url_pdf_struk.'" target="_blank"><span class="badge badge-success flat"><i class="fa fa-file-pdf-o"></i> PRINT PDF STRUK</span></a>';
            }
            $button = $pdf.$pdf_struk.$pdf_dropship.$print.$complaint.$edit.$pelunasan.$ditagih.$batal;
            $mobile_card_class = 'is-unpaid';
            if ($row['status'] == 'batal') {
              $mobile_card_class = 'is-cancel';
            } elseif ($row['lunas'] == 1 || $sisa <= 0) {
              $mobile_card_class = 'is-paid';
            }
            $mobile_tgl_order = !empty($row['tgl_trx']) ? date('d/m/y', strtotime($row['tgl_trx'])) : date_short($row['tgl_trx']);
            $totalorder += $sumOrder - $sumOrderDiskon->sisa;
            $totalbayar += $sumPiutang;
            $totaldiskon += $diskon;
            $totalpajak += $pajak;
            $totalsisa += $sisa;
          ?>
          <tr class="order-row">
            <td data-label="NO_ORDER">
              <div class="mobile-order-card <?php echo $mobile_card_class; ?>">
                <div class="mobile-card-body">
                  <div class="mobile-card-top">
                    <button class="btn <?=$warna_button;?> btn-sm flat cek_order mobile-trx-btn"
                            data-id="<?php echo $id_invoice; ?>"
                            data-trx="<?php echo $row['id_transaksi']; ?>"
                            data-modEdit="<?php echo $view; ?>">
                            <?php echo $row['id_transaksi']; ?>
                    </button>

                    <span class="mobile-date">
                      <i class="fa fa-calendar"></i>
                      <span><?php echo $mobile_tgl_order; ?></span>
                    </span>

                    <?php if ($row['status'] == 'simpan' and $row['id_konsumen'] != 1) { ?>
                      <a data-toggle="tooltip"
                         data-original-title="Kirim Ke <?php echo $nama_popup.' : '.phone_number($row['no_hp']); ?>"
                         data-placement="left"
                         class="mobile-customer kirim_wa"
                         data-id="<?php echo $id_invoice; ?>"
                         data-nomor="<?php echo $row['no_hp']; ?>"
                         data-trx="<?php echo $row['id_transaksi']; ?>"
                         data-tgl="<?php echo $row['tgl_trx']; ?>"
                         href="javascript:void(0)">
                        <i class="fa fa-whatsapp"></i>
                        <span><?php echo $nama; ?></span>
                      </a>
                    <?php } else { ?>
                      <a class="mobile-customer" href="#">
                        <i class="fa fa-whatsapp"></i>
                        <span><?php echo $nama; ?></span>
                      </a>
                    <?php } ?>

                    <div class="dropdown mobile-card-more">
                      <!--button type="button"
                              class="btn btn-link dropdown-toggle flat"
                              data-toggle="dropdown"
                              data-boundary="viewport"
                              aria-haspopup="true"
                              aria-expanded="false">
                        <i class="fa fa-ellipsis-v"></i>
                      </button-->
                      <div class="dropdown-menu dropdown-menu-right flat">
                        <a class="dropdown-item" href="#">NO. #<?php echo $row['id_transaksi']; ?></a>
                        <div class="dropdown-divider"></div>
                        <?php echo $button; ?>
                      </div>
                    </div>
                  </div>

                  <div class="mobile-kasir"><span>Kasir:</span> <?php echo nama_depan($row['nama_lengkap']); ?></div>
                  <div class="mobile-card-divider"></div>

                  <div class="mobile-card-bottom">
                    <div class="mobile-money-row">
                      <div>
                        <span class="mobile-money-label">Total</span>
                        <span class="mobile-money-value"><?php echo rp($sumOrder); ?></span>
                      </div>
                      <div>
                        <span class="mobile-money-label">Bayar</span>
                        <span class="mobile-money-value"><?php echo $popper; ?></span>
                      </div>
                      <div>
                        <span class="mobile-money-label">Piutang</span>
                        <span class="mobile-money-value"><?php echo rp($sisa); ?></span>
                      </div>
                    </div>

                    <div class="btn-group btn-group-sm dropleft flat mobile-card-actions">
                      <?php echo $status.$lunas; ?>
                      <button type="button"
                              class="btn btn-danger btn-sm dropdown-toggle flat mobile-action-dropdown"
                              data-toggle="dropdown"
                              data-boundary="viewport"
                              aria-haspopup="true"
                              aria-expanded="false">
                        <i class="fa fa-chevron-down"></i>
                      </button>
                      <div class="dropdown-menu dropdown-menu-right flat">
                        <a class="dropdown-item" href="#">NO. #<?php echo $row['id_transaksi']; ?></a>
                        <div class="dropdown-divider"></div>
                        <?php echo $button; ?>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="btn-group btn-group-sm flat desktop-order-no" role="group" aria-label="Basic example">
                <button class="btn <?=$warna_button;?> btn-sm flat cek_order"
                        data-id="<?php echo $id_invoice; ?>"
                        data-trx="<?php echo $row['id_transaksi']; ?>"
                        data-modEdit="<?php echo $view; ?>">
                        <?php echo $row['id_transaksi']; ?>
                </button>
                <button type="button" class="btn btn-secondary btn-sm flat cari_data"
                        data-id="<?php echo $row['id_transaksi']; ?>">
                        <i class="fa fa-search"></i>
                </button>
              </div>
            </td>

            <td class="pl-0" data-label="TGL.ORDER">
              <?php echo date_short($row['tgl_trx']); ?>
            </td>

            <td class="pl-0" data-label="TGL.DEADLINE">
              <?php
                $deadlineTimestamp = !empty($row['tgl_ambil']) && strpos($row['tgl_ambil'], '0000-00-00') !== 0
                  ? strtotime($row['tgl_ambil'])
                  : false;
                echo $deadlineTimestamp !== false ? date_short($row['tgl_ambil']) : '-';
              ?>
            </td>

            <td style="white-space: nowrap;" data-label="PELANGGAN">
              <?php if ($row['status'] == 'simpan' and $row['id_konsumen'] != 1) { ?>
                <a data-toggle="tooltip"
                   data-original-title="Kirim Ke <?php echo $nama_popup.' : '.phone_number($row['no_hp']); ?>"
                   data-placement="left"
                   class="text-success kirim_wa"
                   data-id="<?php echo $id_invoice; ?>"
                   data-nomor="<?php echo $row['no_hp']; ?>"
                   data-trx="<?php echo $row['id_transaksi']; ?>"
                   data-tgl="<?php echo $row['tgl_trx']; ?>"
                   href="javascript:void(0)">
                   <i class="fa fa-whatsapp"></i> &nbsp;<?php echo $nama; ?>
                </a>
              <?php } else { ?>
                <a class="text-secondary" href="#"><i class="fa fa-whatsapp"></i> &nbsp;<?php echo $nama; ?></a>
              <?php } ?>
            </td>

            <td data-label="KASIR">
              <?php echo nama_depan($row['nama_lengkap']); ?>
            </td>

            <td align="right" data-label="TOTAL">
              <?php echo rp($sumOrder); ?>
            </td>

            <td class="text-right" data-label="PAJAK">
              <?php echo $pajakDisplay; ?>
            </td>

            <td class="text-right" data-label="BAYAR">
              <?php echo $popper; ?>
            </td>

            <td align="right" data-label="DISKON">
              <?php echo rp($diskon); ?>
            </td>

            <td align="right" data-label="PIUTANG">
              <?php echo rp($sisa); ?>
            </td>

            <td class="text-right" data-label="STATUS | AKSI">
              <div class="btn-group btn-group-sm flat order-action-group">
                <?php echo $status.$lunas; ?>
                <div class="btn-group btn-group-sm dropleft flat order-action-dropdown">
                  <button type="button"
                          class="btn btn-danger btn-sm dropdown-toggle flat"
                          data-toggle="dropdown"
                          data-display="static"
                          data-flip="false"
                          aria-haspopup="true"
                          aria-expanded="false">
                    AKSI
                  </button>
                  <div class="dropdown-menu flat">
                    <a class="dropdown-item" href="#">NO. #<?php echo $row['id_transaksi']; ?></a>
                    <div class="dropdown-divider"></div>
                    <?php echo $button; ?>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        <?php ++$no; } // endforeach ?>

        <?php
          $totalorderRaw = $totalorder;
          $totalbayarRaw = $totalbayar;
          $totaldiskonRaw = $totaldiskon;
          $totalsisaRaw = $totalsisa;
          $showOverallFromPage = isset($total_rec, $limit_used) && (int) $total_rec <= (int) $limit_used;

          $totalorder = rp($totalorder);
          $totalbayar = rp($totalbayar);
          $totalsisa = rp($totalsisa);

          $overallTotal = $showOverallFromPage ? $totalorderRaw : (isset($sum['totalbeli']) ? $sum['totalbeli'] : 0);
          $overallBayar = $showOverallFromPage ? $totalbayarRaw : (isset($sum['totalbayar']) ? $sum['totalbayar'] : 0);
          $overallDiskon = $showOverallFromPage ? $totaldiskonRaw : (isset($sum['totaldiskon']) ? $sum['totaldiskon'] : 0);
          $overallPiutang = $showOverallFromPage ? $totalsisaRaw : (isset($sum['sisa']) ? $sum['sisa'] : 0);
        ?>
      </tbody>

      <tfoot>
        <!-- header ulang (desktop). di mobile disembunyikan via CSS -->
        <tr class="tfoot-head">
          <th style="width:6% !important;">NOMOR_ORDER</th>
          <th class="pl-0" style="width:11% !important;">TGL.ORDER</th>
          <th class="pl-0" style="width:11% !important;">TGL.DEADLINE</th>
          <th class="w-10">PELANGGAN</th>
          <th style="width:10% !important;">KASIR</th>
          <th class="text-right w-10">TOTAL</th>
          <th class="text-right w-10">PAJAK</th>
          <th class="text-right w-160px">BAYAR</th>
          <th class="text-right w-10">DISKON</th>
          <th class="text-right w-10">PIUTANG</th>
          <th class="text-right w-3">STATUS | AKSI</th>
        </tr>

        <!-- total per page -->
        <tr class="tfoot-total">
          <td class="font-weight-bold" colspan="5" data-label="TOTAL PER PAGE">
            TOTAL PER PAGE
          </td>
          <td class="text-right font-weight-bold w-10" data-label="TOTAL">
            <?php echo $totalorder; ?>
          </td>
          <td class="text-right font-weight-bold w-10" data-label="PAJAK">
            <?php echo rp($totalpajak); ?>
          </td>
          <td class="text-right" data-label="BAYAR">
            <?php echo $totalbayar; ?>
          </td>
          <td class="text-right font-weight-bold w-10" data-label="DISKON">
            <?php echo rp($totaldiskon); ?>
          </td>
          <td class="text-right font-weight-bold w-10" data-label="PIUTANG">
            <?php echo $totalsisa; ?>
          </td>
          <td class="text-right w-10" data-label=" ">
          </td>
        </tr>
      </tfoot>

      <?php } else { ?>
        <tbody>
          <tr>
            <td colspan="11">BELUM ADA PENJUALAN <?php echo $tanggal; ?></td>
          </tr>
        </tbody>
      <?php } ?>
    </table>
  </div><!-- /.order-table-scroll -->
</div><!-- /.order-table-box -->

<?php if (in_array($this->session->level, ['admin', 'owner'])) { ?>
<table class="table table-striped table-mailcard" id="total-table">
  <thead class="thead-modern bawah">
    <tr>
      <th style="width:6% !important;">&nbsp;</th>
      <th class="pl-0" style="width:11% !important;">&nbsp;</th>
      <th class="pl-0" style="width:11% !important;">&nbsp;</th>
      <th class="w-10">&nbsp;</th>
      <th style="width:10% !important;">&nbsp;</th>
      <th class="text-right w-10">TOTAL</th>
      <th class="text-right w-10">PAJAK</th>
      <th class="text-right w-10">BAYAR</th>
      <th class="text-right w-10">DISKON</th>
      <th class="text-right w-10">PIUTANG</th>
      <th class="text-right w-3">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="font-weight-bold" colspan="5">
        TOTAL KESELURUHAN
      </td>
      <td class="text-right font-weight-bold w-10">
        <?=rp($overallTotal);?>
      </td>
      <td class="text-right font-weight-bold w-10 ">
        <?=rp($showOverallFromPage ? $totalpajak : (isset($sum['totalpajak']) ? $sum['totalpajak'] : 0));?>
      </td>
      <td class="text-right font-weight-bold w-10 ">
        <?=rp($overallBayar);?>
      </td>
      <td class="text-right font-weight-bold w-10 ">
        <?=rp($overallDiskon);?>
      </td>
      <td class="text-right font-weight-bold w-10 ">
        <?=rp($overallPiutang);?>
      </td>
      <td style="width:16%!important"></td>
    </tr>
  </tbody>
</table>
<?php } ?>

<nav aria-label="Page navigation example" class="p-2">
  <?php echo $this->ajax_pagination->create_links(); ?>
</nav>

<script>
  $(function() {
    $('[data-toggle="tooltip"]').tooltip()
    $('[data-toggle="popover"]').popover()

    $('#dataTableOrderAtas')
      .off('show.bs.dropdown.orderMenu hidden.bs.dropdown.orderMenu')
      .on('show.bs.dropdown.orderMenu', '.btn-group, .mobile-card-more', function() {
        $(this).closest('.order-table-box').addClass('is-action-menu-open');
        $(this).closest('tr.order-row').addClass('is-action-menu-open');
      })
      .on('hidden.bs.dropdown.orderMenu', '.btn-group, .mobile-card-more', function() {
        var $box = $(this).closest('.order-table-box');
        var $row = $(this).closest('tr.order-row');
        if (!$row.find('.btn-group.show, .mobile-card-more.show').length) {
          $row.removeClass('is-action-menu-open');
        }
        if (!$box.find('.btn-group.show, .mobile-card-more.show').length) {
          $box.removeClass('is-action-menu-open');
        }
      });
  })

  $(".hapus_invoice").click(function(e) {
    var id = $(this).attr('data-id');
    var idtrx = $(this).attr('data-trx');
    $('#data-hapus-order').val(id);
    $('#data-hapus-trx').html(idtrx);
    $('#delete-order').modal('show');
  });

  $(".kirim_wa").click(function(e) {
    e.preventDefault();
    var id = $(this).attr('data-id');
    var nomor = $(this).attr('data-nomor');
    var trx = $(this).attr('data-trx');
    var tgl = $(this).attr('data-tgl');

    $('#WaLabel').html('Kirim ' + trx);
    $('#OpenModalWa').modal({
      backdrop: 'static',
      keyboard: false
    })
    $.ajax({
      url: base_url + 'whatsapp/get_form_wa',
      data: {
        id: id,
        nomor: nomor,
        tgl: tgl
      },
      method: 'POST',
      dataType: 'html',
      beforeSend: function() {
        $('body').loading();
      },
      success: function(data) {
        $(".load-data-wa").html(data);
        $('body').loading('stop');
      },
      error: function(xhr, status, error) {
        var err = xhr.responseText;
        sweet('Server!!!', err, 'error', 'danger');
        $('body').loading('stop');
      }
    });
  });

  $('.cek_order').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    var id = $(this).data("id"); // will return encrypted id_invoice
    var mod = $(this).data('modedit');

    $.ajax({
      type: 'POST',
      url: base_url + "main/cek_akses",
      data: {
        id: id,
        mod: mod
      },
      dataType: "json",
      beforeSend: function() {
        $('body').loading();
      },
      success: handle_Cart,
      error: function(xhr, ajaxOptions, thrownError) {
        $('body').loading('stop');
        sweet('Peringatan!!!', thrownError, 'warning', 'warning');
      }
    });
  });

  $('.pending_order').click(function(e) {
    e.preventDefault();
    var id = $(this).data("id");
    $.ajax({
      type: 'POST',
      url: base_url + "penjualan/pending_order",
      data: {
        id: id
      },
      dataType: "json",
      beforeSend: function() {
        $('body').loading();
      },
      success: function(data) {
        if (data.status == 200) {
          showNotif('bottom-right', 'Pending Order', data.msg, 'success');
        } else {
          showNotif('bottom-right', 'Pending Order', data.msg, 'error');
        }
        searchFilter();
        $('body').loading('stop');
      },
      error: function(xhr, ajaxOptions, thrownError) {
        $('body').loading('stop');
        sweet('Peringatan!!!', thrownError, 'warning', 'warning');
      }
    });
  });

  $('.di_tagih').click(function(e) {
    e.preventDefault();
    var id = $(this).data('id');
    var trx = $(this).data('trx');
    var $item = $(this);
    var $row = $(this).closest('tr');
    var $btnTrx = $row.find('.cek_order[data-trx="' + trx + '"]');

    $.ajax({
      type: 'POST',
      url: base_url + "penjualan/tagih_order",
      data: {
        id: id
      },
      dataType: "json",
      beforeSend: function() {
        $('body').loading();
      },
      success: function(data) {
        if (data.status == 200) {
          $btnTrx.removeClass('btn-success btn-danger btn-warning btn-info btn-secondary').addClass('btn-primary');
          $item.remove();
          showNotif('bottom-right', 'Di Tagih', data.msg, 'success');
        } else {
          showNotif('bottom-right', 'Di Tagih', data.msg, 'error');
        }
        $('body').loading('stop');
      },
      error: function(xhr, ajaxOptions, thrownError) {
        $('body').loading('stop');
        sweet('Peringatan!!!', thrownError, 'warning', 'warning');
      }
    });
  });

  $('.cari_data').click(function() {
    $('#myModalTab').modal('show');
    var id = $(this).data("id")
    $('#tab01').click();
    $('#cari_invoice').attr('disabled', false);
    $('#keyword_cari').val(id)
    $('#cari_invoice').click();
  })
</script>
