<style>
  :root{
    --pg-primary:#6a5acd;  /* slateblue */
    --pg-primary-2:#8a2be2;/* blueviolet */
    --pg-primary-3:#9b59b6;/* amethyst */
    --pg-text:#2d2f31;
    --pg-muted:#6c757d;
    --pg-border:#e9ecef;
    --pg-bg:#f8f9fc;
  }

  /* ====== Global polish ====== */
  body{color:var(--pg-text)}
  .card{border:1px solid var(--pg-border); border-radius:1rem; box-shadow:0 6px 18px rgba(0,0,0,.05)}
  .card-header{background:#fff; border-bottom:1px solid var(--pg-border); border-top-left-radius:1rem;border-top-right-radius:1rem}
  .card-body{background:#fff}
  .breadcrumb{background:transparent;margin-bottom:0}
  .btn.flat{border-radius:.65rem}

  /* Header gradient (non-intrusive) */
  #container-wrapper .pg-hero{
    background: linear-gradient(135deg, var(--pg-primary), var(--pg-primary-2) 60%, var(--pg-primary-3));
    color:#fff; border-radius:1rem; padding:1rem 1.25rem; margin-bottom:1rem;
  }
  #container-wrapper .pg-hero h1{font-weight:700; letter-spacing:.2px; margin:0}
  #container-wrapper .pg-hero .breadcrumb a,
  #container-wrapper .pg-hero .breadcrumb .breadcrumb-item{color:rgba(255,255,255,.92)}
  #container-wrapper .pg-hero .breadcrumb .breadcrumb-item.active{opacity:.95}

  /* Tabel yang lebih rapih */
  .table{margin-bottom:0}
  .table thead th{
    white-space:nowrap;
    background:#fbfbff;
    border-bottom:1px solid var(--pg-border);
    font-weight:600;
    vertical-align:middle;
  }
  .table td, .table th{vertical-align:middle}
  .table.table-sm td, .table.table-sm th{padding:.55rem .9rem}
  .table thead th:first-child, .table tbody td:first-child{width:1%; white-space:nowrap}

  /* =========================================================
     ✅ AKSI (TOMBOL) — FIX: rapi, konsisten, tidak bentrok
     Target: tampilan seperti screenshot -> tombol stack rapi
     ========================================================= */

  /* Kolom aksi (punya Aa pakai class text-right) -> bikin center biar rapi */
  .table td.text-right{
    text-align:center !important;
  }

  /* Desktop/laptop: tombol bertumpuk (1 kolom), lebar seragam */
  .table td.text-right .btn-group-wrap{
    display:flex;
    flex-direction:column;      /* stack */
    gap:.45rem;
    align-items:center;         /* center */
    justify-content:center;
    flex-wrap:nowrap;           /* jangan wrap aneh */
  }

  .table td.text-right .btn-group-wrap .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;                 /* jarak ikon-teks */
    width:120px;                /* seragam (rapih) */
    max-width:100%;
    padding:.42rem .75rem;
    line-height:1.1;
    white-space:nowrap;
  }

  .table td.text-right .btn-group-wrap .btn i{
    margin:0;
    font-size:.95rem;
  }

  /* Tablet: sedikit lebih kecil biar proporsional */
  @media (max-width: 991.98px){
    .table td.text-right .btn-group-wrap .btn{
      width:112px;
      font-size:.82rem;
      padding:.4rem .65rem;
    }
  }

  /* Mobile: tetap rapih tapi jangan bikin baris tabel terlalu tinggi:
     jadi 1 baris scroll horizontal */
  @media (max-width: 575.98px){
    .table td.text-right{
      text-align:left !important;
    }

    .table td.text-right .btn-group-wrap{
      flex-direction:row;        /* satu baris */
      gap:.35rem;
      justify-content:flex-start;
      align-items:center;
      overflow-x:auto;           /* bisa geser */
      -webkit-overflow-scrolling:touch;
      padding-bottom:.15rem;
    }

    .table td.text-right .btn-group-wrap .btn{
      width:auto;                /* fleksibel */
      flex:0 0 auto;
      padding:.38rem .55rem;
      font-size:.78rem;
      border-radius:.55rem;
    }
  }

  /* HP sangat kecil: sembunyikan label -> ikon saja biar tetap muat rapi */
  @media (max-width: 360px){
    .table td.text-right .btn-group-wrap .btn .label{
      display:none !important;
    }
    .table td.text-right .btn-group-wrap .btn{
      padding:.48rem .5rem;
    }
  }

  /* ========================================================= */

  /* Input-group responsif & rapi */
  .toolbar .input-group{flex-wrap:wrap; gap:.5rem}
  .toolbar .input-group > *{margin:0}
  .toolbar .input-group .form-control,
  .toolbar .input-group .custom-select{
    min-width:140px;
  }
  .toolbar .input-group .w-90 {width:90px}
  .toolbar .input-group .w-120{width:120px}
  .toolbar .input-group .grow-1{flex:1 1 220px}
  .toolbar .input-group .btn{border-radius:.6rem}
  .toolbar .input-group .input-group-text{font-weight:600}

  /* Kartu/panel kosong */
  .state-empty{padding:1.25rem; color:var(--pg-muted); text-align:center}

  /* Tooltip fix (kalau dipakai) */
  [data-toggle="tooltip"]{outline:0}

  /* Warna merek pada tombol utama */
  .btn-primary{background:var(--pg-primary); border-color:var(--pg-primary)}
  .btn-info{background:var(--pg-primary-2); border-color:var(--pg-primary-2)}

  /* Padding tabel dalam card (retained and improved) */
  .card .table td, .card .table th {padding-right: 1rem; padding-left: 1rem;}

  /* Modal smoothing */
  .modal-content.flat{border-radius:1rem}
  .modal-header{border-top-left-radius:1rem;border-top-right-radius:1rem}

  /* === Mobile only: buat tombol Clear & Tambah responsif & fleksibel === */
  @media (max-width: 575.98px){

    .toolbar .input-group{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
    }

    .toolbar .input-group .input-group-append{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      width:100%;
      margin-top:.25rem;
      justify-content:space-between;
    }

    .toolbar .input-group .input-group-append .btn.clear,
    .toolbar .input-group .input-group-append .btn.edit_supplier{
      flex:1 1 calc(50% - .5rem);
      min-width:140px;
      justify-content:center;
      padding:.5rem .75rem;
      line-height:1.2;
      border-radius:.6rem;
    }

    @media (max-width: 360px){
      .toolbar .input-group .input-group-append .btn.clear,
      .toolbar .input-group .input-group-append .btn.edit_supplier{
        flex:1 1 100%;
      }
    }

    .toolbar .input-group .input-group-append .btn.url_doc{
      flex:0 0 auto;
      padding:.5rem .6rem;
      border-radius:.6rem;
    }

    .toolbar .input-group .form-control,
    .toolbar .input-group .custom-select{
      min-width:140px;
      flex:1 1 180px;
    }
  }

  #container-wrapper.supplier-page {
    color: #1f2937;
    padding-top: 1.25rem;
  }

  .supplier-page .supplier-page-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .supplier-page .supplier-page-title {
    color: #111827;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0;
  }

  .supplier-page .supplier-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
    overflow: hidden;
  }

  .supplier-page .supplier-toolbar {
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    padding: 1rem;
  }

  .supplier-page .supplier-control,
  .supplier-page .supplier-search {
    align-items: center;
    display: flex;
    min-height: 38px;
    overflow: hidden;
  }

  .supplier-page .supplier-control {
    background: #fff;
    border: 1px solid #cfd7e6;
    border-radius: 4px;
    flex: 0 0 170px;
  }

  .supplier-page .supplier-search {
    background: #f9fafb;
    border: 1px solid #dbe2ea;
    border-radius: 6px;
    flex: 1 1 280px;
  }

  .supplier-page .supplier-control-label {
    align-items: center;
    align-self: stretch;
    background: #3546a7;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 0 .75rem;
    text-transform: uppercase;
  }

  .supplier-page .supplier-control .form-control,
  .supplier-page .supplier-search .form-control {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #334155;
    height: 38px;
    min-width: 0;
  }

  .supplier-page .supplier-control .form-control {
    background: #fff;
    border-left: 1px solid #cfd7e6;
    border-radius: 0;
    min-width: 86px;
    padding-left: .65rem;
  }

  .supplier-page .supplier-search i {
    color: #94a3b8;
    flex: 0 0 auto;
    padding-left: .8rem;
  }

  .supplier-page .supplier-toolbar-actions {
    display: flex;
    flex: 0 1 auto;
    gap: .5rem;
    margin-left: auto;
  }

  .supplier-page .supplier-btn {
    align-items: center;
    border: 0;
    border-radius: 6px !important;
    display: inline-flex;
    font-weight: 700;
    gap: .45rem;
    justify-content: center;
    min-height: 38px;
    padding: .45rem .85rem;
    white-space: nowrap;
  }

  .supplier-page .supplier-btn-clear {
    background: #f1f5f9;
    color: #475569;
  }

  .supplier-page .supplier-btn-add,
  .supplier-page .supplier-action-detail {
    background: #2563eb;
    color: #fff;
  }

  .supplier-page .supplier-btn-clear:hover {
    background: #e2e8f0;
    color: #334155;
  }

  .supplier-page .supplier-btn-add:hover,
  .supplier-page .supplier-action-detail:hover {
    background: #1d4ed8;
    color: #fff;
  }

  .supplier-page .supplier-table-wrap {
    overflow-x: auto;
    padding: 0 1rem 1rem;
  }

  .supplier-page .supplier-table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    min-width: 980px;
  }

  .supplier-page .supplier-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-top: 0;
    color: #475569;
    font-size: .82rem;
    font-weight: 700;
    padding: .8rem .9rem;
    vertical-align: middle;
    white-space: nowrap;
  }

  .supplier-page .supplier-table tbody td {
    border-color: #eef2f7;
    color: #475569;
    padding: .85rem .9rem;
    vertical-align: middle;
  }

  .supplier-page .supplier-table tbody tr:hover td {
    background: #f8fbff;
  }

  .supplier-page .supplier-link {
    color: #2563eb;
    font-weight: 700;
  }

  .supplier-page .supplier-muted {
    color: #94a3b8;
  }

  .supplier-page .supplier-actions-cell {
    min-width: 230px;
  }

  .supplier-page .supplier-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: center;
  }

  .supplier-page .supplier-action {
    align-items: center;
    border: 0;
    border-radius: 6px !important;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 700;
    gap: .4rem;
    justify-content: center;
    min-height: 34px;
    padding: .4rem .7rem;
  }

  .supplier-page .supplier-action-edit {
    background: #0ea5e9;
    color: #fff;
  }

  .supplier-page .supplier-action-delete {
    background: #ef4444;
    color: #fff;
  }

  .supplier-page .supplier-action-edit:hover {
    background: #0284c7;
    color: #fff;
  }

  .supplier-page .supplier-action-delete:hover {
    background: #dc2626;
    color: #fff;
  }

  .supplier-page .supplier-empty {
    color: #64748b;
    display: table-cell;
    padding: 1.5rem !important;
    text-align: center;
  }

  .supplier-page .supplier-empty::before {
    display: none !important;
  }

  .supplier-page .supplier-pagination {
    padding-top: .85rem;
  }

  .supplier-page .supplier-mobile-list {
    display: none;
  }

  .supplier-page .supplier-mobile-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    padding: 1rem;
  }

  .supplier-page .supplier-mobile-card + .supplier-mobile-card {
    margin-top: .9rem;
  }

  .supplier-page .supplier-mobile-head {
    align-items: flex-start;
    display: flex;
    gap: .8rem;
  }

  .supplier-page .supplier-mobile-badge {
    align-items: center;
    background: linear-gradient(180deg, #3560d7, #2d50c5);
    border-radius: 12px;
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.1rem;
    font-weight: 800;
    height: 52px;
    justify-content: center;
    width: 52px;
    box-shadow: 0 10px 20px rgba(53, 96, 215, .22);
  }

  .supplier-page .supplier-mobile-title {
    color: #2563eb;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.28;
    text-decoration: none;
  }

  .supplier-page .supplier-mobile-divider {
    border-top: 1px solid #e5e7eb;
    margin: .9rem 0 .85rem;
  }

  .supplier-page .supplier-mobile-fields {
    display: grid;
    gap: .7rem;
  }

  .supplier-page .supplier-mobile-field {
    display: grid;
    gap: .8rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .supplier-page .supplier-mobile-label {
    align-items: center;
    color: #64748b;
    display: inline-flex;
    gap: .55rem;
    font-weight: 700;
  }

  .supplier-page .supplier-mobile-label i {
    color: #8b98ad;
    width: 18px;
    text-align: center;
  }

  .supplier-page .supplier-mobile-value {
    color: #334155;
    font-weight: 500;
    text-align: left;
    word-break: break-word;
  }

  .supplier-page .supplier-mobile-actions {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1rem;
  }

  .supplier-page .supplier-mobile-action {
    align-items: center;
    border: 0;
    border-radius: 12px !important;
    color: #fff;
    display: inline-flex;
    font-weight: 700;
    gap: .45rem;
    justify-content: center;
    min-height: 46px;
    padding: .45rem .75rem;
    text-decoration: none;
    white-space: nowrap;
  }

  .supplier-page .supplier-mobile-action-detail {
    background: #2d63ea;
  }

  .supplier-page .supplier-mobile-action-edit {
    background: #1f9ae5;
  }

  .supplier-page .supplier-mobile-action-delete {
    background: #ef4444;
  }

  .supplier-page .supplier-mobile-empty {
    color: #64748b;
    padding: 1.5rem 0 .25rem;
    text-align: center;
  }

  @media (max-width: 991.98px) {
    .supplier-page .supplier-control {
      flex: 1 1 160px;
    }

    .supplier-page .supplier-toolbar-actions {
      flex: 1 1 100%;
      margin-left: 0;
    }

    .supplier-page .supplier-toolbar-actions .supplier-btn {
      flex: 1 1 150px;
    }
  }

  @media (max-width: 767.98px) {
    #container-wrapper.supplier-page {
      padding: 1rem .8rem;
    }

    .supplier-page .supplier-page-title {
      font-size: 1.8rem;
      font-weight: 800;
    }

    .supplier-page .supplier-toolbar {
      padding: .8rem;
    }

    .supplier-page .supplier-control {
      background: transparent;
      border: 0;
      flex-direction: column;
      gap: .35rem;
      min-height: auto;
      overflow: visible;
    }

    .supplier-page .supplier-control-label {
      background: transparent;
      color: #334155;
      font-size: .96rem;
      font-weight: 700;
      padding: 0;
      text-transform: none;
    }

    .supplier-page .supplier-control .form-control {
      border: 1px solid #cfd7e6;
      border-radius: 12px;
      height: 48px;
      padding-left: 1rem;
    }

    .supplier-page .supplier-search {
      border-radius: 12px;
      min-height: 48px;
      padding: 0 1rem;
    }

    .supplier-page .supplier-search .form-control {
      height: 48px;
    }

    .supplier-page .supplier-toolbar-actions {
      flex: 1 1 100%;
      flex-direction: row;
      flex-wrap: nowrap;
      margin-left: 0;
      width: 100%;
    }

    .supplier-page .supplier-toolbar-actions .supplier-btn {
      flex: 1 1 0;
      min-width: 0;
      min-height: 48px;
      width: auto;
    }

    .supplier-page .supplier-mobile-list {
      display: block;
      padding: 0 .8rem .8rem;
    }

    .supplier-page .supplier-table {
      display: none;
    }

    .supplier-page .supplier-table-wrap {
      overflow: visible;
      padding: 0 .8rem .8rem;
    }

    .supplier-page .supplier-pagination {
      padding: .25rem .8rem 0;
    }

    .supplier-page .supplier-mobile-card {
      border-radius: 20px;
    }

    .supplier-page .supplier-mobile-title {
      font-size: 1.12rem;
    }
  }

  @media (max-width: 420px) {
    .supplier-page .supplier-toolbar-actions {
      flex-wrap: nowrap;
    }

    .supplier-page .supplier-mobile-field {
      grid-template-columns: 1fr;
    }

    .supplier-page .supplier-mobile-actions {
      grid-template-columns: 1fr;
    }

    .supplier-page .supplier-mobile-action {
      width: 100%;
    }
  }


  /* =========================================================
     FINAL MOBILE SUPPLIER — mengikuti referensi smartphone
     Catatan: hanya aktif di layar mobile, desktop tetap memakai style lama.
     ========================================================= */
  .supplier-page .supplier-mobile-count {
    display: none;
  }

  @media (max-width: 767.98px) {
    #container-wrapper.supplier-page {
      background: #f6f7fb;
      color: #1f2937;
      padding: 1.35rem .9rem 1.25rem;
    }

    .supplier-page .supplier-page-header {
      margin-bottom: 1rem;
    }

    .supplier-page .supplier-page-title {
      color: #111827;
      font-size: 1.85rem;
      font-weight: 800;
      letter-spacing: .01em;
      line-height: 1.2;
    }

    .supplier-page .supplier-panel {
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
    }

    .supplier-page .supplier-toolbar {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
      display: flex;
      gap: .9rem .75rem;
      margin: 0 0 1rem;
      padding: 1rem;
    }

    .supplier-page .supplier-control {
      background: transparent;
      border: 0;
      display: flex;
      flex: 1 1 calc(50% - .4rem);
      flex-direction: column;
      gap: .5rem;
      min-height: 0;
      min-width: 0;
      overflow: visible;
    }

    .supplier-page .supplier-control-label {
      background: transparent;
      color: #2f3947;
      display: block;
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1.15;
      padding: 0;
      text-transform: none;
    }

    .supplier-page .supplier-control .form-control {
      background-color: #fff;
      border: 1px solid #cfd7e6;
      border-radius: 9px;
      box-shadow: none;
      color: #374151;
      font-size: 1.02rem;
      height: 50px;
      line-height: 1.2;
      min-width: 0;
      padding-left: 1.15rem;
      width: 100%;
    }

    .supplier-page .supplier-search {
      background: #fff;
      border: 1px solid #cfd7e6;
      border-radius: 9px;
      flex: 0 0 100%;
      min-height: 50px;
      padding: 0 1rem;
    }

    .supplier-page .supplier-search i {
      color: #8894a6;
      font-size: 1.05rem;
      padding-left: 0;
      width: 1.25rem;
    }

    .supplier-page .supplier-search .form-control {
      color: #374151;
      font-size: 1.02rem;
      height: 50px;
      padding-left: .75rem;
    }

    .supplier-page .supplier-search .form-control::placeholder {
      color: #818a9a;
      opacity: 1;
    }

    .supplier-page .supplier-toolbar-actions {
      display: grid;
      flex: 0 0 100%;
      gap: .75rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-left: 0;
      width: 100%;
    }

    .supplier-page .supplier-toolbar-actions .supplier-btn {
      border-radius: 9px !important;
      font-size: 1.02rem;
      font-weight: 800;
      gap: .55rem;
      min-height: 52px;
      min-width: 0;
      padding: .55rem .75rem;
      width: 100%;
    }

    .supplier-page .supplier-btn-clear {
      background: #f2f5f8;
      color: #3f4a5a;
    }

    .supplier-page .supplier-btn-add {
      background: #2563eb;
      color: #fff;
    }

    .supplier-page .supplier-table-wrap {
      overflow: visible;
      padding: 0;
    }

    .supplier-page .supplier-table {
      display: none;
    }

    .supplier-page .supplier-mobile-list {
      display: block;
      padding: 0;
    }

    .supplier-page .supplier-mobile-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(15, 23, 42, .055);
      margin: 0 0 1rem;
      padding: 1.05rem 1rem 1.15rem;
    }

    .supplier-page .supplier-mobile-card + .supplier-mobile-card {
      margin-top: 0;
    }

    .supplier-page .supplier-mobile-head {
      align-items: center;
      display: flex;
      gap: 1rem;
    }

    .supplier-page .supplier-mobile-badge {
      background: linear-gradient(180deg, #315dd1, #294cb8);
      border-radius: 8px;
      box-shadow: 0 8px 18px rgba(37, 99, 235, .2);
      color: #fff;
      flex: 0 0 54px;
      font-size: 1.25rem;
      font-weight: 800;
      height: 50px;
      width: 54px;
    }

    .supplier-page .supplier-mobile-title {
      color: #2563eb;
      display: inline-block;
      font-size: 1.28rem;
      font-weight: 800;
      line-height: 1.22;
      text-decoration: none;
    }

    .supplier-page .supplier-mobile-divider {
      border-top: 1px solid #e5e7eb;
      margin: 1rem 0 .95rem;
    }

    .supplier-page .supplier-mobile-fields {
      display: grid;
      gap: .78rem;
    }

    .supplier-page .supplier-mobile-field {
      align-items: center;
      display: grid;
      gap: .9rem;
      grid-template-columns: minmax(0, 45%) minmax(0, 55%);
    }

    .supplier-page .supplier-mobile-label {
      align-items: center;
      color: #718096;
      display: inline-flex;
      font-size: 1rem;
      font-weight: 700;
      gap: .6rem;
      line-height: 1.25;
      min-width: 0;
    }

    .supplier-page .supplier-mobile-label i {
      color: #8b98ad;
      flex: 0 0 18px;
      font-size: 1rem;
      text-align: center;
      width: 18px;
    }

    .supplier-page .supplier-mobile-value {
      color: #374151;
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.35;
      min-width: 0;
      text-align: left;
      word-break: break-word;
    }

    .supplier-page .supplier-mobile-actions {
      display: grid;
      gap: .85rem;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 1.15rem;
    }

    .supplier-page .supplier-mobile-action {
      border: 0;
      border-radius: 9px !important;
      color: #fff;
      display: inline-flex;
      font-size: 1rem;
      font-weight: 800;
      gap: .5rem;
      justify-content: center;
      min-height: 46px;
      min-width: 0;
      padding: .45rem .5rem;
      text-decoration: none;
      white-space: nowrap;
      width: 100%;
    }

    .supplier-page .supplier-mobile-action-detail {
      background: #2563eb;
    }

    .supplier-page .supplier-mobile-action-edit {
      background: #0ea5e9;
    }

    .supplier-page .supplier-mobile-action-delete {
      background: #ef233c;
    }

    .supplier-page .supplier-mobile-count {
      align-items: center;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
      color: #1f2937;
      display: flex;
      font-size: 1.05rem;
      font-weight: 800;
      gap: .85rem;
      margin-top: .15rem;
      padding: 1rem 1.1rem;
    }

    .supplier-page .supplier-mobile-count i {
      color: #8ea0a6;
      font-size: 1.35rem;
    }

    .supplier-page .supplier-pagination {
      padding: .85rem 0 0;
    }
  }

  @media (max-width: 420px) {
    .supplier-page .supplier-mobile-field {
      grid-template-columns: minmax(0, 45%) minmax(0, 55%);
    }

    .supplier-page .supplier-mobile-actions {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .supplier-page .supplier-mobile-action {
      font-size: .92rem;
      gap: .35rem;
      padding-left: .35rem;
      padding-right: .35rem;
      width: 100%;
    }
  }

  @media (max-width: 360px) {
    .supplier-page .supplier-page-title {
      font-size: 1.65rem;
    }

    .supplier-page .supplier-toolbar {
      padding: .85rem;
    }

    .supplier-page .supplier-mobile-card {
      padding: .95rem .85rem 1rem;
    }

    .supplier-page .supplier-mobile-label,
    .supplier-page .supplier-mobile-value,
    .supplier-page .supplier-mobile-action {
      font-size: .88rem;
    }
  }

  /* Supplier desktop refresh */
  #container-wrapper.supplier-page {
    --supplier-blue: #3f5bf6;
    --supplier-blue-dark: #2f49e6;
    --supplier-cyan: #0ea5e9;
    --supplier-red: #ef3340;
    --supplier-text: #171b31;
    --supplier-muted: #656f84;
    --supplier-line: #e7ebf3;
    --supplier-soft: #f7f9ff;
    --supplier-shadow: 0 14px 34px rgba(18, 38, 63, .09);
    color: var(--supplier-text);
    padding-top: 2.25rem;
  }

  .supplier-page .supplier-page-header {
    display: block;
    margin-bottom: 1.45rem;
  }

  .supplier-page .supplier-page-title {
    color: #11152b;
    font-size: 1.95rem;
    font-weight: 800;
    line-height: 1.18;
    margin: 0;
  }

  .supplier-page .supplier-page-subtitle {
    color: var(--supplier-muted);
    font-size: .98rem;
    line-height: 1.4;
    margin: .5rem 0 0;
  }

  .supplier-page .supplier-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  /* Toolbar supplier desktop disamakan dengan halaman Kategori Produk */
  @media (min-width: 768px) {
  .supplier-page .supplier-toolbar {
    align-items: center;
    background: #fff;
    border: 1px solid #edf1f7;
    border-radius: 12px;
    box-shadow: var(--supplier-shadow);
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(320px, 1.65fr) auto;
    gap: .5rem;
    margin-bottom: 1.45rem;
    padding: .75rem 1rem;
  }

  .supplier-page .supplier-control {
    align-items: stretch;
    background: #fff;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    gap: 0;
    min-height: 36px;
    overflow: visible;
  }

  .supplier-page .supplier-control-label {
    align-items: center;
    background: var(--app-theme-color, #3f51b5);
    border: 1px solid var(--app-theme-color, #3f51b5);
    border-radius: .2rem 0 0 .2rem;
    box-shadow: 0 .125rem .25rem rgba(58, 59, 69, .2);
    color: var(--app-theme-text-color, #fff);
    display: inline-flex;
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    padding: .25rem .5rem;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .supplier-page .supplier-select-wrap,
  .supplier-page .supplier-search {
    align-items: center;
    background: #fff;
    display: flex;
    overflow: hidden;
  }

  .supplier-page .supplier-select-wrap {
    border: 1px solid #d1d3e2;
    border-radius: 0 .2rem .2rem 0;
    flex: 1 1 auto;
    height: 36px;
    min-width: 0;
  }

  .supplier-page .supplier-search {
    border: 1px solid #dce3ee;
    border-radius: .2rem;
    height: 36px;
  }

  .supplier-page .supplier-select-icon {
    display: none;
  }

  .supplier-page .supplier-control .form-control {
    background: transparent;
    border: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
    color: #20263a;
    font-size: .875rem;
    height: 34px;
    min-width: 0;
    padding: .25rem 1.75rem .25rem .5rem;
  }

  .supplier-page .supplier-search {
    flex: none;
    min-height: 36px;
  }

  .supplier-page .supplier-search i {
    color: #64748b;
    font-size: 1.1rem;
    padding-left: 1.25rem;
  }

  .supplier-page .supplier-search .form-control {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #20263a;
    font-size: .98rem;
    height: 34px;
    padding-left: 1rem;
  }

  .supplier-page .supplier-search .form-control::placeholder {
    color: #7f889b;
    opacity: 1;
  }

  .supplier-page .supplier-toolbar-actions {
    align-items: center;
    display: flex;
    flex: none;
    gap: .5rem;
    margin-left: 0;
  }

  .supplier-page .supplier-btn {
    border: 1px solid transparent;
    border-radius: .2rem !important;
    box-shadow: 0 .125rem .25rem rgba(58, 59, 69, .2);
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: .4rem;
    min-height: 36px;
    padding: .25rem .65rem;
  }

  .supplier-page .supplier-btn-clear {
    background: #fc544b;
    border-color: #fc544b;
    color: #fff;
  }

  .supplier-page .supplier-btn-add {
    background: #3abaf4;
    border-color: #3abaf4;
    color: #fff;
    min-width: 0;
  }

  .supplier-page .supplier-btn-clear:hover {
    background: #e8463e;
    border-color: #e8463e;
    color: #fff;
  }

  .supplier-page .supplier-btn-add:hover {
    background: #27aae3;
    border-color: #27aae3;
    color: #fff;
  }
  }

  .supplier-page .supplier-table-wrap {
    background: #fff;
    border: 1px solid #edf1f7;
    border-radius: 12px;
    box-shadow: var(--supplier-shadow);
    overflow-x: auto;
    padding: 1rem 1.05rem .95rem;
  }

  .supplier-page .supplier-table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    min-width: 980px;
  }

  .supplier-page .supplier-table thead th {
    background: #fafbff;
    border: 0;
    border-bottom: 1px solid var(--supplier-line);
    color: #171b31;
    font-size: .86rem;
    font-weight: 800;
    padding: 1rem .95rem;
    white-space: nowrap;
  }

  .supplier-page .supplier-table tbody td {
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--supplier-line);
    color: #262d44;
    font-size: .95rem;
    padding: 1.2rem .95rem;
    vertical-align: middle;
  }

  .supplier-page .supplier-table tbody tr:hover td {
    background: #fbfdff;
  }

  .supplier-page .supplier-link {
    color: #3158f4;
    font-weight: 800;
  }

  .supplier-page .supplier-actions-cell {
    min-width: 240px;
  }

  .supplier-page .supplier-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: .55rem;
    justify-content: flex-end;
  }

  .supplier-page .supplier-action {
    border: 0;
    border-radius: 6px !important;
    color: #fff;
    display: inline-flex;
    font-size: .86rem;
    font-weight: 800;
    gap: .4rem;
    min-height: 38px;
    padding: .45rem .82rem;
    white-space: nowrap;
  }

  .supplier-page .supplier-action-detail {
    background: linear-gradient(180deg, #3865f4, #2d55df);
  }

  .supplier-page .supplier-action-edit {
    background: linear-gradient(180deg, #20aee9, #0e9bd8);
  }

  .supplier-page .supplier-action-delete {
    background: linear-gradient(180deg, #ff4650, #ed2f3a);
  }

  .supplier-page .supplier-action-detail:hover,
  .supplier-page .supplier-action-edit:hover,
  .supplier-page .supplier-action-delete:hover {
    color: #fff;
    filter: brightness(.96);
  }

  .supplier-page .supplier-pagination {
    color: #1f2937;
    font-size: .92rem;
    padding: 1rem .1rem 0;
  }

  @media (max-width: 1399.98px) and (min-width: 768px) {
    .supplier-page .supplier-toolbar {
      grid-template-columns: minmax(150px, .75fr) minmax(150px, .75fr) minmax(280px, 1.6fr);
    }

    .supplier-page .supplier-toolbar-actions {
      grid-column: 1 / -1;
      justify-content: flex-end;
    }
  }

</style>





<div class="container-fluid supplier-page" id="container-wrapper">
  <div class="supplier-page-header">
    <h1 class="supplier-page-title">Data Supplier</h1>
    <p class="supplier-page-subtitle">Kelola data vendor, perusahaan, kontak, dan jenis usaha supplier.</p>
  </div>

  <div class="supplier-panel">
    <div class="supplier-toolbar">
      <div class="supplier-control">
        <span class="supplier-control-label" id="label-limits">LIMIT</span>
        <div class="supplier-select-wrap">
          <span class="supplier-select-icon"><i class="fa fa-list-ul"></i></span>
          <select id="limits" name="limits" class="form-control custom-select" aria-labelledby="label-limits" onchange="search_Supplier()">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
        </div>
      </div>

      <div class="supplier-control">
        <span class="supplier-control-label" id="label-sort">SORT</span>
        <div class="supplier-select-wrap">
          <span class="supplier-select-icon"><i class="fa fa-sort"></i></span>
          <select id="sortBy" class="form-control custom-select" aria-labelledby="label-sort" onchange="search_Supplier()">
            <option value="ASC">ASC</option>
            <option value="DESC" selected>DESC</option>
          </select>
        </div>
      </div>

      <div class="supplier-search">
        <i class="fa fa-search"></i>
        <input type="text" id="keywords" class="form-control" placeholder="Cari data supplier" onkeyup="search_Supplier();" aria-label="Ketik kata kunci"/>
      </div>

      <div class="supplier-toolbar-actions">
        <button class="supplier-btn supplier-btn-clear clear" type="button" title="Bersihkan pencarian">
          <i class="fa fa-times"></i> Clear
        </button>
        <button type="button" data-toggle="tooltip" data-id="" class="supplier-btn supplier-btn-add edit_supplier" title="Tambah Supplier">
          <i class="fa fa-plus"></i> Tambah Supplier
        </button>
      </div>
    </div>

    <div class="post-list pt-0 supplier-list" id="dataSupplier">
      <div class="supplier-table-wrap">
        <table class="table supplier-table">
          <thead>
            <tr>
              <th>No.</th>
              <th>Nama Perusahaan</th>
              <th>Atas Nama</th>
              <th>Jabatan</th>
              <th>No. HP</th>
              <th>Jenis Usaha</th>
              <th>Tgl. Register</th>
              <th class="text-center">Aksi</th>
            </tr>
          </thead>
          <tbody>
            <?php if(!empty($result)){
              $no=1;
              foreach($result as $row){ ?>
                <tr>
                  <td data-label="No."><?php echo $no; ?></td>
                  <td data-label="Nama Perusahaan">
                    <a href="#" class="supplier-link edit_supplier" data-id="<?php echo encrypt($row["id_supplier"]); ?>">
                      <?php echo !empty($row["nama_perusahaan"]) ? $row["nama_perusahaan"] : '-'; ?>
                    </a>
                  </td>
                  <td data-label="Atas Nama"><?=!empty($row["pemilik"]) ? $row["pemilik"] : '<span class="supplier-muted">-</span>';?></td>
                  <td data-label="Jabatan"><?=!empty($row["jabatan"]) ? $row["jabatan"] : '<span class="supplier-muted">-</span>';?></td>
                  <td data-label="No. HP"><?=!empty($row["telp"]) ? $row["telp"] : '<span class="supplier-muted">-</span>';?></td>
                  <td data-label="Jenis Usaha"><?=!empty($row["jenis_usaha"]) ? $row["jenis_usaha"] : '<span class="supplier-muted">-</span>';?></td>
                  <td data-label="Tgl. Register"><?=dtimes($row["tgl_terdaftar"],false,false);?></td>
                  <td class="supplier-actions-cell" data-label="Aksi">
                    <div class="supplier-actions">
                      <a href="<?=base_url('supplier/detail/').encrypt_url($row["id_supplier"]); ?>" class="supplier-action supplier-action-detail">
                        <i class="fa fa-eye"></i> Detail
                      </a>
                      <button class="supplier-action supplier-action-edit edit_supplier" data-id="<?php echo encrypt($row["id_supplier"]); ?>">
                        <i class="fa fa-edit"></i> Edit
                      </button>
                      <button class="supplier-action supplier-action-delete" data-id="<?=$row["id_supplier"]; ?>" data-toggle="modal" data-target="#confirm-delete">
                        <i class="fa fa-trash"></i> Hapus
                      </button>
                    </div>
                  </td>
                </tr>
            <?php $no++; } }else{ ?>
              <tr><td colspan="8" class="supplier-empty">Data belum ada</td></tr>
            <?php } ?>
          </tbody>
        </table>

        <div class="supplier-mobile-list">
          <?php if(!empty($result)){
            $no=1;
            foreach($result as $row){ ?>
              <div class="supplier-mobile-card">
                <div class="supplier-mobile-head">
                  <div class="supplier-mobile-badge"><?php echo $no; ?></div>
                  <div class="flex-grow-1 min-w-0">
                    <a href="<?=base_url('supplier/detail/').encrypt_url($row["id_supplier"]); ?>" class="supplier-mobile-title">
                      <?php echo !empty($row["nama_perusahaan"]) ? $row["nama_perusahaan"] : '-'; ?>
                    </a>
                  </div>
                </div>

                <div class="supplier-mobile-divider"></div>

                <div class="supplier-mobile-fields">
                  <div class="supplier-mobile-field">
                    <div class="supplier-mobile-label"><i class="fa fa-users"></i> Atas Nama</div>
                    <div class="supplier-mobile-value"><?= !empty($row["pemilik"]) ? $row["pemilik"] : '<span class="supplier-muted">-</span>'; ?></div>
                  </div>
                  <div class="supplier-mobile-field">
                    <div class="supplier-mobile-label"><i class="fa fa-users"></i> Jabatan</div>
                    <div class="supplier-mobile-value"><?= !empty($row["jabatan"]) ? $row["jabatan"] : '<span class="supplier-muted">-</span>'; ?></div>
                  </div>
                  <div class="supplier-mobile-field">
                    <div class="supplier-mobile-label"><i class="fa fa-phone-square"></i> No. HP</div>
                    <div class="supplier-mobile-value"><?= !empty($row["telp"]) ? $row["telp"] : '<span class="supplier-muted">-</span>'; ?></div>
                  </div>
                  <div class="supplier-mobile-field">
                    <div class="supplier-mobile-label"><i class="fa fa-home"></i> Jenis Usaha</div>
                    <div class="supplier-mobile-value"><?= !empty($row["jenis_usaha"]) ? $row["jenis_usaha"] : '<span class="supplier-muted">-</span>'; ?></div>
                  </div>
                  <div class="supplier-mobile-field">
                    <div class="supplier-mobile-label"><i class="fa fa-calendar"></i> Tgl. Register</div>
                    <div class="supplier-mobile-value"><?= dtimes($row["tgl_terdaftar"],false,false); ?></div>
                  </div>
                </div>

                <div class="supplier-mobile-actions">
                  <a href="<?=base_url('supplier/detail/').encrypt_url($row["id_supplier"]); ?>" class="supplier-mobile-action supplier-mobile-action-detail">
                    <i class="fa fa-eye"></i> Detail
                  </a>
                  <button class="supplier-mobile-action supplier-mobile-action-edit edit_supplier" data-id="<?php echo encrypt($row["id_supplier"]); ?>">
                    <i class="fa fa-edit"></i> Edit
                  </button>
                  <button class="supplier-mobile-action supplier-mobile-action-delete" data-id="<?=$row["id_supplier"]; ?>" data-toggle="modal" data-target="#confirm-delete" href="#">
                    <i class="fa fa-trash"></i> Hapus
                  </button>
                </div>
              </div>
          <?php $no++; } }else{ ?>
            <div class="supplier-mobile-empty">Data belum ada</div>
          <?php } ?>
        </div>

        <div class="supplier-mobile-count">
          <i class="fa fa-file-text"></i>
          <span>Menampilkan: <?= !empty($result) ? count($result) : 0; ?></span>
        </div>

        <nav aria-label="Page navigation" class="supplier-pagination">
          <?php echo $this->ajax_pagination->create_links(); ?>
        </nav>
      </div>
    </div>
  </div>
</div>

<!-- MODAL ADD/EDIT -->
<div id="modal-supplier" class="modal left fade" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content flat">
      <form role="form" id="form-edit-supplier" method="post">
        <input type="hidden" class="form-control" id="id" name="id" required>
        <input type="hidden" class="form-control" id="type" name="type" required>

        <div class="modal-header bg-danger py-2 flat">
          <h4 class="modal-title text-light mb-0">Data</h4>
          <button type="button" class="close text-white" data-dismiss="modal" aria-label="Tutup">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body mb-3">
          <div class="form-group row mb-2">
            <label class="col-sm-4 col-form-label">Nama Perusahaan</label>
            <div class="col-sm-8">
              <input type="text" class="form-control form-control-sm" id="nama_perusahaan" name="nama_perusahaan" required>
            </div>
          </div>
          <div class="form-group row mb-2">
            <label class="col-sm-4 col-form-label">Atas Nama</label>
            <div class="col-sm-8">
              <input type="text" class="form-control form-control-sm" id="atas_nama" name="atas_nama" required>
            </div>
          </div>
          <div class="form-group row mb-2">
            <label class="col-sm-4 col-form-label">Jabatan</label>
            <div class="col-sm-8">
              <input type="text" class="form-control form-control-sm" id="jabatan" name="jabatan" required>
            </div>
          </div>
          <div class="form-group row mb-2">
            <label class="col-sm-4 col-form-label">No. HP</label>
            <div class="col-sm-8">
              <input type="text" class="form-control form-control-sm" id="no_hp" name="no_hp" required>
            </div>
          </div>
          <div class="form-group row mb-2">
            <label class="col-sm-4 col-form-label">Email</label>
            <div class="col-sm-8">
              <input type="email" class="form-control form-control-sm" id="email" name="email" required>
            </div>
          </div>
          <div class="form-group row mb-2">
            <label class="col-sm-4 col-form-label">Jenis Usaha</label>
            <div class="col-sm-8">
              <input type="text" class="form-control form-control-sm" id="jenis_usaha" name="jenis_usaha" required>
            </div>
          </div>
          <div class="form-group row mb-2">
            <label class="col-sm-4 col-form-label">No. Rekening</label>
            <div class="col-sm-8">
              <input type="text" class="form-control form-control-sm" id="no_rekening" name="no_rekening" required>
            </div>
          </div>
          <div class="form-group row mb-2">
            <label class="col-sm-4 col-form-label">Alamat</label>
            <div class="col-sm-8">
              <textarea id="alamat" name="alamat" class="form-control" rows="2" required></textarea>
            </div>
          </div>
        </div>

        <div class="modal-footer p-2">
          <button type="submit" class="btn btn-success btn-sm flat">Submit</button>
          <button type="button" class="btn btn-danger btn-sm flat tutup-con" data-dismiss="modal">Tutup</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- MODAL HAPUS -->
<div aria-hidden="true" aria-labelledby="modalDeleteLabel" 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="modalDeleteLabel">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>
  // Tombol Clear
  $('.clear').on('click', function(){
    $('#keywords').val('');
    search_Supplier();
  });

  var halaman = $("#halaman").val();

  // Ajax list
  function search_Supplier(page_num){
    page_num = page_num ? page_num : 0;
    var keywords = $('#keywords').val();
    var sortBy   = $('#sortBy').val();
    var limits   = $('#limits').val();
    var urlnya   = base_url + "supplier/ajaxSupplier/" + page_num;

    $.ajax({
      type: 'POST',
      url: urlnya,
      data:{page:page_num,keywords:keywords,sortBy:sortBy,limits:limits},
      beforeSend: function(){ $('body').loading(); },
      success: function(html){
        $('#dataSupplier').html(html);
        $('body').loading('stop');
      },
      error: function(xhr){
        var err = xhr.responseText;
        sweet('Server!!!',err,'error','danger');
        $('body').loading('stop');
      }
    });
  }

  // Fokus saat modal tampil
  $('#modal-supplier').on('shown.bs.modal', function() {
    $('#nama_perusahaan').focus();
  });

  $(function(){
    $(document).fcs(".form-control");
    // Optional: aktifkan tooltip Bootstrap bila tersedia
    if ($.fn.tooltip) {
      $('[data-toggle="tooltip"]').tooltip();
    }
  });

  // Add & Edit
  $(document).on('click', '.edit_supplier', function(e) {
    e.preventDefault();

    var dataID = $(this).attr('data-id');
    if (dataID && dataID !== "") {
      $("#type").val('edit');
      $('.modal-title').html('Edit Data');

      $.ajax({
        url: base_url + 'supplier/get_data',
        data: {id: dataID},
        method: 'POST',
        dataType: 'json',
        beforeSend: function(){ $('body').loading(); },
        success: function(data) {
          $('#modal-supplier').modal({backdrop: 'static', keyboard: false});
          $('#error_piutang').css('display','none'); // dibiarkan, jika elemen ada di markup global
          $("#id").val(data.id);
          $("#nama_perusahaan").val(data.nama);
          $("#atas_nama").val(data.pemilik);
          $("#jabatan").val(data.jabatan);
          $("#no_hp").val(data.telp);
          $("#email").val(data.email);
          $("#jenis_usaha").val(data.jenis);
          $("#no_rekening").val(data.rekening);
          $("#alamat").val(data.alamat);
          $("#tgl_terdaftar").val(data.tgl);
          $('.simpan').html('Update');
          $('body').loading('stop');
        },
        error: function(xhr){
          var err = xhr.responseText;
          sweet('Server!!!',err,'error','danger');
          $('body').loading('stop');
        }
      });
    } else {
      $('#modal-supplier').modal('show');
      $('.modal-title').html('Tambah Data');
      $('.simpan').html('Simpan');
      $("#type").val('add');
      $("#id").val(0);
      setTimeout(function (){ $('#telepon_add').focus(); }, 500);
    }
  });

  // Submit form
  $("#form-edit-supplier").submit(function(e) {
    e.preventDefault();
    var dataform = $("#form-edit-supplier").serialize();

    $.ajax({
      url: base_url + "supplier/simpan",
      type: "post",
      data: dataform,
      dataType: 'json',
      beforeSend: function(){ $('body').loading(); },
      success: function(arr) {
        if (arr.status == 200) {
          showNotif('bottom-right','Hapus data',arr.msg,'success');
        } else {
          sweet('Peringatan!!!',arr.msg,'warning','warning');
        }
        $('#modal-supplier').modal('hide');
        search_Supplier(halaman);
        $("#form-edit-supplier")[0].reset();
        $('body').loading('stop');
      },
      error: function(xhr){
        var err = xhr.responseText;
        sweet('Server!!!',err,'error','danger');
        $('body').loading('stop');
      }
    });
  });

  // Hapus
  $(document).on('click','.hapus',function(){
    var id = $("#data-hapus").val();
    $.ajax({
      url: base_url + 'supplier/hapus',
      data: {type:'hapus',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');
        }
        $('body').loading('stop');
        search_Supplier(halaman);
      },
      error: function(xhr){
        var err = xhr.responseText;
        sweet('Server!!!',err,'error','danger');
        $('body').loading('stop');
      }
    });
  });

  // Pass id ke modal hapus
  $('#confirm-delete').on('show.bs.modal', function(e) {
    $('#data-hapus').val($(e.relatedTarget).data('id'));
  });
</script>
