<!-- ============ THEME & LAYOUT ============ -->
<style>
  :root{
    --pg-primary:#1769e8;
    --pg-primary-2:#1769e8;
    --pg-dark:#3a3b45;
    --pg-muted:#6c757d;
    --pg-light:#f8f9fc;
  }

  /* Table padding dalam card tetap */
  .card .table td, .card .table th {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  /* Header gradient */
  .pg-hero{
    background: linear-gradient(135deg,var(--pg-primary),var(--pg-primary-2));
    color:var(--app-theme-text-color, #fff);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
  }
  .pg-hero h1, .pg-hero .breadcrumb, .pg-hero a{ color:var(--app-theme-text-color, #fff); }
  .pg-hero .breadcrumb{ margin-bottom:0; }

  /* Filter bar: grid responsif, rapi di semua ukuran */
  .filter-grid{
    display:grid;
    grid-template-columns: repeat(12,1fr);
    grid-gap:.75rem;
    align-items:center;
  }
  /* Kolom responsif */
  .fg-span-2 { grid-column: span 2; }
  .fg-span-3 { grid-column: span 3; }
  .fg-span-4 { grid-column: span 4; }
  .fg-span-5 { grid-column: span 5; }
  .fg-span-6 { grid-column: span 6; }
  .fg-span-7 { grid-column: span 7; }
  .fg-span-8 { grid-column: span 8; }
  .fg-span-9 { grid-column: span 9; }
  .fg-span-12{ grid-column: span 12; }

  /* Mobile: elemen bertumpuk penuh */
  @media (max-width: 575.98px){
    .filter-grid > *{ grid-column: span 12; }
  }
  /* Tablet: tata letak 2–3 kolom */
  @media (min-width: 576px) and (max-width: 991.98px){
    .fg-sm-6{ grid-column: span 6; }
    .fg-sm-4{ grid-column: span 4; }
    .fg-sm-8{ grid-column: span 8; }
  }

  /* Label kecil di atas kontrol (lebih mudah dibaca) */
  .fg-label{
    font-size:.75rem;
    font-weight:600;
    color:var(--pg-muted);
    margin-bottom:.25rem;
    display:block;
  }

  /* Select & input konsisten tinggi kecil */
  .filter-grid .form-control,
  .filter-grid .custom-select{
    height: calc(1.5em + .75rem + 2px);
    font-size:.875rem;
  }

  /* Tombol aksi */
  .btn-ghost{
    background:#fff;border:1px solid #e3eaef;
  }
  .btn-ghost:hover{
    background:#f3f4f6;
  }

  /* Modal fullscreen untuk layar kecil */
  @media (max-width: 575.98px){
    .modal-fullscreen-xl .modal-dialog{
      max-width:100%;
      margin:0;
    }
    .modal-fullscreen-xl .modal-content{
      min-height:100vh;border-radius:0;
    }
  }

  /* Utilitas kecil */
  .shadow-soft{ box-shadow: 0 10px 20px rgba(29, 0, 102, .08); }
  .rounded-2xl{ border-radius:1rem; }

  /* Kompat: style bawaan user */
  .btn-light {
    color: #3a3b45;
    padding:2px 5px;
    background-color: #fff;
    border-color: #e3eaef;
    border-radius: 0 !important;
  }
  .bs-searchbox .form-control {
    padding: 2px 8px;
    border-radius: 0 !important;
  }
  .cell-1 {
    border-collapse: separate;
    border-spacing: 0 4em;
    background: #ffffff;
    border-bottom: 5px solid transparent;
    background-clip: padding-box;
    cursor: pointer
  }
  .table-elipse { cursor: pointer }
  .row-child { background-color: #dbdbea; }

  /* Tampilan laporan hutang */
  .hutang-page{
    color:#17233c;
    padding-bottom:28px;
  }
  .hutang-page .pg-hero{
    overflow:hidden;
    padding:0;
    border:0;
    border-radius:14px;
    background:var(--app-theme-color, #124fa8);
    color:var(--app-theme-text-color, #fff);
    box-shadow:0 8px 22px rgba(16,24,40,.16);
  }
  .hutang-hero-content{
    position:relative;
    display:flex;
    align-items:center;
    min-height:96px;
    padding:18px 28px;
  }
  .hutang-hero-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 54px;
    width:54px;
    height:54px;
    margin-right:18px;
    border:1px solid rgba(var(--app-theme-text-rgb, 255,255,255),.55);
    border-radius:13px;
    background:rgba(var(--app-theme-text-rgb, 255,255,255),.12);
    color:var(--app-theme-text-color, #fff);
    font-size:25px;
  }
  .hutang-hero-copy{ position:relative; z-index:2; }
  .hutang-summary-card{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-width:250px;
    margin-left:auto;
    margin-right:96px;
    text-align:right;
  }
  .hutang-summary-copy{
    display:flex;
    flex-direction:column;
    min-width:0;
  }
  .hutang-summary-copy span{
    color:rgba(var(--app-theme-text-rgb, 255,255,255),.82);
    font-size:12px;
    font-weight:600;
  }
  .hutang-summary-copy strong{
    margin:1px 0;
    color:var(--app-theme-text-color, #fff);
    font-size:24px;
    line-height:1.2;
  }
  .hutang-summary-copy small{
    color:rgba(var(--app-theme-text-rgb, 255,255,255),.68);
    font-size:10px;
  }
  .hutang-hero-art{
    position:absolute;
    right:32px;
    top:8px;
    color:rgba(var(--app-theme-text-rgb, 255,255,255),.30);
    font-size:70px;
    line-height:1;
    transform:rotate(-8deg);
  }
  .hutang-hero-art span{
    position:absolute;
    right:-15px;
    bottom:-2px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:#f59e0b;
    color:#fff;
    font-size:19px;
  }
  .hutang-page .pg-hero h1{
    margin:0 0 5px;
    color:var(--app-theme-text-color, #fff);
    font-size:26px;
    font-weight:700;
    letter-spacing:-.4px;
  }
  .hutang-page .pg-hero p{
    color:rgba(var(--app-theme-text-rgb, 255,255,255),.82);
    font-size:13px;
  }
  .hutang-content-card{
    overflow:hidden;
    margin-bottom:16px;
    border:1px solid #dde5ef;
    border-radius:12px!important;
    background:#fff;
    box-shadow:0 8px 24px rgba(16,24,40,.06);
  }
  .hutang-page .hutang-filter-section{
    padding:18px 20px 20px;
    border:0;
    border-bottom:1px solid #e6ebf2;
    background:#fff;
  }
  .hutang-section-heading{ margin-bottom:14px; }
  .hutang-section-heading h2{
    margin:0 0 3px;
    color:#17233c;
    font-size:16px;
    font-weight:700;
  }
  .hutang-section-heading p{
    margin:0;
    color:#667085;
    font-size:13px;
  }
  .hutang-page .filter-grid{
    display:grid;
    grid-template-columns:minmax(105px,.65fr) minmax(105px,.65fr) minmax(180px,1.15fr) minmax(260px,1.45fr) minmax(220px,1.25fr) auto;
    grid-template-areas:"sort limit user date supplier actions";
    gap:12px;
    align-items:end;
  }
  .hutang-page .filter-grid > *{
    grid-column:auto!important;
    min-width:0;
  }
  .hutang-page .filter-sort{ grid-area:sort!important; }
  .hutang-page .filter-limit{ grid-area:limit!important; }
  .hutang-page .filter-user{ grid-area:user!important; }
  .hutang-page .filter-date{ grid-area:date!important; }
  .hutang-page .filter-supplier{ grid-area:supplier!important; max-width:none; }
  .hutang-page .filter-actions{ grid-area:actions!important; }
  .hutang-page .fg-label{
    display:block;
    margin:0 0 7px;
    color:#344054;
    font-size:12px;
    font-weight:700;
  }
  .hutang-page .fg-label i{
    display:none;
  }
  .hutang-page .filter-grid .form-control,
  .hutang-page .filter-grid .custom-select{
    width:100%;
    height:42px;
    padding:8px 12px;
    border:1px solid #d5deea;
    border-radius:7px!important;
    background-color:#fff;
    color:#344054;
    font-size:13px;
    box-shadow:none;
  }
  .hutang-page .filter-grid .custom-select{ padding-right:30px; }
  .hutang-page .filter-grid .form-control:focus,
  .hutang-page .filter-grid .custom-select:focus{
    border-color:#6ea8fe;
    box-shadow:0 0 0 3px rgba(23,105,232,.10);
  }
  .hutang-page #date-pembelian .input-group-prepend{ display:flex; }
  .hutang-page #date-pembelian .input-group{ display:flex; flex-wrap:nowrap; }
  .hutang-page #date-pembelian .input-group-text{
    height:42px;
    padding:0 14px;
    border:1px solid #1769e8;
    border-radius:7px 0 0 7px;
    background:#1769e8;
    color:#fff;
    font-size:12px;
    font-weight:700;
  }
  .hutang-page #date-pembelian .form-control{ border-radius:0 7px 7px 0!important; }
  .hutang-filter-actions{
    display:flex;
    align-items:center;
    justify-content:flex-start;
  }
  .hutang-filter-actions .btn-group{ display:flex; gap:8px; }
  .hutang-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    height:42px;
    min-width:78px;
    padding:0 14px;
    border-radius:7px!important;
    font-size:12px;
    font-weight:700;
    line-height:1;
    box-shadow:0 2px 5px rgba(16,24,40,.08);
  }
  .hutang-btn-search{
    border:1px solid #159b60;
    background:#159b60;
    color:#fff;
  }
  .hutang-btn-search:hover{ background:#0f8050; color:#fff; }
  .hutang-btn-pdf{
    border:1px solid #dc3545;
    background:#dc3545;
    color:#fff;
  }
  .hutang-btn-pdf:hover{ background:#bd2130; color:#fff; }

  /* Lima filter desktop/tablet mengikuti gaya halaman Kategori Produk */
  @media (min-width:768px){
    .hutang-page .filter-grid{
      gap:.5rem;
      align-items:center;
    }

    .hutang-page .filter-sort,
    .hutang-page .filter-limit,
    .hutang-page .filter-user,
    .hutang-page .filter-date,
    .hutang-page .filter-supplier{
      display:flex;
      align-items:stretch;
      min-width:0;
    }

    .hutang-page .filter-sort > .fg-label,
    .hutang-page .filter-limit > .fg-label,
    .hutang-page .filter-user > .fg-label,
    .hutang-page .filter-date > .fg-label,
    .hutang-page .filter-supplier > .fg-label{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:36px;
      margin:0;
      padding:.25rem .5rem;
      background:var(--app-theme-color, #3f51b5);
      border:1px solid var(--app-theme-color, #3f51b5);
      border-radius:.2rem 0 0 .2rem;
      color:var(--app-theme-text-color, #fff);
      font-size:.8rem;
      font-weight:500;
      line-height:1.5;
      white-space:nowrap;
      box-shadow:0 .125rem .25rem rgba(58,59,69,.2);
    }

    .hutang-page .filter-sort > .form-control,
    .hutang-page .filter-limit > .form-control,
    .hutang-page .filter-user > .custom-select,
    .hutang-page .filter-supplier > .form-control,
    .hutang-page .filter-date > #date-pembelian{
      flex:1 1 auto;
      min-width:0;
    }

    .hutang-page .filter-grid .filter-sort > .form-control,
    .hutang-page .filter-grid .filter-limit > .form-control,
    .hutang-page .filter-grid .filter-user > .custom-select,
    .hutang-page .filter-grid .filter-supplier > .form-control,
    .hutang-page .filter-grid .filter-date #date-pembelian .form-control{
      height:36px;
      min-height:36px;
      border-color:#d1d3e2;
      border-left:0;
      border-radius:0 .2rem .2rem 0!important;
      color:#344054;
      font-size:.875rem;
      font-weight:500;
      box-shadow:none;
    }

    .hutang-page .filter-grid .filter-sort > .custom-select,
    .hutang-page .filter-grid .filter-limit > .custom-select,
    .hutang-page .filter-grid .filter-user > .custom-select{
      padding-right:1.75rem;
    }

    .hutang-page .filter-date #date-pembelian,
    .hutang-page .filter-date #date-pembelian .input-group{
      height:36px;
    }

    .hutang-page .filter-date #date-pembelian .input-group-prepend{
      display:none;
    }

    .hutang-page .filter-grid .filter-sort > .form-control:focus,
    .hutang-page .filter-grid .filter-limit > .form-control:focus,
    .hutang-page .filter-grid .filter-user > .custom-select:focus,
    .hutang-page .filter-grid .filter-date #date-pembelian .form-control:focus,
    .hutang-page .filter-grid .filter-supplier > .form-control:focus{
      position:relative;
      z-index:2;
      border-color:var(--app-theme-color, #3f51b5);
      box-shadow:0 0 0 .15rem rgba(63,81,181,.18);
    }
  }

  .hutang-page #dataHutang{ background:transparent; }
  .hutang-list-panel{
    padding:15px;
    border:1px solid #dde5ef;
    border-radius:12px;
    background:#fff;
    box-shadow:0 8px 24px rgba(16,24,40,.06);
  }
  .hutang-list-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 2px 12px;
  }
  .hutang-list-heading h2{
    margin:0 0 2px;
    color:#17233c;
    font-size:16px;
    font-weight:700;
  }
  .hutang-list-heading p{
    margin:0;
    color:#667085;
    font-size:12px;
  }
  .hutang-results{ padding:0; }
  .hutang-table-scroll{
    overflow-x:auto;
    border:1px solid #dfe6ef;
    border-radius:0 0 9px 9px;
    background:#fff;
  }
  .hutang-page .hutang-table{
    width:100%;
    min-width:1120px;
    margin:0;
    color:#344054;
    font-size:12px;
    table-layout:fixed;
    border-collapse:separate;
    border-spacing:0;
  }
  .hutang-col-trx{ width:135px; }
  .hutang-col-date{ width:160px; }
  .hutang-col-account{ width:270px; }
  .hutang-col-description{ width:auto; }
  .hutang-col-total{ width:130px; }
  .hutang-col-action{ width:205px; }
  .hutang-page .hutang-table > thead > tr > th{
    padding:11px 10px;
    border:0;
    border-bottom:1px solid #d8e1ed;
    background:#f2f6fc;
    color:#344054;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    vertical-align:middle;
  }
  .hutang-page .hutang-table > tbody > .hutang-main-row > td{
    padding:13px 10px;
    border:0;
    border-top:1px solid #dfe6ef;
    background:#f8fbff;
    color:#475467;
    font-size:12px;
    vertical-align:middle;
  }
  .hutang-page .hutang-table > tbody > .hutang-main-row > td:first-child{
    padding-left:14px;
    box-shadow:inset 3px 0 #1769e8;
  }
  .hutang-page .hutang-table > tbody > .hutang-main-row:hover > td{ background:#f2f7ff; }
  .hutang-date-cell{ white-space:nowrap; }
  .hutang-account-cell,
  .hutang-description-cell{
    line-height:1.45;
    overflow-wrap:anywhere;
  }
  .hutang-money-cell{
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .hutang-page .hutang-table > tbody > .hutang-empty-row > td{
    padding:28px 12px;
    border:0;
    color:#667085;
    font-size:13px;
  }
  .hutang-trx-link{
    display:inline-block;
    padding:4px 8px;
    border:1px solid #cfe0f8;
    border-radius:5px;
    background:#edf5ff;
    color:#1769e8!important;
    font-size:12px;
    font-weight:700;
    text-decoration:none!important;
    white-space:nowrap;
  }
  .hutang-detail-row > td{
    padding:0!important;
    border:0!important;
    background:#f8fafc!important;
    box-shadow:inset 3px 0 #d7e7fb;
  }
  .hutang-page .hutang-detail-table{
    width:100%;
    margin:0;
    border:0;
    background:#f8fafc;
    font-size:12px;
    table-layout:fixed;
  }
  .hutang-page .hutang-detail-table thead td{
    padding:9px 10px;
    border:0;
    border-top:1px solid #e2e8f0;
    border-bottom:1px solid #e2e8f0;
    background:#eef3f9;
    color:#475467;
    font-size:12px;
    font-weight:700;
  }
  .hutang-page .hutang-detail-table tbody td{
    padding:9px 10px;
    border:0;
    border-bottom:1px solid #e7ecf3;
    background:#fbfcfe;
    color:#475467;
    font-size:12px;
    vertical-align:middle;
  }
  .hutang-page .hutang-detail-table tbody tr:nth-child(even):not(.hutang-purchase-total) td{
    background:#f8fafc;
  }
  .hutang-page .hutang-detail-table td.text-right{
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .hutang-page .hutang-detail-table .hutang-purchase-total td{
    padding:10px;
    border-top:1px solid #c9d9ed;
    border-bottom:7px solid #fff;
    background:#edf5ff!important;
    color:#175fc2!important;
    font-size:12px;
    font-weight:800;
  }
  .hutang-page .hutang-table > tfoot > tr > th{
    padding:14px 10px;
    border:0;
    border-top:1px solid #0f58c7;
    background:#1769e8;
    color:#fff!important;
    font-size:13px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
  }
  .hutang-action-group{ display:flex; justify-content:flex-end; gap:5px; }
  .hutang-action-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:32px;
    padding:6px 9px;
    border-radius:6px!important;
    font-size:12px;
    font-weight:700;
    line-height:1;
    box-shadow:none;
    white-space:nowrap;
  }
  .hutang-action-pay{ border-color:#f59e0b; background:#f59e0b; color:#fff; }
  .hutang-action-note{ border-color:#64748b; background:#64748b; color:#fff; }
  .hutang-action-print{ border-color:#159b60; background:#159b60; color:#fff; }
  .hutang-action-btn:hover{ color:#fff; filter:brightness(.93); }

  /* Kartu rincian mengikuti tampilan daftar Faktur Pembelian */
  .hutang-list-panel{
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .hutang-list-heading{ display:none; }
  .hutang-table-scroll{
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
  }
  .hutang-page .hutang-table{
    display:block;
    min-width:0;
    border:0;
    background:transparent;
  }
  .hutang-page .hutang-table > thead{ display:none; }
  .hutang-page .hutang-table > tbody{ display:block; }
  .hutang-page .hutang-table > tbody > .hutang-main-row{
    display:grid;
    grid-template-columns:28px minmax(125px,.9fr) minmax(130px,1fr) minmax(220px,1.7fr) minmax(170px,1.4fr) minmax(82px,.65fr) minmax(150px,1.1fr);
    align-items:center;
    gap:14px;
    margin-top:16px;
    padding:15px 17px;
    border:1px solid #e2e8f0;
    border-bottom:0;
    border-radius:10px 10px 0 0;
    background:#fff;
    box-shadow:0 8px 22px rgba(16,24,40,.06);
  }
  .hutang-page .hutang-table > tbody > .hutang-main-row:first-child{ margin-top:0; }
  .hutang-page .hutang-table > tbody > .hutang-main-row > td,
  .hutang-page .hutang-table > tbody > .hutang-main-row:hover > td{
    display:block;
    min-width:0;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#1f2937;
  }
  .hutang-main-row td[data-label]::before{
    display:block;
    margin-bottom:5px;
    content:attr(data-label);
    color:#1f2937;
    font-size:12px;
    font-weight:800;
  }
  .hutang-index-cell{
    color:#526176!important;
    font-size:12px;
    text-align:center;
  }
  .hutang-transaction-cell{ text-align:left; }
  .hutang-trx-link{
    min-height:26px;
    padding:5px 12px;
    border:0;
    border-radius:999px;
    background:#daf7e4;
    color:#17783e!important;
    font-weight:800;
  }
  .hutang-trx-link:hover{ background:#c8f0d6; color:#146735!important; }
  .hutang-status-cell .hutang-action-pay{
    min-width:60px;
    background:#f2b928;
    border-color:#f2b928;
    color:#1f2937;
  }
  .hutang-actions-cell .hutang-action-group{ justify-content:flex-start; }
  .hutang-page .hutang-table > tbody > .hutang-detail-row{
    display:block;
    margin:0 0 16px;
  }
  .hutang-page .hutang-table > tbody > .hutang-detail-row > td{
    display:block;
    overflow-x:auto;
    padding:0 17px 15px!important;
    border:1px solid #e2e8f0!important;
    border-top:0!important;
    border-radius:0 0 10px 10px;
    background:#fff!important;
    box-shadow:0 8px 22px rgba(16,24,40,.06)!important;
  }
  .hutang-page .hutang-detail-table{
    width:100%;
    min-width:860px;
    table-layout:auto;
    border:1px solid #e2e8f0;
    border-radius:8px;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    background:#fff;
  }
  .hutang-page .hutang-detail-table thead td,
  .hutang-page .hutang-detail-table tbody td{
    padding:11px 13px;
    border-top:0;
    border-right:1px solid #e2e8f0;
    border-bottom:1px solid #e2e8f0;
    background:#fff;
    color:#172033;
    font-size:12px;
  }
  .hutang-page .hutang-detail-table thead td{
    background:#fbfdff;
    color:#111827;
    font-weight:800;
  }
  .hutang-page .hutang-detail-table tr > *:last-child{ border-right:0; }
  .hutang-page .hutang-detail-table tbody tr:nth-child(even):not(.hutang-purchase-total) td{ background:#fff; }
  .hutang-page .hutang-detail-table .hutang-purchase-total td{
    padding:11px 13px;
    border-top:0;
    border-bottom:0;
    background:#fff!important;
    color:#172033!important;
    font-size:12px;
    font-weight:800;
  }
  .hutang-page .hutang-table > tfoot{
    display:block;
    margin-top:4px;
  }
  .hutang-page .hutang-table > tfoot > tr{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 17px;
    border:1px solid #d7e9ff;
    border-radius:8px;
    background:#eef7ff;
    box-shadow:0 8px 20px rgba(37,99,235,.07);
  }
  .hutang-page .hutang-table > tfoot > tr > th{
    display:block;
    padding:0;
    border:0;
    background:transparent;
    color:#1769e8!important;
    font-size:14px;
    font-weight:800;
  }
  .hutang-page #dataHutang nav{ margin-top:14px!important; }
  .hutang-page #dataHutang .pagination{ margin-bottom:0; }
  .hutang-page #dataHutang .page-link{
    border-color:#d8e1ed;
    color:#1769e8;
    font-size:12px;
  }


  @media (max-width:1199.98px){
    .hutang-page .filter-grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
      grid-template-areas:
        "sort limit"
        "user date"
        "supplier supplier"
        "actions actions";
    }
    .hutang-page .filter-supplier{ max-width:none; }
    .hutang-page .hutang-table > tbody > .hutang-main-row{
      grid-template-columns:28px repeat(3,minmax(170px,1fr));
    }
  }
  @media (max-width:991.98px){
    .hutang-summary-card{ margin-right:0; }
    .hutang-hero-art{ display:none; }
  }
  @media (max-width:767.98px){
    .hutang-page .filter-grid{
      grid-template-columns:1fr;
      grid-template-areas:
        "sort"
        "limit"
        "user"
        "date"
        "supplier"
        "actions";
    }
    .hutang-filter-actions .btn-group,
    .hutang-filter-actions .hutang-btn{ width:100%; }
    .hutang-page .pg-hero h1{ font-size:22px; }
    .hutang-hero-content{ min-height:88px; padding:16px 18px; flex-wrap:wrap; }
    .hutang-hero-icon{ width:46px; height:46px; flex-basis:46px; margin-right:13px; }
    .hutang-hero-art{ display:none; }
    .hutang-summary-card{
      justify-content:flex-start;
      width:100%;
      min-width:0;
      margin:10px 0 0 59px;
      text-align:left;
    }
    .hutang-page .hutang-table > tbody > .hutang-main-row{
      grid-template-columns:1fr;
      gap:11px;
    }
    .hutang-index-cell,
    .hutang-transaction-cell{ text-align:left; }
    .hutang-actions-cell .hutang-action-group{ flex-wrap:wrap; }
    .hutang-page .hutang-table > tfoot > tr{ align-items:flex-start; flex-direction:column; gap:5px; }
  }
</style>

<div class="container-fluid hutang-page" id="container-wrapper">
  <!-- HERO -->
  <div class="pg-hero mb-3">
    <div class="hutang-hero-content">
      <div class="hutang-hero-icon"><i class="fa fa-file-text-o"></i></div>
      <div class="hutang-hero-copy">
        <h1 class="h3 mb-1 font-weight-bold">Laporan Hutang Pembelian <span id="test"></span></h1>
        <p class="mb-0">Laporan hutang kepada supplier</p>
      </div>
      <div class="hutang-summary-card" aria-label="Ringkasan total hutang">
        <div class="hutang-summary-copy">
          <span>Total Hutang</span>
          <strong id="ringkasan-total-hutang">—</strong>
          <small id="ringkasan-sumber-hutang">Menunggu data...</small>
        </div>
      </div>
      <div class="hutang-hero-art" aria-hidden="true">
        <i class="fa fa-clipboard"></i>
        <span><i class="fa fa-money"></i></span>
      </div>
      <!--ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="./">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Laporan Hutang Pembelian</li>
      </ol-->
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <div class="card shadow-soft rounded-2xl hutang-content-card">
        <div class="card-header hutang-filter-section">
          <!-- FILTER GRID (tanpa ubah ID / event) -->
          <div class="filter-grid">
            <div class="fg-span-2 fg-sm-4 filter-sort">
              <label class="fg-label"><i class="fa fa-sort-amount-desc"></i> URUTAN</label>
              <select id="sortBy" class="form-control custom-select" onchange="FilterHutang()">
                <option value="DESC">DESC</option>
                <option value="ASC">ASC</option>
              </select>
            </div>

            <div class="fg-span-2 fg-sm-4 filter-limit">
              <label class="fg-label"><i class="fa fa-list-ol"></i> LIMIT</label>
              <select id="limits" name="limits" class="form-control custom-select" onchange="FilterHutang()">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="500">500</option>
              </select>
            </div>

            <div class="fg-span-3 fg-sm-6 filter-user">
              <label class="fg-label"><i class="fa fa-user-o"></i> PENGGUNA</label>
              <select name="user" id="user" class="custom-select" onchange="FilterHutang()">
                <option value="0" style="font-weight:bold;border-bottom:1px solid #ddd;">PILIH</option>
                <?php  
                  foreach ($pilihan AS $values){
                    if($this->session->level=='admin' OR $this->session->level=='owner'){
                      if($this->session->idu==$values['id_user']){
                        echo '<option value="'.$values['id_user'].'" selected>'.$values['nama_lengkap'].'</option>';
                      }else{
                        echo '<option value="'.$values['id_user'].'">'.$values['nama_lengkap'].'</option>';
                      }
                    }else{
                      if($this->session->idu==$values['id_user']){
                        echo '<option value="'.$values['id_user'].'" selected>'.$values['nama_lengkap'].'</option>';
                      }
                    }
                  }
                ?>
              </select>
            </div>

            <div class="fg-span-3 fg-sm-6 filter-date">
              <label class="fg-label"><i class="fa fa-calendar"></i> TANGGAL</label>
              <div id="date-pembelian">
                <div class="input-group input-group-sm">
                  <div class="input-group-prepend">
                    <span class="input-group-text">Rentang</span>
                  </div>
                  <input type="text" onchange="FilterHutang()" class="form-control date-order" name="range" id="tgl" placeholder="Pilih tanggal">
                </div>
              </div>
            </div>

            <div class="fg-span-4 filter-supplier">
              <label class="fg-label"><i class="fa fa-search"></i> SUPPLIER</label>
              <input type="text" id="keywords" class="form-control" placeholder="Ketik nama supplier..." onkeyup="FilterHutang();"/>
            </div>

            <div class="fg-span-12 hutang-filter-actions filter-actions">
              <div class="btn-group btn-group-sm" role="group" aria-label="Aksi">
                <button class="btn hutang-btn hutang-btn-search" onclick="FilterHutang();" type="button" title="Cari"><i class="fa fa-search"></i> Cari</button>
                <button class="btn hutang-btn hutang-btn-pdf print_pembelian" data-url="export" type="button" data-toggle="tooltip" data-original-title="Cetak" data-placement="left"><i class="fa fa-file-pdf-o"></i> PDF</button>
                <!--button class="btn btn-primary url_doc" data-url="pembelian" type="button" data-toggle="tooltip" data-original-title="Dok pembelian" data-placement="left"><i class="fa fa-info-circle"></i> Dok</button-->
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="post-list" id="dataHutang"></div>
    </div>
  </div>
</div>

<!-- ============ MODALS ============ -->
<div class="modal fade modal-fullscreen-xl" id="pembelian" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title" id="exampleModalLabel">Form pembelian</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body"><div class="load-modal"></div></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success simpan_pembelian">Simpan</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

<!-- Bayar pembelian -->
<div class="modal fade" id="bayar-piutang" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content flat">
      <div class="modal-header py-1">
        <h4 class="modal-title-piutang m-0">BAYAR UTANG</h4>
      </div>
      <div class="modal-body pb-0">
        <div class="form-group row mb-2">
          <label class="col-sm-4 col-12 col-form-label">
            <span class="d-block mb-1">BAYAR</span>
            <div class="custom-control custom-radio d-inline-block mr-3">
              <input type="hidden" id="idpembelianpiutang" name="idpembelianpiutang">
              <input type="hidden" id="no_transaksi" name="no_transaksi">
              <input type="radio" id="bayarfull" name="bpiutang" class="custom-control-input Bayarp" value="1" checked>
              <label class="custom-control-label" for="bayarfull">FULL</label>
            </div>
            <div class="custom-control custom-radio d-inline-block">
              <input type="radio" id="bayarsebagian" name="bpiutang" class="custom-control-input Bayarp" value="2">
              <label class="custom-control-label" for="bayarsebagian">SEBAGIAN</label>
            </div>
          </label>
          <div class="col-sm-8 col-12">
            <div class="input-group input-group-sm mb-2">
              <div class="input-group-prepend">
                <span class="input-group-text" for="tanggal_bayar">TGL. BAYAR</span>
              </div>
              <input type="text" id="tanggal_bayar" name="tanggal_bayar" class="form-control form-control-sm" required>
              <div class="input-group-prepend">
                <span class="input-group-text tujuan_kas_sumber" for="cara_bayar_piutang">SUMBER KAS</span>
              </div>
              <select name="cara_bayar_piutang" id="cara_bayar_piutang" class="custom-select form-control form-control-sm" data-valueKey="id" data-displayKey="name" required></select>
            </div>
          </div>
        </div>

        <div class="form-group row mb-2">
          <label for="total_piutang" class="col-sm-4 col-12 col-form-label">TOTAL PIUTANG</label>
          <div class="col-sm-8 col-12">
            <input id="total_piutang" name="total_piutang" type="text" value="0" class="form-control form-control-sm" readonly>
          </div>
        </div>

        <div class="form-group row mb-2 saldoshow">
          <label for="saldo_kas_bayar" class="col-sm-4 col-12 col-form-label">SALDO KAS</label>
          <div class="col-sm-8 col-12">
            <input id="saldo_kas_bayar" name="saldo_kas_bayar" type="text" class="form-control form-control-sm" readonly>
          </div>
        </div>

        <div class="form-group row mb-2">
          <label for="total_bayar_piutang" class="col-sm-4 col-12 col-form-label">TOTAL BAYAR</label>
          <div class="col-sm-8 col-12">
            <input id="total_bayar_piutang" name="total_bayar_piutang" type="text" value="0" class="form-control form-control-sm" readonly>
          </div>
        </div>

        <div class="form-group row mb-2">
          <label for="sisa_piutang" class="col-sm-4 col-12 col-form-label">SISA</label>
          <div class="col-sm-8 col-12">
            <input id="sisa_piutang" name="sisa_piutang" type="text" value="0" class="form-control form-control-sm" readonly>
          </div>
        </div>

        <div class="form-group row mb-2">
          <label for="nominal" class="col-sm-4 col-12 col-form-label">NOMINAL UANG</label>
          <div class="col-sm-8 col-12">
            <div class="btn-group" role="group">
              <button class="btn btn-primary btn-sm flat n-piutang" data-id="50000">50.000</button>
              <button class="btn btn-secondary btn-sm flat n-piutang" data-id="100000">100.000</button>
              <button class="btn btn-success btn-sm flat n-piutang" data-id="200000">200.000</button>
              <button class="btn btn-info btn-sm flat n-piutang" data-id="300000">300.000</button>
              <button class="btn btn-warning btn-sm flat n-piutang" data-id="400000">400.000</button>
              <button class="btn btn-danger btn-sm flat n-piutang" data-id="500000">500.000</button>
              <button type="button" onclick="uang_pas_piutang();" class="btn btn-dark btn-sm flat lunasd">UANGPAS</button>
            </div>
          </div>
        </div>

        <div class="form-group row mb-2">
          <label for="jml_bayar_piutang" class="col-sm-4 col-12 col-form-label">JUMLAH BAYAR</label>
          <div class="col-sm-8 col-12">
            <input id="jml_bayar_piutang" name="jml_bayar_piutang" type="text" class="form-control form-control-sm input" onkeyup='formatNumber(this);'>
          </div>
        </div>

        <div class="form-group row mb-2">
          <label for="keterangan_kas" class="col-sm-4 col-12 col-form-label">CATATAN</label>
          <div class="col-sm-8 col-12">
            <input id="keterangan_kas" name="keterangan_kas" type="text" class="form-control form-control-sm input">
          </div>
        </div>

        <div class="form-group row">
          <div class="col-12 load-bayar-piutang"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary flat bayar_lunas_piutang" id="bayar_lunas_piutang" disabled>BAYAR</button>
        <button type="button" class="btn btn-danger flat" data-dismiss="modal">TUTUP</button>
      </div>
    </div>
  </div>
</div>

<!-- Form print (tetap) -->
<form id="form_print" action="<?=base_url();?>pembukuan/print_hutang" method="post" target="_blank">
  <input type="hidden" name="tanggal" id="tanggal_print">
  <input type="hidden" name="id_user" id="print_user_dari" value="0">
</form>

<!-- ============ SCRIPTS (logika TETAP) ============ -->
<script>
  var tgl = "<?=$tgl;?>";

  // Date range tetap pakai konfigurasi lama (variabel global tgl_awal, end diasumsikan sudah tersedia)
  $('.date-order').daterangepicker({
    opens: 'right',
    ranges: {
      'Hari ini': [moment(), moment()],
      'Bulan ini': [moment().startOf('month'), moment()],
      'Tahun ini': [moment().startOf('year'), moment()],
      '7 Hari Terakhir': [moment().subtract('days', 6), moment()],
      '30 Hari Terakhir': [moment().subtract('days', 29), moment()],
    },
    "dateLimit": {"days": 365},
    showDropdowns: true,
    "linkedCalendars": false,
    "startDate": tgl_awal,
    "endDate": end,
    "maxDate": end,
    locale: {
      customRangeLabel: 'Pilih Tanggal',
      format: 'DD/MM/YYYY',
      applyLabel: 'Pilih',
      separator: " - ",
      "monthNames": ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],
    }
  }, function(startDate, endDate, label){
      start = startDate.format('DD-MM-YYYY');
      end   = endDate.format('DD-MM-YYYY');
      const current_url = document.location.href;
      const new_url = new URL(current_url);
      new_url.searchParams.set('daterange', start + ' - ' + end);
      history.pushState({}, null, new_url);
  });

  // Tooltip bootstrap bila ada
  if (typeof $().tooltip === 'function') {
    $('[data-toggle="tooltip"]').tooltip();
  }

  $(document).on('click','.print_pembelian',function(e){
    e.preventDefault();
    var total_u = $("#subtotal").val();
    var tgl = $("#tgl").val();
    var jenis = $("#jenis_p").val();
    var user = $("#user").val();
    $("#tanggal_print").val(tgl);
    $("#jenis_cetak_pengeluaran").val(jenis);
    $("#print_user_dari").val(user);
    if(total_u==0){
      sweet('Peringatan!!!','Maaf total masih kosong','warning','warning');
    }else{
      $("#form_print").submit();
    }
  });

  $('.input').on('click', function(){ this.select(); });

  // Load awal
  FilterHutang();

  function FilterHutang(page_num){
    page_num = page_num?page_num:0;
    var keywords = $('#keywords').val();
    var sortBy   = $('#sortBy').val();
    var limits   = $('#limits').val();
    var user     = $('#user').val();
    var tgl      = $('#tgl').val();

    $.ajax({
      type: 'POST',
      url: base_url + 'pembukuan/ajaxHutang/'+page_num,
      data:{page:page_num,sortBy:sortBy,limits:limits,user:user,tgl:tgl,keywords:keywords},
      beforeSend: function(){ $('body').loading(); },
      success: function(html){
        $('#dataHutang').html(html);
        updateRingkasanHutang(html);
        $('body').loading('stop');
      },
      error: function (xhr, ajaxOptions, thrownError) {
        sweet('Peringatan!!!',thrownError,'warning','warning');
        $('body').loading('stop');
      }
    });
  }

  function updateRingkasanHutang(html){
    var $temp = $('<div/>').html(html || '');
    var $total = $temp.find('[data-role="hutang-total"]').first();
    var nilai = parseFloat($total.attr('data-total'));

    if(!isFinite(nilai)){
      $('#ringkasan-total-hutang').text('—');
      $('#ringkasan-sumber-hutang').text('total tidak ditemukan');
      return;
    }

    $('#ringkasan-total-hutang').text('Rp ' + Math.round(nilai).toLocaleString('id-ID'));
    $('#ringkasan-sumber-hutang').text('dihitung dari total hutang');
  }

  $(document).on('click','.bayar_hutang',function(e){
    e.preventDefault();
    var dataID = $(this).attr('data-id');
    var info   = $(this).attr('data-info');
    var total  = $(this).attr('data-total');
    var trx    = $(this).attr('data-trx');

    $("#no_transaksi").val(trx);
    var user = $("#user").val();

    if(info=='bayarh'){
      $(".tujuan_kas_sumber").html('SUMBER KAS');
      $(".modal-title-piutang").html('BAYAR HUTANG USAHA');
      $(".saldoshow").show();
    }else{
      $(".tujuan_kas_sumber").html('TUJUAN KAS');
      $(".modal-title-piutang").html('BAYAR UTANG USAHA');
      $(".saldoshow").hide();
    }

    $("#idpembelianpiutang").val(dataID);
    $.ajax({
      'url': base_url + 'pembelian/load_bayar',
      'method': 'POST',
      data :{id:dataID,info:info,user:user},
      beforeSend: function(){ $('body').loading(); },
      success: function(data) {
        if(data=='error'){
          sweet('Peringatan!!!','Maaf Data telah direkap & tidak bisa di edit','warning','warning');
        }else{
          $('#bayar-piutang').modal({backdrop: 'static', keyboard: false});
          $(".idpiutang").html(dataID);
          $(".load-bayar-piutang").html(data);
          var bayar = $("#total_sudah_bayar_piutang").val();
          var sisa = parseInt(total) - parseInt(bayar);
          $("#total_piutang").val(formatMoney(total, 0, "Rp."));
          $("#total_bayar_piutang").val(formatMoney(bayar, 0, "Rp."));
          $("#sisa_piutang").val(formatMoney(sisa, 0, "Rp."));
        }
        jenis_bayar_piutang();
        load_bpiutang();
        $('body').loading('stop');
      },
      error: function (xhr, ajaxOptions, thrownError) {
        sweet('Peringatan!!!',thrownError,'warning','warning');
      }
    })
  });

  function jenis_bayar_piutang(){
    $.ajax({
      url : base_url + "pembelian/akun_kas",
      type : "post",
      dataType : "json",
      success : function(response) {
        var msize = response.length;
        $("#cara_bayar_piutang").prop("disabled", false).empty().append("<option value=''>Pilih</option>");
        for (var i=0;i<msize;i++){
          var val = response[i]["id"];
          var teks = response[i]["name"];
          $("#cara_bayar_piutang").append("<option value='" + val + "'>" + teks + "</option>");
        }
      }
    });
  }

  $("#cara_bayar_piutang").change(function() {
    var id = $(this).val();
    $("#saldo_kas_bayar").val('');
    $.ajax({
      url: base_url + "kas/load_kas",
      type: 'post',
      data: {id:id,type:'cari'},
      dataType: 'json',
      success: function (response) {
        $('#saldo_kas_bayar').val(formatMoney(response.nilai,0,"Rp."));
        if(response.nilai > 0){
          $(".bayar_lunas_piutang").attr("disabled", false);
        }
      },
      error: function (xhr, ajaxOptions, thrownError) {
        sweet('Peringatan!!!',thrownError,'warning','warning');
      }
    });
  });

  function load_bpiutang(){
    $("#bayarfull").each(function () {
      var total_piutang = angka($("#total_piutang").val());
      var total_bayar_piutang = angka($("#total_bayar_piutang").val());
      var piutang = (total_bayar_piutang <= 0) ? total_piutang : (parseInt(total_piutang) - parseInt(total_bayar_piutang));
      if(this.checked) {
        $("#sisa_piutang").val(formatMoney(piutang, 0, "Rp."));
        $("#jml_bayar_piutang").val(formatMoney(piutang, 0, "Rp.")).attr("readonly",true);
        $(".n-pembelian").attr("disabled",true);
      }else{
        $("#jml_bayar_piutang").val(formatMoney(0, 0, "Rp."));
        $("#sisa_piutang").val(formatMoney(piutang, 0, "Rp."));
        $("#total_dibayarkan").val(0);
      }
    });
  }

  $(".n-piutang").click(function() {
    var ubayar = $(this).attr('data-id');
    var sisa_piutang = angka($("#sisa_piutang").val());
    if(ubayar > parseInt(sisa_piutang)){
      $("#jml_bayar_piutang").val(formatMoney(sisa_piutang, 0, "Rp."));
      $("#kembalian_bayar").val(formatMoney(kembalian, 0, "Rp."));
      $(".bayar_lunas_piutang").attr("disabled",false);
    }else{
      $("#jml_bayar_piutang").val(formatMoney(ubayar, 0, "Rp."));
      $("#kembalian_bayar").val(formatMoney(0, 0, "Rp."));
    }
  });

  $("#bayarfull").change(function() {
    if(this.checked) {
      var total_piutang = angka($("#total_piutang").val());
      var total_bayar_piutang = angka($("#total_bayar_piutang").val());
      var piutang = (total_bayar_piutang <= 0) ? total_piutang : (parseInt(total_piutang) - parseInt(total_bayar_piutang));
      $("#jml_bayar_piutang").val(formatMoney(piutang, 0, "Rp.")).attr("readonly",true);
      $(".n-piutang").attr("disabled",true);
      $("#kembalian_bayar").val(formatMoney(0, 0, "Rp."));
      $(".bayar_lunas_piutang").attr("disabled",false);
    }
  });

  $("#bayarsebagian").change(function() {
    if(this.checked) {
      $("#jml_bayar_piutang").val(formatMoney(0,0,"Rp.")).attr("readonly",false);
      $(".n-piutang").attr("disabled",false);
      $("#kembalian_bayar").val(formatMoney(0, 0, "Rp."));
    }
  });

  function uang_pas_piutang() {
    var total_piutang = angka($("#total_piutang").val());
    var piutang = angka($("#sisa_piutang").val());
    if(piutang <= 0){ piutang = total_piutang; }
    $("#jml_bayar_piutang").val(formatMoney(piutang, 0, "Rp."));
    $("#kembalian_bayar").val(formatMoney(0, 0, "Rp."));
  }

  $(".bayar_lunas_piutang").on('click', function(e) {
    e.preventDefault();
    var id = $("#idpembelianpiutang").val();
    var no_transaksi = $("#no_transaksi").val();
    var cara_bayar = $("#cara_bayar_piutang").val();
    var sumber_kas = $("#tujuan_kas").val();
    var keterangan_kas = $("#keterangan_kas").val();
    var jml_bayar = angka($("#jml_bayar_piutang").val());
    var total = angka($("#total_piutang").val());
    var sisa_piutang = angka($("#total_bayar_piutang").val());
    var saldo_kas_bayar = angka($("#saldo_kas_bayar").val());
    var tanggal_bayar = $.trim($("#tanggal_bayar").val());

    if(tanggal_bayar==''){ sweet('Peringatan!!!','Tanggal bayar tidak boleh kosong','warning','warning'); return; }
    if(sisa_piutang==total){ sweet('Peringatan!!!','Piutang sudah lunas','warning','warning'); return; }
    if(sumber_kas==0){ sweet('Peringatan!!!','Maaf tujuan kas belum dipilih','warning','warning'); return; }
    if(cara_bayar==0){ sweet('Peringatan!!!','Maaf cara bayar belum dipilih','warning','warning'); return; }
    if(parseInt(jml_bayar)==0){ sweet('Peringatan!!!','Maaf jumlah bayar masih kosong','warning','warning'); return; }
    if(parseInt(saldo_kas_bayar) < parseInt(jml_bayar)){ sweet('Peringatan!!!','Maaf saldo tidak mencukupi','warning','warning'); return; }
    if (angka($('#total_piutang').val()) == '' || angka($('#total_piutang').val()) == 0){
      sweet('Peringatan!!!','Total masih kosong','warning','warning'); return;
    }

    $.ajax({
      type: "POST",
      url: base_url + "pembelian/simpan_bayar_piutang",
      data: {tanggal_bayar:tanggal_bayar,id:id,total:total,jml_bayar:jml_bayar,cara_bayar:cara_bayar,sumber_kas:sumber_kas,no_transaksi:no_transaksi,keterangan_kas:keterangan_kas},
      dataType: "json",
      beforeSend: function(){ $('body').loading(); },
      success: function(res) {
        if (res.status == 200) {
          sweet_time(500,'Status!!!',res.msg);
          FilterHutang();
        } else {
          sweet('Peringatan!!!',res.msg,'warning','warning');
        }
        $("#bayar-piutang").modal('hide');
        $('body').loading('stop');
      },
      error: function (xhr, ajaxOptions, thrownError) {
        $('body').loading('stop');
        sweet('Peringatan!!!',thrownError,'warning','warning');
      }
    });
  });

  $('#bayar-piutang').on('hide.bs.modal', function() {
    $("#tujuan_kas").val('').attr('disabled',true);
    $("#jml_bayar_piutang").val(formatMoney(0, 0, "Rp."));
    $("#kembalian_bayar").val(formatMoney(0, 0, "Rp."));
    FilterHutang();
  });

  $('#pembelian').on('hide.bs.modal', function() { FilterHutang(); });

  $(document).on("click", ".hapus_bayar", function(event) {
    event.preventDefault();
    var sampleID = $(this).attr("data-id");
    var rcpt = $(this).attr("data-idin");
    var idbayar = $(this).attr("data-bayar");
    var min = $(this).attr("data-jml");
    $.ajax({
      type : "POST",
      url : base_url + "pembelian/del_bayar",
      data : { id: sampleID, noin: rcpt, idbayar: idbayar, jml: min },
      dataType : "json",
      beforeSend : function() { $(".tbayar").loading({zIndex:1060}); },
      success : function(stats) {
        if (stats.ok == "ok") {
          var max = angka($("#jml_bayar_piutang").val());
          var sisa_piutang = angka($("#sisa_piutang").val());
          var total_bayar_piutang = angka($("#total_bayar_piutang").val());
          var value = parseInt(angka(sisa_piutang)) + parseInt(min);
          var total_bayar = parseInt(total_bayar_piutang) - parseInt(min);
          var val = parseInt(max) - parseInt(min);
          $("#sisa_piutang").val(formatMoney(value, 0, "Rp."));
          $("#jml_bayar_piutang").val(formatMoney(val, 0, "Rp."));
          $("#total_bayar_piutang").val(formatMoney(total_bayar, 0, "Rp."));
          load_list_bayar(rcpt);
        }
        $(".tbayar").loading('stop');
      },
      error : function(res, status, httpMessage) {
        sweet("Peringatan!!!", httpMessage, "warning", "warning");
        $(".tbayar").loading('stop');
      }
    });
  });

  $(document).on("click", ".del_bayar_piutang", function(event) {
    event.preventDefault();
    var sampleID = $(this).attr("data-id");
    var rcpt = $(this).attr("data-idin");
    var idbayar = $(this).attr("data-bayar");
    var min = $(this).attr("data-jml");
    $.ajax({
      type : "POST",
      url : base_url + "pembelian/del_bayar",
      data : { id: sampleID, noin: rcpt, idbayar: idbayar, jml: min },
      dataType : "json",
      beforeSend : function() { $(".tbayar").loading({zIndex:1060}); },
      success : function(stats) {
        if (stats.ok == "ok") {
          var max = angka($("#jml_bayar_piutang").val());
          var sisa_piutang = angka($("#sisa_piutang").val());
          var total_bayar_piutang = angka($("#total_bayar_piutang").val());
          var value = parseInt(angka(sisa_piutang)) + parseInt(min);
          var total_bayar = parseInt(total_bayar_piutang) - parseInt(min);
          var val = parseInt(max) - parseInt(min);
          $("#sisa_piutang").val(formatMoney(value, 0, "Rp."));
          $("#jml_bayar_piutang").val(formatMoney(val, 0, "Rp."));
          $("#total_bayar_piutang").val(formatMoney(total_bayar, 0, "Rp."));
          load_bayar_piutang(rcpt);
        }
        $(".tbayar").loading('stop');
      },
      error : function(res, status, httpMessage) {
        sweet("Peringatan!!!", httpMessage, "warning", "warning");
        $(".tbayar").loading('stop');
      }
    });
  });

  function load_bayar_piutang(id) {
    $.ajax({
      'url': base_url + 'pembelian/list_bayar',
      'method': 'POST',
      data :{id:id},
      success: function(data) {
        $(".load-bayar-piutang").html(data);
      },
      error: function (xhr, ajaxOptions, thrownError) {
        sweet('Peringatan!!!',thrownError,'warning','warning');
      }
    })
  }

  $(document).on('click','.tambah_pembelian',function(e){
    e.preventDefault();
    var dataID = $(this).attr('data-id');
    var info = $(this).attr('data-info');
    var user = $("#user").val();
    $.ajax({
      'url': base_url + 'pembelian/load_modal',
      'method': 'POST',
      data :{id:dataID,info:info,user:user},
      success: function(data) {
        if(data=='error'){
          sweet('Peringatan!!!','Maaf Data telah direkap & tidak bisa di edit','warning','warning');
        }else{
          $("#pembelian").modal('show');
          $(".load-modal").html(data);
        }
      },
      error: function (xhr, ajaxOptions, thrownError) {
        sweet('Peringatan!!!',thrownError,'warning','warning');
      }
    })
  });

  $(document).on('click','.simpan_pembelian',function(e){
    e.preventDefault();
    var saldo_kas = angka($('#saldo_kas').val());
    var jumlah_kas = angka($('#jumlah_kas').val());
    var jenis_bayar = $('#jenis_bayar').val();

    if($('#dari_kas').val()=='' && jenis_bayar==1){
      showNotif('top-right','Peringatan!!!','Akun kas keluar harus dipilih','warning');
      $('#dari_kas').focus(); return;
    }
    if(angka($('#saldo_kas').val())=='0' && jenis_bayar==1){
      showNotif('top-right','Peringatan!!!','Saldo kas kosong','warning'); return;
    }
    if(parseInt(jumlah_kas) > parseInt(saldo_kas) && jenis_bayar==1){
      showNotif('top-right','Peringatan!!!','Maaf jumlah saldo kas kurang','warning'); return;
    }
    if($('#tanggal_beli').val()==''){
      showNotif('top-right','Peringatan!!!','Tanggal harus diisi','warning');
      $('#tanggal_beli').focus(); return;
    }
    if($('#keterangan_kas').val()==''){
      showNotif('top-right','Peringatan!!!','Keterangan harus diisi','warning');
      $('#keterangan_kas').focus(); return;
    }

    var readersLength = $("#table-beli > tbody").children().length;
    for (var rr=0; rr<readersLength; rr++) {
      if ($("#idAkun_" + rr).val() == "") { showNotif("top-right","Peringatan!!!","Item beli belum dipilih","warning"); $("#idAkun_" + rr).focus(); return; }
      if ($("#keterangan_" + rr).val() == "") { showNotif("top-right","Peringatan!!!","Keterangan masih kosong","warning"); $("#keterangan_" + rr).focus(); return; }
      if ($("#supplier_" + rr).val() == "") { showNotif("top-right","Peringatan!!!","Supplier belum dipilih","warning"); $("#supplier_" + rr).focus(); return; }
      if ($("#jumlah_" + rr).val() == "")   { showNotif("top-right","Peringatan!!!","Jumlah masih kosong","warning"); $("#jumlah_" + rr).focus(); return; }
      if (angka($("#harga_" + rr).val()) == "") { showNotif("top-right","Peringatan!!!","Harga masih kosong","warning"); $("#harga_" + rr).focus(); return; }
    }
    if(angka($('#jumlah_kas').val())==''){
      showNotif('top-right','Peringatan!!!','Jumlah Kas keluar masih kosong','warning');
      $('#jumlah_kas').focus(); return;
    }

    var formElements = $("#form-add-beli").serialize();
    $.ajax({
      url: base_url + 'pembelian/simpan_pembelian',
      data: formElements,
      method: 'POST',
      dataType:'json',
      beforeSend: function(){ $("body").loading({zIndex:1060}); },
      success: function(data) {
        if(data.status==true){
          FilterHutang();
          sweet('Sukses!!!',data.msg,'success','success');
          $('#pembelian').modal('hide');
        }else{
          sweet('Peringatan!!!','Data gagal disimpan','warning','warning');
        }
        $('body').loading('stop');
      },
      error : function(res, status, httpMessage) {
        $('body').loading('stop');
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  });

  function showConfirm (no,idtrans) {
    confirm.show({
      title: 'Hapus Pembelian',
      content: 'Pembelian akan di hapus, Anda Yakin?',
      btns: [{
        callback: function(instance){
          instance.close = true;
          $.ajax({
            'url': base_url + 'pembelian/hapus_pembelian',
            'method': 'POST',
            data :{id:no,idtrans:idtrans},
            success: function(data) { FilterHutang(); },
            error: function (xhr, ajaxOptions, thrownError) {
              sweet('Peringatan!!!',thrownError,'warning','warning');
            }
          })
        }
      }, {
        text: 'Tidak',
        callback: function(){ /* batal */ }
      }]
    })
  }

  var date2 = new Date();
  $('#tanggal_bayar').datepicker({
    format: 'dd/mm/yyyy',
    autoclose: true,
    todayHighlight: true,
    endDate: "today",
    todayBtn: 'linked',
  });
  $('#tanggal_bayar').val(tgl);

  function Math_Kas(){
    var readersLength = $("#table-beli > tbody").children().length;
    var total = 0, jumlah=[], harga=[], subtotal=[];
    for (var rr=0; rr<readersLength; rr++) {
      if ($("#jumlah_" + rr).length == 0) continue;
      jumlah[rr] = angka($("#jumlah_" + rr).val());
      harga[rr]  = angka($("#harga_" + rr).val());
      subtotal[rr] = parseInt(jumlah[rr]) * parseInt(harga[rr]);
      total = parseInt(total) + parseInt(subtotal[rr]);
      document.getElementById("total_"+rr).value = formatMoney(subtotal[rr], 0, "Rp.");
    }
    document.getElementById("jumlah_kas").value = formatMoney(total, 0, "Rp.");
  }
</script>
