@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/surat-jalan">Surat Jalan</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">
                    Surat Jalan Pembelian
                </div>
            </div>
        </h5>
        <div class="mb-4">
            <div class="">
                <div class="border p-3">
                    <form id="form_surat_jalan_header">
                        <div class="form-group mb-3">
                            <label>Supplier</label>
                            <select name="supplier_id" id="supplier_id" class="form-control required">
                                <option value="">Silahkan Pilih</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-6">
                                    <label>Nomor Surat Jalan</label>
                                    <input class="form-control resetForm required" type="text" name="nomor_surat_jalan" id="nomor_surat_jalan" placeholder="Nomor Surat Jalan">
                                </div>
                                <div class="col-6">
                                    <label>Tanggal Surat Jalan</label>
                                    <input class="form-control resetForm required" type="date" name="tanggal_surat_jalan" id="tanggal_surat_jalan" placeholder="Tanggal Surat Jalan" value="2025-06-08">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="mb-2">
          <x-checkbox-view-nama-top />
        </div>
        <div class="table-responsive">
            <table class="table table-bordered table-hover table-sm table-number" style="width: 100% !important;">
                <thead>
                    <tr>
                        <th>No</th>
                        <th style="width: 30% !important;">Nama Barang</th>
                        <th style="width: 15% !important;">QTY Terima</th>
                        <th style="width: 15% !important;">Satuan</th>
                        <th style="display:none;">QTY Terima</th>
                        <th style="width: 15% !important;">QTY BRUTO</th>
                        <th style="width: 15% !important;">Kode Lot</th>
                        <th style="width: 10% !important; white-space: normal; word-break:break-all;">Aksi</th>
                    </tr>
                </thead>
                <tbody class="tampilBarang">
                    <tr class="infoKosong">
                        <td colspan="7" class="text-center">Belum Terdapat Data</td>
                    </tr>
                </tbody>
            </table>
        </div>
        {{-- <div class="mt-2">
          <x-checkbox-view-nama-bottom />
        </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" style="width: 100% !important;">Simpan Data Surat Jalan</button>
            </div>
            <div class="col-6">
                <a href="/pembelian/surat-jalan" 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>No</th>
                                        <th>Nomor PO</th>
                                        <th>Tanggal PO</th>
                                        <th>Nama Barang</th>
                                        <th class="text-end">Jumlah</th>
                                        <th class="text-end">Jumlah Sisa</th>
                                        <th>Satuan</th>
                                        <th class="kolomAksi">
                                            {{-- <input type="checkbox" id="checkBoxSuratJalan" /> --}}
                                        </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>
        var URLs = "{{ url('pembelian/surat-jalan') }}";
        var IDBarang = [];
        var jmlBarangAll = 0;
        var objProduk = {};

        $('#supplier_id').select2({
            ajax: {
                url: '{{ route("kontak.supplier") }}',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        search: params.term
                    };
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.nama,
                                id: item.id
                            }
                        })
                    };
                },
                cache: true
            },
            minimumInputLength: 3,
        });

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

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

        $('#supplier_id').on('change', function(e){
            IDBarang = [];
            jmlBarangAll = 0;
            objProduk = {};
            $('.infoKosong').show();
            $('.rowBarangDetail').remove();
            $('.rowBarangDetailTotal').remove();
        });

        $(document).on('keyup', '.beratDetail', function(e){
            var po_detail_id = $(this).data('po_detail_id');
            cekJumlahBruto(po_detail_id);
        });

        $(document).on('keyup', '.kodeLotDetail', function(e){
            var po_detail_id = $(this).data('po_detail_id');
            var isian = $(this).val();
            var index = $(".kodeLot"+po_detail_id).index(this);
            $.each($(".kodeLot"+po_detail_id), function(i, v){
                var nextIndex = $(".kodeLot"+po_detail_id).index(this);
                if(nextIndex > index){
                    $(this).val(isian);
                }
            });
        });

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

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

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

        $('#btnSimpanBarang').on('click', function(e){
            let barang_selected = $('#tableBarang').DataTable().column(7).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 arrBarangPO = IDBarangNew.join("|");
                var data = {
                    arr_barang_po: arrBarangPO,
                    _token: "{{ csrf_token() }}"
                }
                sendJson(URLs+'/add-barang-supplier-po', data, rSendsBarang);
            }
        });

        function rSendsBarang(data) {
            swal.close();
            $('#modalBarang').modal('hide');
            $('#tableBarang tbody').html('');
            let checked_view_nama = $('input[name="view_nama"]:checked').val();

            var jmlBarang = IDBarang.length;
            if(parseInt(jmlBarang) > 0){
                $.each(data, function(i, v){
                    $.ajax({
                        url: `/master/produk/get-name?id=${v.produk_id}&id_supplier=${v.supplier_id}`,
                        type: 'GET',
                        dataType: 'json',
                        success: function(res) {
                            vals = v.jumlah_sisa
                            var cekDesimal = vals - Math.floor(vals);
                            if (cekDesimal > 0) {
                                ketJumlah = parseFloat(vals).toFixed(2);
                                ketJumlah = ketJumlah.replace(/\./g, ',');
                            } else {
                                ketJumlah = vals.toString().split(".")[0];
                            }

                            ketJumlahAsli = ketJumlah;
                            ketJumlah = ketJumlah-1;
                            var isiHTML = '';
                            isiHTML += `
                                <tr id="rowBarangDetailNama${v.id}" class="rowBarangDetail" style="background-color: #e9ecef !important;">
                                    <td colspan="6" style="max-width: 70% !important; white-space: normal; word-break:break-all;">
                                        <b>
                                            [${v.nomor_po}] Nama Barang:
                                            <span class="view_nama_asli view_nama" ${checked_view_nama != 'view_nama_asli' ? 'style="display:none"' : ''}>
                                                ${res.asli}
                                            </span>
                                            <span class="view_nama_alias view_nama" ${checked_view_nama != 'view_nama_alias' ? 'style="display:none"' : ''}>
                                                ${res.alias}
                                            </span>
                                            <span class="view_nama_asli_alias view_nama" ${checked_view_nama != 'view_nama_asli_alias' ? 'style="display:none"' : ''}>
                                                ${res.asli} / ${res.alias}
                                            </span>
                                        </b>
                                        <button type="button" class="btn btn-warning btn-sm" onclick="tambahDetail('${v.id}', '${formatNumber(parseFloat(ketJumlahAsli), 0, 2)}', '${v.satuan}', '${res.asli}', '${res.alias}', '${res.asli} / ${res.alias}', '${v.gunakan_nomor_urut ?? ''}', '${v.konversi}')">
                                            <span class="mdi mdi-plus"></span>
                                        </button>
                                    </td>
                                    <td style="width: 10% !important; white-space: normal; word-break:break-all;">
                                        <b>
                                            [QTY Sisa:
                                            <span id="infoQtySisa">
                                                ${formatNumber(parseFloat(ketJumlah), 0, 2)}
                                            </span>]
                                        </b>
                                    </td>
                                </tr>
                            `;
                            // var isiHTML = '<tr id="rowBarangDetailNama'+v.id+'" class="rowBarangDetail bg-info"><td colspan="4" style="max-width: 70% !important; white-space: normal; word-break:break-all;"><b>['+v.nomor_po+'] Nama Barang: '+nama_produk+' (Alias: '+alias+')</b> <button type="button" class="btn btn-warning btn-sm" onclick="tambahDetail(\''+v.id+'\', \''+formatNumber(parseFloat(ketJumlahAsli), 0, 2)+'\', \''+v.satuan+'\')"><span class="mdi mdi-plus"></button></td><td style="width: 10% !important; white-space: normal; word-break:break-all;"><b>[QTY Sisa: <span id="infoQtySisa">'+formatNumber(parseFloat(ketJumlah), 0, 2)+'</span>]</b></td></tr>';
                            isiHTML += '<tr id="rowBarangDetail'+v.id+'_1" class="rowBarangDetail rowBarangDetailCek'+v.id+'">'+
                                '<td class="number"></td>'+
                                '<td style="max-width: 30% !important; white-space: normal; word-break:break-all;">'+
                                    `<span class="view_nama_asli view_nama" ${checked_view_nama != 'view_nama_asli' ? 'style="display:none"' : ''}>
                                        ${res.asli}
                                    </span>
                                    <span class="view_nama_alias view_nama" ${checked_view_nama != 'view_nama_alias' ? 'style="display:none"' : ''}>
                                        ${res.alias}
                                    </span>
                                    <span class="view_nama_asli_alias view_nama" ${checked_view_nama != 'view_nama_asli_alias' ? 'style="display:none"' : ''}>
                                        ${res.asli} / ${res.alias}
                                    </span>`+
                                '</td>'+
                                '<td style="width: 15% !important;"><input type="hidden" class="form-control idDetail id'+v.id+'" value="'+v.id+'"><span class="qtyCek'+v.id+'">1</span></td>'+
                                '<td style="width: 15% !important;">'+v.satuan+'</td>'+
                                '<td style="display:none;"><input type="text" id="qtyTerima'+v.id+'_1" class="form-control qtyTerimaDetail qtyTerima'+v.id+'" data-posisi="1" data-header_id="'+v.id+'" value="1" readonly="readonly"></td>'+
                                '<td style="width: 15% !important;"><input onchange="formatInputUang(this)" type="text" class="form-control removeMinusSign text-end beratDetail berat'+v.id+'" onkeyup="dottocomma(this)" data-po_detail_id="'+v.id+'" value="'+(parseInt(v.gunakan_nomor_urut) <= 0 || v.gunakan_nomor_urut == null || v.gunakan_nomor_urut == '' ? formatNumberComma(v.konversi) : '')+'"></td>'+
                                '<td style="width: 15% !important;"><input type="text" class="form-control kodeLotDetail kodeLot'+v.id+'" value="" data-po_detail_id="'+v.id+'"></td>'+
                                '<td style="width: 10% !important; white-space: normal; word-break:break-all;"><button type="button" onclick="hapusBarang(\''+v.id+'\', \'1\')" class="btn btn-danger btn-custom5 btn-sm"><span class="mdi mdi-delete"></span></button></td>'+
                                '</tr>';
                            isiHTML += '<tr id="rowBarangDetailTotal'+v.id+'" class="bg-light rowBarangDetailTotal">'+
                            '<td class="text-center"><b>Total</b></td>'+
                            '<td><b><span id="totQty'+v.id+'">1</span></b></td>'+
                            '<td><b>'+v.satuan+'</b></td>'+
                            '<td><b><span id="totBerat'+v.id+'">0</span> '+v.ket_satuan_stock+'</b></td>'+
                            '<td>&nbsp;</td>'+
                            '<td>&nbsp;</td>'+
                            '<td>&nbsp;</td>'+
                            '</tr>';

                            objProduk[v.id+'_1'] = ketJumlah;
                            $('.tampilBarang').append(isiHTML);

                            cekJumlahBruto(v.id);
                            updateTableNumbers();
                        },
                        error: errorSend
                    })
                });
            }

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

        function tambahDetail(id, jumlah, satuan, asli, alias, asli_alias, gunakan_nomor_urut, konversi){
            let checked_view_nama = $('input[name="view_nama"]:checked').val();
            var jumlah_inputan = 1;
            $.each($('.qtyTerima'+id), function(i, v){
                jumlah_inputan = parseInt(jumlah_inputan)+1;
            });

            var qty_sisa_terkini = parseInt(jumlah)-jumlah_inputan;

            if(qty_sisa_terkini < 0){
                swal('Perhatian', 'QTY Sisa Tidak Mencukupi', 'warning');
            }else{
                $('#infoQtySisa').html(qty_sisa_terkini);
                var posisi = parseInt($(".qtyTerima"+id+":last").data('posisi'))+1;

                var kL = "";
                $.each($(".kodeLot"+id), function(i, v){
                    if($(this).val() != null && $(this).val() != ''){
                        kL = $(this).val();
                    }
                });

                var isiHTML = '<tr id="rowBarangDetail'+id+'_'+posisi+'" class="rowBarangDetail rowBarangDetailCek'+id+'">'+
                    '<td class="number"></td>'+
                    '<td style="max-width: 30% !important; white-space: normal; word-break:break-all;">'+
                        `<span class="view_nama_asli view_nama" ${checked_view_nama != 'view_nama_asli' ? 'style="display:none"' : ''}>
                            ${asli}
                        </span>
                        <span class="view_nama_alias view_nama" ${checked_view_nama != 'view_nama_alias' ? 'style="display:none"' : ''}>
                            ${alias}
                        </span>
                        <span class="view_nama_asli_alias view_nama" ${checked_view_nama != 'view_nama_asli_alias' ? 'style="display:none"' : ''}>
                            ${asli_alias}
                        </span>`+
                    '</td>'+
                    '<td style="width: 15% !important;"><input type="hidden" class="form-control idDetail id'+id+'" value="'+id+'"><span class="qtyCek'+id+'">1</span></td>'+
                    '<td style="width: 15% !important;">'+satuan+'</td>'+
                    '<td style="display:none;"><input id="qtyTerima'+id+'_'+posisi+'" type="text" class="form-control qtyTerimaDetail qtyTerima'+id+'" data-posisi="'+posisi+'" data-header_id="'+id+'" value="1" readonly="readonly"></td>'+
                    '<td style="width: 15% !important;"><input type="text" onchange="formatInputUang(this)" class="form-control removeMinusSign text-end beratDetail berat'+id+'" onkeyup="dottocomma(this)" data-po_detail_id="'+id+'" value="'+(parseInt(gunakan_nomor_urut) <= 0 || gunakan_nomor_urut == null || gunakan_nomor_urut == '' ? formatNumberComma(konversi) : '')+'"></td>'+
                    '<td style="width: 15% !important;"><input type="text" class="form-control kodeLotDetail kodeLot'+id+'" value="'+kL+'" data-po_detail_id="'+id+'"></td>'+
                    '<td style="width: 15% !important; white-space: normal; word-break:break-all;"><button type="button" onclick="hapusBarang(\''+id+'\', \''+posisi+'\')" class="btn btn-danger btn-custom5 btn-sm"><span class="mdi mdi-delete"></span></button></td>'+
                    '</tr>';

                $("tr.rowBarangDetailCek"+id+":last").after(isiHTML);
                cekJumlahBruto(id);
                updateTableNumbers();
            }
        }

        function hapusBarang(id, posisi)
        {
            posisi_hapus = posisi;
            isian_awal = objProduk[id+'_'+posisi];
            delete objProduk[id+'_'+posisi];
            $('#rowBarangDetail'+id+'_'+posisi).remove();

            if ($(".rowBarangDetailCek"+id).length <= 0) {
                IDBarangTemp = [];
                $.each(IDBarang, function(i, v){
                    if(v != id){
                        IDBarangTemp.push(v);
                    }
                });
                IDBarang = IDBarangTemp;
                jmlBarangAll = parseInt(jmlBarangAll)-1;
                $('#rowBarangDetailNama'+id).remove();
                $('#rowBarangDetailTotal'+id).remove();

            }else{
                var jmlSubData = parseInt($('#infoQtySisa').html());
                $('#infoQtySisa').html(jmlSubData+1);

                cekJumlahBruto(id);
            }

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

        function cekJumlahBruto(po_detail_id){
            var jumlah = 0;
            $.each($('.berat'+po_detail_id), function(i, v){
                if($(this).val() != null && $(this).val() != ''){
                    jumlah = jumlah + parseFloat($(this).val().replace(/\./g, '').replace(/\,/g, '.'));
                }else{
                    jumlah = jumlah + 0;
                }
            });

            var cekDesimal = jumlah - Math.floor(jumlah);
            if (cekDesimal > 0) {
                ketJumlah = parseFloat(jumlah).toFixed(2);
                ketJumlah = ketJumlah.replace(/\./g, ',');
            } else {
                ketJumlah = jumlah.toString().split(".")[0];
            }

            ketJumlah = ketJumlah.replace(/\./g, '').replace(/\,/g, '.');
            ketJumlah = formatNumber(parseFloat(!isNumeric(ketJumlah) ? 0 : ketJumlah), 0, 2);
            $('#totBerat'+po_detail_id).html(ketJumlah);

            var jumlah2 = 0;
            $.each($('.qtyCek'+po_detail_id), function(i, v){
                jumlah2 = jumlah2 + 1;
            });

            var cekDesimal2 = jumlah2 - Math.floor(jumlah2);
            if (cekDesimal2 > 0) {
                ketJumlah2 = parseFloat(jumlah2).toFixed(2);
                ketJumlah2 = ketJumlah2.replace(/\./g, ',');
            } else {
                ketJumlah2 = jumlah2.toString().split(".")[0];
            }

            ketJumlah2 = ketJumlah2.replace(/\./g, '').replace(/\,/g, '.');
            ketJumlah2 = formatNumber(parseFloat(!isNumeric(ketJumlah2) ? 0 : ketJumlah2), 0, 2);
            $('#totQty'+po_detail_id).html(ketJumlah2);
        }

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

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

                    if (cekFormDetail) {

                        arrIDDetail = [];
                        $.each($('.idDetail'), function(i, v){
                            arrIDDetail.push($(this).val());
                        });

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

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

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

                        var data = {
                            _token: "{{ csrf_token() }}",
                            supplier_id: $('#supplier_id').val(),
                            nomor_surat_jalan: $('#nomor_surat_jalan').val(),
                            tanggal_surat_jalan: $('#tanggal_surat_jalan').val(),
                            idDetail: arrIDDetail.join('|'),
                            qtyTerimaDetail: arrQtyTerimaDetail.join('|'),
                            beratDetail: arrBeratDetail.join('|'),
                            kodeLotDetail: arrKodeLotDetail.join('|'),
                        }

                        sendJson(URLs+'/store-barang-supplier-po', data, rSendsPembelianPO);
                    } else {
                        swal('Perhatian', 'Masih Terdapat Inputan Berat yang Kosong', 'info');
                    }
                }
            }else{
                swal('Perhatian', 'Silahkan Pilih Barang Terlebih Dahulu', 'info');
            }
        });

        function rSendsPembelianPO(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/surat-jalan";
                }
            })
        }
    </script>
    @include('pages.pembelian.surat-jalan.function')
@endpush