<?php
function _row($r, $k, $default=''){
  if (is_array($r)) return isset($r[$k]) ? $r[$k] : $default;
  if (is_object($r)) return isset($r->$k) ? $r->$k : $default;
  return $default;
}
function _rupiah($n){ return 'Rp ' . number_format((float)$n, 0, ',', '.'); }
function _dt($str){
  $ts = strtotime((string)$str);
  return $ts ? date('d/m/Y H:i', $ts) : '';
}
function _dlabel($str){
  $ts = strtotime((string)$str);
  return $ts ? date('d/m/Y', $ts) : '';
}
function _is_bank_label($label){
  $l = strtoupper(trim((string)$label));
  if (strpos($l, 'BANK') !== false) return true;
  if (strpos($l, 'QRIS') !== false) return true;
  $bankHints = ['BCA','BRI','BNI','MANDIRI','CIMB','DANA','OVO','GOPAY','SHOPEEPAY','LINKAJA'];
  foreach($bankHints as $h){
    if (strpos($l, $h) !== false) return true;
  }
  return false;
}
?>

<style>
  /* =========================================================
     RESET efek container bawaan "vertical-timeline"
     (ini yang sering bikin elemen "lari" / offset aneh)
  ========================================================= */
  #dataMutasi.vertical-timeline,
  #dataMutasi.vertical-timeline--one-column{
    padding: 0 !important;
    margin: 0 !important;
  }
  #dataMutasi.vertical-timeline::before{
    display:none !important;
    content:none !important;
  }

  /* Dashboard widget biasanya inject ke #load-mutasi-kas */
  #dataMutasi{
  overflow: hidden;
  position: relative;
}

/* khusus dashboard widget: harus bisa scroll */
#load-mutasi-kas{
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}


  /* =========================================================
     TIMELINE (gunakan class unik biar gak bentrok)
  ========================================================= */
  .mtx-timeline, .mtx-timeline *{
    box-sizing: border-box;
  }

  .mtx-timeline{
    width:100%;
    max-width:100%;
    --bd: rgba(0,0,0,.08);
    --muted:#6b7280;
    --shadow: 0 8px 18px rgba(0,0,0,.05);
    --bg-soft:#f6f8fb;

    --cash-bg: rgba(34,197,94,.10);
    --cash-bd: rgba(34,197,94,.25);
    --cash-tx: #0f7a34;

    --bank-bg: rgba(99,102,241,.10);
    --bank-bd: rgba(99,102,241,.25);
    --bank-tx: #3740d8;

    --modal-bg: rgba(245,158,11,.12);
    --modal-bd: rgba(245,158,11,.30);
    --modal-tx: #b45309;

    --amt-bg: rgba(59,130,246,.10);
    --amt-bd: rgba(59,130,246,.16);
    --amt-tx: #0f172a;
  }

  .mtx-day{
    padding: 6px 0;
    margin-top: 6px;
  }
  .mtx-daychip{
    display:inline-flex;align-items:center;gap:8px;
    padding:5px 10px;border-radius:999px;border:1px solid var(--bd);
    background:#fff;font-weight:800;font-size:12px;color:#111827;
    box-shadow:0 6px 12px rgba(0,0,0,.04);
  }

  .mtx-item{
    width:100%;
    max-width:100%;
    display:flex;
    gap:10px;
    padding:10px 12px;
    border:1px solid var(--bd);
    border-radius:14px;
    background:#fff;
    box-shadow:var(--shadow);
    margin:10px 0;
    position:relative;
    overflow:hidden;
  }
  .mtx-item::before{
    content:"";
    position:absolute;left:0;top:0;bottom:0;width:4px;
    background: linear-gradient(to bottom, rgba(59,130,246,.65), rgba(59,130,246,.25));
  }
  .mtx-item.is-modal::before{
    background: linear-gradient(to bottom, rgba(245,158,11,.75), rgba(245,158,11,.25));
  }

  .mtx-ico{
    width:34px;height:34px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;
    font-size:15px;
    margin-left:2px;
  }
  .mtx-ico.is-cash{ background:var(--cash-bg); color:var(--cash-tx); border:1px solid var(--cash-bd); }
  .mtx-ico.is-bank{ background:var(--bank-bg); color:var(--bank-tx); border:1px solid var(--bank-bd); }
  .mtx-ico.is-modal{ background:var(--modal-bg); color:var(--modal-tx); border:1px solid var(--modal-bd); }

  .mtx-body{flex:1; min-width:0;}
  .mtx-top{
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    gap:10px;
    min-width:0;
  }

  .mtx-route{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap; /* biar wrap rapi di layar kecil */
  }

  .mtx-pill{
    display:inline-flex;align-items:center;
    padding:3px 8px;border-radius:999px;
    border:1px solid var(--bd);
    font-size:12px;font-weight:900;
    line-height:1;
    white-space:nowrap;
    max-width:100%;
  }
  .mtx-pill.is-cash{background:var(--cash-bg); border-color:var(--cash-bd); color:var(--cash-tx);}
  .mtx-pill.is-bank{background:var(--bank-bg); border-color:var(--bank-bd); color:var(--bank-tx);}
  .mtx-pill.is-modal{background:var(--modal-bg); border-color:var(--modal-bd); color:var(--modal-tx);}

  .mtx-arrow{opacity:.55;font-weight:900;}

  .mtx-amt{
    justify-self:end;
    font-size:14px;font-weight:900;
    padding:5px 10px;border-radius:999px;
    background: var(--amt-bg);
    border:1px solid var(--amt-bd);
    color: var(--amt-tx);
    white-space:nowrap;
  }

  .mtx-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:6px;
    font-size:11.5px;
    color:var(--muted);
  }
  .mtx-meta > span{display:inline-flex;align-items:center;gap:6px;}

  .mtx-badge{
    display:inline-flex;align-items:center;
    padding:2px 8px;border-radius:999px;
    border:1px solid var(--bd);
    background:#fff;font-weight:900;color:#111827;
    white-space:nowrap;
  }
  .mtx-badge.is-modal{
    background:var(--modal-bg);
    border-color:var(--modal-bd);
    color:var(--modal-tx);
  }

  .mtx-note{
    margin-top:8px;
    padding:8px 10px;
    border-radius:12px;
    background: var(--bg-soft);
    border:1px dashed rgba(0,0,0,.14);
    color:#111827;
    font-size:12.5px;
    line-height:1.4;
    word-break: break-word; /* aman untuk catatan panjang */
  }

  @media (max-width:576px){
    .mtx-top{ grid-template-columns: 1fr; }
    .mtx-amt{ justify-self:start; width:100%; text-align:left; }
  }
</style>

<?php $date_before = ''; ?>

<?php if (!empty($result)) : ?>
  <div class="mtx-timeline">
    <?php foreach ($result as $row) : ?>
      <?php
        $create_date  = _row($row, 'create_date');
        $date_only    = $create_date ? date('Y-m-d', strtotime($create_date)) : '';

        $dari_label   = trim((string)_row($row, 'dari_label', ''));
        $tujuan_label = trim((string)_row($row, 'tujuan_label', 'Kas'));
        $jumlah       = (float)_row($row, 'jumlah', 0);
        $user_name    = trim((string)_row($row, 'user_name', '-'));
        $catatan      = trim((string)_row($row, 'catatan', ''));
        $no_trans     = trim((string)_row($row, 'no_trans', ''));

        $bukti        = trim((string)_row($row, 'bukti', '')); // filename dari jurnal.bukti

        $isModal = (stripos($catatan, 'Tambah Modal:') === 0) || (strtoupper($dari_label) === 'TAMBAH MODAL');

        if ($isModal) $dari_label = 'TAMBAH MODAL';
        if ($dari_label === '') $dari_label = 'Kas';

        $note = $catatan;
        if ($isModal && stripos($note, 'Tambah Modal:') === 0) {
          $note = trim(substr($note, strlen('Tambah Modal:')));
        }

        if ($date_only !== '' && $date_only !== $date_before) {
          $date_before = $date_only;
          echo '<div class="mtx-day"><span class="mtx-daychip"><i class="fa fa-calendar"></i> ' . _dlabel($date_only) . '</span></div>';
        }

        $isFromBank = _is_bank_label($dari_label);
        $isToBank   = _is_bank_label($tujuan_label);

        $fromClass = $isModal ? 'is-modal' : ($isFromBank ? 'is-bank' : 'is-cash');
        $toClass   = $isToBank ? 'is-bank' : 'is-cash';

        $icoClass  = $isModal ? 'is-modal' : ($isFromBank ? 'is-bank' : 'is-cash');
        $icoIcon   = $isModal ? 'fa-plus' : 'fa-exchange';

        $wrapClass = $isModal ? 'is-modal' : '';

        // [ADD] amankan nama file bukti
        $bukti_safe = ($bukti !== '') ? basename($bukti) : '';
        $bukti_path = FCPATH . 'uploads/lampiran/' . $bukti_safe; // untuk cek exist (opsional)
        $bukti_url  = ($bukti_safe !== '') ? base_url('uploads/lampiran/' . rawurlencode($bukti_safe)) : '';
        $bukti_exist = ($bukti_safe !== '' && @file_exists($bukti_path)); // [ADD] kalau file hilang, jangan tampilkan link
      ?>

      <div class="mtx-item <?= $wrapClass; ?>">
        <div class="mtx-ico <?= $icoClass; ?>" title="<?= $isModal ? 'Tambah Modal' : 'Mutasi'; ?>">
          <i class="fa <?= $icoIcon; ?>"></i>
        </div>

        <div class="mtx-body">
          <div class="mtx-top">
            <div class="mtx-route">
              <span class="mtx-pill <?= $fromClass; ?>"><?= htmlspecialchars($dari_label); ?></span>
              <span class="mtx-arrow">→</span>
              <span class="mtx-pill <?= $toClass; ?>"><?= htmlspecialchars($tujuan_label); ?></span>
            </div>

            <div class="mtx-amt"><?= _rupiah($jumlah); ?></div>
          </div>

          <div class="mtx-meta">
            <span><i class="fa fa-clock-o"></i> <?= _dt($create_date); ?></span>
            <span><i class="fa fa-user"></i> <?= htmlspecialchars($user_name); ?></span>

            <?php if ($isModal) : ?>
              <span><i class="fa fa-bolt"></i> <span class="mtx-badge is-modal">TAMBAH MODAL</span></span>
            <?php endif; ?>

            <?php if ($no_trans !== '') : ?>
              <span><i class="fa fa-tag"></i> <span class="mtx-badge"><?= htmlspecialchars($no_trans); ?></span></span>
            <?php endif; ?>

            <?php if ($bukti_exist && $bukti_url !== '') : ?>
              <span>
                <i class="fa fa-paperclip"></i>
                <a class="mtx-badge" href="<?= $bukti_url; ?>" target="_blank" style="text-decoration:none;">
                  Lampiran
                </a>
              </span>
            <?php endif; ?> <!-- [EDIT] tombol lampiran bukti mutasi -->
          </div>

          <?php if ($note !== '') : ?>
            <div class="mtx-note"><b>Catatan:</b> <?= htmlspecialchars($note); ?></div>
          <?php endif; ?>
        </div>
      </div>

    <?php endforeach; ?>
  </div>
<?php else : ?>
  <div class="text-center text-muted" style="padding:18px 0;">
    Silahkan pilih periode mutasi yang ingin di tampilkan.
  </div>
<?php endif; ?>