<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="container mt-4">
  <h4 class="mb-4 text-primary">Laporan Produk Keluar</h4>

  <div class="table-responsive rounded shadow-sm p-3 bg-white">
    <table class="table table-hover table-bordered" id="productOutTable">
      <thead class="table-light">
        <tr class="text-center align-middle">
          <th style="width: 5%">No</th>
          <th style="width: 20%">Kode Transaksi</th>
          <th>Nama Item</th>
          <th style="width: 15%">Tanggal</th>
          <th style="width: 15%">Aksi</th>
        </tr>
      </thead>
      <tbody>
        <?php $no = 1; foreach ($product_out as $row): ?>
        <tr>
          <td class="text-center"><?= $no++ ?></td>
          <td><?= esc($row['kode']) ?></td>
          <td><?= esc($row['nama_item']) ?></td>
          <td><?= date('d-m-Y', strtotime($row['tanggal_keluar'])) ?></td>
          <td class="text-center">
            <button class="btn btn-sm btn-info text-white btn-detail" 
                    data-kode="<?= esc($row['kode']) ?>">
              <i class="fa fa-search"></i> Detail
            </button>
          </td>
        </tr>
        <?php endforeach ?>
      </tbody>
    </table>
  </div>
</div>

<!-- Modal Detail -->
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content border-0 shadow">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title">Detail Produk Keluar</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
      </div>
      <div class="modal-body bg-light">
        <div class="table-responsive">
          <table class="table table-bordered table-sm">
            <thead class="table-secondary">
              <tr class="text-center">
                <th>Nama Barang</th>
                <th>Gudang</th>
                <th>Qty</th>
                <th>Barcode</th>
                <th>Tanggal</th>
                <th>Keterangan</th>
                <th>Dibuat Oleh</th>
              </tr>
            </thead>
            <tbody id="detailBody">
              <!-- Diisi via JavaScript -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
document.querySelectorAll('.btn-detail').forEach(btn => {
  btn.addEventListener('click', function () {
    const kode = this.dataset.kode;
    fetch(`<?= base_url('report/product_out/detail/') ?>${kode}`)
      .then(res => res.json())
      .then(data => {
        const tbody = document.getElementById('detailBody');
        tbody.innerHTML = '';

        if (!data.length) {
          tbody.innerHTML = `<tr><td colspan="7" class="text-center text-muted">Data tidak ditemukan.</td></tr>`;
          return;
        }

        data.forEach(row => {
          tbody.innerHTML += `
            <tr>
              <td>${row.nama_item}</td>
              <td>${row.nama_gudang}</td>
              <td class="text-center">${row.qty}</td>
              <td>${row.barcode}</td>
              <td>${row.tanggal_keluar}</td>
              <td>${row.keterangan || '-'}</td>
              <td>${row.created_by ?? '-'}</td>
            </tr>`;
        });

        new bootstrap.Modal(document.getElementById('detailModal')).show();
      });
  });
});
</script>

<?= $this->endSection() ?>
