<style>
  /* ===== THEME VARIABLE RINGAN ===== */
  :root {
    --bg-card: #ffffff;
    --bg-page: #f5f7fa;
    --text-main: #1f2937;
    --text-dim: #6b7280;
    --border-soft: rgba(0,0,0,.07);
    --radius-lg: .75rem;
    --radius-md: .5rem;
    --radius-sm: .4rem;
    --order-theme-color: var(--app-theme-color, #3f51b5);
    --order-theme-text-color: var(--app-theme-text-color, #ffffff);
    --order-theme-text-rgb: var(--app-theme-text-rgb, 255,255,255);
    --shadow-card: 0 14px 32px rgba(0,0,0,.06);
    --shadow-card-sm: 0 8px 20px rgba(0,0,0,.04);
    --radius-btn: .45rem; /* radius khusus tombol */
  }

  body { background-color: var(--bg-page); }

  /* ====== PAGE HEADER BAR (judul halaman) ====== */
  .page-header-bar {
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    row-gap:.5rem;
  }
  @media(min-width:576px){
    .page-header-bar { margin-bottom: 1.25rem; }
  }
  .pg-title {
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
  }

  /* ====== CARD WRAPPER UTAMA (abu muda tempat filter) ====== */
  .pg-card {
    background: #e5e7eb;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1rem;
    margin-bottom: 1rem;
    max-width:100%;
    overflow:hidden; /* cegah scroll horizontal aneh */
  }
  @media (min-width:768px){
    .pg-card {
      padding: 1rem 1.25rem 1.25rem;
      margin-bottom: 1.5rem;
    }
  }

  .pg-header { width:100%; display:block; }
  .pg-toolbar-area { width:100%; }

  /* =========================================================
     WRAP FILTERS / TOOLBAR
     - Mobile: 1 kolom
     - 480: 2 kolom
     - 768: 3 kolom
     - 992+: 12 kolom (2 baris) supaya aman di zoom 150% / iPad
     ========================================================= */
  .filter-row{
    background: #e5e7eb;
    box-shadow: var(--shadow-card-sm);
    border-radius: var(--radius-md);
    padding:.75rem;

    display:grid;
    grid-template-columns: 1fr;
    grid-auto-rows:auto;
    gap:.75rem;
    width:100%;
  }

  /* grid item WAJIB bisa mengecil (anti overflow/overlap) */
  .filter-row > *{ min-width:0; }

  @media(min-width:480px){
    .filter-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }

    .filter-block.tambah-transaksi{ grid-column:1 / -1; }
    .filter-block.filter-wide{ grid-column:1 / -1; }
    .filter-block.filter-search{ grid-column:1 / -1; }
    .action-group{
      grid-column:1 / -1;
      justify-content:flex-start;
      flex-wrap:wrap;
    }
  }

  @media(min-width:768px){
    .filter-row{ grid-template-columns: repeat(3, minmax(0,1fr)); }

    .filter-block.tambah-transaksi{ grid-column:1 / -1; }
    .filter-block.filter-wide{ grid-column:1 / -1; }
    .filter-block.filter-search{ grid-column:1 / -1; }
    .action-group{
      grid-column:1 / -1;
      justify-content:flex-start;
    }
  }

  /* ======= FIX UTAMA (DESKTOP / ZOOM 150%) =======
     Jangan pakai 7 kolom fixed lagi.
     Pakai 12 kolom + pembagian 2 baris:
     Baris 1: Tambah | Sort | Limit | Pilih | Periode
     Baris 2: Search | Aksi
  */
  @media(min-width:992px){
    .filter-row{
      grid-template-columns: repeat(12, minmax(0, 1fr));
      align-items:start;
    }

    /* Baris 1 */
    .filter-block.tambah-transaksi{ grid-column: 1 / span 3; }
    .filter-block.filter-sort{      grid-column: 4 / span 2; }
    .filter-block.filter-limit{     grid-column: 6 / span 2; }
    .filter-block.filter-status{    grid-column: 8 / span 2; }
    .filter-block.filter-wide{      grid-column:10 / span 3; }

    /* Baris 2 */
    .filter-block.filter-search{    grid-column: 1 / span 8; }
    .action-group{                  grid-column: 9 / -1; justify-content:flex-end; }

    /* tombol tambah di desktop ikut konten */
    .btn-add-trx{ width:auto; }
  }

  /* ========== BLOK FILTER INDIVIDU ========== */
  .filter-block{
    display:flex;
    align-items:stretch;
    width:100%;
    min-width:0; /* penting untuk grid shrink */
    overflow:visible;
  }

  .filter-block.filter-small,
  .filter-block.filter-wide,
  .filter-block.filter-search{ min-width:0; }

  /* Label "SORT", "LIMIT", "PILIH", dan "PERIODE" mengikuti warna tema header */
  .filter-label{
    background:var(--order-theme-color);
    color:var(--order-theme-text-color);
    font-size:.8rem;
    font-weight:500;
    line-height:1.5;
    border:1px solid var(--order-theme-color);
    border-radius:.35rem 0 0 .35rem;
    padding:.375rem .65rem;
    display:flex;
    align-items:center;
    white-space:nowrap;
    box-shadow:0 .125rem .25rem rgba(58,59,69,.2);

    /* Tetap stabil saat zoom tanpa memaksa lebar label */
    flex:0 0 auto;
    min-width:0;
    justify-content:center;
  }

  /* control input/select */
  .filter-control{
    flex:1;
    min-width:0;
    width:100%;
    border:1px solid var(--border-soft);
    border-left:0;
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    font-size:.8rem;
    line-height:1.3;
    font-weight:500;
    color:var(--text-main);
    background-color:#fff;
    padding:.45rem .5rem;

    /* kunci tinggi supaya sejajar dan gak “loncat” */
    min-height:36px;
  }

  .filter-control:focus{
    outline:none;
    box-shadow:0 0 0 2px rgba(79,70,229,.25);
    border-color:rgba(79,70,229,.4);
  }

  /* Hanya empat kontrol yang diminta: SORT, LIMIT, PILIH, dan PERIODE */
  .filter-sort .filter-control,
  .filter-limit .filter-control,
  .filter-status .filter-control,
  .filter-wide .filter-control{
    border-color:#d1d3e2;
    border-radius:0 .35rem .35rem 0;
    font-size:.8rem;
    min-height:36px;
    transition:border-color .15s ease, box-shadow .15s ease;
  }

  .filter-sort .filter-control:focus,
  .filter-limit .filter-control:focus,
  .filter-status .filter-control:focus,
  .filter-wide .filter-control:focus{
    border-color:var(--order-theme-color);
    box-shadow:0 0 0 .15rem rgba(0,0,0,.08);
  }

  /* kolom "Cari data" tidak pakai label di kiri */
  .filter-block.filter-search .filter-control{
    border-radius: var(--radius-sm);
    border-left:1px solid var(--border-soft);
  }

  /* ====== TOMBOL TAMBAH TRANSAKSI ====== */
  .btn-add-trx{
    background:var(--order-theme-color);
    color:var(--order-theme-text-color) !important;
    font-weight:600;
    font-size:.75rem;
    line-height:1.2;
    border:0;
    border-radius: var(--radius-btn);
    box-shadow:0 8px 20px rgba(0,0,0,.16);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    padding:.6rem .9rem;
    text-transform:uppercase;
    letter-spacing:.08rem;
    transition:all .15s ease;
    white-space:nowrap;
    width:100%; /* mobile full */
    min-height:36px;
  }

  .btn-add-trx .icon{ display:flex; align-items:center; font-size:.8rem; }
  .btn-add-trx .text-white-50{ color:rgba(var(--order-theme-text-rgb), .72) !important; }
  .btn-add-trx:hover,
  .btn-add-trx:focus{
    box-shadow:0 10px 24px rgba(0,0,0,.22);
    filter:brightness(1.05);
  }

  /* ====== ACTION BUTTON GROUP (Clear / Excel) ====== */
  .action-group{
    display:flex;
    align-items:stretch;
    gap:.5rem;
    width:100%;
    min-width:0;

    /* PENTING: jangan dipaksa nowrap, supaya aman di zoom 150% */
    flex-wrap:wrap;
  }

  @media(min-width:992px){
    .action-group{ width:100%; }
  }

  /* ====== ACTION BUTTON (CLEAR, EXCEL) ====== */
  .action-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    font-size:.75rem;
    font-weight:600;
    line-height:1.2;
    border-radius: var(--radius-btn);
    border:1px solid transparent;
    padding:.5rem .7rem;
    min-height:36px;
    white-space:nowrap;
    box-shadow:0 8px 20px rgba(0,0,0,.07);
    transition: all .15s ease;

    /* mobile: lebar rata */
    flex:1 1 140px;
  }

  .action-btn-clear{
    background:#fff;
    color:#ef4444;
    border-color:rgba(239,68,68,.3);
  }
  .action-btn-clear:hover,
  .action-btn-clear:focus{
    background:#fff5f5;
    border-color:#ef4444;
    box-shadow:0 10px 24px rgba(239,68,68,.25);
  }

  .action-btn-excel{
    background:#059669;
    color:#fff;
    border-color:#059669;
  }
  .action-btn-excel:hover,
  .action-btn-excel:focus{
    filter:brightness(1.07);
    box-shadow:0 10px 24px rgba(5,150,105,.4);
  }

  /* ====== LIST DATA WRAPPER ====== */
  .dataList-wrapper{ width:100%; margin-top:1rem; }
  @media(min-width:768px){ .dataList-wrapper{ margin-top:1.25rem; } }

  /* ====== TABLE STYLING ====== */
  .card .table td,
  .card .table th,
  .table td,
  .table th{
    padding: .6rem .75rem;
    vertical-align: middle;
    font-size:.8rem;
    line-height:1.3;
  }

  .table thead th{
    background:#f9fafb;
    color:var(--text-main);
    font-weight:600;
    border-bottom:1px solid var(--border-soft);
    white-space:nowrap;
  }

  .table tbody tr{ border-bottom:1px solid var(--border-soft); }
  .table-hover tbody tr:hover{ background:#f3f4f6; }

  .table-responsive{
    border:1px solid var(--border-soft);
    border-radius:var(--radius-sm);
    box-shadow: var(--shadow-card-sm);
    background:#fff;
  }
  #dataList .table-responsive { margin-bottom:0; }

  /* ====== MODAL SIDE (WA kirim invoice) ====== */
  .modal.left .modal-dialog{
    position: fixed;
    margin: auto;
    width: 380px;
    max-width:90%;
    height: 100%;
    right: auto;
    left: 0;
    transform: translate3d(0, 0, 0);
  }
  .modal.left .modal-content{
    height: 100%;
    overflow-y: auto;
    border-radius:0;
  }

  /* ====== RESPONSIVE HEADER WRAPPER GLOBAL ====== */
  #container-wrapper .d-sm-flex{
    flex-wrap:wrap;
    row-gap:.25rem;
  }
  @media(max-width:576px){
    #container-wrapper .d-sm-flex{
      flex-direction:column;
      align-items:flex-start !important;
      gap:.25rem;
    }
  }

  .tooltip-inner{
    font-size:.7rem;
    line-height:1.3;
    font-weight:500;
    padding:.4rem .5rem;
    border-radius:var(--radius-sm);
  }

  /* ====== FIX radius tombol walau tema lama pakai .flat {border-radius:0!important} ====== */
  .btn-add-trx.flat,
  .action-btn.flat,
  .action-btn-clear.flat,
  .action-btn-excel.flat{
    border-radius: var(--radius-btn) !important;
  }

  .mobile-add-trx{ display:none; }

  .mobile-order-user-name,
  .mobile-order-user-caret{
    display:none;
  }

  @media(max-width:768px){
    :root{
      --mobile-purple:#6d16df;
      --mobile-purple-dark:#4d00db;
      --mobile-ink:#090c22;
      --mobile-muted:#6b7280;
      --mobile-line:#e5e7eb;
      --mobile-shadow:0 10px 26px rgba(15,23,42,.10);
    }

    body{
      background:#f7fafc;
      color:var(--mobile-ink);
    }

    #wrapper,
    #content-wrapper,
    #content{
      width:100%;
      max-width:100%;
      overflow-x:hidden;
      background:#f7fafc;
    }

    .navbar.topbar{
      background:var(--app-theme-color, #3f51b5) !important;
      min-height:66px;
      height:66px;
      margin-bottom:0 !important;
      padding:0 14px;
      box-shadow:0 2px 10px rgba(0,0,0,.16);
      flex-wrap:nowrap;
    }

    .navbar.topbar #sidebarToggleTop,
    .navbar.topbar #sidebarToggleLeft{
      display:none !important;
    }

    .navbar.topbar .navbar-nav{
      align-items:center;
      margin-left:auto !important;
      min-width:0;
      flex:0 0 auto;
    }

    .navbar.topbar .nav-link{
      height:66px;
      color:var(--app-theme-text-color, #fff) !important;
      padding:.5rem .28rem;
      display:flex;
      align-items:center;
      gap:.25rem;
      font-size:.96rem;
    }

    .navbar.topbar #clock{
      color:var(--app-theme-text-color, #fff);
      font-size:.88rem;
      font-weight:500;
      line-height:1;
      white-space:nowrap;
    }

    .navbar.topbar .fa-clock-o,
    .navbar.topbar .fa-search{
      font-size:.98rem;
    }

    .navbar.topbar .topbar-divider{
      display:block !important;
      height:28px;
      margin:0 6px;
      border-left:1px solid rgba(var(--app-theme-text-rgb, 255,255,255),.28);
    }

    .navbar.topbar .img-profile{
      width:38px !important;
      height:38px !important;
      max-width:38px !important;
      border:2px solid var(--app-theme-text-color, #fff);
      object-fit:cover;
    }

    .mobile-order-user-name,
    .mobile-order-user-caret{
      display:inline-flex;
      align-items:center;
    }

    .mobile-order-user-name{
      max-width:116px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-size:.98rem;
      font-weight:600;
      margin-left:8px;
    }

    .mobile-order-user-caret{
      margin-left:4px;
      font-size:1.25rem;
    }

    #container-wrapper{
      padding:24px 16px 18px !important;
      margin-bottom:0 !important;
    }

    .page-header-bar{
      padding:0;
      margin:0 0 18px;
      border-radius:0;
    }

    .pg-title{
      font-size:1.62rem;
      line-height:1.12;
      font-weight:800;
      letter-spacing:0;
      color:#070b22;
    }

    .pg-card{
      background:transparent;
      border:0;
      box-shadow:none;
      padding:0;
      margin-bottom:0;
      overflow:visible;
    }

    .pg-toolbar-area{
      display:block;
    }

    .mobile-add-trx{
      display:flex;
      margin-bottom:20px;
    }

    .mobile-add-trx .btn-add-trx{
      min-height:60px;
      border-radius:14px !important;
      font-size:1.08rem;
      font-weight:800;
      letter-spacing:.02em;
      gap:.55rem;
      box-shadow:0 16px 34px rgba(0,0,0,.18);
      background:var(--order-theme-color);
      color:var(--order-theme-text-color) !important;
    }

    .mobile-add-trx .btn-add-trx .icon{
      font-size:1.15rem;
      opacity:1;
    }

    .filter-row{
      background:#fff;
      border:1px solid #e5e7ee;
      border-radius:14px;
      box-shadow:0 8px 22px rgba(15,23,42,.075);
      padding:10px;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px 8px;
      overflow:visible;
    }

    .filter-row .tambah-transaksi{
      display:none;
    }

    .filter-block.filter-search{
      grid-column:1 / -1;
      order:1;
      position:relative;
    }

    .filter-block.filter-sort{ order:2; }
    .filter-block.filter-limit{ order:3; }
    .filter-block.filter-status{ order:4; }
    .filter-block.filter-wide{ order:5; }
    .action-group{ order:6; }

    .filter-block{
      position:relative;
      display:flex;
      align-items:stretch;
      min-height:40px;
    }

    .filter-label{
      position:static;
      z-index:auto;
      flex:0 0 auto;
      min-width:44px;
      min-height:40px;
      padding:0 8px;
      border:1px solid var(--order-theme-color);
      border-radius:8px 0 0 8px;
      background:var(--order-theme-color);
      color:var(--order-theme-text-color);
      font-size:.62rem;
      line-height:1;
      font-weight:700;
      letter-spacing:.025em;
      text-transform:uppercase;
      display:flex;
      align-items:center;
      justify-content:center;
      pointer-events:none;
      box-shadow:0 2px 5px rgba(15,23,42,.08);
    }

    .filter-control{
      height:40px;
      min-height:40px;
      width:100%;
      border:1px solid #d9deea !important;
      border-left:0 !important;
      border-radius:0 8px 8px 0 !important;
      background-color:#fff;
      color:#111827;
      font-size:.72rem;
      line-height:1.15;
      font-weight:600;
      padding:0 26px 0 8px;
      box-shadow:none;
    }

    .filter-sort .filter-control,
    .filter-limit .filter-control,
    .filter-status .filter-control{
      font-size:.72rem;
      font-weight:600;
    }

    .filter-block.filter-search .filter-control{
      height:48px;
      min-height:48px;
      border-left:1px solid #d9deea !important;
      border-radius:10px !important;
      padding:0 14px 0 44px;
      font-size:.82rem;
      color:#111827;
    }

    .filter-block.filter-search::before{
      content:"\f002";
      font-family:FontAwesome;
      position:absolute;
      left:16px;
      top:50%;
      transform:translateY(-50%);
      color:#7b8190;
      font-size:1.05rem;
      z-index:2;
      pointer-events:none;
    }

    .filter-block.filter-wide::before{
      display:none;
    }

    .filter-block.filter-wide .filter-control{
      padding-left:8px;
      padding-right:6px;
      font-size:.61rem;
      letter-spacing:-.01em;
    }

    .filter-control::placeholder{
      color:#8b93a1;
    }

    .filter-control:focus{
      box-shadow:0 0 0 3px rgba(0,0,0,.08);
      border-color:var(--order-theme-color) !important;
    }

    .action-group{
      grid-column:1 / -1;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
      width:100%;
      align-items:center;
    }

    .action-btn{
      min-height:38px;
      border-radius:10px !important;
      font-size:.74rem;
      font-weight:700;
      box-shadow:none;
      flex:unset;
      padding:.35rem .65rem;
    }

    .action-btn-clear{
      border-color:#ff9aa2;
      color:#ef3349;
      background:#fff;
    }

    .action-btn-excel{
      border-color:#07966a;
      background:linear-gradient(135deg,#10b981,#059669);
    }

    .dataList-wrapper{
      margin-top:18px;
    }

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

    .modal.left .modal-dialog{
      width:100%;
      max-width:100%;
    }

    .scroll-fab{
      display:none !important;
    }
  }

  @media(max-width:430px){
    .navbar.topbar{
      padding:0 12px;
    }

    .navbar.topbar .nav-link{
      padding:.5rem .24rem;
    }

    .navbar.topbar #clock{
      font-size:.82rem;
    }

    .navbar.topbar .mobile-order-search-item{
      display:none;
    }

    .mobile-order-user-name{
      display:none;
    }

    .navbar.topbar .topbar-divider{
      margin:0 5px;
    }

    .navbar.topbar .img-profile{
      width:36px !important;
      height:36px !important;
      max-width:36px !important;
    }

    .mobile-order-user-caret{
      display:none;
    }

    #container-wrapper{
      padding-left:14px !important;
      padding-right:14px !important;
    }
  }

</style>

<div class="container-fluid" id="container-wrapper" style="margin-bottom:1rem;">

  <!-- HEADER ATAS (Judul Halaman) -->
  <div class="page-header-bar d-sm-flex align-items-center justify-content-between">
    <h1 class="pg-title mb-0">Data Transaksi</h1>
  </div>

  <!-- KARTU UTAMA -->
  <div class="pg-card">
    <div class="pg-header">
      <div class="pg-toolbar-area">
        <div class="mobile-add-trx">
          <button
            class="btn-add-trx cek_transaksi flat"
            data-id="0"
            data-modEdit="baru"
          >
            <span class="icon text-white-50"><i class="fa fa-plus-circle fa-fw"></i></span>
            <span class="text">TAMBAH TRANSAKSI</span>
          </button>
        </div>

        <!-- BAR FILTER -->
        <div class="filter-row">

          <!-- TOMBOL TAMBAH TRANSAKSI -->
          <div class="filter-block tambah-transaksi">
            <button
              class="btn-add-trx cek_transaksi flat"
              data-id="0"
              data-modEdit="baru"
            >
              <span class="icon text-white-50"><i class="fa fa-cart-plus fa-fw"></i></span>
              <span class="text">TAMBAH TRANSAKSI</span>
            </button>
          </div>

          <!-- SORT (tambahan class: filter-sort) -->
          <div class="filter-block filter-sort">
            <div class="filter-label">SORT</div>
            <select id="sortBy" class="filter-control custom-select" onchange="searchFilter()">
              <option value="DESC" selected>TERBARU</option>
              <option value="ASC">TERLAMA</option>
              <option value="min_order">ORDER KECIL - BESAR</option>
              <option value="max_order">ORDER BESAR - KECIL</option>
            </select>
          </div>

          <!-- LIMIT (tambahan class: filter-limit) -->
          <div class="filter-block filter-small filter-limit">
            <div class="filter-label">LIMIT</div>
            <select id="limits" name="limits" class="filter-control custom-select" onchange="searchFilter()">
              <option value="10">10</option>
              <option value="20">20</option>
              <option value="50">50</option>
              <option value="100">100</option>
              <option value="500">500</option>
              <option value="1000">1000</option>
            </select>
          </div>

          <!-- STATUS (tambahan class: filter-status) -->
          <div class="filter-block filter-status">
            <div class="filter-label">PILIH</div>
            <select id="status_trx" name="status_trx" class="filter-control custom-select" onchange="searchFilter()">
              <?php foreach($select AS $key=>$val){
                echo '<option value="'.$key.'">'.$val.'</option>';
              } ?>
            </select>
          </div>

          <!-- PERIODE -->
          <div class="filter-block filter-wide">
            <div class="filter-label">PERIODE</div>
            <input
              type="text"
              id="start_date"
              class="filter-control date-order"
              name="start_date"
              value="<?=$tgl?>"
              onchange="searchFilter();"
            />
          </div>

          <!-- CARI DATA -->
          <div class="filter-block filter-search">
            <input
              type="text"
              id="keywords"
              class="filter-control"
              placeholder="Cari data transaksi..."
              onkeyup="searchFilterDebounced();"
            />
          </div>

          <!-- AKSI -->
          <div class="action-group">
            <button
              type="button"
              class="action-btn action-btn-clear clear flat"
              id="clear"
              data-toggle="tooltip"
              data-original-title="Clear filter"
            >
              <i class="fa fa-times"></i>
              <span>Clear</span>
            </button>

            <button
              type="button"
              class="action-btn action-btn-excel export_order flat"
              id="export_order"
              data-toggle="tooltip"
              data-original-title="Export Excel"
            >
              <i class="fa fa-file-excel-o"></i>
              <span>Excel</span>
            </button>
          </div>

        </div><!-- /filter-row -->
      </div><!-- /pg-toolbar-area -->
    </div><!-- /pg-header -->

    <!-- LIST DATA AJAX -->
    <div class="dataList-wrapper">
      <div class="post-list pt-0" id="dataList"></div>
    </div>

  </div><!-- /pg-card -->
</div><!-- /container-wrapper -->

<!-- FORM CETAK -->
<form method="POST" action="<?=base_url();?>laporan/cetak_order_harian" id="target_print" target="_blank">
  <input type="hidden" name="sortby_cetak" id="sortby_cetak" readonly />
  <input type="hidden" name="trx_cetak" id="trx_cetak" readonly />
  <input type="hidden" name="tanggal_cetak" id="tanggal_cetak" readonly />
</form>

<!-- Modal WA -->
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal left fade" id="OpenModalWa" role="dialog" tabindex="-1">
  <div class="modal-dialog" id="kirim-pesan">
    <div class="modal-content flat">
      <div class="modal-header pt-1 pb-1">
        <h4 class="modal-title" id="WaLabel">Kirim Invoice</h4>
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
      </div>
      <div class="modal-body">
        <div class="load-data-wa"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success btn-sm flat kirim_pesan" type="button"><i class="fa fa-send"></i>&nbsp;Kirim</button>
        <button class="btn btn-danger btn-sm flat" data-dismiss="modal" type="button">Batal</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Hapus -->
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="delete-order" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Konfirmasi penghapusan order</h4>
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
      </div>
      <div class="modal-body">
        <p>Anda akan menghapus order dengan nomor <span id="data-hapus-trx"></span>, prosedur ini tidak dapat diubah.</p>
        <p>Apakah Anda ingin melanjutkan?</p>
        <p class="debug-url"></p>
        <input type="hidden" id="data-hapus-order">
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal" type="button">Batal</button>
        <button class="btn btn-danger hapus_order_batal" type="button">YA</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade cmp-create-modal" id="complaintCreateModal" tabindex="-1" role="dialog" aria-labelledby="complaintCreateTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div>
          <span class="cmp-modal-kicker">Complaint Management</span>
          <h4 class="modal-title" id="complaintCreateTitle">Buat Komplain Pelanggan</h4>
          <p>Hubungkan laporan pelanggan dengan transaksi dan item yang tepat.</p>
        </div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Tutup"><span aria-hidden="true">&times;</span></button>
      </div>
      <div id="complaintModalBody" class="modal-body">
        <div class="cmp-modal-loading"><i class="fa fa-circle-o-notch fa-spin"></i><span>Menyiapkan formulir...</span></div>
      </div>
    </div>
  </div>
</div>
<style>
  .cmp-create-modal .modal-dialog{max-width:1080px}.cmp-create-modal .modal-content{border:0;border-radius:20px;box-shadow:0 28px 80px rgba(15,23,42,.28);overflow:hidden}.cmp-create-modal .modal-header{padding:22px 26px 17px;border:0;background:linear-gradient(135deg,#f8faff,#fff)}.cmp-create-modal .modal-title{font-weight:750;color:#172033;margin:3px 0}.cmp-create-modal .modal-header p{margin:0;color:#697386}.cmp-create-modal .close{width:38px;height:38px;padding:0;margin:0;border-radius:50%;font-weight:400}.cmp-create-modal .close:hover{background:#e9eef8}.cmp-modal-kicker{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--app-theme-color,#4f46e5)}.cmp-create-modal .modal-body{padding:0;background:#f6f8fb;max-height:calc(100vh - 155px);overflow-y:auto}.cmp-modal-loading{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#697386}.cmp-modal-loading i{font-size:28px;color:var(--app-theme-color,#4f46e5)}@media(max-width:576px){.cmp-create-modal .modal-dialog{margin:8px}.cmp-create-modal .modal-header{padding:18px}.cmp-create-modal .modal-body{max-height:calc(100vh - 125px)}}
</style>

<form id="target_export" action="<?=base_url();?>penjualan/export_order" method="post" target="_blank">
  <input type="hidden" name="tanggal_export" id="tanggal_export">
</form>

<script>
  var url_https = "<?= url_https(); ?>";
  var hari_ini = "<?= $tgl; ?>";

  /* Debounce untuk pencarian supaya ringan di mobile */
  let _searchTimer;
  function searchFilterDebounced() {
    clearTimeout(_searchTimer);
    _searchTimer = setTimeout(searchFilter, 300);
  }
</script>

<?php $this->RenderScript[] = function() { ?>
<script>
  jQuery(document).ready(function () {
    $('.date-order').daterangepicker({
      opens: 'right',
      ranges: {
        'Hari ini': [moment(), moment()],
        'Kemarin': [moment().subtract('days', 1), moment()],
        'Minggu Ini': [moment().startOf('isoWeek'), moment()],
        '7 Hari Terakhir': [moment().subtract('days', 6), moment()],
        'Bulan ini': [moment().startOf('month'), moment()],
        'Bulan sebelumnya': [moment().subtract('days', 29), moment()],
        'Tahun ini': [moment().startOf('year'), moment()],
      },
      "dateLimit": {"days": 365},
      showDropdowns: true,
      "linkedCalendars": false,
      "startDate": start,
      "endDate": end,
      "maxDate": end,
      locale: {
        customRangeLabel: 'Pilih Tanggal',
        format: 'DD/MM/YYYY',
        applyLabel: 'Pilih',
        separator: " - ",
        "monthNames": ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],
      }
    }, function(startDate, endDate, label) {
      start = startDate.format('DD-MM-YYYY');
      end   = endDate.format('DD-MM-YYYY');
    });
  });

  // --- Responsif: bungkus tabel hasil Ajax ke .table-responsive ---
  function wrapTablesResponsive(scope) {
    var $root = scope ? $(scope) : $(document);
    $root.find('#dataList table').each(function(){
      var $tbl = $(this);
      if (!$tbl.parent().hasClass('table-responsive')) {
        $tbl.wrap('<div class="table-responsive"></div>');
      }
    });
  }

  function searchFilter(path) {
    path = path ? path : 0;
    var trx     = $("#status_trx").val();
    var LITERALS= $("#keywords").val();
    var sortBy  = $("#sortBy").val();
    var limits  = $("#limits").val();
    var tgl     = $("#start_date").val();

    var param = base_url + "penjualan/ajaxPaginationData/" + path;
    $.ajax({
      type : "POST",
      url  : param,
      data : { page: path, keywords: LITERALS, sortBy: sortBy, limits: limits, trx: trx, tgl: tgl },
      beforeSend : function() { $("#dataList").loading(); },
      success : function(htmlExercise) {
        $("#dataList").html(htmlExercise);
        wrapTablesResponsive("#dataList");
        $("#dataList").loading('stop');
        if(path == 0){
          setTimeout(function() { /* load_total(trx,tgl); */ }, 1200);
        }
      },
      error : function(res, status, httpMessage) {
        $("#dataList").loading('stop');
      }
    });
  }

  function loader_total(page){
    if(page == 0){
      $('.total_order, .total_bayar, .total_diskon, .total_pajak, .total_piutang')
        .html('<i class="fa fa-spinner fa-spin"></i>');
    }
  }

  function load_total(str,tgl){
    status = str ? str : 0;
    tgl    = tgl ? tgl : $("#start_date").val();
    $.ajax({
      url: base_url + 'penjualan/load_total',
      data : {status:str,tgl:tgl},
      method: 'POST',
      dataType:'json',
      success: function(data) {
        $('.total_order').html(data.total_order);
        $('.total_bayar').html(data.total_bayar);
        $('.total_diskon').html(data.total_diskon);
        $('.total_pajak').html(data.total_pajak);
        $('.total_piutang').html(data.total_piutang);
      }
    });
  }

  // EXPORT
  $('#export_order').click(function() {
    var table  = $('#dataTableOrderAtas');
    var header = [], body = [], footer = [];
    var table2 = $('#total-table'), header2 = [], body2 = [];

    table.find('thead th').each(function(i){ if(i!==9){ header.push($(this).text()); }});
    table.find('tbody tr').each(function(){
      var row = [];
      $(this).find('td').each(function(i){
        if(i!==9){
          var divContent = $(this).find('div').text().trim();
          row.push(divContent ? divContent : $(this).text().trim());
        }
      });
      body.push(row);
    });

    table2.find('thead th').each(function(i){ if(i!==9){ header2.push($(this).text()); }});
    table2.find('tbody tr').each(function(){
      var row = [];
      $(this).find('td').each(function(i){
        if(i!==9){
          var divContent = $(this).find('div').text().trim();
          row.push(divContent ? divContent : $(this).text().trim());
        }
      });
      body2.push(row);
    });

    table.find('tfoot tr').each(function(){
      var footerRow = [];
      $(this).find('td').each(function(index){
        var colspan = $(this).attr('colspan') ? parseInt($(this).attr('colspan')) : 1;
        var text = $(this).text().trim();
        if(index!==9){
          for (var i=0;i<colspan;i++){
            footerRow.push((i>0 && i<=3) ? '' : text);
          }
        }
      });
      footer.push(footerRow);
    });

    $.ajax({
      url: '<?= base_url("penjualan/export_to_excel") ?>',
      type: 'POST',
      data: { data: { header, body, header2, body2, footer, periode: $("#start_date").val() } },
      dataType:"json",
      beforeSend : function() { $("body").loading(); },
      success: function(response) {
        if(response.url) { window.open(response.url,"_blank"); }
        $('body').loading('stop');
      },
      error: function(){ $('body').loading('stop'); }
    });
  });

  // CLEAR FILTER
  $('.clear').on('click', function() {
    $(this).tooltip("hide");
    $("#status_trx").val(0);
    $("#limits").val(10);
    $("#sortBy").val("DESC");
    $("#start_date").val('');
    $("#keywords").val('');
    searchFilter();
  });

  // MODAL BUAT KOMPLAIN DARI TRANSAKSI SELESAI
  $(document).on('click','.buat-komplain-order',function(e){
    e.preventDefault();
    var invoice=$(this).attr('data-invoice');
    var modal=$('#complaintCreateModal');
    $('#complaintModalBody').html('<div class="cmp-modal-loading"><i class="fa fa-circle-o-notch fa-spin"></i><span>Menyiapkan formulir...</span></div>');
    modal.modal('show');
    $.get(base_url+'komplain/modal-form',{invoice:invoice}).done(function(html){
      $('#complaintModalBody').html(html);
    }).fail(function(xhr){
      $('#complaintModalBody').html('<div class="alert alert-danger m-4">'+((xhr.responseJSON&&xhr.responseJSON.msg)||'Formulir komplain gagal dimuat.')+'</div>');
    });
  });

  // KIRIM PESAN WA
  $(document).on('click','.kirim_pesan',function(e){
    var dataform = $("#form-wa").serialize();
    $.ajax({
      type: "POST",
      url: url_https+"whatsapp/kirim_pesan",
      dataType: 'json',
      data: dataform,
      cache: false,
      beforeSend: function () { $('#kirim-pesan').loading({zIndex:1070,message:'kirim pesan...'}); },
      success: handleKirim,
      error: function(xhr){ $('#kirim-pesan').loading('stop'); }
    });
  });

  function handleKirim(data) {
    $('#kirim-pesan').loading('stop');
    $('#OpenModalWa').modal('hide');
    if(data.status=='offline'){
      showNotif('bottom-right','Kirim pesan',data.msg.detail,'danger');
    } else if(data.status===true){
      showNotif('bottom-right','Kirim pesan',data.msg.detail,'success');
    } else {
      var number = data.target;
      var message = encodeURIComponent(data.msg);
      var url_wa = getLinkWhastapp(number,message)
      window.open(url_wa, '_blank');
    }
  }

  function getLinkWhastapp(number, message) {
    return 'https://wa.me/' + number + '?text=' + message;
  }

  // CETAK INVOICE / POPUP
  function open_popup(id){
    var w=880,h=570,l=Math.floor((screen.width-w)/2),t=Math.floor((screen.height-h)/2);
    if(thermal===1){
      $.post(base_url+"produk/print_invoice_html/"+id,{id:id});
    }else{
      var url_cetak = base_url +'produk/print_invoice_html/'+id;
      window.open(url_cetak, 'Cetak Invoice', "scrollbars=1");
    }
  }

  $("#print_order").click(function(e) {
    e.preventDefault();
    var sortby = $('#sortBy').val();
    var trx    = $('#trx').val();
    var tanggal= $('#tgl').val();
    if(tanggal==''){ sweet('Print Notif!!!','Tanggal masih kosong','warning','warning'); return; }
    $('#sortby_cetak').val(sortby);
    $('#trx_cetak').val(trx);
    $('#tanggal_cetak').val(tanggal);
    $("#target_print").submit();
  });

  // HAPUS ORDER
  $(document).on('click','.hapus_invoice',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');
  });

  $(document).on('click','.hapus_order_batal',function(e){
    e.preventDefault();
    var id = $("#data-hapus-order").val();
    $.ajax({
      url: base_url + 'penjualan/hapus_order_batal',
      method: 'POST',
      dataType:'json',
      data:{id:id,type:"hapus"},
      beforeSend: function(){ $('.hapus_order_batal').attr('disabled',true); $('body').loading(); },
      success: function(data) {
        if(data.status==200){ sweet_time(500,'Status!!!',data.msg); }
        else{ sweet('Peringatan!!!',data.msg,'warning','warning'); }
        $('#delete-order').modal('hide');
        searchFilter(); load_total();
        $('body').loading('stop');
        $('.hapus_order_batal').attr('disabled',false);
      },
      error: function(xhr){ $('body').loading('stop'); }
    });
  });

  // QUICK FILTER STATUS
  $(document).on("click", ".ceklunas",   function(){ $("#status_trx").val(1);        searchFilter(); });
  $(document).on("click", ".belumlunas", function(){ $("#status_trx").val(2);        searchFilter(); });
  $(document).on("click", ".cekPending", function(){ $("#status_trx").val("pending");searchFilter(); });
  $(document).on("click", ".cekBaru",    function(){ $("#status_trx").val("baru");   searchFilter(); });
  $(document).on("click", ".cekBatal",   function(){ $("#status_trx").val("batal");  searchFilter(); });

  // Tooltip bootstrap aktif
  $(document).ready(function() {
    $("body").tooltip({ selector : "[data-tooltip=tooltip], [data-toggle=tooltip]", container : "body" });
  });

  // KIRIM WA (load form WA)
  $(document).on('click','.kirim_wa',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) {
        var err = xhr.responseText;
        sweet('Server!!!', err, 'error', 'danger');
        $('body').loading('stop');
      }
    });
  });

  // CEK ORDER (buka detail / cart)
  $(document).on('click','.cek_order',function(e){
    e.preventDefault();
    e.stopPropagation();
    var id  = $(this).data("id");
    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
  $(document).on('click','.pending_order',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) {
        $('body').loading('stop');
        sweet('Peringatan!!!', xhr.statusText, 'warning', 'warning');
      }
    });
  });

  // MODAL CARI DATA
  $(document).on('click','.cari_data',function(e){
    $('#myModalTab').modal('show');
    var id = $(this).data("id");
    $('#tab01').click();
    $('#cari_invoice').attr('disabled', false);
    $('#keyword_cari').val(id);
    $('#cari_invoice').click();
  });

  // wrap tabel awal
  wrapTablesResponsive();
</script>
<?php } ?>
