@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" />
  <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Pembelian</a></li>
        <li class="breadcrumb-item"><a href="/pembelian/terima-paket">Terima Paket</a></li>
        <li class="breadcrumb-item active" aria-current="page">Barang Tanpa Surat Jalan</li>
    </ol>
</nav>

<div class="card m-b-30">
    <div class="card-body">
        <h5 class="card-title">
            <div class="row">
                <div class="col-12">
                    Barang Tanpa Surat Jalan
                </div>
            </div>
        </h5>
        <div class="mb-4">
            <div class="row m-0">
                <div class="col-12 border border-bottom-0 p-3">
                    <div class="form-group">
                        <label>Nomor Terima Paket</label>
                        <input type="text" class="form-control" value="{{ $dataHeader->nomor_terima_paket != null && $dataHeader->nomor_terima_paket ? $dataHeader->nomor_terima_paket : '-' }}" disabled="disabled">
                    </div>
                </div>
                <div class="col-12 border border-bottom-0 border-top-0 p-3">
                    <div class="form-group">
                        <label>Supplier</label>
                        <input type="text" class="form-control" value="{{ $dataHeader->kode_supplier." | ".$dataHeader->nama_supplier }}" disabled="disabled">
                    </div>
                </div>
                <div class="col-12 border border-bottom-0 border-top-0 p-3">
                    <div class="form-group">
                        <label>Tanggal Terima Paket</label>
                        <input type="date" class="form-control" value="1970-01-01" disabled="disabled">
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-12">
                <label for="view_nama">View Nama Barang</label>
                <div class="d-flex">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="view_nama" id="view_nama_asli" value="view_nama_asli" checked>
                        <label class="form-check-label" for="view_nama_asli">
                          Asli
                        </label>
                    </div>
                    <div class="form-check ms-2">
                        <input class="form-check-input" type="radio" name="view_nama" id="view_nama_alias" value="view_nama_alias">
                        <label class="form-check-label" for="view_nama_alias">
                          Alias
                        </label>
                    </div>
                    <div class="form-check ms-2">
                        <input class="form-check-input" type="radio" name="view_nama" id="view_nama_asli_alias" value="view_nama_asli_alias">
                        <label class="form-check-label" for="view_nama_asli_alias">
                          Keduanya
                        </label>
                    </div>
                </div>
            </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 style="width: 65% !important;">Nama Barang</th>
                        <th style="width: 20% !important;" class="text-end">Jumlah (ROLL)</th>
                        <th style="width: 15% !important;">Aksi</th>
                    </tr>
                </thead>
                <tbody class="tampilBarang">
                    <tr class="infoKosong" >
                        <td colspan="4" class="text-center">Belum Terdapat Data</td>
                    </tr>
                    @foreach ($dataDetail as $vDetail)
                        <tr class="rowBarang" id="rowBarang" data-relasi_produk_id="">
                            <td class="number"></td>
                            <td style="width: 65% !important; white-space: normal; word-break:break-all;">
                                <div class="view_nama_asli view_nama">
                                                                    </div>
                                <div class="view_nama_alias view_nama" style="display:none">
                                                                    </div>
                                <div class="view_nama_asli_alias view_nama" style="display:none">
                                                                    </div>
                            </td>
                            <td style="width: 20% !important;" class="text-end"><input type="text" class="form-control text-end removeMinusSign jumlahTanpaSJ formatInputUang" onkeyup="dottocomma(this)" value=""></td>
                            <td style="width: 20% !important;"><button class="btn btn-sm btn-danger" onclick="btnDelete('')"><span class="mdi mdi-delete"></span></button></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" style="width: 100% !important;">Tambah Barang</button>
            </div>
            <div class="col-6">
                <button type="button" id="btnSimpanData" class="btn btn-success btn-custom1" style="width: 100% !important;">Simpan Data Barang Tanpa Surat Jalan</button>
            </div>
            <div class="col-6">
                <a href="/pembelian/terima-paket" 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="mb-2">
                            <x-checkbox-view-nama-modal />
                        </div>
                        <div class="col-12">
                            <table class="table table-sm table-modal-bordered" id="tableBarang" style="width: 100% !important;">
                                <thead>
                                    <tr>
                                        <th class="number">No</th>
                                        <th style="width: 85% !important; white-space: normal; word-break:break-all;">Nama Barang</th>
                                        <th class="kolomAksi">
                                            {{-- <input type="checkbox" id="checkBoxBarang" /> --}}
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </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>
  <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>
    updateTableNumbers();
    var URLs = "{{ url('pembelian/terima-paket/barang-tanpa-sj') }}";
    var IDBarang = [];
    var jmlBarangAll = "{{ $jmlDetail }}";

    if(jmlBarangAll > 0){
        IDBarang = {!! json_encode($arrIdBarang) !!}
    }

    $('#btnTambahBarang').on('click', function(e){
        var data = {
            _token: "{{ csrf_token() }}",
            supplier_id: "{{ $dataHeader->supplier_id }}"
        };

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

    function rBarang(data){
        swal.close();
        $('#tableBarang').DataTable().clear().destroy();
        $('#modalBarang').modal('show');

        var checked_view_nama = $('input[name="view_nama"]:checked').val();
        let no = 1;
        $.each(data, function(i, v){
            var cekArray = $.inArray(parseInt(v.id), IDBarang);

            if(cekArray == -1){
                $('#tableBarang tbody').append(
                    `<tr class="rowBarang" id="rowBarang${v.id}">
                        <td class="number">${no++}</td>
                        <td style="width: 85% !important; white-space: normal; word-break:break-all;">
                            <div class="view_nama_asli view_nama" ${checked_view_nama != 'view_nama_asli' ? 'style="display:none"' : ''}>
                                ${v.asli}
                            </div>
                            <div class="view_nama_alias view_nama" ${checked_view_nama != 'view_nama_alias' ? 'style="display:none"' : ''}>
                                ${v.alias}
                            </div>
                            <div class="view_nama_asli_alias view_nama" ${checked_view_nama != 'view_nama_asli_alias' ? 'style="display:none"' : ''}>
                                ${v.asli_alias}
                            </div>
                        </td>
                        <td>${v.id}</td>
                    </tr>`
                );
            }
        });

        // $('#tableBarang').DataTable({
        //     "columnDefs": [{
        //     "targets": [1],
        //     "orderable": false
        //     }]
        // }).draw();
        $('#tableBarang').DataTable({
          columnDefs: [
            {
              targets: 2,
              checkboxes: {
                selectRow: true
              },
            }
          ],
          select: {
            style: 'multi'
          },
        //   lengthMenu: [[2, 25, 50]],
        }).draw();
    }

    $('#btnSimpanBarang').on('click', function(e){
        let barang_selected = $('#tableBarang').DataTable().column(2).checkboxes.selected();
        var jmlCek = barang_selected.length;
        var IDBarangNew = [];
        if(parseInt(jmlCek) <= 0){
            swal('Perhatian', 'Pastikan Centang Barang Terlebih Dahulu', 'info');
        }else{
            $.each(barang_selected, function(index, id) {
                IDBarang.push(parseInt(id));
                IDBarangNew.push(parseInt(id));
                jmlBarangAll = parseInt(jmlBarangAll)+1;
            });

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

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

        var checked_view_nama = $('input[name="view_nama"]:checked').val();

        $.each(data, function(i, v){
            $('.tampilBarang').append(
                `<tr class="rowBarang" id="rowBarang${v.id}" data-relasi_produk_id="${v.id}">
                    <td class="number"></td>
                    <td style="width: 65% !important; white-space: normal; word-break:break-all;">
                        <div class="view_nama_asli view_nama" ${checked_view_nama != 'view_nama_asli' ? 'style="display:none"' : ''}>
                        ${v.asli}
                        </div>
                        <div class="view_nama_alias view_nama" ${checked_view_nama != 'view_nama_alias' ? 'style="display:none"' : ''}>
                        ${v.alias}
                        </div>
                        <div class="view_nama_asli_alias view_nama" ${checked_view_nama != 'view_nama_asli_alias' ? 'style="display:none"' : ''}>
                        ${v.asli_alias}
                        </div>
                    </td>
                    <td style="width: 20% !important;"><input type="text" class="form-control text-end removeMinusSign jumlahTanpaSJ formatInputUang" value="0" onkeyup="dottocomma(this)"></td>
                    <td style="width: 20% !important;"><button class="btn btn-sm btn-danger" onclick="btnDelete('${v.id}')"><span class="mdi mdi-delete"></span></button></td>
                </tr>`
            );
            updateTableNumbers();
        });

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

    function btnDelete(id)
    {
        $('#rowBarang'+id).remove();
        jmlBarangAll = parseInt(jmlBarangAll)-1;

        var IDBarangNew = [];
        $.each($('.rowBarang'), function(i, v){
            IDBarangNew.push($(this).data('relasi_produk_id'));
        });
        IDBarang = IDBarangNew;

        updateTableNumbers();
        if(parseInt(jmlBarangAll) <= 0){
            $('.infoKosong').show();
        }
    }

    $('#btnSimpanData').on('click', function(e){
        if(parseInt(jmlBarangAll) > 0){
            var cekJumlah = true;
            $.each($('.jumlahTanpaSJ'), function(i, v){
                var isian = $(this).val();
                if(isian != null && isian != '' && isian != '0' && isian != 0){
                    cekJumlah = true;
                }else{
                    cekJumlah = false;
                }
            });

            if(cekJumlah == true){
                var arrRelasiProduk = [];
                $.each($('.rowBarang'), function(i, v){
                    arrRelasiProduk.push($(this).data('relasi_produk_id'));
                });

                var arrJumlah = [];
                $.each($('.jumlahTanpaSJ'), function(i, v){
                    arrJumlah.push(formatInputUangToFloat($(this).val()));
                });

                var data = {
                        _token: "{{ csrf_token() }}",
                        terima_paket_id: "{{ $dataHeader->id }}",
                        jumlah: arrJumlah.join('|'),
                        relasiProduk: arrRelasiProduk.join('|'),
                    }

                sendJson(URLs+'/store-barang-tanpa-sj', data, rSendsBarangTanpaSJ);
            }else{
                swal('Perhatian', 'Pastikan Jumlah Tidak Ada yang 0', 'warning');
            }
        }else{
            var data = {
                    _token: "{{ csrf_token() }}",
                    terima_paket_id: "{{ $dataHeader->id }}",
                    jumlah: '',
                    relasiProduk: '',
                }

            sendJson(URLs+'/store-barang-tanpa-sj', data, rSendsBarangTanpaSJ);
        }
    });

    function rSendsBarangTanpaSJ(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 = "/pembelian/terima-paket";
            }
        })
    }
  </script>
@endpush