<div class="container-fluid produk-page" id="container-wrapper">
  <div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Data produk</h1>
    <a href="<?=base_url();?>produk/export_barcode" target="_blank" class="btn produk-mobile-export-top">
      <i class="fa fa-barcode"></i> Export Barcode
    </a>
    
  </div>

  <div class="row">
    <div class="col-lg-12 mb-4">
      <form action="#" method="post">
        <div class="card">
          <div class="card-header pb-0">
            <!-- Toolbar responsif -->
            <div class="toolbar-wrap">
              <!-- LIMIT -->
              <div class="input-group input-group-sm toolbar-item">
                <div class="input-group-prepend">
                  <span class="input-group-text produk-label-desktop">LIMIT</span>
                  <label class="input-group-text produk-label-mobile" for="limits">Limit</label>
                </div>
                <select id="limits" name="limits" class="form-control custom-select" onchange="search_Produk()">
                  <option value="12">12</option>
                  <option value="24">20</option>
                  <option value="50">50</option>
                  <option value="100">100</option>
                </select>
              </div>

              <!-- SORT -->
              <div class="input-group input-group-sm toolbar-item">
                <div class="input-group-prepend">
                  <span class="input-group-text produk-label-desktop">SORT</span>
                  <label class="input-group-text produk-label-mobile" for="sortBy">Sort</label>
                </div>
                <select id="sortBy" class="form-control custom-select" onchange="search_Produk()">
                  <option value="ASC">ASC</option>
                  <option value="DESC" selected>DESC</option>
                </select>
              </div>

              <!-- KATEGORI -->
              <div class="input-group input-group-sm toolbar-item">
                <div class="input-group-prepend">
                  <span class="input-group-text produk-label-desktop">KATEGORI</span>
                  <label class="input-group-text produk-label-mobile" for="jenis">Kategori</label>
                </div>
                <select id="jenis" name="jenis" class="form-control custom-select" onchange="search_Produk()">
                  <option value="">Pilih</option>
                  <?php foreach($jenis AS $val){
                    echo '<option value="'.$val->id_jenis.'">'.$val->jenis_cetakan.'</option>';
                  } ?>
                </select>
              </div>

              <!-- PENCARIAN -->
              <div class="toolbar-search toolbar-grow">
                <div class="produk-search-field">
                  <i class="fa fa-search"></i>
                  <input type="text" id="keywords" class="form-control form-control-sm"
                         placeholder="Cari data produk" onkeyup="searchProdukDebounced();" />
                </div>
              </div>

              <!-- ACTIONS -->
              <div class="input-group-append toolbar-actions">
                <button class="btn btn-danger btn-sm clear_cari" type="button"><i class="fa fa-times"></i> Clear</button>
                <a href="#" data-toggle="modal" data-target="#OpenModal" data-id="0" data-toggle="tooltip"
                   class="btn btn-info btn-sm edit_produk" data-original-title="Tambah Produk">
                   <i class="fa fa-plus fa-1x"></i> Tambah
                </a>
                <!--
                <a href="#" data-toggle="modal" data-target="#modalupload" data-id="0" data-toggle="tooltip"
                   class="btn btn-success btn-sm" data-original-title="Import Produk"><i class="fa fa-file-excel-o fa-1x"></i> Import</a>
                <a href="<?=base_url();?>produk/export_produk" data-toggle="tooltip" class="btn btn-info btn-sm"
                   data-original-title="Export Produk"><i class="fa fa-file-excel-o fa-1x"></i> Export</a>
                -->
                <a href="<?=base_url();?>produk/export_barcode" target="_blank" data-toggle="tooltip"
                   class="btn btn-success btn-sm" data-original-title="Export Barcode"><i class="fa fa-barcode fa-1x"></i> Export</a>
                <!--button class="btn btn-primary btn-sm url_doc" data-url="produk" type="button" data-toggle="tooltip"
                        data-original-title="Dok Produk" data-placement="left"><i class="fa fa-info-circle"></i></button-->
              </div>
            </div>
          </div>

          <div class="card-body" id="dataProduk">
            <div class="row produk-desktop-grid">
              <?php if(!empty($result)){
                $no = 1;
                foreach ($result as $row){
                  if ($row['pub'] == 1){
                    $aktif ='<i class="fa fa-check-circle"></i>';
                    $text ='text-white';
                  }else{
                    $aktif = '<i class="fa fa-check-circle-o"></i>';
                    $text ='text-white-50';
                  }
                  $hapus = '<button type="button" class="btn btn-danger rounded-0 text-white" data-id="'.$row['id'].'" data-toggle="modal" data-target="#confirm-delete" href="#"><i class="fa fa-trash "></i> Hapus</button>';
              ?>
              <!-- Kartu responsif: full di xs, 1/2 di sm, 1/3 di md, 1/4 di lg++ -->
              <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
                <div class="card rounded-0 h-100 d-flex flex-column">
                  <div class="barcode-wrap pt-2 px-2 text-center">
                    <svg id="itf-1<?=$no;?>" class="barcode-svg"></svg>
                  </div>
                  <script>JsBarcode("#itf-1<?=$no;?>", "<?=$row['barcode'];?>", {format: "EAN13"});</script>

                  <div class="card-body-p px-3 pb-2">
                    <h2 class="name h6 mb-1"><?=$row['title'];?></h2>
                    <h4 class="job-title small text-muted mb-0"><?=$row['jenis_cetakan'];?></h4>
                  </div>

                  <div class="card-footer-p mt-auto px-3 pb-3">
                    <div class='btn-group btn-group-sm rounded-0' role='group'>
                      <button type='button' class='btn btn-info btn-sm rounded-0' data-id="<?=$row["id"];?>">
                        <span class='icon <?=$text;?>'><?=$aktif;?></span>
                      </button>
                      <button type='button' class='btn btn-info btn-sm rounded-0' data-toggle='modal'
                              data-target='#OpenModal' data-id="<?=$row["id"];?>" data-mod='edit'>
                        <i class='fa fa-edit'></i> Edit
                      </button>
                      <?=$hapus;?>
                    </div>
                  </div>
                </div>
              </div>
              <?php $no++; } } ?>
            </div>
            <div class="produk-mobile-list">
              <?php if(!empty($result)){
                $no = 1;
                foreach ($result as $row){
                  $hapus = '<button type="button" class="btn btn-danger btn-sm text-white" data-id="'.$row['id'].'" data-toggle="modal" data-target="#confirm-delete"><i class="fa fa-trash"></i> Hapus</button>';
              ?>
              <div class="produk-mobile-card">
                <div class="produk-mobile-barcode">
                  <svg id="produk-mobile-<?=$no;?>" class="produk-mobile-barcode-svg"></svg>
                </div>
                <script>JsBarcode("#produk-mobile-<?=$no;?>", "<?=$row['barcode'];?>", {format: "EAN13", height: 46, fontSize: 14, margin: 0});</script>
                <div class="produk-mobile-info">
                  <div class="produk-mobile-title"><?=$row['title'];?></div>
                  <div class="produk-mobile-category"><?=$row['jenis_cetakan'];?></div>
                </div>
                <div class="produk-mobile-actions">
                  <button type="button" class="btn btn-info btn-sm text-white" data-toggle="modal"
                          data-target="#OpenModal" data-id="<?=$row["id"];?>" data-mod="edit">
                    <i class="fa fa-edit"></i> Edit
                  </button>
                  <?=$hapus;?>
                  <button type="button" class="produk-mobile-menu" aria-label="Menu produk">
                    <i class="fa fa-ellipsis-v"></i>
                  </button>
                </div>
              </div>
              <?php $no++; } } ?>
            </div>
            <nav aria-label="Page navigation" class="mt-2">
              <?php echo $this->ajax_pagination->create_links(); ?>
            </nav>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

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

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="OpenModal" role="dialog" tabindex="-1">
  <div class="modal-dialog" id="save-produk">
    <div class="modal-content rounded-0">
      <div class="modal-header">
        <h4 class="modal-title" id="ProdukLabel">Tambah Produk</h4>
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
      </div>
      <div class="modal-body">
        <div class="view-data"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-danger btn-sm rounded-0" data-dismiss="modal" type="button">Batal</button>
        <button class="btn btn-success btn-sm rounded-0 simpan_produk" onclick="submit_produk()" type="button">Simpan</button>
      </div>
    </div>
  </div>
</div>

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="modalupload" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="">Import Produk</h4>
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
      </div>
      <div class="modal-body">
        <form id="formUpload">
          <div class="input-group mb-3">
            <div class="input-group-prepend"><span class="input-group-text" id="">Upload</span></div>
            <div class="custom-file">
              <input type="file" name="filess" id="filess" class="custom-file-input">
              <label class="custom-file-label" for="filess">Choose file</label>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-danger" data-dismiss="modal" type="button">Batal</button>
        <button class="btn btn-success upload-file" type="submit">Import</button>
      </div>
    </div>
  </div>
</div>

<style>
  /* Spasi tabel (kalau ada tabel di halaman lain) */
  .card .table td, .card .table th { padding-right: 1rem; padding-left: 1rem; }

  /* Toolbar fleksibel */
  .toolbar-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: stretch;
  }
  .toolbar-item { flex: 1 1 200px; min-width: 160px; }
  .toolbar-grow { flex: 2 1 300px; min-width: 180px; }
  .toolbar-actions { display: flex; gap: .5rem; flex: 0 1 auto; }
  .produk-label-mobile,
  .produk-mobile-export-top,
  .produk-mobile-list { display: none; }
  .produk-search-field { width: 100%; }
  .produk-search-field .fa { display: none; }

  /* Tinggi minimum agar nyaman disentuh */
  .input-group.input-group-sm > .form-control,
  .input-group.input-group-sm > .custom-select { min-height: 36px; }

  /* Kartu produk & barcode responsif */
  .barcode-wrap { width: 100%; }
  .barcode-svg { width: 100%; height: auto; max-width: 360px; }
  .card-body-p .name { font-weight: 600; }
  .card-footer-p .btn { min-width: 70px; }

  /* Header & breadcrumb rapi di layar kecil */
  @media (max-width: 576px) {
    body.produk-mobile-page { background: #f6f7f9; }

    body.produk-mobile-page .navbar.topbar {
      height: 76px;
      background: var(--app-theme-color, #3f51b5) !important;
      margin-bottom: 0 !important;
      padding: 0 14px;
      box-shadow: none !important;
      overflow: visible;
      position: relative;
      z-index: 1040;
    }

    body.produk-mobile-page .navbar.topbar #sidebarToggleTop,
    body.produk-mobile-page .navbar.topbar #sidebarToggleLeft {
      width: 34px;
      height: 34px;
      margin-right: 0 !important;
      color: var(--app-theme-text-color, #fff);
      font-size: 24px;
      padding: 0;
      flex: 0 0 34px;
    }

    

    

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

    body.produk-mobile-page .navbar.topbar .nav-link {
      color: var(--app-theme-text-color, #fff) !important;
      height: 76px;
      padding: 0 .45rem;
      font-size: 20px;
    }

    body.produk-mobile-page #updateBellWrap,
    body.produk-mobile-page .stok-notif {
      display: none !important;
    }

    body.produk-mobile-page .navbar.topbar .topbar-divider {
      display: none !important;
    }

    body.produk-mobile-page .navbar.topbar .img-profile {
      width: 36px;
      height: 36px;
      border: 2px solid var(--app-theme-text-color, #fff);
    }

    body.produk-mobile-page .navbar.topbar #userDropdown .small {
      display: none !important;
    }

    body.produk-mobile-page .navbar.topbar #userDropdown::after {
      content: none;
      display: none;
    }

    body.produk-mobile-page .navbar.topbar #userDropdown + .dropdown-menu {
      position: fixed !important;
      top: 78px !important;
      left: calc(50% - 181px) !important;
      right: auto !important;
      width: 362px;
      min-width: 0;
      transform: none !important;
      padding: 8px 0;
      border: 0;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 6px 18px rgba(16,24,40,.12) !important;
      z-index: 2050;
    }

    body.produk-mobile-page .navbar.topbar #userDropdown + .dropdown-menu .dropdown-item {
      display: flex;
      align-items: center;
      min-height: 38px;
      padding: 9px 24px;
      color: #111827;
      font-size: 13px;
      line-height: 1.2;
    }

    body.produk-mobile-page .navbar.topbar #userDropdown + .dropdown-menu .dropdown-item i {
      width: 18px;
      margin-right: 12px !important;
      color: #c7c9d6 !important;
      text-align: center;
    }

    body.produk-mobile-page .navbar.topbar #userDropdown + .dropdown-menu .dropdown-divider {
      margin: 6px 0;
      border-color: #e5e7eb;
    }

    body.produk-mobile-page #content { background: #f6f7f9; }

    #container-wrapper.produk-page {
      min-width: 0;
      width: 100%;
      padding: 20px 14px 18px;
      background: #f6f7f9;
    }

    #container-wrapper.produk-page .d-sm-flex {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center !important;
      gap: 10px;
      margin-bottom: 14px !important;
    }

    #container-wrapper.produk-page h1 {
      font-size: 32px;
      line-height: 1.15;
      font-weight: 500;
      color: #1f2937 !important;
    }

    #container-wrapper.produk-page .produk-mobile-export-top {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 38px;
      padding: 0 14px;
      border-radius: 5px;
      background: #8b8d91;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      box-shadow: 0 5px 12px rgba(16,24,40,.18);
      white-space: nowrap;
    }

    #container-wrapper.produk-page .produk-mobile-export-top .fa { margin-right: 6px; }

    #container-wrapper.produk-page .row,
    #container-wrapper.produk-page .col-lg-12 {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }

    #container-wrapper.produk-page .card {
      border: 0;
      border-radius: 8px;
      box-shadow: 0 4px 18px rgba(16,24,40,.08);
      background: #fff;
    }

    #container-wrapper.produk-page .card-header {
      padding: 16px 12px 14px;
      background: #fff;
      border-bottom: 0;
      border-radius: 8px;
    }

    #container-wrapper.produk-page .toolbar-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 10px 20px;
      align-items: end;
    }

    #container-wrapper.produk-page .toolbar-item,
    #container-wrapper.produk-page .toolbar-grow {
      min-width: 0;
      width: 100%;
      flex: none;
    }

    #container-wrapper.produk-page .toolbar-item {
      display: block;
    }

    #container-wrapper.produk-page .toolbar-item .input-group-prepend {
      display: block;
      width: 100%;
      margin-bottom: 7px;
    }

    #container-wrapper.produk-page .produk-label-desktop { display: none !important; }
    #container-wrapper.produk-page .produk-label-mobile { display: block !important; }

    #container-wrapper.produk-page .toolbar-item .input-group-text,
    #container-wrapper.produk-page .produk-label-mobile {
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      color: #374151;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.25;
      text-align: left;
    }

    #container-wrapper.produk-page .input-group-sm .input-group-text {
      min-height: 0;
      height: auto;
      width: auto;
    }

    #container-wrapper.produk-page .toolbar-item .custom-select,
    #container-wrapper.produk-page .produk-search-field .form-control {
      height: 48px;
      min-height: 48px;
      border: 1px solid #cfd5e1;
      border-radius: 5px !important;
      color: #374151;
      font-size: 18px;
      box-shadow: none;
      background-color: #fff;
    }

    #container-wrapper.produk-page .toolbar-item .custom-select {
      display: block !important;
      width: 100% !important;
      padding: 0 34px 0 16px;
      background-position: right 14px center;
    }

    #container-wrapper.produk-page .toolbar-item:nth-child(3),
    #container-wrapper.produk-page .toolbar-search {
      grid-column: 1 / -1;
    }

    #container-wrapper.produk-page .produk-search-field {
      position: relative;
      width: 100%;
    }

    #container-wrapper.produk-page .produk-search-field .fa {
      display: block;
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      color: #656b77;
      font-size: 20px;
      z-index: 2;
    }

    #container-wrapper.produk-page .produk-search-field .form-control {
      padding-left: 54px;
    }

    #container-wrapper.produk-page .toolbar-actions {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      width: 100%;
      margin-left: 0;
    }

    #container-wrapper.produk-page .toolbar-actions .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 48px;
      border-radius: 5px;
      font-size: 18px;
      font-weight: 700;
      box-shadow: 0 6px 14px rgba(16,24,40,.14);
    }

    #container-wrapper.produk-page .toolbar-actions .btn .fa { margin-right: 6px; }
    #container-wrapper.produk-page .toolbar-actions .btn-success {
      background: #35b653;
      border-color: #35b653;
    }

    #container-wrapper.produk-page .card-body {
      padding: 14px 0 0;
      background: #f6f7f9;
    }

    #container-wrapper.produk-page .produk-desktop-grid { display: none; }

    #container-wrapper.produk-page .produk-mobile-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    #container-wrapper.produk-page .produk-mobile-card {
      display: grid;
      grid-template-columns: 230px minmax(0, 1fr) auto;
      align-items: center;
      gap: 22px;
      min-height: 88px;
      padding: 12px 14px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 4px 15px rgba(16,24,40,.08);
    }

    #container-wrapper.produk-page .produk-mobile-barcode {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
    }

    #container-wrapper.produk-page .produk-mobile-barcode-svg {
      width: 210px;
      max-width: 100%;
      height: 62px;
    }

    #container-wrapper.produk-page .produk-mobile-info {
      min-width: 0;
    }

    #container-wrapper.produk-page .produk-mobile-title {
      color: #111827;
      font-size: 20px;
      line-height: 1.15;
      font-weight: 800;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    #container-wrapper.produk-page .produk-mobile-category {
      color: #4b5563;
      font-size: 17px;
      line-height: 1.2;
    }

    #container-wrapper.produk-page .produk-mobile-actions {
      display: grid;
      grid-template-columns: 96px 112px 18px;
      align-items: center;
      gap: 18px;
    }

    #container-wrapper.produk-page .produk-mobile-actions .btn {
      height: 42px;
      border-radius: 5px;
      padding: 0 12px;
      font-size: 18px;
      font-weight: 700;
      line-height: 42px;
      box-shadow: 0 5px 12px rgba(16,24,40,.16);
    }

    #container-wrapper.produk-page .produk-mobile-actions .btn-info {
      background: #2f9bff;
      border-color: #2f9bff;
    }

    #container-wrapper.produk-page .produk-mobile-actions .btn-danger {
      background: #ff3f3f;
      border-color: #ff3f3f;
    }

    #container-wrapper.produk-page .produk-mobile-menu {
      border: 0;
      background: transparent;
      color: #626b7b;
      font-size: 20px;
      padding: 0;
      line-height: 1;
    }

    #container-wrapper.produk-page nav[aria-label="Page navigation"] {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      min-height: 70px;
      margin-top: 12px !important;
      padding: 12px 26px;
      column-gap: 10px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 4px 15px rgba(16,24,40,.08);
    }

    #container-wrapper.produk-page .pagination {
      margin-bottom: 0;
      gap: 14px;
      float: none !important;
      align-items: center;
    }

    #container-wrapper.produk-page .pagination.float-left {
      margin-right: auto;
      margin-left: 0;
      min-width: 0;
    }

    #container-wrapper.produk-page .pagination.float-right { margin-left: auto; }

    #container-wrapper.produk-page .page-link {
      min-width: 54px;
      height: 54px;
      border-radius: 5px;
      padding: 12px 16px;
      text-align: center;
      color: #6674ee;
      font-size: 20px;
      line-height: 28px;
      border-color: #d8dde8;
    }

    #container-wrapper.produk-page .page-item.active .page-link {
      background: #6674ee;
      border-color: #6674ee;
      color: #fff;
      box-shadow: 0 5px 12px rgba(102,116,238,.24);
    }

    #container-wrapper.produk-page .page-item.disabled .page-link {
      min-width: 0;
      width: auto;
      height: auto;
      border-color: transparent;
      color: #555b67;
      background: transparent;
      padding: 0;
      font-size: 18px;
      line-height: 1.25;
      white-space: normal;
    }

    @media (max-width: 430px) {
      body.produk-mobile-page .navbar.topbar #sidebarToggleTop,
      body.produk-mobile-page .navbar.topbar #sidebarToggleLeft {
        margin-right: 0 !important;
      }

      body.produk-mobile-page .navbar.topbar #sidebarToggleTop::before,
      body.produk-mobile-page .navbar.topbar #sidebarToggleLeft::before {
        content: none;
        display: none;
      }

      body.produk-mobile-page .navbar.topbar #sidebarToggleTop::after,
      body.produk-mobile-page .navbar.topbar #sidebarToggleLeft::after {
        content: none;
        display: none;
      }

      body.produk-mobile-page .navbar.topbar #clock { font-size: 14px; }
      body.produk-mobile-page .navbar.topbar #userDropdown .small { display: none !important; }

      body.produk-mobile-page .navbar.topbar #userDropdown + .dropdown-menu {
        left: 14px !important;
        right: 14px !important;
        width: auto;
      }

      #container-wrapper.produk-page h1 { font-size: 30px; }

      #container-wrapper.produk-page .produk-mobile-export-top {
        height: 34px;
        padding: 0 10px;
        font-size: 13px;
      }

      #container-wrapper.produk-page .toolbar-wrap { gap: 9px 10px; }

      #container-wrapper.produk-page .toolbar-item .input-group-text,
      #container-wrapper.produk-page .produk-label-mobile {
        font-size: 14px;
      }

      #container-wrapper.produk-page .toolbar-item .custom-select,
      #container-wrapper.produk-page .produk-search-field .form-control {
        height: 42px;
        min-height: 42px;
        font-size: 14px;
      }

      #container-wrapper.produk-page .toolbar-actions { gap: 10px; }
      #container-wrapper.produk-page .toolbar-actions .btn {
        height: 42px;
        font-size: 13px;
      }

      #container-wrapper.produk-page .card-header {
        padding: 12px 10px;
      }

      #container-wrapper.produk-page .produk-mobile-card {
        grid-template-columns: 94px minmax(0, 1fr) auto;
        gap: 8px;
        min-height: 70px;
        padding: 9px 8px;
      }

      #container-wrapper.produk-page .produk-mobile-barcode-svg {
        width: 88px;
        height: 48px;
      }

      #container-wrapper.produk-page .produk-mobile-title {
        font-size: 13px;
        margin-bottom: 4px;
      }

      #container-wrapper.produk-page .produk-mobile-category { font-size: 12px; }

      #container-wrapper.produk-page .produk-mobile-actions {
        grid-template-columns: 62px 72px 12px;
        gap: 5px;
      }

      #container-wrapper.produk-page .produk-mobile-actions .btn {
        height: 32px;
        padding: 0 5px;
        font-size: 12px;
        line-height: 32px;
      }

      #container-wrapper.produk-page .produk-mobile-menu { font-size: 16px; }

      #container-wrapper.produk-page nav[aria-label="Page navigation"] {
        min-height: 54px;
        padding: 8px 10px;
      }

      #container-wrapper.produk-page .pagination { gap: 7px; }
      #container-wrapper.produk-page .page-link {
        min-width: 34px;
        height: 34px;
        padding: 5px 9px;
        font-size: 15px;
        line-height: 22px;
      }

      #container-wrapper.produk-page .page-item.disabled .page-link {
        font-size: 12px;
      }
    }
  }
</style>

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

<script>
  // ====== UX: hentikan loader force tiap 1s (kode asli tetap) ======
  setInterval(function() { $('body').loading('stop'); }, 1000);
  document.body.classList.add('produk-mobile-page');

  // ====== Debounce pencarian agar tidak spam request saat mengetik ======
  let __produkTimer;
  function searchProdukDebounced(){
    clearTimeout(__produkTimer);
    __produkTimer = setTimeout(search_Produk, 300);
  }

  // ====== Setelah Ajax, rapikan kartu/barcode lagi (jika konten diganti server) ======
  function enhanceProdukGrid(){
    // pastikan semua svg barcode responsive
    $('#dataProduk .barcode-svg').each(function(){
      // jika JsBarcode mengganti width fixed, paksa CSS responsif
      this.removeAttribute('width');
      this.removeAttribute('height');
      this.classList.add('barcode-svg');
    });
  }

  $(".upload-file").click(function(){
    var file = document.getElementById("filess");
    if(file.files.length == 0 ){
      alert('Upload, File masih kosong!', 'warning')
      return;
    }
    $('#formUpload').submit();
  });

  $('#formUpload').submit(function(e){
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
      type: "POST",
      url: base_url+"produk/import_data",
      dataType: 'json',
      data: formData,
      processData:false,
      contentType:false,
      cache:false,
      async:false,
      beforeSend: function () { $('body').loading(); },
      success: function(data) {
        if(data.status==200){ searchFilter(); }
        $('#formUpload')[0].reset();
        $("#modalupload").modal('hide');
        $('.custom-file-label').html('');
        search_Produk();
        $('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 submit_produk(){
    var halaman = $("#halaman").val();
    var dataform = $("#formproduk").serialize();
    $.ajax({
      type: "POST",
      url: base_url+"produk/save_produk",
      dataType: 'json',
      data: dataform,
      cache: false,
      beforeSend: function () { $('#save-produk').loading({zIndex:1070,message:'saving data...'}); },
      success: function(data) {
        $('#save-produk').loading('stop');
        if(data.status==200){
          showNotif('bottom-right','Simpan data',data.msg,'success');
          $("#OpenModal").modal('hide');
          search_Produk(halaman);
        }else{
          showNotif('bottom-right','Simpan data',data.msg,'error');
        }
      },
      error : function(res, status, httpMessage) {
        $('#save-produk').loading('stop');
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  }

  $('#OpenModal').on('show.bs.modal', function(e) {
    var id = $(e.relatedTarget).data('id');
    var mod = $(e.relatedTarget).data('mod');
    var urldata = (id > 0) ? "edit_produk" : "tambah_produk";
    var tipe = (id > 0) ? "edit" : "add";
    $("#ProdukLabel").html((id > 0) ? 'Edit produk' : 'Tambah produk');
    $.ajax({
      type: 'POST',
      url: base_url + "produk/"+urldata,
      data: {tipe:tipe,id:id,mod:mod},
      dataType: "html",
      beforeSend: function () { $('body').loading(); },
      success: function(data) {
        $('.view-data').html(data);
        $('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"); }
      }
    });
  });

  $('#OpenModal').on('shown.bs.modal', function() { $('#nama').focus(); });

  $('#confirm-delete').on('show.bs.modal', function(e) {
    $(this).find('.danger').attr('href', $(e.relatedTarget).data('href'));
  });

  $('.clear_cari').on('click', function(){
    $('#keywords').val('');
    $('#jenis').val('');
    // set ke opsi pertama agar tidak hardcode angka (lebih aman)
    $('#limits').val($('#limits option:first').val());
    search_Produk(0);
  });

  function search_Produk(page_num){
    page_num = page_num?page_num:0;
    var keywords = $('#keywords').val();
    var sortBy = $('#sortBy').val();
    var limits = $('#limits').val();
    var jenis = $('#jenis').val();
    $.ajax({
      type: 'POST',
      url: base_url+"produk/cariproduk/"+page_num,
      data:{page:page_num,keywords:keywords,sortBy:sortBy,limits:limits,jenis:jenis},
      beforeSend: function(){ $('body').loading(); },
      success: function(html){
        $('#halaman').val(page_num);
        $('#dataProduk').html(html);
        enhanceProdukGrid();
        $('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"); }
      }
    });
  }

  $(document).on('click','.hapus_produk',function(e){
    e.preventDefault();
    var id = $("#data-hapus").val();
    var halaman = $("#halaman").val();
    $.ajax({
      url: base_url + 'produk/hapus_produk',
      data: {type:'hapus',id:id},
      method: 'POST',
      dataType:'json',
      beforeSend: function(){ $('body').loading(); },
      success: function(data) {
        if(data.status==200){ showNotif('bottom-right','Hapus data',data.msg,'success'); }
        else{ sweet('Peringatan!!!',data.msg,'warning','warning'); }
        $('#confirm-delete').modal('hide');
        search_Produk(halaman);
        $('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"); }
      }
    });
  });

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

  // panggilan awal kalau perlu
  // search_Produk(0);
</script>
