@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="#">Kirim Barang Pindah Gudang</a></li>
      <li class="breadcrumb-item active" aria-current="page">Detail</li>
    </ol>
  </nav>

  <div class="card m-b-30">
    <div class="card-body">
      <h5 class="card-title">
        <div class="row">
          <div class="col-12">
            Detail Kirim Barang Pindah Gudang
          </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 Asal</label>
                <div class="form-control">
                  {{ $data->gudangAsal->nama ?? '-' }}
                </div>
              </div>
            </div>
            <div class="col-12 border border-bottom-0 border-top-0 p-3">
              <div class="form-group">
                <label>Gudang Tujuan</label>
                <div class="form-control">
                  {{ $data->gudangTujuan->nama ?? '-' }}
                </div>
              </div>
            </div>
            <div class="col-12 border border-top-0 border-bottom-0 p-3">
              <div class="form-group">
                <label>Tanggal Kirim</label>
                <div class="form-control">
                  {{ formatDate($data->tanggal_kirim, 'd-m-Y H:i') }}
                </div>
              </div>
            </div>
            <div class="col-12 border border-top-0 p-3">
              <div class="form-group">
                <label>Tanggal Terima</label>
                <div class="form-control">
                  @if ($data->tanggal_terima)
                    {{ formatDate($data->tanggal_terima, 'd-m-Y H:i') }}
                  @else
                    -
                  @endif
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="table-responsive" style="overflow-x: auto;">
        <table class="table table-bordered table-hover table-sm" style="width: 100% !important;">
          <thead>
            <tr>
              <th style="width: 5% !important; text-align: center;">
                <input type="checkbox" id="checkAll" name="checkAll" value="1"/>
              </th>
              <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">
                        @forelse ($data->details as $item)
              @php
                $bg_row = '';
                if ($data->tanggal_terima) {
                    if ($item->qty_diterima < $item->qty_dikirim) {
                        $bg_row = 'table-warning';
                    }
                    if (!$item->barang_ada) {
                        $bg_row = 'table-danger';
                    }
                }

                $produk = $item->barang;
              @endphp
              <tr class="rowBarangDetail {{ $bg_row }}" data-id="{{ $item->id }}">
                <td style="width: 5% !important; text-align: center;">
                  <input type="checkbox" class="checkPrint"
                    name="checkPrint" value="{{ $produk->id }}" data-kode_produk="{{ $produk->kode }}"
                    data-nama_produk="{{ $produk->parent->nama }}" data-nama_varian="{{ $produk->nama }}"
                    data-spesifikasi="" data-berat_bruto="{{ formatNumberComma($item->stokBarangBaru->qty_in) }}">
                </td>
                <td>{{ $no++ }}</td>
                <td>{{ $item->barang->namaProduk() }}</td>
                <td class="text-center nomorUrut-{{ $produk->id }}">{{ $item->stokBarangBaru->sort }}</td>
                <td>{{ $item->stokBarangBaru->qrcode }}</td>
                <td class="kodeLot-{{ $produk->id }}">{{ $item->stokBarangBaru->kode_lot }}</td>
                <td class="text-end">{{ formatNumber($item->qty_dikirim) }} {{ $produk->unit_satuan_stock }}</td>
                <td class="text-end" style="width: 140px">
                  @if ($item->qty_diterima)
                    {{ formatNumber($item->qty_diterima) }} {{ $produk->unit_satuan_stock }}
                  @else
                    -
                  @endif
                </td>
                <td>
                  <button type="button" class="btn btn-light btn-sm" title="Print Data"
                    onclick="printLabel('{{ $produk->id }}', '{{ $produk->kode }}', '{{ $produk->parent->nama }}', '{{ $produk->nama }}', '{{ formatNumber($item->stokBarangBaru->qty_in) }}', '')"><span
                      class="mdi mdi-printer"></span></button>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="7" class="text-center">Tidak Ada Data</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>

      <div class="row mt-3">
        <div class="col-12 mb-3" id="containerPrint" style="display: none;">
          <button class="btn btn-secondary" id="printData" style="width: 100% !important;">Print Label</button>
        </div>
        <div class="col-12">
          <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>

  <div id="modalPreviewPrint" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title h4">Preview Data Print</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-12 mb-3" id="previewPrint">
            </div>
            <div class="col-9" style="text-align: left;">
              <select name="jenis_printer" id="jenis_printer" class="form-control">
                <option value="">Silahkan Pilih</option>
                @foreach ($printer as $itemPrinter)
                  <option value="{{ $itemPrinter }}">{{ $itemPrinter }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-3" style="text-align: right;">
              <button type="button" id="btnPrintKonfirmasi" class="btn btn-primary btn-custom1">Print Data</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@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>
    let dns_printer = "{{ @$GlobalVar->dns_printer }}";

    function printLabel(id, kode_produk, nama_produk, nama_varian, berat_bruto, spesifikasi) {
      let nomorUrut = $('.nomorUrut-' + id).text();
      let kodeLot = $('.kodeLot-' + id).text();

      let spesifikasiData = spesifikasi;
      if (kodeLot != null && kodeLot != '') {
        if (spesifikasi != null && spesifikasi != '') {
          spesifikasiData = kodeLot + "|" + spesifikasi;
        } else {
          spesifikasiData = kodeLot;
        }
      } else {
        if (spesifikasi != null && spesifikasi != '') {
          spesifikasiData = spesifikasi;
        }
      }

      arrDataPrint.push({
        'id': id,
        'kode_perusahaan': "{{ @$GlobalVar->kode_dokumen }}",
        'kode_produk': kode_produk,
        'nama_produk': nama_produk,
        'nama_varian': nama_varian,
        'berat_netto': berat_bruto,
        'spesifikasi': spesifikasiData,
        'nomor_urut': nomorUrut
      });

      $('#modalPreviewPrint').modal('show');
      var isiHtml = '<div class="table-responsive">' +
        '<table class="table">' +
        '<thead>' +
        '<tr>' +
        '<th>KODE BARANG</th>' +
        '<th>NAMA BARANG</th>' +
        '<th>VARIAN</th>' +
        '<th>BERAT BRUTO (KG)</th>' +
        '<th>NOMOR URUT</th>' +
        '</tr>' +
        '</thead>' +
        '<tbody>';

      isiHtml += '<tr>';
      isiHtml += '<td>' + kode_produk + '</td>';
      isiHtml += '<td>' + nama_produk + '</td>';
      isiHtml += '<td>' + nama_varian + '</td>';
      isiHtml += '<td>' + berat_bruto + ' KG</td>';
      isiHtml += '<td>' + nomorUrut + '</td>';
      isiHtml += '</tr>';
      isiHtml += '</tbody>';
      isiHtml += '</table>';
      isiHtml += '</div>';
      $('#previewPrint').html(isiHtml);
    }

    $(document).on('change', '.checkPrint', function(e) {
      if ($('.checkPrint:checked').length > 0) {
        $('#containerPrint').show();
      } else {
        $('#containerPrint').hide();
      }
    });

    $('.checkPrint').on('change', function(e) {
      if ($('.checkPrint:checked').length > 0) {
        $('#containerPrint').show();
        if($('.checkPrint').length == $('.checkPrint:checked').length) {
          $('#checkAll').prop('checked', true);
        }
      } else {
        $('#containerPrint').hide();
        $('#checkAll').prop('checked', false);
      }
    });

    var arrDataPrint = [];
    $('#printData').on('click', function(e) {

      var isiHtml = '<div class="table-responsive">' +
        '<table class="table">' +
        '<thead>' +
        '<tr>' +
        '<th>KODE BARANG</th>' +
        '<th>NAMA BARANG</th>' +
        '<th>VARIAN</th>' +
        '<th>BERAT BRUTO (KG)</th>' +
        '<th>NOMOR URUT</th>' +
        '</tr>' +
        '</thead>' +
        '<tbody>';

      $.each($('.checkPrint:checked'), function(i, v) {

        var spesifikasiData = $(this).data('spesifikasi');
        if ($('.kodeLot-' + $(this).val()).text() != null && $('.kodeLot-' + $(this).val()).text() != '') {
          if ($(this).data('spesifikasi') != null && $(this).data('spesifikasi') != '') {
            spesifikasiData = $('.kodeLot-' + $(this).val()).text() + "|" + $(this).data('spesifikasi');
          } else {
            spesifikasiData = $('.kodeLot-' + $(this).val()).text();
          }
        } else {
          if ($(this).data('spesifikasi') != null && $(this).data('spesifikasi') != '') {
            spesifikasiData = $(this).data('spesifikasi');
          }
        }

        arrDataPrint.push({
          'id': $(this).val(),
          'kode_perusahaan': "{{ @$GlobalVar->kode_dokumen }}",
          'kode_produk': $(this).data('kode_produk'),
          'nama_produk': $(this).data('nama_produk'),
          'nama_varian': $(this).data('nama_varian'),
          'berat_netto': $(this).data('berat_bruto'),
          'spesifikasi': spesifikasiData,
          'nomor_urut': $('.nomorUrut-' + $(this).val()).text()
        });

        isiHtml += '<tr>';
        isiHtml += '<td>' + $(this).data('kode_produk') + '</td>';
        isiHtml += '<td>' + $(this).data('nama_produk') + '</td>';
        isiHtml += '<td>' + $(this).data('nama_varian') + '</td>';
        isiHtml += '<td>' + $(this).data('berat_bruto') + ' KG</td>';
        isiHtml += '<td>' + $('.nomorUrut-' + $(this).val()).text() + '</td>';
        isiHtml += '</tr>';
      });

      isiHtml += '</tbody>';
      isiHtml += '</table>';
      isiHtml += '</div>';

      $('#modalPreviewPrint').modal('show');
      $('#previewPrint').html(isiHtml);
    });

    $('#btnPrintKonfirmasi').on('click', function(e) {
      var datas = {
        data: arrDataPrint,
      }
      if (dns_printer == null && dns_printer == '') {
        sendJson("{{ env('PRINTER_ZEBRA_HOST') }}/zebra_cetak_label_buka_paket.php", datas, rSendsPrintLabel, '');
      } else {
        sendJson(dns_printer + "/zebra_cetak_label_buka_paket.php", datas, rSendsPrintLabel, '');
      }
    });

    $('#modalPreviewPrint').on('hidden.bs.modal', function(e) {
      $('#previewPrint').html('');
      $('#jenis_printer').val('');
      arrDataPrint = [];
    });

    function rSendsPrintLabel(data) {
      $('#modalPreviewPrint').modal('hide');
      $('#previewPrint').html('');
      $('#jenis_printer').val('');
      arrDataPrint = [];

      var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
      swal({
        title: titles,
        text: data.response,
        type: data.type,
        confirmButtonText: "OK"
      });
    }

    $('#checkAll').on('change', function(e) {
      if ($(this).is(':checked')) {
        $('.checkPrint').prop('checked', true);
        $('#containerPrint').show();
      } else {
        $('.checkPrint').prop('checked', false);
        $('#containerPrint').hide();
      }
    });
  </script>
@endpush