<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<script src="<?= base_url('assets/'); ?>js/glightbox.min.js"></script>

<script>
  // Hanya membuat jika belum ada (tidak menimpa implementasi asli, jika ada)
  window.searchFilter = window.searchFilter || function(termOrInput, tableSelector) {
    try {
      var q = '';
      if (typeof termOrInput === 'string') q = termOrInput;
      else if (termOrInput && termOrInput.value !== undefined) q = termOrInput.value;
      else if (window.jQuery && termOrInput && termOrInput.jquery) q = termOrInput.val();

      q = (q || '').toString().toLowerCase();
      if (!window.jQuery) return;

      var $ = window.jQuery;
      var $table = tableSelector ? $(tableSelector) : $('.table:visible').first();
      if (!$table.length) return;

      $table.find('tbody tr').each(function () {
        var show = $(this).text().toLowerCase().indexOf(q) > -1;
        $(this).toggle(show);
      });
    } catch (err) {
      console.warn('searchFilter fallback warning:', err);
    }
  };
</script>

<div class="container-fluid transaksi-report-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">Laporan Pendapatan & Pengeluaran</h1>
    <ol class="breadcrumb pg-page-breadcrumb mb-0">
      <li class="breadcrumb-item">Laporan</li>
      <li class="breadcrumb-item active" aria-current="page">Pendapatan & Pengeluaran</li>
    </ol>
  </div>

  <div class="row">
    <div class="col-12">
      <form action="<?= base_url('transaksi/cetak_pdf'); ?>" method="post" id="cetak-transaksi" target="_blank">
        <div class="card">
          <div class="card-header pb-0">

            <div class="pg-filterbar">
              <div class="pg-filterbar__fields">
                <div class="pg-field pg-field-period">
                  <label for="jenis">PERIODE</label>
                  <div class="pg-select-control">
                    <i class="fa fa-calendar-o"></i>
                    <select name="jenis" id="jenis" class="form-control form-control-sm custom-select pg-control"
                            onchange="onJenisChange();search_transaksi()">
                      <option value="1" selected>Per hari (Rentang)</option>
                      <option value="2">Perbulan</option>
                    </select>
                  </div>
                </div>

                <div class="pg-field pg-field-cashier">
                  <label for="user_trx">KASIR</label>
                  <div class="pg-select-control">
                    <i class="fa fa-user-o"></i>
                    <select name="user_trx" id="user_trx" class="form-control form-control-sm custom-select pg-control"
                            onchange="search_transaksi()">
                      <?php
                      if ($level == 'admin' || $level == 'owner') {
                        echo '<option value="0">Semua kasir</option>';
                        foreach ($pilihan as $values) {
                          echo '<option value="'.$values['id_user'].'">'.$values['nama_lengkap'].'</option>';
                        }
                      } else {
                        foreach ($pilihan as $values) {
                          if ($this->session->idu == $values['id_user']) {
                            echo '<option value="'.$values['id_user'].'" selected>'.$values['nama_lengkap'].'</option>';
                          }
                        }
                      }
                      ?>
                    </select>
                  </div>
                </div>

                <div class="pg-field pg-field-from hide-1">
                  <label for="tgl_dari">DARI</label>
                  <div class="pg-date-control">
                    <i class="fa fa-calendar-o"></i>
                    <input type="text" class="form-control form-control-sm pg-control" name="tgl_dari" id="tgl_dari"
                           placeholder="dd/mm/yyyy" autocomplete="off">
                  </div>
                </div>

                <div class="pg-field pg-field-until hide-1">
                  <label for="tgl_sampai">SAMPAI</label>
                  <div class="pg-date-control">
                    <i class="fa fa-calendar-o"></i>
                    <input type="text" class="form-control form-control-sm pg-control" name="tgl_sampai" id="tgl_sampai"
                           placeholder="dd/mm/yyyy" autocomplete="off">
                  </div>
                </div>

                <div class="pg-field hide-2 d-none">
                  <label for="periode">Bulan</label>
                  <div class="pg-date-control">
                    <i class="fa fa-calendar-o"></i>
                    <input type="text" class="form-control form-control-sm pg-control date-harian"
                           value="<?= $periode; ?>" name="periode" id="periode" autocomplete="off">
                  </div>
                </div>

                <div class="pg-actions pg-actions-inline hide-2 d-none">
                  <button type="button" class="btn btn-primary btn-sm harian pg-btn pg-btn-view">
                    <i class="fa fa-search"></i> Lihat
                  </button>
                  <button type="submit" formaction="<?= base_url('transaksi/cetak_pdf'); ?>" class="btn btn-danger btn-sm pg-btn">
                    <i class="fa fa-file-pdf-o"></i> PDF
                  </button>
                  <button type="submit" formaction="<?= base_url('transaksi/export_excel'); ?>" class="btn btn-success btn-sm pg-btn pg-btn-excel">
                    <i class="fa fa-file-excel-o"></i> Excel
                  </button>
                </div>

                <input type="hidden" name="tanggal" id="tanggal" value="<?= $tanggal; ?>">
              </div>

              <div class="pg-filterbar__bottom">
                <div class="pg-presets hide-1" id="presetGroup" role="group" aria-label="Preset">
                  <button type="button" class="btn btn-light btn-sm btn-preset" data-preset="today">Hari ini</button>
                  <button type="button" class="btn btn-light btn-sm btn-preset" data-preset="yesterday">Kemarin</button>
                  <button type="button" class="btn btn-light btn-sm btn-preset" data-preset="thisweek">Minggu ini</button>
                  <button type="button" class="btn btn-light btn-sm btn-preset" data-preset="lastweek">Minggu kemarin</button>
                </div>

                <div class="pg-actions hide-1">
                  <button type="button" class="btn btn-primary btn-sm harian pg-btn pg-btn-view">
                    <i class="fa fa-search"></i> Lihat
                  </button>
                  <button type="submit" formaction="<?= base_url('transaksi/cetak_pdf'); ?>" class="btn btn-danger btn-sm pg-btn">
                    <i class="fa fa-file-pdf-o"></i> PDF
                  </button>
                  <button type="submit" formaction="<?= base_url('transaksi/export_excel'); ?>" class="btn btn-success btn-sm pg-btn pg-btn-excel">
                    <i class="fa fa-file-excel-o"></i> Excel
                  </button>
                </div>
              </div>
            </div>

          </div>

          <div class="card-body">
            <div class="table-responsive">
              <div id="printableTable">
                <div id="laporan_harian" class="text-center text-muted py-3">
                  Silakan pilih rentang tanggal lalu klik <b>Lihat</b>.
                </div>
              </div>
            </div>
          </div>

        </div>
      </form>
    </div>
  </div>
</div>

<iframe name="print_frame" width="0" height="0" frameborder="0"></iframe>

<!-- Modal -->
<div id="myModals" class="modals">
  <span class="closes">&times;</span>
  <img class="modal-contents" id="viewimglogo" alt="Bukti transfer">
  <div id="caption">Bukti transfer</div>
</div>

<style>
/* ====== Tabel & Card ====== */
.table td, .table th { padding: 2px; }
.card .table td, .card .table th { padding: 0 5px; }
.small { height: 30px; padding: 2px 10px; }
button, input, select { font: inherit; line-height: inherit; }

/* =========================================================
   === PATCH FINAL: Toolbar makin rapih seperti referensi ===
   - tinggi kontrol seragam
   - baris bawah tidak “kosong” di tengah
   - tombol aksi lebih proporsional
========================================================= */
.pg-filterbar{
  background: #eef0f4;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.035);
}

/* GRID atas */
.pg-filterbar__top{
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.pg-ig{
  margin: 0;
  width: 100%;
}

/* label pill */
.pg-pill{
  background: #3f51b5;           /* lebih selaras & tegas */
  color: #fff;
  border: 0;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 0 .9rem;
  border-radius: 12px 0 0 12px;
  min-width: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;                  /* seragam */
}

/* input/select */
.pg-control{
  height: 42px !important;
  font-size: 14px;
  border-radius: 0 12px 12px 0 !important;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
}

/* ROW bawah */
.pg-filterbar__bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* presets mengisi ruang, biar tidak ada ruang kosong mengganggu */
/* ========= PRESET AUTO-STRETCH RATA (mirip panel Data Transaksi) ========= */
.pg-presets{
  display: grid !important;                 /* ganti flex → grid */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  flex: 1 1 auto;
  min-width: 320px;
  align-items: stretch;
}

/* Pastikan preset tersembunyi saat class d-none dipasang (mode PERBULAN) */
.pg-presets.d-none{
  display: none !important;
}

.pg-presets .btn{
  width: 100%;                              /* isi kolom grid */
  height: 40px;
  border-radius: 12px;
  padding: .45rem .85rem;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;                      /* jangan turun baris */
}

.pg-presets .btn.active{
  background: #3f51b5;
  border-color: #3f51b5;
  color: #fff;
}

/* kalau layar agak sempit: jadi 2 kolom */
@media (max-width: 992px){
  .pg-presets{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
}

/* kalau mobile kecil: 1 kolom */
@media (max-width: 480px){
  .pg-presets{
    grid-template-columns: 1fr;
  }
}
/* ========= END PRESET AUTO-STRETCH RATA ========= */


/* tombol aksi kanan */
.pg-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}

.pg-btn{
  height: 40px;
  border-radius: 12px;
  padding: .45rem .95rem;
  font-weight: 800;
  min-width: 110px;   /* lebih proporsional dari 120 */
}

/* Aksi inline khusus mode PERBULAN agar sejajar dengan kontrol row atas */
.pg-actions-inline{
  align-items: stretch;
  justify-content: flex-end;
}
.pg-actions-inline .pg-btn{
  height: 42px;
}

/* ====== Breakpoints ====== */
@media (max-width: 1200px){
  .pg-filterbar__top{
    grid-template-columns: repeat(2, minmax(210px, 1fr));
  }
}

@media (max-width: 768px){
  .pg-filterbar__top{ grid-template-columns: 1fr; }

  .pg-presets{
    width: 100%;
    min-width: 0;
  }

  .pg-actions{
    width: 100%;
  }

  .pg-actions .pg-btn{
    flex: 1 1 calc(33.333% - 10px);
    min-width: 140px;
  }
}

@media (max-width: 480px){
  .pg-actions .pg-btn{
    flex: 1 1 100%;
    min-width: 0;
  }
}
/* ======================== END PATCH ======================== */


/* ====== Tampilan final sesuai referensi Screenshot_327 ====== */
#container-wrapper{ color:#1f2937; }
#container-wrapper .h3{ font-size:24px; font-weight:800; color:#111827!important; }
.pg-page-breadcrumb{
  background:transparent;
  padding:0;
  font-size:12px;
  font-weight:800;
  color:#64748b;
}
.pg-page-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  color:#94a3b8;
}
.pg-page-breadcrumb .active{
  color:#334155;
}
#container-wrapper > .row > .col-12 > form > .card{
  border:0;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 26px rgba(15,23,42,.08);
}
#container-wrapper .card-header{
  background:#fff;
  border-bottom:0;
  border-radius:8px 8px 0 0;
  padding:18px 18px 8px;
}
#container-wrapper .card-body{ padding:14px 18px 18px; }

.pg-filterbar{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:18px 20px;
  margin-bottom:16px;
  box-shadow:0 10px 24px rgba(15,23,42,.07);
}
.pg-filterbar__fields{
  display:grid;
  grid-template-columns:repeat(4,minmax(180px,1fr));
  gap:18px 28px;
  align-items:end;
}
.pg-field{ min-width:0; }
.pg-field label{
  display:block;
  margin:0 0 8px;
  color:#475569;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.pg-control{
  height:42px!important;
  border:1px solid #dfe5ef;
  border-radius:6px!important;
  background:#fff;
  color:#344054;
  font-size:14px;
  font-weight:600;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.03);
}
.pg-date-control{ position:relative; }
.pg-date-control .fa{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:#64748b;
  z-index:2;
}
.pg-date-control .pg-control{ padding-left:40px; }
.pg-filterbar__bottom{
  display:grid;
  grid-template-columns:minmax(360px,1.8fr) minmax(320px,1fr);
  gap:28px;
  align-items:center;
  margin-top:18px;
}
.pg-presets{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  min-width:0;
}
.pg-presets.d-none{ display:none!important; }
.pg-presets .btn{
  width:100%;
  height:42px;
  border-radius:6px;
  border:1px solid #dfe5ef;
  background:#fff;
  color:#344054;
  font-size:14px;
  font-weight:800;
  box-shadow:0 2px 6px rgba(15,23,42,.04);
}
.pg-presets .btn.active{
  background:#1769e8;
  border-color:#1769e8;
  color:#fff;
  box-shadow:0 6px 12px rgba(23,105,232,.25);
}
.pg-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  justify-content:end;
  margin-left:0;
}
.pg-btn{
  height:42px;
  border-radius:6px;
  padding:.45rem .95rem;
  font-size:14px;
  font-weight:800;
  min-width:0;
  box-shadow:0 7px 13px rgba(15,23,42,.14);
}
.pg-actions-inline{ grid-column:span 2; align-self:end; }

@media (max-width:1200px){
  .pg-filterbar__fields{ grid-template-columns:repeat(2,minmax(180px,1fr)); }
  .pg-filterbar__bottom{ grid-template-columns:1fr; gap:14px; }
}
@media (max-width:992px){
  .pg-presets{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  #container-wrapper .card-header,
  #container-wrapper .card-body{ padding-left:12px; padding-right:12px; }
  .pg-filterbar{ padding:14px; }
  .pg-filterbar__fields{ grid-template-columns:1fr; gap:14px; }
  .pg-actions{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .pg-presets{ grid-template-columns:1fr; }
}

/* ====== Final match filter/date picker to reference ====== */
.pg-filterbar{
  border-color:#e2e8f0;
  border-radius:7px;
  padding:19px 24px 20px;
  box-shadow:0 10px 26px rgba(15,23,42,.07);
}
.pg-filterbar__fields{
  grid-template-columns:1.02fr 1.02fr 1fr 1fr;
  gap:18px 28px;
}
.pg-field label{
  margin-bottom:8px;
  color:#344054;
  font-size:12px;
  line-height:1;
  font-weight:800;
}
.pg-control{
  height:43px!important;
  border-color:#dfe7f1;
  border-radius:5px!important;
  color:#1f2937;
  font-size:14px;
  font-weight:700;
  padding:0 14px;
  box-shadow:0 1px 2px rgba(15,23,42,.02);
}
select.pg-control{
  font-weight:700;
}
.pg-date-control .fa{
  left:14px;
  color:#64748b;
  font-size:15px;
}
.pg-date-control .pg-control{
  padding-left:39px;
  font-weight:700;
}
.pg-filterbar__bottom{
  grid-template-columns:minmax(520px,1.62fr) minmax(500px,1fr);
  gap:32px;
  margin-top:18px;
}
.pg-presets{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.pg-presets .btn{
  height:42px;
  border-radius:5px;
  border-color:#dfe7f1;
  color:#1f2937;
  font-size:14px;
  font-weight:800;
  background:#fff;
  box-shadow:0 3px 6px rgba(15,23,42,.10);
}
.pg-presets .btn.active{
  background:#176eea;
  border-color:#176eea;
  box-shadow:0 7px 14px rgba(23,110,234,.28);
}
.pg-actions{
  grid-template-columns:1fr 1.15fr 1.15fr;
  gap:14px;
}
.pg-btn{
  height:42px;
  border-radius:5px;
  font-size:14px;
  font-weight:800;
  box-shadow:0 7px 13px rgba(15,23,42,.15);
}
@media (max-width:1200px){
  .pg-filterbar__fields{ grid-template-columns:repeat(2,minmax(180px,1fr)); }
  .pg-filterbar__bottom{ grid-template-columns:1fr; }
}



/* =========================================================
   MOBILE ONLY: samakan tampilan smartphone dengan referensi mobile_5
   Desktop, print, dan struktur AJAX tetap dipertahankan.
========================================================= */
@media (max-width: 768px){
  #container-wrapper{
    padding-left:12px;
    padding-right:12px;
    color:#172033;
  }
  #container-wrapper > .d-sm-flex{
    display:block!important;
    margin-bottom:14px!important;
  }
  #container-wrapper .h3{
    font-size:18px;
    line-height:1.25;
    font-weight:800;
    margin-bottom:4px!important;
    letter-spacing:.1px;
  }
  .pg-page-breadcrumb{
    font-size:11px;
    line-height:1.2;
  }
  #container-wrapper > .row{
    margin-left:0;
    margin-right:0;
  }
  #container-wrapper > .row > .col-12{
    padding-left:0;
    padding-right:0;
  }
  #container-wrapper > .row > .col-12 > form > .card{
    border:0;
    box-shadow:none;
    background:transparent;
  }
  #container-wrapper .card-header,
  #container-wrapper .card-body{
    padding-left:0!important;
    padding-right:0!important;
  }
  #container-wrapper .card-header{
    padding-top:0!important;
    padding-bottom:8px!important;
  }
  #container-wrapper .card-body{
    padding-top:0!important;
  }
  .table-responsive{
    overflow:visible;
  }

  .pg-filterbar{
    border-radius:14px;
    border:1px solid #e3e8f0;
    padding:12px;
    margin:0 0 12px;
    background:#fff;
    box-shadow:0 5px 18px rgba(15,23,42,.08);
  }
  .pg-filterbar__fields{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px 10px;
    align-items:end;
  }
  .pg-field label{
    margin:0 0 7px;
    color:#34405a;
    font-size:0;
    line-height:1;
    font-weight:800;
    letter-spacing:0;
    text-transform:none;
  }
  .pg-field label::after{
    font-size:11.5px;
    line-height:1;
    text-transform:none;
  }
  .pg-field label[for="jenis"]::after{ content:"Periode"; }
  .pg-field label[for="user_trx"]::after{ content:"Kasir"; }
  .pg-field label[for="tgl_dari"]::after{ content:"Dari"; }
  .pg-field label[for="tgl_sampai"]::after{ content:"Sampai"; }
  .pg-field label[for="periode"]::after{ content:"Bulan"; }

  .pg-control{
    height:42px!important;
    min-height:42px;
    border-radius:6px!important;
    border-color:#dfe6f1;
    color:#182238;
    background:#fff;
    font-size:15px;
    font-weight:800;
    padding:0 12px;
    box-shadow:0 1px 2px rgba(15,23,42,.03);
  }
  select.pg-control{
    padding-right:30px;
  }
  .pg-date-control .fa{
    left:12px;
    color:#46556e;
    font-size:14px;
  }
  .pg-date-control .pg-control{
    padding-left:38px;
  }

  .pg-filterbar__bottom{
    display:grid;
    grid-template-columns:1fr;
    gap:11px;
    margin-top:11px;
  }
  .pg-presets{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    min-width:0;
    width:100%;
  }
  .pg-presets.d-none{
    display:none!important;
  }
  .pg-presets .btn{
    width:100%;
    height:36px;
    border-radius:6px;
    border:1px solid #dfe6f1;
    background:#fff;
    color:#182238;
    font-size:12px;
    line-height:1.1;
    font-weight:800;
    padding:0 5px;
    white-space:nowrap;
    box-shadow:none;
  }
  .pg-presets .btn.active{
    background:#e6e9f4;
    border-color:#d8deee;
    color:#182238;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.04);
  }

  .pg-actions,
  .pg-actions-inline{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    width:100%;
    margin:0;
  }
  .pg-actions-inline{
    grid-column:1 / -1;
  }
  .pg-actions .pg-btn,
  .pg-actions-inline .pg-btn{
    height:38px;
    min-width:0;
    width:100%;
    border-radius:6px;
    padding:0 8px;
    font-size:14px;
    font-weight:800;
    box-shadow:0 5px 10px rgba(15,23,42,.12);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    white-space:nowrap;
  }
}

@media (max-width: 380px){
  .pg-presets{ gap:6px; }
  .pg-presets .btn{ font-size:10.5px; padding:0 3px; }
  .pg-actions .pg-btn,
  .pg-actions-inline .pg-btn{ font-size:12.5px; padding:0 5px; }
  .pg-control{ font-size:13px; }
}

/* Modal bukti transfer */
.modals { display: none; position: fixed; z-index: 100; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: #fff; }
.modal-contents { margin: auto; display: block; width: 80%; max-width: 700px; position: fixed; top: 0; left: 10%; right: 10%; }
#caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #666; padding: 10px 0; height: auto; }
@keyframes zoom { from { transform: scale(0) } to { transform: scale(1) } }
.closes { position: absolute; top: 15px; right: 35px; color: #333; font-size: 40px; font-weight: bold; transition: .3s; }
.closes:hover { color: #999; cursor: pointer; }


/* ====== PRINT STYLES (tetap seperti punya Aa) ====== */
@media print {
  body * { visibility: hidden; }
  #printableTable, #printableTable * { visibility: visible; }
  #printableTable { position: absolute; left: 0; top: 0; right: 0; width: 100%; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
  .table, table { border-collapse: collapse !important; }
  .table th, .table td, table th, table td { border: 1px solid #ddd !important; padding: 6px 8px !important; font-size: 12px; }
  .pg-hero, .gradient-header, .card-header, .heading, .heading2, .badge, .label { -webkit-print-color-adjust: exact !important; }
  .page-break { page-break-before: always; }
  .avoid-break { page-break-inside: avoid; }
}

@media screen { .print-only { display: none !important; } }

@media print {
  table, .table { border-collapse: collapse !important; border-spacing: 0 !important; table-layout: fixed; }
  .table th, .table td, table th, table td {
    border: 0.8pt solid #6b7280 !important;
    padding: 6pt 8pt !important;
    background-clip: padding-box;
  }
  thead th { border-bottom: 1.2pt solid #4b5563 !important; }
  .table-striped tbody tr:nth-of-type(odd) { box-shadow: none !important; }
  tr, td, th { page-break-inside: avoid !important; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  .print-solid td, .print-solid th { outline: 0.6pt solid #6b7280 !important; outline-offset: -1px; }
}

@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
  table, .table { border-collapse: collapse !important; border-spacing: 0 !important; table-layout: fixed; }
  .table th, .table td, table th, table td {
    border: 0.8pt solid #6b7280 !important;
    padding: 6pt 8pt !important;
    background-clip: padding-box;
  }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr, td, th { page-break-inside: avoid !important; }

  .pg-hero, .gradient-header, .summary-gradient, .summary-card {
    background-image: none !important;
    background: #6a5acd !important;
    color: #fff !important;
    box-shadow: none !important;
    border-color: #5b4bc4 !important;
  }

  thead th, .heading, .bg-dark, .table thead th {
    background-image: none !important;
    background: #3f3f46 !important;
    color: #ffffff !important;
    border-color: #4b5563 !important;
  }

  .heading2, .bg-secondary, .text-muted.header {
    background-image: none !important;
    background: #6b7280 !important;
    color: #ffffff !important;
    border-color: #6b7280 !important;
  }

  .print-bg-success, .bg-success, .row-success, tr.tr-success > td {
    background-image: none !important;
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #86efac !important;
  }

  .print-bg-warning, .bg-warning, .row-warning, tr.tr-warning > td {
    background-image: none !important;
    background: #fde68a !important;
    color: #7c2d12 !important;
    border-color: #fcd34d !important;
  }

  .print-bg-gray, .bg-light, .row-gray, tr.tr-gray > td {
    background-image: none !important;
    background: #e5e7eb !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
  }

  .print-solid td, .print-solid th {
    outline: 0.6pt solid #6b7280 !important;
    outline-offset: -1px;
  }
}


/* =========================================================
   PATCH FINAL MOBILE: SECTION PERIODE / FILTERBAR
   Target: iPhone/mobile 360-430px
   - Font kontrol diperkecil
   - Preset jadi 2 kolom supaya "Minggu kemarin" tidak keluar kartu
   - Semua item memakai min-width:0 + box-sizing supaya tidak overflow
========================================================= */
@media (max-width: 768px){
  .pg-filterbar,
  .pg-filterbar *{
    box-sizing:border-box;
    max-width:100%;
  }

  .pg-filterbar{
    width:100%;
    border-radius:12px;
    padding:11px 11px 12px;
    margin-bottom:12px;
    overflow:visible;
  }

  .pg-filterbar__fields{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px 9px!important;
    width:100%;
  }

  .pg-field{
    min-width:0!important;
    width:100%;
  }

  .pg-field label{
    margin:0 0 5px!important;
    height:auto;
  }

  .pg-field label::after{
    font-size:10.5px!important;
    line-height:1!important;
    font-weight:800;
    letter-spacing:0;
  }

  .pg-control{
    width:100%;
    height:39px!important;
    min-height:39px!important;
    border-radius:6px!important;
    font-size:12.5px!important;
    line-height:1.15!important;
    font-weight:700!important;
    padding:0 10px!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  select.pg-control{
    padding-left:9px!important;
    padding-right:24px!important;
  }

  .pg-date-control{
    width:100%;
    min-width:0!important;
  }

  .pg-date-control .fa{
    left:10px!important;
    font-size:12px!important;
    line-height:1;
  }

  .pg-date-control .pg-control{
    padding-left:30px!important;
    padding-right:8px!important;
    font-size:12.5px!important;
    letter-spacing:0;
  }

  .pg-filterbar__bottom{
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:10px!important;
    width:100%;
    min-width:0;
  }

  .pg-presets{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%;
    min-width:0!important;
  }

  .pg-presets .btn{
    width:100%;
    min-width:0!important;
    height:34px!important;
    padding:0 7px!important;
    border-radius:6px!important;
    font-size:11.2px!important;
    line-height:1.12!important;
    font-weight:800!important;
    white-space:normal!important;
    overflow:hidden;
    text-align:center;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .pg-actions,
  .pg-actions-inline{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:9px!important;
    width:100%!important;
    min-width:0!important;
  }

  .pg-actions .pg-btn,
  .pg-actions-inline .pg-btn{
    width:100%!important;
    min-width:0!important;
    height:37px!important;
    padding:0 5px!important;
    border-radius:6px!important;
    font-size:12.5px!important;
    line-height:1!important;
    font-weight:800!important;
    gap:5px!important;
    white-space:nowrap!important;
  }

  .pg-actions .pg-btn .fa,
  .pg-actions-inline .pg-btn .fa{
    font-size:11px!important;
  }
}

@media (max-width: 380px){
  .pg-filterbar{ padding:10px; }
  .pg-filterbar__fields{ gap:9px 8px!important; }
  .pg-control,
  .pg-date-control .pg-control{ font-size:11.8px!important; }
  .pg-field label::after{ font-size:10px!important; }
  .pg-presets{ gap:7px!important; }
  .pg-presets .btn{ height:33px!important; font-size:10.8px!important; padding:0 5px!important; }
  .pg-actions,
  .pg-actions-inline{ gap:7px!important; }
  .pg-actions .pg-btn,
  .pg-actions-inline .pg-btn{ height:36px!important; font-size:11.6px!important; padding:0 4px!important; }
}

@media (max-width: 340px){
  .pg-filterbar__fields{ grid-template-columns:1fr!important; }
  .pg-presets{ grid-template-columns:1fr!important; }
  .pg-actions,
  .pg-actions-inline{ grid-template-columns:1fr!important; }
}


/* =========================================================
   DESKTOP SCALED MODE - WINDOWS SCALE 150%
   Layar 1920x1080 dengan scale Windows 150% umumnya dibaca browser ±1280px.
   Range ini tetap dibuat seperti desktop, bukan tablet/mobile.
========================================================= */
@media (min-width:1201px) and (max-width:1500px){
  #container-wrapper .card-header{
    padding:16px 16px 8px!important;
  }
  #container-wrapper .card-body{
    padding:12px 16px 16px!important;
  }

  .pg-filterbar,
  .pg-filterbar *{
    box-sizing:border-box;
  }
  .pg-filterbar{
    padding:14px 16px!important;
    margin-bottom:14px!important;
    overflow:visible;
  }
  .pg-filterbar__fields{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px 18px!important;
    align-items:end;
  }
  .pg-field{
    min-width:0!important;
  }
  .pg-field label{
    margin-bottom:7px!important;
    font-size:11px!important;
    line-height:1!important;
  }
  .pg-control{
    width:100%;
    height:40px!important;
    min-height:40px!important;
    border-radius:5px!important;
    font-size:12.5px!important;
    line-height:1.15!important;
    font-weight:700!important;
    padding:0 10px!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  select.pg-control{
    padding-right:26px!important;
  }
  .pg-date-control .fa{
    left:11px!important;
    font-size:13px!important;
  }
  .pg-date-control .pg-control{
    padding-left:32px!important;
  }

  .pg-filterbar__bottom{
    grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)!important;
    gap:16px!important;
    margin-top:14px!important;
    align-items:center;
    min-width:0!important;
  }
  .pg-presets{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
    min-width:0!important;
    width:100%;
  }
  .pg-presets .btn{
    width:100%;
    min-width:0!important;
    height:40px!important;
    border-radius:5px!important;
    padding:0 6px!important;
    font-size:12.5px!important;
    line-height:1.1!important;
    font-weight:800!important;
    white-space:nowrap!important;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .pg-actions,
  .pg-actions-inline{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    min-width:0!important;
    width:100%;
    margin:0!important;
  }
  .pg-actions .pg-btn,
  .pg-actions-inline .pg-btn{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    border-radius:5px!important;
    padding:0 8px!important;
    font-size:12.5px!important;
    line-height:1!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
  .pg-actions .pg-btn .fa,
  .pg-actions-inline .pg-btn .fa{
    font-size:12px!important;
  }
}

/* ===== Area konten laporan; tidak memengaruhi sidebar dan topbar ===== */
.transaksi-report-page{
  color:#344054;
}
.transaksi-report-page > .d-sm-flex{
  margin-bottom:16px!important;
}
.transaksi-report-page .h3{
  font-size:24px;
  line-height:1.3;
  font-weight:700;
  color:#1f2937!important;
}
.transaksi-report-page .pg-page-breadcrumb{
  display:none;
}
.transaksi-report-page > .row > .col-12 > form > .card{
  border:0;
  background:transparent;
  box-shadow:none;
}
.transaksi-report-page .card-header,
.transaksi-report-page .card-body{
  padding-left:0!important;
  padding-right:0!important;
  background:transparent;
}
.transaksi-report-page .card-header{
  padding-top:0!important;
  padding-bottom:0!important;
}
.transaksi-report-page .card-body{
  padding-top:0!important;
}
.transaksi-report-page .table-responsive{
  overflow:visible;
}
.transaksi-report-page .pg-filterbar{
  margin:0 0 18px;
  padding:20px 26px;
  border:1px solid #e4e9f1;
  border-radius:10px;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.07);
}
.transaksi-report-page .pg-field label{
  margin-bottom:8px;
  color:#475467;
  font-size:13px;
  line-height:1;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
.transaksi-report-page .pg-select-control,
.transaksi-report-page .pg-date-control{
  position:relative;
}
.transaksi-report-page .pg-select-control > .fa,
.transaksi-report-page .pg-date-control > .fa{
  position:absolute;
  left:14px;
  top:50%;
  z-index:2;
  transform:translateY(-50%);
  color:#667085;
  font-size:14px;
  pointer-events:none;
}
.transaksi-report-page .pg-select-control .pg-control,
.transaksi-report-page .pg-date-control .pg-control{
  height:43px!important;
  min-height:43px!important;
  padding-left:40px!important;
  border:1px solid #dfe5ee;
  border-radius:6px!important;
  background-color:#fff;
  color:#344054;
  font-size:14px;
  font-weight:600;
  box-shadow:none;
}
.transaksi-report-page .pg-btn{
  height:43px;
  border:0;
  border-radius:6px;
  font-size:14px;
  font-weight:700;
  box-shadow:0 5px 11px rgba(15,23,42,.15);
}
.transaksi-report-page .pg-btn-view{
  background:#1769e8;
  border-color:#1769e8;
}
.transaksi-report-page .pg-btn-excel{
  background:#0cab55;
  border-color:#0cab55;
}

/* Empat filter desktop/tablet mengikuti gaya halaman Kategori Produk */
@media (min-width:769px){
  .transaksi-report-page .pg-filterbar__fields{
    gap:.5rem;
    align-items:center;
  }

  .transaksi-report-page .pg-field-period,
  .transaksi-report-page .pg-field-cashier,
  .transaksi-report-page .pg-field-from,
  .transaksi-report-page .pg-field-until{
    display:flex;
    align-items:stretch;
    min-width:0;
  }

  .transaksi-report-page .pg-field-period > label,
  .transaksi-report-page .pg-field-cashier > label,
  .transaksi-report-page .pg-field-from > label,
  .transaksi-report-page .pg-field-until > 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);
  }

  .transaksi-report-page .pg-field-period > .pg-select-control,
  .transaksi-report-page .pg-field-cashier > .pg-select-control,
  .transaksi-report-page .pg-field-from > .pg-date-control,
  .transaksi-report-page .pg-field-until > .pg-date-control{
    flex:1 1 auto;
    min-width:0;
    height:36px;
  }

  .transaksi-report-page .pg-field-period .pg-select-control > .fa,
  .transaksi-report-page .pg-field-cashier .pg-select-control > .fa,
  .transaksi-report-page .pg-field-from .pg-date-control > .fa,
  .transaksi-report-page .pg-field-until .pg-date-control > .fa{
    display:none;
  }

  .transaksi-report-page .pg-field-period .pg-control,
  .transaksi-report-page .pg-field-cashier .pg-control,
  .transaksi-report-page .pg-field-from .pg-control,
  .transaksi-report-page .pg-field-until .pg-control{
    width:100%;
    height:36px!important;
    min-height:36px!important;
    padding:.25rem .5rem!important;
    border-color:#d1d3e2;
    border-left:0;
    border-radius:0 .2rem .2rem 0!important;
    background-color:#fff;
    color:#344054;
    font-size:.875rem;
    font-weight:500;
    box-shadow:none;
  }

  .transaksi-report-page .pg-field-period select.pg-control,
  .transaksi-report-page .pg-field-cashier select.pg-control{
    padding-right:1.75rem!important;
  }

  .transaksi-report-page .pg-field-period .pg-control:focus,
  .transaksi-report-page .pg-field-cashier .pg-control:focus,
  .transaksi-report-page .pg-field-from .pg-control:focus,
  .transaksi-report-page .pg-field-until .pg-control:focus{
    border-color:var(--app-theme-color, #3f51b5);
    box-shadow:0 0 0 .15rem rgba(63,81,181,.18);
  }
}

.transaksi-report-page.pg-mode-bulanan .pg-filterbar__fields{
  grid-template-columns:minmax(190px,1fr) minmax(190px,1fr) minmax(190px,1fr) auto;
  gap:20px 28px;
  align-items:end;
}
.transaksi-report-page.pg-mode-bulanan .pg-actions-inline{
  grid-column:auto;
  display:grid;
  grid-template-columns:repeat(3,100px);
  gap:12px;
  width:auto;
  margin:0;
}
.transaksi-report-page.pg-mode-bulanan .pg-filterbar__bottom{
  display:none!important;
}

@media (max-width:1400px) and (min-width:769px){
  .transaksi-report-page.pg-mode-bulanan .pg-filterbar__fields{
    grid-template-columns:repeat(3,minmax(180px,1fr));
  }
  .transaksi-report-page.pg-mode-bulanan .pg-actions-inline{
    grid-column:1 / -1;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
  }
}

@media (max-width:768px){
  .transaksi-report-page .pg-filterbar{
    padding:14px;
    border-radius:10px;
  }
  .transaksi-report-page.pg-mode-bulanan .pg-filterbar__fields{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 10px;
  }
  .transaksi-report-page.pg-mode-bulanan .pg-actions-inline{
    grid-column:1 / -1;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
    width:100%;
  }
  .transaksi-report-page .pg-select-control .pg-control,
  .transaksi-report-page .pg-date-control .pg-control{
    height:40px!important;
    min-height:40px!important;
    padding-left:34px!important;
    font-size:12.5px!important;
  }
  .transaksi-report-page .pg-select-control > .fa,
  .transaksi-report-page .pg-date-control > .fa{
    left:11px;
    font-size:12px;
  }
}

</style>


<script>var base_url = "<?= base_url(); ?>";</script>
<script>
function two(n){return (n<10?'0':'')+n;}
function fmtDate(d){return two(d.getDate())+'/'+two(d.getMonth()+1)+'/'+d.getFullYear();}
function buildRangeString(dari,sampai){
  if(!dari && !sampai) return '';
  if(dari && !sampai) return dari+' - '+dari;
  if(!dari && sampai) return sampai+' - '+sampai;
  return dari+' - '+sampai;
}
function syncHiddenTanggal(){ $('#tanggal').val(buildRangeString($('#tgl_dari').val(),$('#tgl_sampai').val())); }
function parseInitialTanggal(raw){
  raw=(raw||'').trim();
  if(!raw) return {dari:'',sampai:''};
  if(raw.indexOf(' - ')!==-1){ let p=raw.split(' - '); return {dari:(p[0]||'').trim(), sampai:(p[1]||'').trim()}; }
  return {dari:raw, sampai:raw};
}

function setPreset(preset){
  const today = new Date();
  let dariDate, sampaiDate;

  if (preset === 'today') {
    dariDate = new Date(today);
    sampaiDate = new Date(today);
  } else if (preset === 'yesterday') {
    dariDate = new Date(today); dariDate.setDate(today.getDate()-1);
    sampaiDate = new Date(today); sampaiDate.setDate(today.getDate()-1);
  } else if (preset === 'thisweek') {
    const dow = today.getDay();
    const diffToMonday = (dow === 0) ? 6 : (dow - 1);
    dariDate = new Date(today); dariDate.setDate(today.getDate() - diffToMonday);
    sampaiDate = new Date(dariDate); sampaiDate.setDate(dariDate.getDate() + 6);
  } else if (preset === 'lastweek') {
    const dow = today.getDay();
    const diffToMonday = (dow === 0) ? 6 : (dow - 1);
    let mondayThisWeek = new Date(today);
    mondayThisWeek.setDate(today.getDate() - diffToMonday);
    dariDate = new Date(mondayThisWeek); dariDate.setDate(mondayThisWeek.getDate() - 7);
    sampaiDate = new Date(dariDate); sampaiDate.setDate(dariDate.getDate() + 6);
  } else {
    return;
  }

  $('#tgl_dari').val(fmtDate(dariDate));
  $('#tgl_sampai').val(fmtDate(sampaiDate));
  $('#presetGroup .btn-preset').removeClass('active');
  $('#presetGroup .btn-preset[data-preset="'+preset+'"]').addClass('active');

  syncHiddenTanggal();
  search_transaksi();
}

$('.btn-preset').on('click', function(){ setPreset($(this).data('preset')); });

$('#tgl_dari,#tgl_sampai').datepicker({
  format:'dd/mm/yyyy', autoclose:true, todayHighlight:true, todayBtn:'linked'
}).on('changeDate change', function(){
  $('#presetGroup .btn-preset').removeClass('active');
  syncHiddenTanggal();
  search_transaksi();
});

$('.date-harian').datepicker({ format:'M yyyy', autoclose:true, startView:'months', minViewMode:'months' });

function onJenisChange(){
  var isBulanan = $("#jenis").val()=='2';
  $("#container-wrapper")
    .toggleClass('pg-mode-bulanan', isBulanan)
    .toggleClass('pg-mode-harian', !isBulanan);

  if(isBulanan){
    $(".hide-1").addClass('d-none');
    $(".hide-2").removeClass('d-none');
  } else {
    $(".hide-1").removeClass('d-none');
    $(".hide-2").addClass('d-none');
  }
}

function search_transaksi(){ $('.harian').trigger('click'); }

$(document).on('click', '.harian', function(e){
  e.preventDefault();
  syncHiddenTanggal();
  $.ajax({
    url: base_url+'transaksi/load_data',
    type: 'POST',
    data: {
      jenis: $("#jenis").val(),
      tanggal: $("#tanggal").val(),
      periode: $("#periode").val(),
      user: $("#user_trx").val()
    },
    beforeSend: function(){ $('body').loading && $('body').loading(); },
    success: function(html){
      $("#laporan_harian").html(html);

      $("#laporan_harian")
        .find("section, .card, .table, .table-responsive")
        .addClass("avoid-break");

      const $r = $("#laporan_harian");
      $r.find("thead th, .heading, .table thead th").addClass("print-solid");
      $r.find("thead th").addClass("print-text-white");
      $r.find("tr.ringkasan-abu, .ringkasan .row-gray").addClass("print-bg-gray");
      $r.find("tr.ringkasan-hijau, .ringkasan .row-success").addClass("print-bg-success");
      $r.find("tr.ringkasan-oren,  .ringkasan .row-warning").addClass("print-bg-warning");
      $("#laporan_harian #sec-ringkasan").addClass("break-before");

      $('body').loading && $('body').loading('stop');
    },
    error: function(x,s,e){
      alert('Gagal memuat data: '+e);
      $('body').loading && $('body').loading('stop');
    }
  });
});

/* init */
(function(){
  let parsed = parseInitialTanggal($("#tanggal").val()),
      today  = new Date(),
      tstr   = fmtDate(today);
  if(!parsed.dari)   parsed.dari   = tstr;
  if(!parsed.sampai) parsed.sampai = parsed.dari;
  $('#tgl_dari').val(parsed.dari);
  $('#tgl_sampai').val(parsed.sampai);
  syncHiddenTanggal();
  onJenisChange();
  search_transaksi();
})();
</script>
