@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 Keluar (Rusak)</a></li>
    <li class="breadcrumb-item active" aria-current="page">Input 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">
          Input Data Barang Keluar (Rusak)
        </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">
                <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</label>
              <input type="date" id="tanggal" class="form-control required" placeholder="Tanggal"
                value="{{ 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>No</th>
            <th>Nama Barang</th>
            <th>QRCode</th>
            <th class="kolomNomor">Nomor Urut</th>
            <th class="kolomQty text-end">QTY</th>
            <th class="kolomQtyInput text-end">QTY Rusak</th>
            <th class="kolomAksi">Aksi</th>
          </tr>
        </thead>
        <tbody class="tampilBarang">
          <tr class="infoKosong">
            <td colspan="6" 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">
      <form class="repeater">
        <!--
            The value given to the data-repeater-list attribute will be used as the
            base of rewritten name attributes.  In this example, the first
            data-repeater-item's name attribute would become group-a[0][text-input],
            and the second data-repeater-item would become group-a[1][text-input]
        -->
        <div data-repeater-list="image">
          <div data-repeater-item>

            <div class="input-group mb-3">
              <input type="file" class="form-control" accept=".jpg,.jpeg,.jpe,.jfif,.jif,.pdf">
              <button data-repeater-delete class="btn btn-danger btn-sm" type="button"><span class="mdi mdi-delete"></span></button>
            </div>
            <x-upload-file-footnotes/>
          </div>
        </div>
        <input data-repeater-create class="btn btn-primary" type="button" value="Upload Foto"/>
      </form>
    </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 Data Barang Keluar (Rusak)</button>
      </div>
      <div class="col-6">
        <a href="/logistik/barang-rusak" 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 src="https://cdn.jsdelivr.net/npm/jquery.repeater@1.2.1/jquery.repeater.min.js"></script>

<script>
  $(document).ready(function(){
    $('#id_master_gudang').change(function(e){
      $('.rowBarangDetail').remove();
      $('.infoKosong').show();
    })

    $('#btnTambahBarangQrCode').on('click', function(e){
      let id_master_gudang = $('#id_master_gudang').val();
      // let id_rak = $('#id_rak').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').val();
      if (id_master_gudang == null || 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 = $('#id_master_gudang').val();

      if(!id_gudang){
        swal('Perhatian', 'Pastikan Gudang Tidak Kosong', 'warning');
        return false;
      }

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

      let data = new FormData();
      data.append('_token', "{{ csrf_token() }}");
      data.append('id_gudang', id_gudang);
      data.append('tanggal', $('#tanggal').val());

      $.each($('.rowBarangDetail').map(function(){
        return {
          id: $(this).data('id'),
          qty: formatInputUangToFloat($(this).find('.qtyBarangDetail').val())
        }
      }).get(), function(i, v){
        data.append('barangs[]', JSON.stringify(v));
      });
      
      $.each($('.repeater').find('input[type="file"]').map(function(){
        return $(this)[0].files[0]
      }).get(), function(i, v){
        data.append('images[]', v);
      });

      uploads('/logistik/barang-rusak', data, rStoreBarang);
    });

    $('.repeater').repeater({
      initEmpty: false,
      show: function () {
        $(this).slideDown();
      },
      isFirstItemUndeletable: true
    })
  });

  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-rusak";
      }
    })
  }

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

    $.each(data, function(i, v) {
      tampilBarang(v);
    });

    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('');

    tampilBarang(v);
    updateTableNumbers();

    $('.infoKosong').hide();
  }

  function tampilBarang(v){
    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 unit_terbesar = v.produk.unit_terbesar;
    let sisa_stok = v.qty_in - v.qty_out;

    $('.tampilBarang').append(`
      <tr id="rowBarangDetail${v.id}" class="rowBarangDetail qr-${v.qrcode}" data-id="${v.id}">
        <td class="number"></td>
        <td>${nama_produk}</td>
        <td>${v.qrcode}</td>
        <td class="text-center">${v.sort}</td>
        <td class="text-end">${formatNumber(sisa_stok)} ${v.produk.unit_satuan_stock}</td>
        <td>
          <div class="input-group">
            <input type="text" class="form-control text-end formatInputUang qtyBarangDetail removeMinusSign" onkeyup="dottocomma(this);onlyNumber(this);" onchange="formatInputUang(this);minMax(this, 1, ${sisa_stok})" value="${formatNumber(sisa_stok)}" />
            <span class="input-group-text">${v.produk.unit_satuan_stock}</span>
          </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>
    `);
  }
</script>
@endpush