<div class="row justify-content-center">
    <div class="col-md-12">
        <div class="card shadow-sm border-bottom-primary">
            <div class="card-header bg-white py-3">
                <div class="row">
                    <div class="col">
                        <h4 class="h5 align-middle m-0 font-weight-bold text-primary">
                            Form Edit Barang Keluar
                        </h4>
                    </div>
                    <div class="col-auto">
                        <a href="<?= base_url('barangkeluar') ?>" class="btn btn-sm btn-secondary btn-icon-split">
                            <span class="icon">
                                <i class="fa fa-arrow-left"></i>
                            </span>
                            <span class="text">
                                Kembali
                            </span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <?= $this->session->flashdata('pesan'); ?>
                <?= form_open('', [], ['id_barang_keluar' => $brg['id_barang_keluar'], 'user_id' => $this->session->userdata('login_session')['user']]); ?>
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">General</a>

                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab ">
                        <div class="row form-group mt-4">
                            <label class="col-md-2 text-md-right" for="id_barang_keluar">ID Transaksi</label>
                            <div class="col-md-5">
                                <input value="<?= $brg['id_barang_keluar']; ?>" type="text" readonly="readonly" class="form-control">
                                <?= form_error('id_barang_keluar', '<small class="text-danger">', '</small>'); ?>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-md-2 text-md-right" for="tanggal_keluar">Tanggal Keluar</label>
                            <div class="col-md-5">
                                <input value="<?= set_value('tanggal_keluar', $brg['tanggal_keluar']); ?>" name="tanggal_keluar" id="tanggal_keluar" type="text" class="form-control date" placeholder="Tanggal Masuk...">
                                <?= form_error('tanggal_keluar', '<small class="text-danger">', '</small>'); ?>
                            </div>
                        </div>

                        <div class="row form-group mt-4">
                            <label class="col-md-2 text-md-right" for="supplier_id">Lokasi</label>
                            <div class="col-md-5">
                                <div class="input-group">
                                    <select name="cabang_id" id="cabang_id" class="custom-select">
                                        <option value="" selected disabled>Pilih Lokasi</option>
                                        <?php foreach ($cabang as $s) : 
                                                if($brg['cabang_id'] == $s['id_cabang']) {
                                            ?>
                                            <option <?= ($brg['cabang_id'] == $s['id_cabang']) ? 'selected' : ''; ?> <?= set_select('cabang_id', $s['id_cabang']) ?> value="<?= $s['id_cabang'] ?>"><?= $s['nama_cabang'] ?></option>
                                        <?php 
                                                }
                                            endforeach; ?>
                                    </select>
                                    <div class="input-group-append">
                                        <a class="btn btn-primary" href="<?= base_url('cabang/add'); ?>"  target="__BLANK"><i class="fa fa-plus"></i></a>
                                    </div>
                                </div>
                                <?= form_error('cabang_id', '<small class="text-danger">', '</small>'); ?>
                            </div>
                        </div>
                        <table class="table w-100 dt-responsive nowrap  " id="">
                            <thead class="thead-light">
                                <tr>
                                    <th>User Pemilik</th>
                                    <th>Nama Barang</th>
                                    <th>Tanggal Masuk Barang</th>
                                    <th>Stok Akhir Sebelum Keluar</th>
                                    <th>Jumlah Keluar</th>
                                    <th>Stok Akhir Setelah Keluar</th>
                                    <th>Merk</th>
                                    <th>Spesifikasi</th>
                                    <th>Barcode</th>
                                    <th>Serial Number</th>
                                    <th colspan="5" class="text-center">
                                        <!-- Tombol di tabel -->
                                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modalTambahBarang">
                                          <i class="fas fa-plus"></i>
                                        </button>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="detail_transfer">
                                <?php
                                $i = 1;
                                $jumlah_barang_keluar = 0;
                                foreach ($d_brg as $row) {

                                ?>
                                    <tr id="data">
                                      <td>
                                          <input type='hidden' name='id_detail_masuk[]' value="<?= $row['id_detail']; ?>" required>
                                          <input type='hidden' name='id_barang[]' value="<?= $row['id_barang']; ?>" required>
                                          <input type='hidden' name='user_id_pemilik[]' value="<?= $row['id_user_pemilik']; ?>" required>
                                          <?= $row['user_pemilik']; ?>
                                      </td>
                                        <td><?= $row['nama_barang']; ?></td>
                                        <td><?= $row['tanggal_masuk']; ?></td>
                                        <td>
                                            <input type='text' name='stok_asal[]' readonly class='form-control stok' value='<?= $row['stok_real']  ?>'>
                                        </td>
                                        <td>
                                            <div class="input-group">
                                                <input type='text' name='jumlah[]' required class='form-control qty jumlah' value='<?= set_value('jumlah[]', $row['jumlah']); ?>' required>
                                                <div class="input-group-append">
                                                    <span class="input-group-text">Satuan</span>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <input type='text' name='stok_tujuan[]' readonly class='form-control total_stok' value='<?= $row['stok_real'] - $row['jumlah'] ?>' required>
                                        </td>
                                        <td><?= $row['merk']; ?></td>
                                        <td><?= $row['spesifikasi']; ?></td>
                                        <td><?= $row['barcode']; ?></td>
                                        <td><?= $row['sn']; ?></td>
                                        <td><button class="btn btn-danger btn-sm" onclick="hapusBarang(this)">Hapus</button></td>
                                        <td></td>
                                    </tr>
                                <?php
                                    $i++;
                                    $jumlah_barang_keluar += $row['jumlah'];
                                }
                                ?>
                                <input type="hidden" id="jumlah_edit" value="<?= $i - 1 ?>">
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="4" class="text-right">Jumlah Barang Keluar</td>
                                    <td><input type="text" readonly class="form-control" name="total_barang_keluar" id="total_barang_keluar" value="<?= $jumlah_barang_keluar; ?>"></td>
                                    <td colspan="6"></td>
                                </tr>
                            </tfoot>
                        </table>

                        <div class="row form-group mt-3">
                            <label class="col-md-2 text-md-right" for="keterangan">Keterangan (Opsi)</label>
                            <div class="col-md-5">
                                <textarea name="keterangan" type="text" class="form-control" placeholder="Keterangan"><?= set_value('ket', $brg['ket']); ?></textarea>
                                <?= form_error('keterangan', '<small class="text-danger">', '</small>'); ?>
                            </div>
                        </div>

                    </div>
                    <div class="row form-group">
                        <div class="col offset-md-5">
                            <button type="submit" class="btn btn-primary">Simpan</button>
                            <button type="reset" class="btn btn-secondary">Reset</button>
                        </div>
                    </div>
                    <?= form_close(); ?>

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



<!-- Modal -->
<div class="modal fade" id="modalTambahBarang" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title">Tambah Barang Keluar</h5>
        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">

        <!-- Pilih User Pemilik -->
        <div class="row form-group">
            <label class="col-sm-2" for="user_id_pemilik">User Pemilik</label>
            <div class="col-sm-10">
                <select name="user_id_pemilik" id="user_id_pemilik" class="custom-select">
                    <option value="">Pilih User Pemilik Aset</option>
                    <?php foreach ($user_pemilik as $s) : ?>
                        <option value="<?= $s['id_user'] ?>"><?= $s['nama'] ?> ( <?= $s['nama_depart'] ?> )</option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>

        <!-- Pilih User Pemilik -->
        <div class="row form-group">
            <label class="col-sm-2"></label>
            <div class="col-sm-10">
                <!-- Tombol Cari -->
                <button type="button" class="btn btn-info mb-3" onclick="cariData()">Cari Data</button>
            </div>
        </div>

        <!-- Tabel daftar barang -->
        <div id="tabelBarang" style="display:none;">
            <!-- Input Pencarian -->
            <input type="text" id="searchBarang" class="form-control mb-2" placeholder="Cari barang...">
            <table class="table table-bordered table-striped">
                <thead class="thead-light">
                  <tr>
                    <th>ID Barang Masuk</th>
                    <th>Tanggal Masuk</th>
                    <th>Nama Barang</th>
                    <th>Sisa Stok</th>
                    <th>Merk</th>
                    <th>Spesifikasi</th>
                    <th>Barcode</th>
                    <th>Serial Number</th>
                    <th>Aksi</th>
                  </tr>
                </thead>
                <tbody id="dataBarang"></tbody>
            </table>
        </div>

      </div>
    </div>
  </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Ambil semua input jumlah
    const jumlahInputs = document.querySelectorAll("input[name='jumlah[]']");

    jumlahInputs.forEach(input => {
        input.addEventListener("input", function () {
            hitungStok(this);
            hitungTotal();
        });
    });

    function hitungStok(el) {
        // ambil parent <tr> dari input jumlah
        const row = el.closest("tr");

        // ambil stok asal
        const stokAsal = parseFloat(row.querySelector("input[name='stok_asal[]']").value) || 0;

        // ambil jumlah keluar yg diinput
        const jumlahKeluar = parseFloat(el.value) || 0;

        // cari field stok tujuan (setelah keluar)
        const stokTujuanEl = row.querySelector("input[name='stok_tujuan[]']");

        // hitung stok akhir
        stokTujuanEl.value = stokAsal - jumlahKeluar;
    }

    function hitungTotal() {
        let total = 0;
        document.querySelectorAll("input[name='jumlah[]']").forEach(input => {
            total += parseFloat(input.value) || 0;
        });
        document.getElementById("total_barang_keluar").value = total;
    }
});
</script>

<script>
  // Dummy data barang (simulasi, bisa diganti AJAX)
    // Fungsi filter tabel
    document.getElementById("searchBarang").addEventListener("keyup", function() {
      let keyword = this.value.toLowerCase();
      let rows = document.querySelectorAll("#dataBarang tr");

      rows.forEach(row => {
        let text = row.innerText.toLowerCase();
        if (text.indexOf(keyword) > -1) {
          row.style.display = "";
        } else {
          row.style.display = "none";
        }
      });
    });


  // Buka modal
  function tambah_barang(mode) {
    $("#modalTambahBarang").modal("show");
  }

  // Cari data barang berdasarkan user
  function cariData() {
      let userId = document.getElementById("user_id_pemilik").value;
      let tanggal_keluar = document.getElementById("tanggal_keluar").value;
      let tbody = document.getElementById("dataBarang");
      tbody.innerHTML = "";

      if (!userId) {
        alert("Pilih user pemilik terlebih dahulu!");
        return;
      }

      console.log(userId);

      $.ajax({
        url: '<?= base_url('barangmasuk/get_barang_masuk_by_user') ?>', // arahkan ke controller
        type: "POST",
        data: { 
            user_id: userId,
            tgl: tanggal_keluar 
        },
        dataType: "json",
        success: function(response) {

          if (response.length > 0) {
            response.forEach((b, i) => {
              let tr = `<tr>
                          <td>${b.id_barang_masuk}</td>
                          <td>${b.tanggal_masuk}</td>
                          <td>${b.nama_barang}</td>
                          <td>${b.saldo_stok}</td>
                          <td>${b.merk}</td>
                          <td>${b.spesifikasi}</td>
                          <td>${b.barcode}</td>
                          <td>${b.sn}</td>
                          <td>
                            <button class="btn btn-sm btn-primary" 
                              onclick="pilihBarang('${b.res_send_data}')">
                              Pilih
                            </button>
                          </td>
                        </tr>`;
              tbody.innerHTML += tr;
            });
          } else {
            tbody.innerHTML = `<tr><td colspan="8" class="text-center">Tidak ada data barang</td></tr>`;
          }

          document.getElementById("tabelBarang").style.display = "block";
        },
        error: function(xhr, status, error) {
          console.error(error);
          alert("Gagal mengambil data barang!");
        }
      });
    }


    // Tambah barang ke tabel utama
    function pilihBarang(data) {
        let tbody = document.getElementById("detail_transfer");

        let jsonStr = atob(data); 
        let row = JSON.parse(jsonStr); 

        // 🔍 Cek apakah barang sudah ada di tbody
        let sttsIdBarang = false;
        let sttsPemilik = false;
        tbody.querySelectorAll("input[name='id_barang[]']").forEach(function(input) {
            if (input.value === row.id_barang) {
                sttsIdBarang = true;
            }
        });

        tbody.querySelectorAll("input[name='user_id_pemilik[]']").forEach(function(input) {
            if (input.value === row.id_user_pemilik) {
                sttsPemilik = true;
            }
        });

        if (sttsIdBarang == true && sttsPemilik == true) {
            alert("Barang sudah ada di daftar!");
            return; // hentikan proses
        }

        let tr = document.createElement("tr");
        tr.innerHTML = `
          <td>
              <input type='hidden' name='id_detail_masuk[]' value="${row.id_detail}" required>
              <input type='hidden' name='id_barang[]' value="${row.id_barang}" required>
              <input type='hidden' name='user_id_pemilik[]' value="${row.id_user_pemilik}" required>
              ${row.user_pemilik}
          </td>
          <td>${row.nama_barang}</td>
          <td>${row.tanggal_masuk}</td>
          <td>
              <input type='text' name='stok_asal[]' readonly class='form-control stok' value='${row.saldo_stok}'>
          </td>
          <td>
              <div class="input-group">
                  <input type='number' name='jumlah[]' class='form-control qty jumlah' value='0' min="0">
                  <div class="input-group-append">
                      <span class="input-group-text">Satuan</span>
                  </div>
              </div>
          </td>
          <td>
              <input type='text' name='stok_tujuan[]' readonly class='form-control total_stok' value='${row.saldo_stok}'>
          </td>
          <td>${row.merk}</td>
          <td>${row.spesifikasi}</td>
          <td>${row.barcode}</td>
          <td>${row.sn}</td>
          <td><button class="btn btn-danger btn-sm" onclick="hapusBarang(this)">Hapus</button></td>
        `;
        tbody.appendChild(tr);

        // Tambahkan event listener ke input jumlah baris ini
        let jumlahInput = tr.querySelector(".jumlah");
        let stokAsalInput = tr.querySelector(".stok");
        let stokTujuanInput = tr.querySelector(".total_stok");

        jumlahInput.addEventListener("input", function() {
            let stokAsal = parseInt(stokAsalInput.value) || 0;
            let jumlah = parseInt(jumlahInput.value) || 0;

            // Validasi: jumlah tidak boleh lebih dari stok asal
            if (jumlah > stokAsal) {
                alert("Jumlah tidak boleh melebihi sisa stok!");
                jumlahInput.value = 0; // reset ke 0
                jumlah = 0;
            }

            // Hitung stok tujuan
            let hasil = stokAsal - jumlah;
            if (hasil < 0) hasil = 0; // jangan minus
            stokTujuanInput.value = hasil;

            // Update total barang keluar
            hitungTotalKeluar();
        });

        // Tutup modal
        $("#modalTambahBarang").modal("hide");
    }

    function hitungTotalKeluar() {
        let total = 0;
        document.querySelectorAll(".jumlah").forEach(input => {
            total += parseInt(input.value) || 0;
        });
        document.getElementById("total_barang_keluar").value = total;
    }

  // Hapus barang dari tabel utama
  function hapusBarang(btn) {
    btn.closest("tr").remove();
  }
</script>