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

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

    <!-- Form Tambah Produk Keluar -->
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-light text-dark fw-bold">
            Tambah Produk Keluar
        </div>
        <div class="card-body">
            <form action="<?= base_url('admin/product_out/save') ?>" method="post">
                <?= csrf_field() ?>
                <div class="row gy-3">
                    <div class="col-md-3">
                        <label class="form-label">Kode Transaksi</label>
                        <input type="text" name="kode" value="<?= esc($kode ?? '') ?>" class="form-control" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Barang</label>
                        <div class="input-group">
                            <input type="text" id="item_nama" class="form-control" placeholder="Klik untuk pilih barang" readonly data-bs-toggle="modal" data-bs-target="#itemModal">
                            <input type="hidden" name="item_id" id="item_id" required>
                            <input type="hidden" name="gudang_id" id="gudang_id" required>
                            <input type="hidden" name="barcode" id="barcode">
                        </div>
                        <div class="form-text" id="info-detail"></div>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Qty</label>
                        <input type="number" name="qty" class="form-control" required>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Tanggal Keluar</label>
                        <input type="date" name="tanggal_keluar" value="<?= date('Y-m-d\TH:i:s') ?>" class="form-control" required>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Keterangan</label>
                        <input type="text" name="keterangan" class="form-control" placeholder="Contoh: Rusak, Retur">
                    </div>
                </div>
                <button type="submit" class="btn btn-outline-primary mt-3">
                    <i class="fas fa-arrow-up"></i> Simpan Produk Keluar
                </button>
            </form>
        </div>
    </div>

    <div class="card shadow-sm">
    <div class="card-header bg-light text-dark fw-bold">
        Riwayat Produk Keluar
    </div>
    <div class="card-body table-responsive">
        <table class="table table-bordered table-hover align-middle">
            <thead class="table-secondary">
                <tr>
                    <th>#</th>
                    <th>Kode Transaksi</th>
                    <th>Nama Barang</th>
                    <th>Tanggal</th>
                    <th class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php if (!empty($data)): ?>
                    <?php $no = 1; foreach ($data as $row): ?>
                        <tr>
                            <td><?= $no++ ?></td>
                            <td><?= esc($row['kode'] ?? '-') ?></td>
                            <td><?= esc($row['nama_item'] ?? '-') ?></td>
                            <td><?= date('d-m-Y H:i:s', strtotime($row['tanggal_keluar'])) ?></td>
                            <td class="text-center">
                                <button type="button" class="btn btn-sm btn-outline-info" 
                                        data-kode="<?= esc($row['kode']) ?>" 
                                        onclick="showDetail(this)">
                                    <i class="fas fa-search"></i>
                                </button>
                                <a href="<?= base_url('admin/product_out/edit/' . esc($row['kode'])) ?>" 
                                   class="btn btn-sm btn-outline-warning">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a href="<?= base_url('admin/product_out/delete/' . $row['id']) ?>" 
                                   class="btn btn-sm btn-outline-danger" 
                                   onclick="return confirm('Yakin ingin menghapus data ini?')">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </td>
                        </tr>
                    <?php endforeach ?>
                <?php else: ?>
                    <tr>
                        <td colspan="5" class="text-center text-muted">Belum ada data produk keluar</td>
                    </tr>
                <?php endif ?>
            </tbody>
        </table>
    </div>
</div>
</div>

<!-- Modal Pilih Barang -->
<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="itemModalLabel">Pilih Barang</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <table class="table table-bordered table-hover">
          <thead class="table-light">
            <tr>
              <th>Nama Barang</th>
              <th>Barcode</th>
              <th>Stok</th>
              <th>Gudang</th>
              <th>Aksi</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ($items as $item): ?>
            <tr>
              <td><?= esc($item['nama']) ?></td>
              <td><?= esc($item['barcode'] ?? '-') ?></td>
              <td><?= esc($item['stok']) ?></td>
              <td><?= esc($item['nama_gudang'] ?? '-') ?></td>
              <td>
                <button type="button" class="btn btn-sm btn-outline-primary" 
                        onclick="selectItem(
                          <?= $item['id'] ?>, 
                          '<?= esc($item['nama'], 'js') ?>', 
                          '<?= esc($item['barcode'], 'js') ?>', 
                          <?= $item['id_gudang'] ?>, 
                          '<?= esc($item['nama_gudang'], 'js') ?>'
                        )">Pilih</button>
              </td>
            </tr>
            <?php endforeach ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal Detail -->
<div class="modal fade" id="modalDetail" tabindex="-1" aria-labelledby="modalDetailLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header bg-info text-white">
        <h5 class="modal-title" id="modalDetailLabel">Detail Produk Keluar</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
      </div>
      <div class="modal-body">
        <div id="detail-content">Memuat data...</div>
      </div>
    </div>
  </div>
</div>

<script>
function selectItem(id, nama, barcode, gudangId, gudangNama) {
    document.getElementById('item_id').value = id;
    document.getElementById('item_nama').value = nama;
    document.getElementById('barcode').value = barcode;
    document.getElementById('gudang_id').value = gudangId;
    document.getElementById('info-detail').innerText = `Gudang: ${gudangNama} | Barcode: ${barcode}`;
    const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
    modal.hide();
}

function showDetail(button) {
    const kode = button.getAttribute('data-kode');
    const modal = new bootstrap.Modal(document.getElementById('modalDetail'));
    const detailContainer = document.getElementById('detail-content');

    if (!kode) {
        detailContainer.innerHTML = '<div class="text-danger">Kode transaksi tidak tersedia.</div>';
        modal.show();
        return;
    }

    detailContainer.innerHTML = 'Memuat data...';
    const url = `<?= base_url('admin/product_out/detail/') ?>${encodeURIComponent(kode)}`;

    fetch(url)
        .then(res => res.text())
        .then(html => {
            detailContainer.innerHTML = html;
            modal.show();
        })
        .catch(err => {
            detailContainer.innerHTML = '<div class="text-danger">Gagal memuat data.</div>';
        });
}
</script>

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