<!-- ====== STYLE TAMBAHAN (boleh dipindah ke file CSS global) ====== -->
<style>
  :root{
    --pg-primary:#6a5acd; /* slateblue */
    --pg-primary-2:#8a2be2; /* blueviolet */
    --pg-primary-3:#9b59b6; /* amethyst */
    --pg-text:#2d2f31;
  }

  /* Header gradient */
  .pg-hero{
    background: linear-gradient(135deg, var(--pg-primary), var(--pg-primary-2) 60%, var(--pg-primary-3));
    color:#fff;
    border-radius:1rem;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
  }
  .pg-hero h1{ font-weight:700; letter-spacing:.2px }
  .pg-hero .breadcrumb{
    background:transparent;
    margin-bottom:0;
  }
  .pg-hero .breadcrumb .breadcrumb-item,
  .pg-hero .breadcrumb a{ color:rgba(255,255,255,.9) }
  .pg-hero .breadcrumb .breadcrumb-item.active{ color:#fff }

  /* Filter bar: input-group menjadi fleksibel di mobile */
  .pg-filter .input-group{
    flex-wrap:wrap;
    gap:.5rem;
  }
  .pg-filter .input-group>.form-control,
  .pg-filter .input-group>.custom-select {
    min-width:150px;
  }
  .pg-filter .input-group .w-1{ width:120px; }      /* mempertahankan class lama namun diatur ulang */
  .pg-filter .input-group .w-40{ min-width:220px; flex:1 1 220px; }

  /* Toolbar desktop: samakan dengan tampilan halaman Kategori Produk */
  @media (min-width: 577px){
    .satuan-page .pg-filter .input-group{
      flex-wrap:nowrap;
      gap:0;
      align-items:stretch;
    }

    .satuan-page .pg-filter .input-group-prepend{
      margin-right:0;
    }

    .satuan-page .pg-filter .input-group-text{
      min-height:36px;
      padding:.25rem .5rem;
      color:var(--app-theme-text-color, #fff);
      background:var(--app-theme-color, #3f51b5);
      border:1px solid var(--app-theme-color, #3f51b5);
      border-radius:.2rem 0 0 .2rem;
      font-size:.875rem;
      font-weight:400;
      line-height:1.5;
      text-transform:uppercase;
      box-shadow:0 .125rem .25rem rgba(58,59,69,.2);
    }

    .satuan-page .pg-filter #limits,
    .satuan-page .pg-filter #sortBy{
      min-width:0;
      min-height:36px;
      margin-right:.5rem;
      border:1px solid #d1d3e2;
      border-left:0;
      border-radius:0 .2rem .2rem 0;
      box-shadow:none;
    }

    .satuan-page .pg-filter #limits:focus,
    .satuan-page .pg-filter #sortBy:focus{
      border-color:var(--app-theme-color, #3f51b5);
      box-shadow:0 0 0 .15rem rgba(63,81,181,.18);
    }

    .satuan-page .pg-filter #keywords{
      min-height:36px;
      margin-right:.5rem;
    }

    .satuan-page .pg-filter .input-group-append{
      display:flex;
      gap:.5rem;
      margin-left:0;
    }

    .satuan-page .pg-filter .input-group-append .btn{
      min-height:36px;
      padding:.25rem .6rem;
      border-radius:.2rem;
      font-size:.875rem;
      font-weight:600;
      line-height:1.5;
      box-shadow:0 .125rem .25rem rgba(58,59,69,.2) !important;
      transition:filter .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    .satuan-page .pg-filter .input-group-append .btn + .btn{
      margin-left:0;
    }

    .satuan-page .pg-filter .input-group-append .clear{
      color:#fff;
      background:#fc544b;
      border-color:#fc544b;
    }

    .satuan-page .pg-filter .input-group-append .add_satuan{
      color:#fff;
      background:#3abaf4;
      border-color:#3abaf4;
    }

    .satuan-page .pg-filter .input-group-append .btn:hover,
    .satuan-page .pg-filter .input-group-append .btn:focus{
      filter:brightness(.96);
      box-shadow:0 .2rem .4rem rgba(58,59,69,.28) !important;
    }
  }

  @media (max-width: 576px){
    .pg-filter .input-group .w-1{ width:100%; }
    .pg-filter .input-group .w-40{ min-width:100%; flex:1 1 100%; }
    .pg-filter .input-group .input-group-prepend,
    .pg-filter .input-group .input-group-append{ width:100% }
    .pg-filter .input-group .btn{ width:100% }
  }

  /* Tabel rapi */
  .table-mailcard thead th{
    white-space:nowrap;
    font-weight:600;
    color:#495057;
    border-bottom:1px solid rgba(0,0,0,.08);
  }
  .table-mailcard tbody td{
    vertical-align:middle;
  }

  /* Kolom lebar lama tetap dikenali namun lebih fleksibel */
  .w-1{ width:60px }
  .w-10{ width:10% }
  .w-25{ width:25% }

  /* Action button group responsif (jika HTML pakai .btn-group) */
  @media (max-width:576px){
    td .btn-group{ display:flex; gap:.35rem; flex-wrap:nowrap; }
    td .btn-group .btn{ flex:1 0 48%; }
  }

  /* Modal tweaks */
  .modal-content.flat{ border-radius:1rem }
  .modal-header{ border-bottom:1px solid rgba(0,0,0,.06) }
  .modal-footer{ border-top:1px solid rgba(0,0,0,.06) }

  /* ====== MOBILE-ONLY COMPACT OVERRIDES (≤576px) ======
     (PERBAIKAN: sebelumnya 200px, sekarang 576px agar aktif di HP) */
  @media (max-width: 376px){

    /* Container & header */
    #container-wrapper{ padding-left:.5rem; padding-right:.5rem; }
    .pg-hero{ padding:.75rem 1rem; border-radius:.75rem; }
    .pg-hero h1{ font-size:1.1rem; margin-bottom:.25rem; line-height:1.2; }
    .pg-hero .breadcrumb{ display:none; } /* hemat ruang di HP */

    /* Filter bar lebih ringkas */
    .pg-filter .input-group{ flex-wrap:wrap; gap:.35rem; }
    .pg-filter .input-group .w-1{ width:100%; }            /* LIMIT & SORT full width */
    .pg-filter .input-group .w-40{ min-width:100%; }       /* kolom cari full width */
    .pg-filter .input-group .form-control,
    .pg-filter .input-group .custom-select{ height:36px; }
    .pg-filter .input-group .input-group-prepend{ width:100%; }
    .pg-filter .input-group .input-group-append{
      width:100%;
      display:flex; gap:.35rem; flex-wrap:wrap;
    }
    .pg-filter .input-group .input-group-append .btn{
      flex:1 0 48%;            /* tombol Clear & Tambah sejajar, hemat ruang */
      padding:.4rem .5rem;
    }

    /* Card & spacing */
    .card{ border-radius:.75rem; }
    .card-header{ padding:.5rem .75rem; }
    .card-body{ padding:.75rem; }

    /* Tabel lebih padat dan mudah discroll */
    .table{ font-size:.875rem; }
    .table-mailcard thead th{
      white-space:nowrap;
      position:sticky; top:0; z-index:1; background:#fff;
    }
    .table-mailcard th, .table-mailcard td{ padding:.4rem .5rem; }
    .w-1{ width:44px; } /* kolom No lebih kecil */

    /* ===== Tombol Edit & Hapus sejajar di mobile =====
       Bekerja untuk beberapa variasi struktur HTML:
       - Jika pakai <td class="actions"> ... </td>
       - Jika pakai pembungkus .btn-wrap
       - Jika langsung taruh .btn di dalam <td> (fallback :has) */

    /* 1) Umum: kalau ada pembungkus bernama umum */
    .table-mailcard td.actions,
    .table-mailcard td .btn-wrap{
      display:flex;
      gap:.35rem;
      align-items:center;
      justify-content:space-between;
      flex-wrap:nowrap;
    }
    .table-mailcard td.actions .btn,
    .table-mailcard td .btn-wrap .btn{
      flex:1 0 48%;
      min-width:0;
      padding:.35rem .5rem;
    }

    /* 2) Jika tombol diletakkan di sel terakhir tanpa pembungkus spesifik */
    .table-mailcard tr > td:last-child{
      display:flex;
      gap:.35rem;
      align-items:center;
      justify-content:space-between;
      flex-wrap:nowrap;
    }
    .table-mailcard tr > td:last-child .btn{
      flex:1 0 48%;
      min-width:0;
      padding:.35rem .5rem;
    }

    /* 3) Fallback modern: jika <td> memiliki langsung > .btn (Chrome/Edge/Firefox baru) */
    .table-mailcard td:has(> .btn){
      display:flex;
      gap:.35rem;
      align-items:center;
      justify-content:space-between;
      flex-wrap:nowrap;
    }
    .table-mailcard td:has(> .btn) > .btn{
      flex:1 0 48%;
      min-width:0;
      padding:.35rem .5rem;
    }

    /* 4) Jika terlanjur bertumpuk vertikal, cegah full width */
    .table-mailcard td .btn{
      display:inline-flex;
      justify-content:center;
      align-items:center;
      white-space:nowrap;
    }
  }


  /* ====== FINAL MOBILE SATUAN (≤576px) ======
     Hanya mengubah tampilan smartphone agar sama seperti referensi:
     filter menjadi kartu, tabel menjadi list-card, tombol aksi sejajar. */
  .satuan-pageinfo{ display:none; }

  @media (max-width: 576px){
    body{
      background:#f8fafc;
    }

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

    #container-wrapper .d-sm-flex{
      margin-bottom:16px !important;
    }

    #container-wrapper .h3{
      font-size:1.52rem;
      line-height:1.2;
      font-weight:700;
      color:#111827 !important;
      letter-spacing:.01em;
    }

    /* Kartu filter seperti referensi */
    .pg-filter{
      padding:18px 18px 20px !important;
      background:#fff !important;
      border:0 !important;
      border-radius:14px 14px 0 0 !important;
    }

    .pg-filter .input-group{
      width:100%;
      display:grid !important;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      grid-template-areas:
        "limitLabel sortLabel"
        "limitInput sortInput"
        "searchLabel searchLabel"
        "searchInput searchInput"
        "filterButtons filterButtons";
      column-gap:12px;
      row-gap:8px;
      align-items:end;
    }

    .pg-filter .input-group::before{
      content:"Cari data";
      grid-area:searchLabel;
      display:block;
      margin-top:4px;
      font-size:.92rem;
      line-height:1.15;
      font-weight:650;
      color:#111827;
    }

    .pg-filter .input-group .input-group-prepend{
      width:auto !important;
      display:block !important;
      margin:0 !important;
    }

    .pg-filter .input-group .input-group-prepend:nth-of-type(1){
      grid-area:limitLabel;
    }

    .pg-filter .input-group .input-group-prepend:nth-of-type(2){
      grid-area:sortLabel;
    }

    .pg-filter .input-group .input-group-text{
      height:auto;
      padding:0;
      border:0;
      background:transparent;
      font-size:.92rem;
      line-height:1.15;
      font-weight:650;
      color:#111827;
      letter-spacing:.01em;
    }

    .pg-filter #limits{
      grid-area:limitInput;
      width:100% !important;
      min-width:0 !important;
    }

    .pg-filter #sortBy{
      grid-area:sortInput;
      width:100% !important;
      min-width:0 !important;
    }

    .pg-filter #keywords{
      grid-area:searchInput;
      width:100% !important;
      min-width:0 !important;
      padding-left:44px !important;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:16px center;
      background-size:20px 20px;
    }

    .pg-filter #limits,
    .pg-filter #sortBy,
    .pg-filter #keywords{
      height:44px !important;
      border:1px solid #d8dee9 !important;
      border-radius:8px !important;
      background-color:#fff;
      color:#111827;
      font-size:.94rem;
      box-shadow:none !important;
    }

    .pg-filter #keywords::placeholder{
      color:#6b7280;
      opacity:.9;
    }

    .pg-filter .input-group .input-group-append{
      grid-area:filterButtons;
      width:100% !important;
      display:grid !important;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:12px;
      margin-top:14px;
      margin-left:0 !important;
    }

    .pg-filter .input-group .input-group-append .btn{
      width:100% !important;
      height:42px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:7px !important;
      font-size:.92rem;
      font-weight:700;
      letter-spacing:.01em;
      box-shadow:none !important;
    }

    .pg-filter .input-group .input-group-append .clear{
      background:#fff1f2 !important;
      border:1px solid #fecdd3 !important;
      color:#ef4444 !important;
    }

    .pg-filter .input-group .input-group-append .add_satuan{
      background:#1d4ed8 !important;
      border:1px solid #1d4ed8 !important;
      color:#fff !important;
    }

    /* Kartu utama tetap putih, tanpa mengubah desktop */
    form > .card{
      border-radius:14px !important;
      overflow:hidden;
      background:#fff;
      box-shadow:0 8px 24px rgba(15,23,42,.08) !important;
    }

    .card-body.p-0{
      background:transparent;
    }

    #dataSatuan.table-responsive,
    #dataSatuan .table-responsive,
    #dataSatuan{
      overflow:visible !important;
    }

    #dataSatuan .card-block,
    .card-body > .table-responsive > .card-block{
      padding:0 !important;
      background:transparent;
    }

    /* Tabel berubah menjadi list-card mobile seperti referensi */
    #dataSatuan .table-mailcard{
      display:block;
      width:100%;
      margin:0 !important;
      border-collapse:separate !important;
      border-spacing:0 !important;
      background:transparent;
      font-size:.94rem;
    }

    #dataSatuan .table-mailcard thead{
      display:none !important;
    }

    #dataSatuan .table-mailcard tbody{
      display:block;
      width:100%;
    }

    #dataSatuan .table-mailcard tbody tr{
      display:grid;
      grid-template-columns:56px minmax(0,1fr) 92px auto;
      grid-template-areas:
        "no unit qty actions"
        "no name qty actions";
      align-items:center;
      column-gap:12px;
      min-height:78px;
      padding:10px 16px 10px 16px;
      margin:0;
      background:#fff !important;
      border:0 !important;
      border-top:1px solid #edf2f7 !important;
      box-shadow:0 3px 12px rgba(15,23,42,.08);
    }

    #dataSatuan .table-mailcard tbody tr:first-child{
      border-top:0 !important;
    }

    #dataSatuan .table-mailcard tbody tr:last-child{
      border-radius:0 0 14px 14px;
    }

    #dataSatuan .table-mailcard tbody td{
      display:block;
      padding:0 !important;
      border:0 !important;
      background:transparent !important;
      vertical-align:middle;
      min-width:0;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(1){
      grid-area:no;
      width:52px;
      height:52px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:9px;
      background:#eef3ff !important;
      color:#111827;
      font-size:1rem;
      font-weight:650;
      text-align:center !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(2){
      grid-area:unit;
      align-self:end;
      line-height:1.18;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(2) a{
      display:block;
      max-width:100%;
      padding:0 !important;
      color:#2563eb !important;
      font-size:1.05rem;
      font-weight:700;
      line-height:1.15;
      text-decoration:none !important;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(3){
      grid-area:name;
      align-self:start;
      color:#4b5563;
      font-size:.88rem;
      font-weight:600;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      text-align:left !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(4){
      grid-area:qty;
      color:#111827;
      font-size:1.03rem;
      font-weight:650;
      line-height:1.2;
      text-align:left !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(4)::before{
      content:"Jumlah satuan";
      display:block;
      margin-bottom:4px;
      color:#64748b;
      font-size:.82rem;
      font-weight:700;
      line-height:1.15;
      white-space:nowrap;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5){
      grid-area:actions;
      justify-self:end;
      text-align:right !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group{
      display:flex !important;
      align-items:center;
      justify-content:flex-end;
      flex-wrap:nowrap !important;
      gap:9px;
      width:auto;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn{
      height:38px;
      display:inline-flex !important;
      align-items:center;
      justify-content:center;
      gap:7px;
      margin:0 !important;
      border-radius:6px !important;
      font-size:.86rem;
      font-weight:700;
      line-height:1;
      white-space:nowrap;
      box-shadow:0 6px 14px rgba(15,23,42,.10) !important;
    }

    /* Status dibuat menjadi ikon tiga titik seperti referensi */
    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(1){
      order:3;
      width:26px;
      min-width:26px;
      height:38px;
      padding:0 !important;
      border:0 !important;
      background:transparent !important;
      color:#64748b !important;
      box-shadow:none !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(1) .icon{
      display:none !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(1)::before{
      content:"\22EE";
      display:block;
      color:#4b5563;
      font-size:1.55rem;
      font-weight:700;
      line-height:1;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(2){
      order:1;
      min-width:76px;
      padding:0 14px !important;
      background:#2563eb !important;
      border:1px solid #2563eb !important;
      color:#fff !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(3){
      order:2;
      min-width:86px;
      padding:0 14px !important;
      background:#ef4444 !important;
      border:1px solid #ef4444 !important;
      color:#fff !important;
    }

    #dataSatuan .table-mailcard tbody td[colspan]{
      display:block !important;
      padding:18px !important;
      color:#64748b;
      text-align:center !important;
    }

    /* Footer pagination mobile */
    .satuan-paginationbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      min-height:70px;
      padding:12px 16px;
      background:#fff;
      border-top:1px solid #edf2f7;
      border-radius:0 0 14px 14px;
      box-shadow:0 4px 14px rgba(15,23,42,.08);
    }

    .satuan-pageinfo{
      display:block;
      color:#4b5563;
      font-size:.95rem;
      font-weight:650;
      line-height:1.25;
      white-space:nowrap;
    }

    .satuan-paginationbar nav{
      margin:0 !important;
      flex:0 0 auto;
    }

    .satuan-paginationbar .pagination{
      margin:0 !important;
      gap:8px;
      flex-wrap:nowrap;
      justify-content:flex-end;
    }

    .satuan-paginationbar .page-link{
      min-width:44px;
      height:42px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:7px !important;
      border:1px solid #d8dee9;
      color:#111827;
      font-weight:650;
      box-shadow:none !important;
    }

    .satuan-paginationbar .page-item.active .page-link{
      color:#fff;
      background:#2563eb;
      border-color:#2563eb;
    }

    .satuan-paginationbar .page-item.disabled .page-link{
      color:#9ca3af;
      background:#fff;
    }
  }

  @media (max-width: 420px){
    #dataSatuan .table-mailcard tbody tr{
      grid-template-columns:50px minmax(0,1fr) 78px auto;
      column-gap:9px;
      padding-left:12px;
      padding-right:10px;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(1){
      width:48px;
      height:48px;
      font-size:.95rem;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(2) a{
      font-size:1rem;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(3){
      font-size:.82rem;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(4){
      font-size:.95rem;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(4)::before{
      font-size:.76rem;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group{
      gap:6px;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn{
      height:36px;
      font-size:.8rem;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(2){
      min-width:66px;
      padding:0 10px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(3){
      min-width:76px;
      padding:0 10px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(1){
      width:22px;
      min-width:22px;
    }

    .satuan-paginationbar{
      padding-left:12px;
      padding-right:12px;
    }

    .satuan-pageinfo{
      font-size:.84rem;
    }

    .satuan-paginationbar .page-link{
      min-width:38px;
      height:38px;
    }
  }



  /* ====== PATCH FINAL MOBILE COMPACT v2 ======
     Fokus: area yang ditandai merah di screenshot.
     - Label Limit/Sort diperkecil dan dirapikan.
     - Tombol Clear/Tambah diperkecil.
     - Baris data mobile dibuat 3 kolom agar teks satuan tidak ketabrak tombol.
     - Tombol Edit/Hapus/ikon titik tiga diperkecil agar tidak keluar dari kartu. */
  @media (max-width: 576px){
    #container-wrapper{
      padding-left:10px !important;
      padding-right:10px !important;
    }

    #container-wrapper .d-sm-flex{
      margin-bottom:12px !important;
    }

    #container-wrapper .h3{
      font-size:1.32rem !important;
      line-height:1.18 !important;
      letter-spacing:.005em !important;
    }

    .pg-filter{
      padding:14px 14px 15px !important;
      border-radius:12px 12px 0 0 !important;
    }

    .pg-filter .input-group{
      column-gap:10px !important;
      row-gap:6px !important;
    }

    .pg-filter .input-group .input-group-text,
    .pg-filter .input-group::before{
      font-size:.78rem !important;
      line-height:1.05 !important;
      font-weight:700 !important;
      letter-spacing:0 !important;
    }

    .pg-filter .input-group::before{
      margin-top:3px !important;
    }

    .pg-filter #limits,
    .pg-filter #sortBy,
    .pg-filter #keywords{
      height:39px !important;
      min-height:39px !important;
      padding-top:0 !important;
      padding-bottom:0 !important;
      border-radius:7px !important;
      font-size:.82rem !important;
      line-height:39px !important;
    }

    .pg-filter #limits,
    .pg-filter #sortBy{
      padding-left:10px !important;
      padding-right:28px !important;
    }

    .pg-filter #keywords{
      padding-left:38px !important;
      background-position:12px center !important;
      background-size:17px 17px !important;
    }

    .pg-filter .input-group .input-group-append{
      gap:10px !important;
      margin-top:8px !important;
    }

    .pg-filter .input-group .input-group-append .btn{
      height:38px !important;
      min-height:38px !important;
      padding:0 10px !important;
      border-radius:7px !important;
      font-size:.78rem !important;
      line-height:1 !important;
      font-weight:700 !important;
      gap:5px !important;
    }

    .pg-filter .input-group .input-group-append .btn i{
      font-size:.76rem !important;
    }
  }

  @media (max-width: 420px){
    form > .card{
      border-radius:12px !important;
      overflow:hidden !important;
    }

    #dataSatuan .table-mailcard{
      font-size:.8rem !important;
    }

    #dataSatuan .table-mailcard tbody tr{
      grid-template-columns:44px minmax(0,1fr) 130px !important;
      grid-template-areas:
        "no unit actions"
        "no name actions"
        "no qty actions" !important;
      column-gap:8px !important;
      row-gap:1px !important;
      min-height:70px !important;
      padding:8px 10px !important;
      overflow:hidden !important;
      box-shadow:0 2px 10px rgba(15,23,42,.07) !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(1){
      width:40px !important;
      height:40px !important;
      border-radius:8px !important;
      font-size:.84rem !important;
      font-weight:700 !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(2){
      align-self:end !important;
      min-width:0 !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(2) a{
      font-size:.86rem !important;
      line-height:1.1 !important;
      font-weight:700 !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(3){
      align-self:center !important;
      font-size:.72rem !important;
      line-height:1.12 !important;
      font-weight:600 !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(4){
      align-self:start !important;
      display:flex !important;
      align-items:center !important;
      gap:4px !important;
      min-width:0 !important;
      font-size:.74rem !important;
      line-height:1.1 !important;
      font-weight:700 !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(4)::before{
      display:inline-block !important;
      flex:0 0 auto !important;
      margin:0 !important;
      font-size:.66rem !important;
      line-height:1 !important;
      font-weight:700 !important;
      color:#64748b !important;
      content:"Jumlah satuan" !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5){
      align-self:center !important;
      justify-self:end !important;
      min-width:0 !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group{
      width:130px !important;
      gap:4px !important;
      justify-content:flex-end !important;
      align-items:center !important;
      flex-wrap:nowrap !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn{
      height:31px !important;
      min-height:31px !important;
      border-radius:5px !important;
      font-size:.70rem !important;
      line-height:1 !important;
      font-weight:700 !important;
      gap:3px !important;
      box-shadow:0 3px 8px rgba(15,23,42,.10) !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn i{
      font-size:.68rem !important;
      line-height:1 !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(1){
      width:18px !important;
      min-width:18px !important;
      height:31px !important;
      padding:0 !important;
      box-shadow:none !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(1)::before{
      font-size:1.15rem !important;
      line-height:1 !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(2){
      width:48px !important;
      min-width:48px !important;
      padding:0 5px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(3){
      width:56px !important;
      min-width:56px !important;
      padding:0 5px !important;
    }

    .satuan-paginationbar{
      min-height:58px !important;
      padding:10px 10px !important;
      gap:8px !important;
    }

    .satuan-pageinfo{
      font-size:.72rem !important;
      line-height:1.15 !important;
      white-space:normal !important;
    }

    .satuan-paginationbar .pagination{
      gap:5px !important;
    }

    .satuan-paginationbar .page-link{
      min-width:32px !important;
      height:32px !important;
      padding:0 !important;
      border-radius:6px !important;
      font-size:.78rem !important;
    }
  }

  @media (max-width: 360px){
    #dataSatuan .table-mailcard tbody tr{
      grid-template-columns:40px minmax(0,1fr) 118px !important;
      column-gap:7px !important;
      padding-left:8px !important;
      padding-right:8px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(1){
      width:38px !important;
      height:38px !important;
      font-size:.8rem !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group{
      width:118px !important;
      gap:3px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn{
      height:30px !important;
      font-size:.66rem !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn i{
      display:none !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(2){
      width:43px !important;
      min-width:43px !important;
      padding:0 4px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(3){
      width:52px !important;
      min-width:52px !important;
      padding:0 4px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(1){
      width:17px !important;
      min-width:17px !important;
    }
  }


  /* ====== PATCH FINAL MOBILE v3 ======
     Fokus revisi:
     1) Menghilangkan tombol titik tiga/status setelah tombol Hapus di mobile.
     2) Merapikan footer info halaman agar tidak muncul ganda dan tidak terlihat seperti "-12 dari 12". */
  @media (max-width: 576px){
    /* Tombol status asli tidak dibutuhkan di tampilan smartphone. */
    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .satuan-status-btn,
    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(1){
      display:none !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group{
      justify-content:flex-end !important;
      width:auto !important;
      gap:6px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(2),
    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(3){
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      height:32px !important;
      border-radius:6px !important;
      font-size:.74rem !important;
      line-height:1 !important;
      font-weight:700 !important;
      white-space:nowrap !important;
      box-shadow:0 3px 8px rgba(15,23,42,.10) !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(2){
      min-width:56px !important;
      width:56px !important;
      padding:0 7px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(3){
      min-width:64px !important;
      width:64px !important;
      padding:0 7px !important;
    }

    /* Footer halaman dibuat satu baris: info kiri, pagination kanan. */
    .satuan-paginationbar{
      display:grid !important;
      grid-template-columns:minmax(0,1fr) auto !important;
      align-items:center !important;
      gap:8px !important;
      min-height:54px !important;
      padding:9px 10px !important;
      overflow:hidden !important;
    }

    .satuan-pageinfo{
      display:block !important;
      min-width:0 !important;
      color:#4b5563 !important;
      font-size:.72rem !important;
      line-height:1.15 !important;
      font-weight:700 !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }

    .satuan-paginationbar nav{
      min-width:0 !important;
      justify-self:end !important;
      margin:0 !important;
    }

    .satuan-paginationbar .pagination{
      margin:0 !important;
      gap:5px !important;
      flex-wrap:nowrap !important;
      justify-content:flex-end !important;
    }

    .satuan-paginationbar .page-link{
      min-width:31px !important;
      width:31px !important;
      height:31px !important;
      padding:0 !important;
      border-radius:6px !important;
      font-size:.76rem !important;
      line-height:1 !important;
    }

    /* Jika library pagination ikut membuat item "Menampilkan ...", sembunyikan agar tidak dobel. */
    .satuan-paginationbar .satuan-pagination-info-duplicate{
      display:none !important;
    }
  }

  @media (max-width: 420px){
    #dataSatuan .table-mailcard tbody tr{
      grid-template-columns:44px minmax(0,1fr) 126px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group{
      width:126px !important;
      gap:6px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(2){
      width:56px !important;
      min-width:56px !important;
      padding:0 6px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(3){
      width:64px !important;
      min-width:64px !important;
      padding:0 6px !important;
    }

    .satuan-pageinfo{
      font-size:.70rem !important;
    }
  }

  @media (max-width: 360px){
    #dataSatuan .table-mailcard tbody tr{
      grid-template-columns:40px minmax(0,1fr) 108px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group{
      width:108px !important;
      gap:4px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(2){
      width:50px !important;
      min-width:50px !important;
    }

    #dataSatuan .table-mailcard tbody td:nth-child(5) .btn-group .btn:nth-child(3){
      width:54px !important;
      min-width:54px !important;
    }

    .satuan-pageinfo{
      font-size:.66rem !important;
    }

    .satuan-paginationbar .page-link{
      min-width:29px !important;
      width:29px !important;
      height:29px !important;
      font-size:.72rem !important;
    }
  }

</style>



<div class="container-fluid satuan-page" id="container-wrapper">
  <!-- HERO / HEADER -->
  <div class="container-fluid" id="container-wrapper">
  <div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Satuan</h1>
    
  </div>

  <!-- FILTER & TABLE -->
  <div class="row">
    <div class="col-12">
      <form action="#" method="post">
        <div class="card shadow-sm border-0">
          <!-- Filter -->
          <div class="card-header pb-2 pg-filter">
            <div class="input-group input-group-sm">
              <div class="input-group-prepend">
                <span class="input-group-text" id="lbl-limit">LIMIT</span>
              </div>
              <select id="limits" name="limits" class="form-control custom-select w-1" aria-labelledby="lbl-limit" onchange="search_Satuan()">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
              </select>

              <div class="input-group-prepend">
                <span class="input-group-text" id="lbl-sort">SORT</span>
              </div>
              <select id="sortBy" class="form-control custom-select w-1" aria-labelledby="lbl-sort" onchange="search_Satuan()">
                <option value="ASC">ASC</option>
                <option value="DESC" selected>DESC</option>
              </select>

              <input type="text" id="keywords" class="form-control w-40" placeholder="Cari data" onkeyup="search_Satuan();" />

              <div class="input-group-append">
                <button class="btn btn-danger btn-sm clear" type="button">
                  <i class="fa fa-times"></i> Clear
                </button>
                <button type="button" class="btn btn-info add_satuan" data-id="0">
                  <i class="fa fa-plus"></i> Tambah
                </button>
                <!-- <button class="btn btn-primary btn-sm url_doc" data-url="satuan" type="button" data-toggle="tooltip" data-original-title="Dok Satuan Produk" data-placement="left"><i class="fa fa-info-circle"></i></button> -->
              </div>
            </div>
          </div>

          <!-- Flash message -->
          <?php echo $this->session->flashdata('message'); ?>

          <!-- Table -->
          <div class="card-body p-0">
            <div class="table-responsive" id="dataSatuan">
              <div class="card-block p-3">
                <table class="table table-striped table-hover table-mailcard mb-2">
                  <thead>
                    <tr>
                      <th class="w-1 text-center">No</th>
                      <th class="w-10">Satuan</th>
                      <th class="w-25">Nama satuan</th>
                      <th class="w-10">Jumlah satuan</th>
                      <th class="w-10 text-center">Status | Aksi</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php if(!empty($result)){
                      $no = 1;
                      foreach ($result as $row){
                        if ($row->pub == 0){ 
                          $aktif ='<i class="fa fa-check-circle"></i>'; 
                          $text ='text-white'; 
                        }else{ 
                          $aktif = '<i class="fa fa-minus-circle"></i>'; 
                          $text ='text-white-50'; 
                        }
                        $hapus = '<button type="button" class="btn btn-danger btn-sm text-white"  data-id="'.$row->id.'" data-toggle="modal" data-target="#confirm-delete" href="#"><i class="fa fa-trash "></i> Hapus</button>';
                        echo "<tr>
                          <td class='text-center'>$no</td>
                          <td class='pl-1'><a class='btn-sm add_satuan text-info' title='Edit Data' data-id='$row->id' href='#'>{$row->satuan}</a></td>
                          <td class='text-left'>{$row->nama_satuan}</td>
                          <td class='text-left'>{$row->jumlah}</td>
                          <td class='text-right'>
                            <div class='btn-group btn-group-sm' role='group' aria-label='Aksi'>
                              <button type='button' class='btn btn-info btn-sm satuan-status-btn' data-id='".$row->id."'><span class='icon $text'>$aktif</span></button>
                              <button type='button' class='btn btn-info btn-sm add_satuan' data-id='".$row->id."'><i class='fa fa-edit'></i> Edit</button>
                              $hapus
                            </div>
                          </td>
                        </tr>";
                        $no++;
                      } }else{ ?>
                      <tr>
                        <td colspan="5" class="text-center text-muted">Data belum ada</td>
                      </tr>
                    <?php } ?>
                  </tbody>
                </table>

                <?php
                  $satuan_jumlah_data = !empty($result) ? count($result) : 0;
                  $satuan_offset_data = (int) $this->uri->segment(3);
                  $satuan_offset_data = $satuan_offset_data > 0 ? $satuan_offset_data : 0;
                  $satuan_total_data = isset($total_rows) ? (int) $total_rows : (isset($totalRec) ? (int) $totalRec : $satuan_jumlah_data);
                  $satuan_start_data = $satuan_jumlah_data > 0 ? ($satuan_offset_data + 1) : 0;
                  $satuan_end_data = $satuan_jumlah_data > 0 ? min(($satuan_start_data + $satuan_jumlah_data - 1), $satuan_total_data) : 0;
                ?>
                <div class="satuan-paginationbar">
                  <span class="satuan-pageinfo">Menampilkan <?php echo $satuan_start_data; ?> - <?php echo $satuan_end_data; ?> dari <?php echo $satuan_total_data; ?></span>
                  <nav aria-label="Page navigation" class="mt-2">
                    <?php echo $this->ajax_pagination->create_links(); ?>
                  </nav>
                </div>
              </div><!-- /.card-block -->
            </div><!-- /#dataSatuan -->
          </div><!-- /.card-body -->
        </div><!-- /.card -->
      </form>
    </div>
  </div>
</div>

<!-- MODAL: Add/Edit -->
<div class="modal fade" id="ModSatuan" tabindex="-1" role="dialog" aria-labelledby="satuanModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" id="save-satuan" role="document">
    <div class="modal-content flat">
      <div class="modal-header">
        <h5 class="modal-title" id="satuanModalScrollableTitle">Satuan produk</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type='hidden' name='satuan_id' id='satuan_id'>
        <input type='hidden' name='type' id="type">
        <div class="row">
          <div class="col-12">
            <div class="form-group">
              <label for="judul">Satuan</label>
              <input type="text" name="judul" id="judul" class="form-control" required>
            </div>
            <div class="form-group">
              <label for="nama">Nama satuan</label>
              <input type="text" name="nama" id="nama" class="form-control" required>
            </div>
            <div class="form-group">
              <label for="jumlah">Jumlah satuan</label>
              <input type="text" name="jumlah" id="jumlah" class="form-control" required>
            </div>
            <div class="form-group">
              <label for="aktif">Aktif</label>
              <select name="aktif" id="aktif" class="form-control custom-select" required>
                <option value="">Pilih</option>
                <option value="0">Ya</option>
                <option value="1">Tidak</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" name="submit" class="btn btn-info btn-sm flat save_satuan">Simpan</button>
        <button type="button" class="btn btn-danger btn-sm flat" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- MODAL: Confirm Delete -->
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="confirm-delete" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content flat">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
      </div>
      <div class="modal-body">
        <p>Anda akan menghapus satu url, prosedur ini tidak dapat diubah.</p>
        <p>Apakah Anda ingin melanjutkan?</p>
        <p class="debug-url"></p>
        <input type="hidden" id="data-hapus">
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal" type="button">Batal</button> 
        <button class="btn btn-danger hapus" type="button">YA</button> 
      </div>
    </div>
  </div>
</div>

<input type="hidden" name="halaman" id="halaman" value="0">

<!-- ====== SCRIPT (TETAP SAMA DENGAN VERSI ANDA) ====== -->
<script>
  function rapihkanPaginationSatuan(){
    $('.satuan-paginationbar nav .pagination li, .satuan-paginationbar nav .pagination .page-item').each(function(){
      var teks = $.trim($(this).text()).replace(/\s+/g, ' ');
      if(/^Menampilkan\s/i.test(teks)){
        $(this).addClass('satuan-pagination-info-duplicate').hide();
      }
    });
  }

  $(function(){
    rapihkanPaginationSatuan();
  });

  $('.clear').on('click', function(){
    $('#keywords').val('');
    search_Satuan();
  });
  
  function search_Satuan(page_num){
    page_num = page_num?page_num:0;
    var keywords = $('#keywords').val();
    var sortBy = $('#sortBy').val();
    var limits = $('#limits').val();
    
    var urlnya = '<?php echo base_url("produk/cariSatuan/"); ?>'+page_num
    $.ajax({
      type: 'POST',
      url: urlnya,
      data:{page:page_num,keywords:keywords,sortBy:sortBy,limits:limits},
      beforeSend: function(){
        $('.table-mailcard').loading();
      },
      success: function(html){
        $('#dataSatuan').on('loading.stop', function(event, loading) {
          $('#dataSatuan').html(html);
          $('#halaman').val(page_num);
          rapihkanPaginationSatuan();
        });
        $('.table-mailcard').loading('stop');
      },
      error : function(res, status, httpMessage) {
        $('.table-mailcard').loading('stop');
        console.log(res.status)
        if(res.status==401){
          sweet_login(httpMessage,'warning',base_url);
        }else{
          sweet("Peringatan!!!", httpMessage, "warning", "warning");
        }			
      }
    });
  }
  $('#ModSatuan').on('shown.bs.modal', function() {
    $('#judul').focus();
  })
  $(document).on('click','.add_satuan',function(e){
    e.preventDefault();
    var id = $(this).attr('data-id');
    $('#ModSatuan').modal({backdrop: 'static', keyboard: false});
    if(id==0){
      $("#satuanModalScrollableTitle").html('Add Satuan produk');
      $("#type").val('add');
      $("#satuan_id").val(id);
      return;
    }else{
      $("#satuanModalScrollableTitle").html('Edit Satuan produk');
      $("#type").val('edit');
    }
    $.ajax({
      url: base_url + 'produk/edit_satuan',
      data: {id:id},
      method: 'POST',
      dataType:'json',
      beforeSend: function(){
        $('body').loading();
      },
      success: function(data) {
        $("#satuan_id").val(data.id);
        $("#judul").val(data.judul);
        $("#nama").val(data.nama);
        $("#jumlah").val(data.jumlah);
        $("#aktif").val(data.aktif);
        $('body').loading('stop');
      },
      error : function(res, status, httpMessage) {
        $('body').loading('stop');
        console.log(res.status)
        if(res.status==401){
          sweet_login(httpMessage,'warning',base_url);
        }else{
          sweet("Peringatan!!!", httpMessage, "warning", "warning");
        }			
      }
    });
  });
  $('#aktif').on('change', function() {
    $("#aktif").removeClass("is-invalid").addClass("is-valid");
  });
  $("#judul").keyup(function(){
    $("#judul").removeClass("is-invalid").addClass("is-valid");
  });
  $("#jumlah").keyup(function(){
    $("#jumlah").removeClass("is-invalid").addClass("is-valid");
  });
  $("#nama").keyup(function(){
    $("#nama").removeClass("is-invalid").addClass("is-valid");
  });
  $(document).on('click','.save_satuan',function(e){
    e.preventDefault();
    var id = $("#satuan_id").val();
    var type = $("#type").val();
    var judul = $("#judul").val();
    var nama = $("#nama").val();
    var jumlah = $("#jumlah").val();
    var aktif = $("#aktif").val();
    var halaman = $("#halaman").val();
    if(judul==''){
      $("#judul").addClass('is-invalid');
      $("#judul").focus();
      return;
    }
    if(nama==''){
      $("#nama").addClass('is-invalid');
      $("#nama").focus();
      return;
    }
    if(jumlah==''){
      $("#jumlah").addClass('is-invalid');
      $("#jumlah").focus();
      return;
    }
    if(aktif==''){
      $("#aktif").addClass('is-invalid');
      return;
    }
    $.ajax({
      url: base_url + 'produk/save_satuan',
      data: {id:id,type:type,judul:judul,nama:nama,jumlah:jumlah,aktif:aktif},
      method: 'POST',
      dataType:'json',
      beforeSend: function(){
        $('#save-satuan').loading({zIndex:1070,message:'saving data...'});
      },
      success: function(data) {
        if(data.status==200){
          showNotif('bottom-right','Hapus data',data.msg,'success');
        }else{
          sweet('Peringatan!!!',data.msg,'warning','warning');
        }
        $('#ModSatuan').modal('hide');
        search_Satuan(halaman);
        $('#save-satuan').loading('stop');
      },
      error : function(res, status, httpMessage) {
        $('#save-satuan').loading('stop');
        console.log(res.status)
        if(res.status==401){
          sweet_login(httpMessage,'warning',base_url);
        }else{
          sweet("Peringatan!!!", httpMessage, "warning", "warning");
        }			
      }
    });
  });
  $(document).on('click','.hapus',function(e){
    var id = $("#data-hapus").val();
    var halaman = $("#halaman").val();
    $.ajax({
      url: base_url + 'produk/hapus_satuan',
      data: {id:id},
      method: 'POST',
      dataType:'json',
      beforeSend: function(){
        $('body').loading();
      },
      success: function(data) {
        if(data.status==200){
          $('#confirm-delete').modal('hide');
          showNotif('bottom-right','Hapus data',data.msg,'success');
        }else{
          sweet('Peringatan!!!',data.msg,'warning','warning');
        }
        search_Satuan(halaman);
        $('body').loading('stop');
      },
      error : function(res, status, httpMessage) {
        $('#confirm-delete').modal('hide');
        $('body').loading('stop');
        console.log(res.status)
        if(res.status==401){
          sweet_login(httpMessage,'warning',base_url);
        }else{
          sweet("Peringatan!!!", httpMessage, "warning", "warning");
        }			
      }
    });
  });
  $('#confirm-delete').on('show.bs.modal', function(e) {
    $('#data-hapus').val($(e.relatedTarget).data('id'));
  });
  $('body').on('hidden.bs.modal', '.modal', function() {
    $('.form-control').val('')
  });
</script>
