@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Logistik</a></li>
    <li class="breadcrumb-item"><a href="#">Barang Pindah Gudang</a></li>
    <li class="breadcrumb-item active" aria-current="page">Input Data</li>
  </ol>
</nav>

<div class="card m-b-30">
  <div class="card-header">
          <h4>Input Kirim Barang Pindah Gudang</h4>
        </div>
  <div class="card-body">
    <div class="mb-4">
      <div class="row">
        <form id="form_stok_opname">
          <div class="col-12 border border-bottom-0 p-3">
            <div class="form-group">
              <label>Gudang Asal</label>
              <select name="id_master_gudang_asal" id="id_master_gudang_asal" class="form-control required select2Custom">
                <option value="">Silahkan Pilih</option>
                @foreach ($dataGudang as $itemGudang)
                <option value="{{ $itemGudang->id }}">{{ $itemGudang->nama }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-12 border border-bottom-0 border-top-0 p-3">
            <div class="form-group">
              <label>Gudang Tujuan</label>
              <select name="id_master_gudang_tujuan" id="id_master_gudang_tujuan" class="form-control required select2Custom">
                <option value="">Silahkan Pilih</option>
                @foreach ($dataGudang as $itemGudang)
                <option value="{{ $itemGudang->id }}">{{ $itemGudang->nama }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-12 border border-top-0 p-3">
            <div class="form-group">
              <label>Tanggal Kirim</label>
              <input type="datetime-local" id="tanggal-kirim" class="form-control required" placeholder="Tanggal Kirim"
                value="{{ date('Y-m-d H:i') }}" onclick="this.showPicker()">
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="table-responsive" style="overflow-x: auto;">
      <table class="table table-bordered table-hover table-sm table-number" style="width: 100% !important;">
        <thead>
          <tr>
            <th>No</th>
            <th>Nama Barang</th>
            <th class="text-center">Nomor Urut</th>
            <th>QRCode</th>
            <th>Kode Lot</th>
            <th class="text-end">QTY</th>
            <th class="text-end">QTY Dikirim</th>
            <th class="kolomAksi">Aksi</th>
          </tr>
        </thead>
        <tbody class="tampilBarang">
          <tr class="infoKosong">
            <td colspan="8" class="text-center">Belum Terdapat Data</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="row mt-3">
      <div class="col-6 mb-3">
        <button type="button" id="btnTambahBarangManual" class="btn btn-light btn-custom2"
          style="width: 100% !important;">Tambah Barang (Manual)</button>
      </div>
      <div class="col-6 mb-3">
        <button type="button" id="btnTambahBarangQrCode" class="btn btn-light btn-custom2"
          style="width: 100% !important;">Tambah Barang (QRCODE)</button>
      </div>
    </div>
    <div class="row mt-3">
      <div class="col-6">
        <button type="button" id="btnSimpanData" class="btn btn-success btn-custom1"
          style="width: 100% !important;">Simpan Kirim Barang Pindah Gudang</button>
      </div>
      <div class="col-6">
        <a href="/logistik/barang-pindah-gudang/pengirim" class="btn btn-warning btn-custom8"
          style="width: 100% !important;">Kembali ke Halaman Sebelumnya</a>
      </div>      
    </div>
  </div>
</div>

{{-- Modal --}}
<div id="modalBarangQrCode" class="modal fade bd-example-modal-xl" data-bs-backdrop="static">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title h4">Form Scan QRCODE</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
      </div>
      <div class="modal-body">
        <form id="form_barang" class="forms-sample" onsubmit="submitQrcode()">
          <div class="row">
            <div class="col-12">
              <div class="mb-3">
                <label class="form-label">QRCODE</label>
                <div class="row">
                  <div class="col-12">
                    <input type="text" id="qrcode" class="form-control required" required autocomplete="off"
                      placeholder="QRCODE">
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12" style="text-align: right;">
              <button type="submit" id="btnSimpanBarang" class="btn btn-primary btn-custom1">Simpan</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div id="modalBarangManual" class="modal fade bd-example-modal-xl" data-bs-backdrop="static">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title h4">Data Barang</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
      </div>
      <div class="modal-body">
        <form class="forms-sample">
          <div class="row">
            <div class="col-12 table-responsive">
              <table class="table table-sm table-modal-bordered" id="tableBarang" style="width: 100% !important;">
                <thead>
                  <tr>
                    <th>No</th>
                    <th class="text-start">Nama Barang</th>
                    <th class="text-center kolomNomor">Nomor Urut</th>
                    <th>QRCode</th>
                    <th>Kode Lot</th>
                    <th class="text-end">QTY</th>
                    <th class="kolomAksi">Aksi</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
            <div class="col-12 mt-3" style="text-align: right;">
              <button type="button" id="btnSimpanBarangManual" class="btn btn-primary btn-custom1">Simpan</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{{-- Akhiran Modal --}}
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

<script>
  $(document).ready(function(){
    $('#btnTambahBarangQrCode').on('click', function(e){
      let id_master_gudang = $('#id_master_gudang_asal').val();
      if(id_master_gudang != null && id_master_gudang != ''){
        $('#modalBarangQrCode').modal('show');
      }else{
        swal('Perhatian', 'Pastikan Anda Sudah Mengisi Gudang', 'warning');
      }
    });

    $('#btnTambahBarangManual').on('click', function(e) {
      let id_master_gudang = $('#id_master_gudang_asal').val();
      if (!id_master_gudang) {
        swal('Perhatian', 'Pilih Gudang Terlebih Dahulu', 'info');
      } else {
        $('#modalBarangManual').modal('show');
        $('#tableBarang').DataTable().clear().destroy();
        $('#tableBarang').DataTable({
          processing: true,
          serverSide: true,
          ajax: {
            url: '/logistik/barang-rusak/list-barang',
            type: 'GET',
            data: {
              id_master_gudang: id_master_gudang,
              except: $('.rowBarangDetail').map(function(){
                return $(this).data('id');
              }).get(),
            }
          },
          order: [[0, 'asc']],
          columns: [
            {
              data: 'DT_RowIndex', name: 'id', searchable: false
            },
            {
              data: 'nama_produk',
              name: 'nama_produk',
              orderable: false,
              searchable: false,
            },
            {
              data: 'sort',
              name: 'sort',
              className: 'text-center',
            },
            {
              data: 'qrcode',
              name: 'qrcode',
              className: 'text-end',
              searchable: false,
              orderable: false,
            },
            {
              data: 'kode_lot',
              name: 'kode_lot',
              className: 'text-center',
            },
            {
              data: 'qty',
              name: 'qty',
              className: 'text-end',
              searchable: false,
              orderable: false,
            },
            {
              data: 'id',
              name: 'id',
            }
          ],
          columnDefs: [
            {
            targets: 6,
              checkboxes: {
                selectRow: true
              },
            }
          ],
          select: {
            style: 'multi'
          }
        });
      }
    });

    $('#btnSimpanBarangManual').on('click', function(e) {
      let barang_selected = $('#tableBarang').DataTable().column(6).checkboxes.selected();
      if (barang_selected.length <= 0) {
        swal('Perhatian', 'Pastikan Centang Barang Terlebih Dahulu', 'info');
      } else {
        let id_barang = [];
        $.each(barang_selected, function(index, id) {
          id_barang.push(parseInt(id));
        });
        let data = {
          id_barang: id_barang,
          _token: "{{ csrf_token() }}"
        }
        sendJson("/logistik/barang-rusak/add-barang", data, simpanBarangManual);
      }
    });

    $('#modalBarangQrCode').on('hidden.bs.modal', function(e){
      $('#qrcode').val('');
    });

    $('#btnSimpanData').click(function(e) {
      let id_gudang_asal = $('#id_master_gudang_asal').val();
      let id_gudang_tujuan = $('#id_master_gudang_tujuan').val();

      if(!id_gudang_asal || !id_gudang_tujuan){
        swal('Perhatian', 'Pastikan Gudang Asal dan Tujuan Tidak Kosong', 'warning');
        return false;
      }

      if($('.rowBarangDetail').length <= 0){
        swal('Perhatian', 'Pastikan Anda Sudah Memilih Barang', 'warning');
        return false;
      }

      let data = {
        id_gudang_asal: id_gudang_asal,
        id_gudang_tujuan: id_gudang_tujuan,
        tanggal_kirim: $('#tanggal-kirim').val(),
        barangs: $('.rowBarangDetail').map(function(){
          return {
            id: $(this).data('id'),
            qty: formatInputUangToFloat($(this).find('.qty-pindah').val())
          }
        }).get(),
        _token: "{{ csrf_token() }}"
      }

      sendJson('/logistik/barang-pindah-gudang/pengirim', data, rStoreBarang);
    });
  });

  function hapusBarang(id) {
    $('#rowBarangDetail' + id).remove();
    if($('.rowBarangDetail').length <= 0){
      $('.infoKosong').show();
    }
    updateTableNumbers();
  }

  function submitQrcode() {
    event.preventDefault();
    let qrcode = $('#qrcode').val();

    if($('.qr-' + qrcode).length){
      swal('Perhatian', 'Barang dengan QRCODE ini sudah ditambahkan', 'warning');
      return false;
    }

    let data = {
      qrcode: qrcode,
      id_master_gudang: $('#id_master_gudang').val(),
      _token: "{{ csrf_token() }}"
    }

    sendJson("/logistik/barang-rusak/add-barang-by-qrcode", data, simpanBarangQrCode);

    $('#modalBarang').modal('hide');
  }

  function rStoreBarang(data) {
    var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
    swal({
      title: titles,
      text: data.response,
      type: data.type,
        confirmButtonText: "OK"
    }).then(function() {
      if (data.type == "success") {
        window.location.href = "/logistik/barang-pindah-gudang/pengirim";
      }
    })
  }

  var counter = 0;
  function simpanBarangManual(data) {
    swal.close();
    $('#modalBarangManual').modal('hide');
    $('#tableBarang tbody').html('');

    $.each(data, function(i, v) {
      counter = counter+1;
      let kode_produk_parent = (v.produk?.parent?.kode ?? '');
      let nama_produk_parent = (kode_produk_parent ? kode_produk_parent + ' | ' : '') + (v.produk?.parent?.nama ?? '');
      let nama_produk = (v.produk?.nama ?? '');
      if (v.produk.parent ?? null) {
        nama_produk = nama_produk_parent + ' - ' + nama_produk;
      }

      let qty = formatNumber(parseFloat(v.qty_in ?? 0) - parseFloat(v.qty_out ?? 0), 2) + ' ' + v.produk.unit_satuan_stock;
      if(!v.qty_out || v.qty_out <= 0){
        qty = '1 ' + (v.produk.unit_terbesar) + ' (' + qty + ')';
      }

      $('.tampilBarang').append(`
        <tr id="rowBarangDetail${v.id}" class="rowBarangDetail qr-${v.qrcode}" data-id="${v.id}">
          <td class="number">${counter}</td>
          <td>${nama_produk}</td>
          <td class="text-center">${v.sort}</td>
          <td>${v.qrcode}</td>
          <td>${v.kode_lot}</td>
          <td class="text-end">${qty}</td>
          <td style="width: 140px">
            <div class="input-group mb-3">
              <input type="text" class="form-control formatInputUang qty-pindah removeMinusSign text-end" onkeyup="onlyNumber(this);" value="${formatNumber(v.qty_in - v.qty_out)}" onchange="minMax(this, 0, ${v.qty_in - v.qty_out})">  
              <label class="input-group-text">${v.produk.unit_satuan_stock}</label>
            </div>
          </td>
          <td class="aksiBarangDetail">
            <button type="button" class="btn btn-danger btn-sm" onclick="hapusBarang(${v.id})">
              <span class="mdi mdi-delete"></span>
            </button>
          </td>
        </tr>
      `);
    });

    updateTableNumbers();

    if (data.length > 0) {
      $('.infoKosong').hide();
    } else {
      $('.infoKosong').show();
    }
  }

  function simpanBarangQrCode(v) {
    swal.close();
    if(!v.id){
      swal('Perhatian', 'QRCODE Tidak Ditemukan', 'warning');
      return false;
    }
    $('#modalBarangQrCode').modal('hide');
    $('#tableBarang tbody').html('');

    let kode_produk_parent = (v.produk?.parent?.kode ?? '');
    let nama_produk_parent = (kode_produk_parent ? kode_produk_parent + ' | ' : '') + (v.produk?.parent?.nama ?? '');
    let nama_produk = (v.produk?.nama ?? '');
    if (v.produk.parent ?? null) {
      nama_produk = nama_produk_parent + ' - ' + nama_produk;
    }

    $('.tampilBarang').append(`
      <tr id="rowBarangDetail${v.id}" class="rowBarangDetail qr-${v.qrcode}" data-id="${v.id}">
        <td>${nama_produk}</td>
        <td>${!v.qty_out || v.qty_out <= 0 ? '1 ' + (v.produk.unit_terbesar):  formatNumber(parseFloat(v.qty_in ?? 0) - parseFloat(v.qty_out ?? 0), 2) + ' ' + v.produk.unit1}</td>
        <td>${v.sort}</td>
        <td>${v.qrcode}</td>
        <td class="aksiBarangDetail">
          <button type="button" class="btn btn-danger btn-sm" onclick="hapusBarang(${v.id})">
            <span class="mdi mdi-delete"></span>
          </button>  
        </td>
      </tr>
    `);

    $('.infoKosong').hide();
  }
</script>
@endpush