<div class="card">
  <div style="display:flex; justify-content:space-between; align-items:center;
              margin-bottom:16px; flex-wrap:wrap; gap:8px;">
    <span style="font-weight:600; color:#555;">
      Total: <strong><?= count($transactions) ?></strong> transaksi
      <?php if ($is_admin): ?>
        <span class="badge badge-primary" style="margin-left:6px;">Semua User</span>
      <?php endif; ?>
    </span>
    <a href="<?= site_url('receipt/create') ?>" class="btn btn-primary">+ Buat Transaksi</a>
  </div>

  <table id="tblReceipt" class="display nowrap" style="width:100%">
    <thead>
      <tr>
        <th class="all">#</th>
        <th class="all">Invoice</th>
        <th>Toko</th>
        <th class="all">Total</th>
        <th>Kasir</th>
        <?php if ($is_admin): ?>
          <th>Pemilik</th>
        <?php endif; ?>
        <th class="all">Tanggal</th>
        <th class="all">Aksi</th>
      </tr>
    </thead>
    <tbody>
      <?php if (empty($transactions)): ?>
        <tr>
          <td colspan="<?= $is_admin ? 8 : 7 ?>"
              style="text-align:center; color:#999; padding:40px;">
            Belum ada transaksi.
            <a href="<?= site_url('receipt/create') ?>" style="color:var(--primary);">
              Buat sekarang →
            </a>
          </td>
        </tr>
      <?php else: ?>
        <?php foreach ($transactions as $i => $t): ?>
          <?php
            $ts = !empty($t->trx_date)
                  ? strtotime($t->trx_date)
                  : strtotime($t->created_at);
          ?>
          <tr>
            <td><?= $i + 1 ?></td>

            <td>
              <strong style="font-family:monospace; font-size:12px;">
                <?= htmlspecialchars($t->invoice_no) ?>
              </strong>
            </td>

            <td><?= htmlspecialchars($t->store_name ?? '-') ?></td>

            <td data-order="<?= (float)$t->total ?>">
              <span style="font-weight:700; color:var(--primary); white-space:nowrap;">
                Rp&nbsp;<?= number_format($t->total, 0, '.', '.') ?>
              </span>
            </td>

            <td><?= htmlspecialchars($t->cashier) ?></td>

            <?php if ($is_admin): ?>
              <td>
                <span class="badge badge-primary" style="font-size:11px;">
                  <?= htmlspecialchars($t->owner_name ?? '-') ?>
                </span>
              </td>
            <?php endif; ?>

            <td data-order="<?= date('Y-m-d H:i:s', $ts) ?>">
              <span style="white-space:nowrap; color:#555; font-size:12px;">
                <?= date('d/m/Y H:i', $ts) ?>
              </span>
            </td>

            <td>
              <div style="display:flex; gap:4px; justify-content:center;">
                <a href="<?= site_url('receipt/print/' . $t->id) ?>"
                   class="btn btn-primary btn-sm" title="Cetak">🖨</a>
                <a href="<?= site_url('receipt/edit/' . $t->id) ?>"
                   class="btn btn-warning btn-sm" title="Edit">✏️</a>
                <a href="<?= site_url('receipt/delete/' . $t->id) ?>"
                   class="btn btn-danger btn-sm" title="Hapus"
                   onclick="return confirm('Hapus transaksi ini?')">🗑</a>
              </div>
            </td>
          </tr>
        <?php endforeach; ?>
      <?php endif; ?>
    </tbody>
  </table>
</div>

<script>
$(document).ready(function () {
  var colAksi    = <?= $is_admin ? 7 : 6 ?>;
  var colTanggal = <?= $is_admin ? 6 : 5 ?>;

  $('#tblReceipt').DataTable({
    responsive: true,
    language: {
      search:            '',
      searchPlaceholder: 'Cari transaksi...',
      lengthMenu:        'Tampilkan _MENU_ baris',
      info:              'Menampilkan _START_–_END_ dari _TOTAL_ data',
      infoEmpty:         'Tidak ada data',
      infoFiltered:      '(dari _MAX_ total)',
      zeroRecords:       'Transaksi tidak ditemukan',
      emptyTable:        'Belum ada transaksi',
      paginate: { first:'«', last:'»', next:'›', previous:'‹' },
    },
    order:      [[colTanggal, 'desc']],
    pageLength: 25,
    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'Semua']],
    columnDefs: [
      { orderable: false,  targets: colAksi },
      { responsivePriority: 1, targets: 1 },   // Invoice — selalu tampil
      { responsivePriority: 2, targets: colTanggal },  // Tanggal
      { responsivePriority: 3, targets: colAksi },     // Aksi
      { responsivePriority: 4, targets: 3 },           // Total
    ],
    dom: '<"dt-top"lf>rt<"dt-bottom"ip>',
  });
});
</script>
