@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="{{ route('logistik.stok-opname.index') }}">Stok Opname</a></li>
      <li class="breadcrumb-item active" aria-current="page">Edit Data</li>
    </ol>
  </nav>

  <div class="card m-b-30">
    <div class="card-body">
      <h5 class="card-title">
        <div class="row">
          <div class="col-12">
            Edit Data Stok Opname
          </div>
        </div>
      </h5>
      <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</label>
                <select name="id_master_gudang" id="id_master_gudang" class="form-control required select2Custom" disabled>
                  <option value="">Silahkan Pilih</option>
                  @foreach ($dataGudang as $itemGudang)
                    <option value="{{ $itemGudang['id'] }}" @selected($itemGudang['id'] == $data->id_gudang)>{{ $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>Tanggal</label>
                <input type="date" id="tanggal_stok_opname" class="form-control required" placeholder="Tanggal"
                  value="{{ $data->tanggal_stok_opname ?: date('Y-m-d') }}" 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 style="width: 5% !important; white-space: normal; word-break:break-all; text-align: center;">No</th>
              <th style="width: 20% !important; white-space: normal; word-break:break-all; text-align: center;">Nama
                Barang</th>
              <th style="width: 10% !important; white-space: normal; word-break:break-all; text-align: center;">Nomor Urut
              </th>
              <th style="width: 10% !important; white-space: normal; word-break:break-all; text-align: right;">QTY
                Bruto <br />(Lama)</th>
              <th style="width: 10% !important; white-space: normal; word-break:break-all; text-align: right;">QTY
                Netto <br />(Lama)</th>
              <th style="width: 10% !important; white-space: normal; word-break:break-all; text-align: right;">Susut</th>
              <th style="width: 10% !important; white-space: normal; word-break:break-all; text-align: right;">QTY Bruto <br />(Baru)</th>
              <th style="width: 10% !important; white-space: normal; word-break:break-all; text-align: right;">QTY Netto <br />(Baru)</th>
              <th style="width: 7% !important; white-space: normal; word-break:break-all; text-align: right;">Selisih</th>
              <th style="width: 5% !important; white-space: normal; word-break:break-all; text-align: center;">Aksi</th>
            </tr>
          </thead>
          <tbody class="tampilBarang">
            <tr class="infoKosong" @if($data->details()->count()) style="display: none" @endif>
              <td colspan="10" class="text-center">Belum Terdapat Data</td>
            </tr>
                        @foreach ($data->details as $item)
              <tr>
                <td style="width: 5% !important; white-space: normal; word-break:break-all;">{{ $no++ }}</td>
                <td style="width: 20% !important; white-space: normal; word-break:break-all;">{{ $item->stokBarang->produk->cetakNama(0, 'asli') }}</td>
                <td style="width: 10% !important; white-space: normal; word-break:break-all;" class="text-center">{{ $item->stokBarang->sort }}</td>
                <td style="width: 10% !important; white-space: normal; word-break:break-all;" class="beratBrutoLama text-end" id="beratBrutoLama{{ $item->stokBarang->id ?? 0 }}">{{ formatNumber($item->berat_bruto_lama) }}</td>
                <td style="width: 10% !important; white-space: normal; word-break:break-all;" class="beratNettoLama text-end" id="beratNettoLama{{ $item->stokBarang->id ?? 0 }}">{{ formatNumber($item->berat_netto_lama) }}</td>
                <td style="width: 10% !important; white-space: normal; word-break:break-all;" id="susut{{ $item->stokBarang->id ?? 0 }}" class="text-end">{{ formatNumber($item->berat_bruto_lama - $item->berat_netto_lama)}}</td>
                <td style="width: 10% !important; white-space: normal; word-break:break-all;"><input type="text" class="form-control beratBrutoBaru text-end" disabled readonly id="beratBrutoBaru{{ $item->stokBarang->id ?? 0 }}" data-id="{{ $item->stokBarang->id ?? 0 }}" value="{{ formatNumber($item->berat_bruto_baru) }}" /></td>
                <td style="width: 10% !important; white-space: normal; word-break:break-all;"><input type="text" @disabled(!$item->is_editable) class="form-control beratNettoBaru sanitizeMinusSign text-end" id="beratNettoBaru{{ $item->stokBarang->id ?? 0 }}" data-id="{{ $item->stokBarang->id ?? 0 }}" onkeyup="dottocomma(this);onlyNumber(this);" value="{{ formatNumber($item->berat_netto_baru) }}" /></td>
                <td style="width: 10% !important; white-space: normal; word-break:break-all;" class="text-end"><span id="selisih{{ $item->stokBarang->id ?? 0 }}">{{ (abs($item->berat_bruto_baru - $item->berat_bruto_lama)) }}</span></td>
                <td style="width: 5% !important; white-space: normal; word-break:break-all;">
                  @if ($item->is_deleteable)
                    <button onclick="destroyItem(this)" type="button" class="btn btn-danger btn-custom5 btn-sm">
                      <span class="mdi mdi-delete"></span>
                    </button>
                  @else
                    -
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <div class="row mt-3">
        <div class="col-12 mb-3">
          <button type="button" id="btnTambahBarang" class="btn btn-light btn-custom2" style="width: 100% !important;">
            Tambah Barang
          </button>
        </div>
        <div class="col-6">
          <button type="button" id="btnSimpanData" class="btn btn-success btn-custom1 btn-custom1" style="width: 100% !important;">
            Simpan Data Stok Opname
          </button>
        </div>
        <div class="col-6">
          <a href="/logistik/stok-opname" class="btn btn-warning btn-custom8" style="width: 100% !important;">
            Kembali ke Halaman Sebelumnya
          </a>
        </div>
      </div>
    </div>
  </div>

  {{-- Modal --}}
  <div id="modalBarang" 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">
                <div class="table-responsive">
                  <table class="table table-sm table-modal-bordered" id="tableBarang" style="width: 100% !important;">
                    <thead>
                      <tr>
                        <th class="text-start">Nama Barang</th>
                        <th class="kolomAksi text-start">Aksi</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="col-12 mt-3" style="text-align: right;">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div id="modalDetailBarang" 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 Detail Barang [<span id="judulBarang"></span>]</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">
                <div class="table-responsive">
                  <table class="table table-sm table-modal-bordered" id="tableDetailBarang" style="width: 100% !important;">
                    <thead>
                      <tr>
                        <th class="text-center">Tanggal Transaksi</th>
                        <th class="text-end">QTY Bruto</th>
                        <th class="text-end">QTY Netto</th>
                        <th class="text-center">Nomor Urut</th>
                        <th class="text-start">Rak</th>
                        <th class="kolomAksi text-start"><input type="checkbox" id="checkBoxStokOpname" /></th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="col-12 mt-3" style="text-align: right;">
                <button type="button" 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>
  {{-- 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>
@endpush

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

  <script>
    var URLs = "{{ url('logistik/stok-opname') }}";
    var IDBarang = [];
    var jmlBarangAll = "{{ $data->details()->count() }}";

    var cekCentang = false;
    $('#checkBoxStokOpname').change(function() {
      var isChecked = $(this).prop('checked');
        if($(this).is(':checked')) {
            cekCentang = true;
        }else{
            cekCentang = false;
        }

      $('.barangSupplier').prop('checked', isChecked);
    });

    $('#btnTambahBarang').on('click', function(e) {
      var gudang = $('#id_master_gudang').val();

      if (gudang == null || gudang == '') {
        swal('Perhatian', 'Tentukan Gudang Terlebih Dahulu', 'info');
      } else {
        var data = {
          _token: "{{ csrf_token() }}",
          id_master_gudang: gudang,
        };

        sendJson(URLs + '/barang-stok', data, rBarang);
      }
    });

    function rBarang(data) {
      swal.close();
      $('#tableBarang').DataTable().clear().destroy();
      $('#modalBarang').modal('show');
      IDBarang = [];
      $.each(data, function(i, v) {
        var cekArray = $.inArray(v.id, IDBarang);

        if (cekArray == -1) {
          IDBarang.push(v.id);
          var nama_produk = cetakNamaProduk(v.kode, v.nama, v.parent_id, v.parent.kode, v.parent.nama);

          $('#tableBarang tbody').append(
            '<tr class="rowBarang" id="rowBarang' + v.id + '">' +
            '<td style="min-width: 80px !important; max-width: 80px !important; white-space: normal; word-break:break-all;" class="text-start">' +
            nama_produk + '</td>' +
            '<td><a href="#" onclick="detailBarang(\'' + v.id + '\')">Detail</a></td>' +
            '</tr>'
          );
        }
      });
      $('#tableBarang').DataTable().draw();
      $('#tableBarang').DataTable();
    }

    $(document).on('draw.dt', '#tableBarang', function () {
        if (cekCentang == true) {
            $('.barangSupplier').prop('checked', true);
        }
    });

    function detailBarang(id_barang) {
      var gudang = $('#id_master_gudang').val();
      var data = {
        _token: "{{ csrf_token() }}",
        id_master_gudang: gudang,
        id_barang: id_barang,
        except: $('.beratBrutoBaru').map(function() {
          return $(this).data('id');
        }).get()
      };
      // sendJson(URLs+'/barang-stok', data, rBarangItem);
      sendJson(URLs + '/barang-stok-item', data, rBarangItem);
    }

    function rBarangItem(data) {
      swal.close();
      $('#tableDetailBarang').DataTable().clear().destroy();
      $('#modalBarang').modal('hide');
      $('#modalDetailBarang').modal('show');
      IDBarangCek = [];
      var detail_nama_barang = '-';
      $.each(data, function(i, v) {
        var cekArray = $.inArray(parseInt(v.id_barang), IDBarangCek);

        if (cekArray == -1) {
          IDBarangCek.push(v.id_barang);
          let produk = v.produk;
          var nama_produk = cetakNamaProduk(produk.kode, produk.nama, produk.parent_id, produk.parent.kode, produk
            .parent.nama);

          detail_nama_barang = nama_produk;
        }

        $('#tableDetailBarang tbody').append(
          '<tr class="rowBarang" id="rowBarangDetail' + v.id + '">' +
          '<td style="min-width: 80px !important; max-width: 80px !important; white-space: normal; word-break:break-all;" class="text-center">' +
          formatDate(v.stok_move_terima_paket?.tanggal_transaksi) + '</td>' +
          '<td class="text-end">' + formatNumber((v.stok_opname_detail?.berat_bruto_baru ?? v.stok_move_terima_paket.surat_jalan_detail.berat_bruto)) + '</td>' +
          '<td class="text-end">' + formatNumber((v.stok_opname_detail?.berat_netto_baru ?? v.stok_move_terima_paket.surat_jalan_detail.berat_netto)) + '</td>' +
          '<td class="text-center">' + formatNumber(v.sort) + '</td>' +
          '<td class="text-center">' + (v.lokasi?.rak ?? '-') + '</td>' +
          '<td><input type="checkbox" class="barangSupplier" value="' + v.id + '"></td>' +
          '</tr>'
        );
      });
      $('#tableDetailBarang').DataTable({
        "columnDefs": [{
          "targets": [5],
          "orderable": false
        }]
      }).draw();
      $('#judulBarang').html(detail_nama_barang);
    }

    $('#btnSimpanBarang').on('click', function(e) {
      var jmlCek = $('.barangSupplier:checked').length;
      var IDBarangNew = [];
      if (parseInt(jmlCek) <= 0) {
        swal('Perhatian', 'Pastikan Centang Barang Terlebih Dahulu', 'info');
      } else {
        $($('.barangSupplier:checked')).each(function(i, v) {
          IDBarang.push(parseInt($(this).val()));
          IDBarangNew.push(parseInt($(this).val()));
          jmlBarangAll = parseInt(jmlBarangAll) + 1;
        });

        var arrBarang = IDBarangNew.join("|");
        var data = {
          arr_barang: arrBarang,
          _token: "{{ csrf_token() }}"
        }
        sendJson(URLs + '/add-barang', data, rSendsBarang);
      }
    });

    function rSendsBarang(data) {
      swal.close();
      $('#modalDetailBarang').modal('hide');
      $('#tableDetailBarang tbody').html('');

      let jmlBarang = IDBarang.length;
      if (parseInt(jmlBarang) > 0) {
        $.each(data, function(i, v) {
          let produk = v.produk;
          let nama_produk = cetakNamaProduk(produk.kode, produk.nama, produk.parent_id, produk.parent.kode, produk
            .parent.nama);
          let isiHTML = '<tr>' +
            '<td style="width: 5% !important; white-space: normal; word-break:break-all;" class="number">'+(i+1)+'</td>'+
            '<td style="width: 20% !important; white-space: normal; word-break:break-all;">' + nama_produk + '</td>' +
            '<td style="width: 10% !important; white-space: normal; word-break:break-all;" class="text-center">' + v.sort + '</td>' +
            '<td style="width: 10% !important; white-space: normal; word-break:break-all;" class="beratBrutoLama text-end" id="beratBrutoLama' +
            v.id + '">' + formatNumber((v.stok_opname_detail?.berat_bruto_baru ?? v.stok_move_terima_paket.surat_jalan_detail.berat_bruto)) + '</td>' +
            '<td style="width: 10% !important; white-space: normal; word-break:break-all;" class="beratNettoLama text-end" id="beratNettoLama' +
            v.id + '">' + formatNumber((v.stok_opname_detail?.berat_netto_baru ?? v.stok_move_terima_paket.surat_jalan_detail.berat_netto)) + '</td>' +
            '<td style="width: 10% !important; white-space: normal; word-break:break-all;" id="susut' + v.id + '" class="text-end">' +
            formatNumber((v.stok_opname_detail?.berat_bruto_baru ?? v.stok_move_terima_paket.surat_jalan_detail.berat_bruto) - (v.stok_opname_detail?.berat_netto_baru ?? v.stok_move_terima_paket.surat_jalan_detail.berat_netto)) + '</td>' +
            '<td style="width: 10% !important; white-space: normal; word-break:break-all;"><input type="text" class="form-control beratBrutoBaru text-end" disabled readonly id="beratBrutoBaru' +
            v.id + '" data-id="' + v.id + '" /></td>' +
            '<td style="width: 10% !important; white-space: normal; word-break:break-all;"><input type="text" class="form-control beratNettoBaru text-end sanitizeMinusSign" id="beratNettoBaru' +
            v.id + '" data-id="' + v.id + '" onkeyup="dottocomma(this);onlyNumber(this);" /></td>' +
            '<td style="width: 10% !important; white-space: normal; word-break:break-all;" class="text-end"><span id="selisih' + v.id +
            '"></span></td>' +
            '<td style="width: 5% !important; white-space: normal; word-break:break-all;"><button onclick="destroyItem(this)" type="button" class="btn btn-danger btn-custom5 btn-sm"><span class="mdi mdi-delete"></span></button></td>' +
            '</tr>';
          $('.tampilBarang').append(isiHTML);
        });

        updateTableNumbers();
      }

      $('.infoKosong').show();
      if (jmlBarangAll > 0) {
        $('.infoKosong').hide();
      }
    }

    $(document).on('keyup', '.beratNettoBaru', function(e) {
      let id = $(this).data('id');
      let susut = formatInputUangToFloat($('#susut' + id).html());
      let berat_netto_baru = formatInputUangToFloat($(this).val());
      let berat_bruto_baru = berat_netto_baru + susut;

      $('#beratBrutoBaru' + id).val(formatNumber(berat_bruto_baru));

      let berat_bruto_lama = formatInputUangToFloat($('#beratBrutoLama' + id).html());
      let selisih = berat_bruto_baru - berat_bruto_lama;
      $('#selisih' + id).html(formatNumber(Math.abs(selisih)));
    });

    $('#btnSimpanData').on('click', function(e) {
      if (parseInt(jmlBarangAll) > 0) {
        if (cekForm('form_stok_opname') == true) {
          var cekFormDetail = true;
          var fieldClasses = ['.beratBrutoBaru', '.beratNettoBaru'];

          $.each(fieldClasses, function(i, fieldClass) {
            if ($(fieldClass).filter(function() {
                return !$(this).val();
              }).length > 0) {
              cekFormDetail = false;
              return false;
            }
          });

          if (cekFormDetail) {

            arrIDDetail = [];
            arrBeratBrutoBaru = [];
            $.each($('.beratBrutoBaru'), function(i, v) {
              arrIDDetail.push($(this).data('id'));
              arrBeratBrutoBaru.push(($(this).val()).replace(/,/g, '.'));
            });

            arrBeratNettoBaru = [];
            $.each($('.beratNettoBaru'), function(i, v) {
              arrBeratNettoBaru.push(($(this).val()).replace(/,/g, '.'));
            });

            arrBeratBrutoLama = [];
            $.each($('.beratBrutoLama'), function(i, v) {
              arrBeratBrutoLama.push(($(this).html()).replace(/,/g, '.'));
            });

            arrBeratNettoLama = [];
            $.each($('.beratNettoLama'), function(i, v) {
              arrBeratNettoLama.push(($(this).html()).replace(/,/g, '.'));
            });

            var data = {
              _token: "{{ csrf_token() }}",
              id_gudang: $('#id_master_gudang').val(),
              tanggal_stok_opname: $('#tanggal_stok_opname').val(),
              idDetail: arrIDDetail,
              beratBrutoLama: arrBeratBrutoLama,
              beratNettoLama: arrBeratNettoLama,
              beratBrutoBaru: arrBeratBrutoBaru,
              beratNettoBaru: arrBeratNettoBaru,
            }

            let url = "{{ route('logistik.stok-opname.update', ':id') }}";
            url = url.replace(':id', "{{ $data->id }}");

            sendJson(url, data, rSendsStokOpname);
          } else {
            swal('Perhatian', 'Masih Terdapat Inputan QTY Bruto Baru dan QTY Netto Baru yang Kosong', 'info');
          }
        }
      } else {
        swal('Perhatian', 'Silahkan Pilih Barang Terlebih Dahulu', 'info');
      }
    });

    function rSendsStokOpname(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/stok-opname";
        }
      })
    }

    const destroyItem = (e) => {
      $(e).closest('tr').remove();
      jmlBarangAll = parseInt(jmlBarangAll) - 1;
      if (jmlBarangAll <= 0) {
        $('.infoKosong').show();
      }

      updateTableNumbers();
    }
  </script>
@endpush