@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="#">Pembelian</a></li>
        <li class="breadcrumb-item active" aria-current="page">Terima Paket</li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-header bg-white">
                <div class="row">
                    <div class="col-12">
                        <h6 class="card-title">Data Terima Paket</h6>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="mb-2">
                            <select name="supplier_filter" id="supplier_filter" class="form-control select2Custom">
                                <option value="">Pilih Supplier</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="mb-2">
                            <select name="gudang_filter" id="gudang_filter" class="form-control select2Custom">
                                <option value="">Pilih Gudang</option>
                                @foreach ($dataGudang as $item)
                                    <option value="{{$item->id}}">{{$item->nama}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-md-2">
                        <div class="mb-2">
                            <select name="ekspedisi_filter" id="ekspedisi_filter" class="form-control select2Custom">
                                <option value="">Pilih Ekspedisi</option>
                                @foreach ($dataEkspedisi as $item)
                                    <option value="{{$item->id}}">{{$item->kode}} | {{$item->nama}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="mb-2">
                            <input type="text" name="daterange" id="daterange" class="form-control" placeholder="Tanggal Terima Paket" readonly>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="row">
                            <div class="col-6 pe-1">
                                <button type="button" id="btnFilter" class="btn btn-primary btn-custom2 w-100">Filter</button>
                            </div>
                            <div class="col-6 ps-1">
                                <button type="button" class="btn btn-light btn-custom8 w-100" onclick="filterReset()">Reset</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table id="datatable-serverside" class="table" style="width: 100% !important;">
                                <thead>
                                    <tr>
                                        <th class="kolomNomor">No.</th>
                                        <th>Nomor Terima Paket</th>
                                        <th>Tanggal</th>
                                        <th>Gudang</th>
                                        <th>Ekspedisi</th>
                                        <th>No. Faktur</th>
                                        <th>Supplier</th>
                                        <th>Nomor Surat Jalan</th>
                                        <th>Jumlah (KOLI)</th>
                                        <th>Berat (KG)</th>
                                        {{-- <th>Nomor Polisi (Kendaraan)</th>
                                        <th>Sopir (Kendaraan)</th> --}}
                                        {{-- <th>Nopol</th>
                                        <th>Sopir</th> --}}
                                        <th>Cek Barang Datang</th>
                                        <th>Barang Tanpa Surat Jalan</th>
                                        <th>File Upload</th>
                                        <th class="kolomAksi">Aksi</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer" style="text-align: right;">
                @can('terima-paket.create')
                    <button class="btn btn-info btn-custom1" id="tambahTerimaPaket">Tambah Data</button>
                @endcan
            </div>
        </div>
    </div>
</div>

{{-- Modal --}}
<div id="modalTerimaPaket" 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">Form Terima Paket</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_terima_paket" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Tanggal</label>
                                <input type="date" name="tanggal_terima_paket" id="tanggal_terima_paket" class="form-control required" placeholder="Tanggal" value="2025-06-08">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Gudang</label>
                                <select name="id_gudang" id="id_gudang" class="form-control required select2CustomModalTerimaPaket">
                                    <option value="">Silahkan Pilih</option>
                                    @foreach ($GlobalVar->akses_gudang ?? [] as $valGudang)
                                    <option value="{{ $valGudang['id'] }}">{{ $valGudang['nama'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Ekspedisi</label>
                                <select name="ekspedisi_id" id="ekspedisi_id" class="form-control required select2CustomModalTerimaPaket">
                                    <option value="">Silahkan Pilih</option>
                                    @foreach ($dataEkspedisi as $valEkspedisi)
                                    <option value="{{ $valEkspedisi->id }}">{{ $valEkspedisi->kode." | ".$valEkspedisi->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Nomor Faktur</label>
                                <input type="text" name="no_faktur" id="no_faktur" class="form-control" placeholder="Nomor Faktur">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Supplier</label>
                                <select name="supplier_id" id="supplier_id" class="form-control required select2CustomModalTerimaPaketNew">
                                    <option value="">Silahkan Pilih</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Jumlah (KOLI)</label>
                                <input type="text" name="jumlah" id="jumlah" class="form-control required" placeholder="Jumlah (KOLI)">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Berat (KG)</label>
                                <input type="text" onkeyup="dottocomma(this)" name="berat" id="berat" class="form-control removeMinusSign required" placeholder="Berat (KG)">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Nomor Polisi (Kendaraan)</label>
                                <input type="text" name="nomor_polisi" id="nomor_polisi" class="form-control" placeholder="Nomor Polisi (Kendaraan)">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Sopir (Kendaraan)</label>
                                <input type="text" name="sopir" id="sopir" class="form-control" placeholder="Sopir (Kendaraan)">
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanTerimaPaket" 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="modalKelolaBerkas" 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 File Upload</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 pb-4">
                        <table class="table table-sm" id="tableKelolaBerkas" style="width: 100% !important;">
                            <thead>
                                <tr>
                                    <th>Nama File</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id="rowKosongKelolaBerkas">
                                    <td colspan="2" class="text-center">Belum Terdapat Data</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    @canany(['terima-paket.edit', 'terima-paket.create'])
                        <div class="col-12">
                            <label>Upload File</label>
                            <input type="file" id="file" class="form-control mt-2" accept=".jpg,.jpeg,.jpe,.jfif,.jif,.pdf">
                            <x-upload-file-footnotes/>
                            <button type="button" id="btnKelolaBerkas" class="btn btn-success btn-custom1 btn-sm mt-2" style="width: 100% !important;">Upload File</button>
                        </div>
                    @endcanany
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modalMasterEkspedisi" 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">Form Master Ekspedisi</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_master_ekspedisi" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Nama Ekspedisi</label>
                                <input type="text" class="form-control required" name="nama_ekspedisi" autocomplete="off" placeholder="Nama Ekspedisi">
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanMasterEkspedisi" 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="modalLihatDetail" 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 Surat Jalan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <x-checkbox-view-nama-modal />
                    <div class="col-12 pb-4">
                        <table class="table table-sm" id="tableDetail" style="width: 100% !important;">
                            <thead>
                                <tr>
                                    <th>Nama Barang</th>
                                    <th>QTY Terima</th>
                                    <th>Satuan</th>
                                    <th>QTY Bruto</th>
                                    <th>QTY Netto</th>
                                    <th>Kode Lot</th>
                                    <th>Nomor Terima Paket</th>
                                    <th>Tanggal Terima Paket</th>
                                    <th>Nomor Urut</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id="rowKosongDetail">
                                    <td colspan="9" class="text-center">Belum Terdapat Data</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modalLihatBarangTanpaSJ" 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 Tanpa Surat Jalan</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 pb-4">
                        <table class="table table-sm" id="tableBarangTanpaSJ" style="width: 100% !important;">
                            <thead>
                                <tr>
                                    <th>Barang</th>
                                    <th>Jumlah</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id="rowKosongBarangTanpaSJ">
                                    <td colspan="3" class="text-center">Belum Terdapat Data</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <label>Barang</label>
                        <select id="produk_id_tanpa_sj" class="form-control select2CustomModal">
                            <option value="">Silahkan Pilih</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <label>Jumlah</label>
                        <input type="text" id="jumlah_tanpa_sj" class="form-control">
                    </div>
                    <div class="col-12 pt-3">
                        <button type="button" id="simpanTanpaSJ" class="btn btn-success btn-custom1" style="width: 100% !important;">Simpan Data</button>
                    </div>
                </div>
            </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('pembelian/terima-paket') }}";
    var jmlBerkasAll = 0;

    $('#supplier_filter').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,
    });

    $('input[name="daterange"]').daterangepicker({
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear'
        }
    });
    $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
    });
    $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });

    let datatable = $('#datatable-serverside').DataTable({
        lengthMenu: lengthMenuDatatable(),
        searchDelay: 1000,
        processing: true,
        serverSide: true,
        ajax: URLs + '/get-data',
        columns: [{
                data: 'DT_RowIndex',
                name: 'id',
                searchable: false,
            },
            {
                data: 'nomor_terima_paket',
                name: 'nomor_terima_paket'
            },
            {
                data: 'tanggal_terima_paket',
                name: 'tanggal_terima_paket',
                searchable: false
            },
            {
                data: 'nama_gudang',
                name: 'nama_gudang',
                searchable: false,
                defaultContent: '-'
            },
            {
                data: 'ekspedisi',
                name: 'ekspedisi',
                searchable: false
            },
            {
                data: 'no_faktur',
                name: 'no_faktur'
            },
            {
                data: 'detail_supplier',
                name: 'detail_supplier',
                searchable: false
            },
            {
                data: 'nomor_surat_jalan',
                name: 'nomor_surat_jalan',
                searchable: false
            },
            {
                data: 'jumlah',
                name: 'jumlah',
                class: 'text-end'
            },
            {
                data: 'berat',
                name: 'berat',
                class: 'text-end'
            },
            {
                data: 'detail',
                name: 'detail',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'barang_tanpa_surat_jalan',
                name: 'barang_tanpa_surat_jalan',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'file_upload',
                name: 'file_upload',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'aksi',
                name: 'aksi',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
        ],
    });

    $('#btnFilter').on('click', function(e) {
        let URL_filter = URLs + "/get-data" + `?supplier=${$('#supplier_filter').val()}&daterange=${$('#daterange').val()}&gudang=${$('#gudang_filter').val()}&ekspedisi=${$('#ekspedisi_filter').val()}`;
        datatable.ajax.url(URL_filter).load();
    });

    function filterReset() {
        $('#supplier_filter').val('').trigger('change');
        $('#daterange').val('');
        datatable.ajax.url(URLs + "/get-data").load();
    }

    $('#modalTerimaPaket').on('shown.bs.modal', function() {
        cekModal = false;
        $('.select2CustomModalTerimaPaket').select2({
            dropdownParent: $('#modalTerimaPaket .modal-content'),
            width: '100%',
        });
        $('.select2CustomModalTerimaPaketNew').select2({
            dropdownParent: $('#modalTerimaPaket .modal-content'),
            width: '100%',
            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,
        });
    });

    $('#tambahTerimaPaket').on('click', function(e) {
        stat = "add";
        $('#modalTerimaPaket').modal('show');
    });

    $('#btnSimpanTerimaPaket').on('click', function(e) {
        if (cekForm('form_terima_paket') == true) {
            $('#berat').val(($('#berat').val()).replace(/\,/g, '.'));
            var data = $('#form_terima_paket').serialize();
            data += "&_token={{ csrf_token() }}";
            if (stat == "add") {
                sendJson(URLs + "/add", data, rSends);
            } else {
                data += "&id=" + IDs;
                sendJson(URLs + "/update", data, rSends);
            }
        }
    });

    function readData(id, is_editable = true) {
        if(!is_editable) {
            $('#supplier_id').prop('disabled', true);
            $('#id_gudang').prop('disabled', true);
        } else {
            $('#supplier_id').prop('disabled', false);
            $('#id_gudang').prop('disabled', false);
        }

        stat = "update";
        IDs = id;
        var data = {
            act: "read",
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs + "/read", data, rReads);
    }

    function rReads(data) {
        swal.close();
        $('#modalTerimaPaket').modal("show");
        $.each(data, function(idx, vals) {
            if (idx == 'ekspedisi_id' || idx == 'supplier_id') {
                $('#' + idx).val(vals).trigger('change');
            }else if(idx == 'berat') {
                $('[name=' + idx + ']').val(formatNumber(vals, 0));
            }else if(idx == 'jumlah') {
                $('[name=' + idx + ']').val(formatNumber(vals, 0));
            }
            else {
                $('[name=' + idx + ']').val(vals);
            }
        })
    }

    function hapusData(id) {
        swal({
            title: "Konfirmasi",
            text: "Apakah anda ingin menghapus data ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function() {
            var data = {
                act: "delete",
                id: id,
                _token: '{{ csrf_token() }}'
            };
            sendJson(URLs + "/delete", data, rSends);
        })
    }

    var cekModal = false;
    $('#modalTerimaPaket').on('hidden.bs.modal', function(e) {
        if (cekModal == false) {
            $('#form_terima_paket input').val('');
            $('#form_terima_paket input[name="tanggal_terima_paket"]').val("{{ date('Y-m-d') }}");
            $('#form_terima_paket select').val('').trigger('change');
            IDs = '';
            stat = '';
        }
    });

    function kelolaBerkas(id) {
        IDs = id;
        var data = {
            _token: "{{ csrf_token() }}",
            id: id
        };
        sendJson(URLs + '/read-file', data, rKelolaBerkas);
    }

    function rKelolaBerkas(data) {
        jmlBerkasAll = data.length;
        if (data.length > 0) {
            $('#rowKosongKelolaBerkas').hide();
        }

        $.each(data, function(i, v) {
            var url = "{{ asset('berkas_file_terima_paket/') }}" + '/' + v.nama_file;
            var link = '<a href="' + url + '" target="_blank">' + v.nama_file + '</a>';

            var row = '<tr class="trFile trFile' + v.id + '"><td>' + link + '</td><td><button type="button" title="Hapus File" onclick="hapusFile(\'' + v.id + '\')" class="btn btn-danger btn-custom5 btn-sm"><span class="mdi mdi-delete"></span></button></td></tr>';

            $('#tableKelolaBerkas tbody').append(row);
        });

        swal.close();
        $('#modalKelolaBerkas').modal('show');
    }

    $('#btnKelolaBerkas').on('click', function(e) {
        if ($('#file').val() != null && $('#file').val() != '') {
            var data = new FormData();
            data.append('_token', "{{ csrf_token() }}");
            data.append('terima_paket_id', IDs);
            var file = $('#file')[0].files;
            data.append('file', file[0]);
            uploads(URLs + "/upload-file", data, rSendsUpload);

        } else {
            swal('Perhatian', 'Pastikan Sudah Memilih File yang Akan Diupload', 'warning');
        }
    });

    function rSendsUpload(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") {
                $('#file').val('');
                jmlBerkasAll = parseInt(jmlBerkasAll) + 1;
                if (jmlBerkasAll > 0) {
                    $('#rowKosongKelolaBerkas').hide();
                }

                var url = "{{ asset('berkas_file_terima_paket/') }}" + '/' + data.nama_file;
                $('#tableKelolaBerkas tbody').append('<tr class="trFile trFile' + data.id + '">' +
                    '<td><a href="' + url + '" target="_blank">' + data.nama_file + '</a></td>' +
                    '<td><button type="button" title="Hapus File" onclick="hapusFile(\'' + data.id + '\')" class="btn btn-danger btn-custom5 btn-sm"><span class="mdi mdi-delete"></span></button></td>' +
                    '</tr>');
            }
        })
    }

    var IDs2 = null;

    function hapusFile(id) {
        IDs2 = id;
        var data = {
            _token: "{{ csrf_token() }}",
            id: id
        };
        sendJson(URLs + '/remove-file', data, rHapusFile);
    }

    function rHapusFile(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") {
                $('.trFile' + IDs2).remove();
                jmlBerkasAll = parseInt(jmlBerkasAll) - 1;
                if (jmlBerkasAll <= 0) {
                    $('#rowKosongKelolaBerkas').show();
                }
                IDs2 = null;
            }
        });
    }

    $('#tambahEkspedisi').on('click', function(e) {
        cekModal = true;
        $('#modalTerimaPaket').modal('hide');
        $('#modalMasterEkspedisi').modal('show');
    });

    $('#modalMasterEkspedisi').on('hidden.bs.modal', function(e) {
        $('#modalTerimaPaket').modal('show');
    });

    $('#btnSimpanMasterEkspedisi').on('click', function(e) {
        if (cekForm('form_master_ekspedisi') == true) {
            var data = $('#form_master_ekspedisi').serialize();
            data += "&_token={{ csrf_token() }}";
            sendJson(URLs + "/add-ekspedisi", data, rSendsEkspedisi);
        }
    });

    function rSendsEkspedisi(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") {
                $('#ekspedisi_id').append('<option value="' + data.ekspedisi_id + '" selected="selected">' + data.nama_ekspedisi + '</option>')
                $('#modalMasterEkspedisi').modal('hide');
                $('#modalTerimaPaket').modal('show');
            }
        })
    }

    $('#modalKelolaBerkas').on('hidden.bs.modal', function(e) {
        $('#rowKosongKelolaBerkas').show();
        $('.trFile').remove();
        $('#file').val('');
        IDs = null;
        jmlBerkasAll = 0;
    });

    function lihatDetail(id)
    {
        var URLs_lihat = "{{ url('pembelian/surat-jalan') }}";
        var data = {
            _token: "{{ csrf_token() }}",
            surat_jalan_header_id: id
        };
        sendJson(URLs_lihat+'/lihat-detail-po2', data, rDetail);
    }

    function rDetail(data)
    {
        swal.close();
        $('#modalLihatDetail').modal('show');
        $('.rowDetail').remove();

        var jmlHeader = 0;
        var satuanHeader = null;
        var jmlData = 0;
        var po_detail_id = 0;
        var ketTotalBerat = 0;
        var ketTotalBeratNetto = 0;
        var ketTotalJumlah = 0;
        var ketSatuanStok = '-';
        $.each(data, function(i, v){
            jmlData = parseInt(jmlData)+1;

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

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

            vals3 = (v.berat_netto == null || v.berat_netto == '' ? 0 : v.berat_netto);
            var cekDesimal3 = vals3 - Math.floor(vals3);
            if (cekDesimal3 > 0) {
                ketBeratNetto = parseFloat(vals3).toFixed(2);
                ketBeratNetto = ketBeratNetto.replace(/\./g, ',');
            } else {
                ketBeratNetto = vals3.toString().split(".")[0];
            }

            var isianHTML = '';
            if(po_detail_id != v.po_detail_id){

                if(parseInt(jmlHeader) > 0){
                    $('#tableDetail').append('<tr class="rowDetail bg-light">'+
                    '<td class="text-center"><b>Total</b></td>'+
                    '<td><b>'+ketTotalJumlah+'</b></td>'+
                    '<td><b>'+satuanHeader+'</b></td>'+
                    '<td><b>'+ketTotalBerat+' '+ketSatuanStok+'</b></td>'+
                    '<td><b>'+ketTotalBeratNetto+' '+ketSatuanStok+'</b></td>'+
                    '<td><b>&nbsp;</b></td>'+
                    '<td><b>&nbsp;</b></td>'+
                    '<td><b>&nbsp;</b></td>'+
                    '<td><b>&nbsp;</b></td>'+
                    '</tr>');
                }

                jmlHeader = parseInt(jmlHeader)+1;
                satuanHeader = v.satuan;
                ketSatuanStok = v.ket_satuan_stock;

                vals3 = v.total_berat_bruto
                var cekDesimal3 = vals3 - Math.floor(vals3);
                if (cekDesimal3 > 0) {
                    ketTotalBerat = parseFloat(vals3).toFixed(2);
                    ketTotalBerat = ketTotalBerat.replace(/\./g, ',');
                } else {
                    ketTotalBerat = vals3.toString().split(".")[0];
                }

                vals4 = v.total_jumlah
                var cekDesimal4 = vals4 - Math.floor(vals4);
                if (cekDesimal4 > 0) {
                    ketTotalJumlah = parseFloat(vals4).toFixed(2);
                    ketTotalJumlah = ketTotalJumlah.replace(/\./g, ',');
                } else {
                    ketTotalJumlah = vals4.toString().split(".")[0];
                }

                vals5 = v.total_berat_netto
                var cekDesimal5 = vals5 - Math.floor(vals5);
                if (cekDesimal5 > 0) {
                    ketTotalBeratNetto = parseFloat(vals5).toFixed(2);
                    ketTotalBeratNetto = ketTotalBeratNetto.replace(/\./g, ',');
                } else {
                    ketTotalBeratNetto = vals5.toString().split(".")[0];
                }


                var checked_view_nama = $('input[name="view_nama"]:checked').val();
                isianHTML += '<tr class="rowDetail" style="background-color: #e9ecef !important;">'+
                    '<td colspan="9" style="width: 100% !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"' : ''}>
                        ${v.asli}
                    </span>
                    <span class="view_nama_alias view_nama" ${checked_view_nama != 'view_nama_alias' ? 'style="display:none"' : ''}>
                        ${v.alias}
                    </span>
                    <span class="view_nama_asli_alias view_nama" ${checked_view_nama != 'view_nama_asli_alias' ? 'style="display:none"' : ''}>
                        ${v.asli_alias}
                    </span>`+
                    '</b>'+
                    '</td>'+
                    '</tr>';
                po_detail_id = v.po_detail_id;
            }

            isianHTML += '<tr class="rowDetail">'+
                '<td>&nbsp;</td>'+
                '<td>'+ketJumlah+'</td>'+
                '<td>'+satuanHeader+'</td>'+
                '<td>'+ketBerat+' '+ketSatuanStok+'</td>'+
                '<td>'+ketBeratNetto+' '+ketSatuanStok+'</td>'+
                '<td>'+v.kode_lot+'</td>'+
                '<td>'+v.nomor_terima_paket+'</td>'+
                '<td>'+v.tanggal_terima_paket+'</td>'+
                '<td>'+v.nomor_urut+'</td>'+
                '</tr>';

            $('#tableDetail').append(isianHTML);
        });

        if(jmlData > 0){
            $('#rowKosongDetail').hide();

            $('#tableDetail').append('<tr class="rowDetail bg-light">'+
            '<td class="text-center"><b>Total</b></td>'+
            '<td><b>'+ketTotalJumlah+'</b></td>'+
            '<td><b>'+satuanHeader+'</b></td>'+
            '<td><b>'+ketTotalBerat+' '+ketSatuanStok+'</b></td>'+
            '<td><b>'+ketTotalBeratNetto+' '+ketSatuanStok+'</b></td>'+
            '<td><b>&nbsp;</b></td>'+
            '<td><b>&nbsp;</b></td>'+
            '<td><b>&nbsp;</b></td>'+
            '<td><b>&nbsp;</b></td>'+
            '</tr>');
        }else{
            $('#rowKosongDetail').show();
        }
    }

    function barangTanpaSJ(id, supplier_id)
    {
        var data = {
            _token: "{{ csrf_token() }}",
            terima_paket_id: id,
            supplier_id: supplier_id
        };
        sendJson(URLs+'/lihat-barang-tanpa-sj', data, rBarangTanpaSJ);
    }

    function rBarangTanpaSJ(data)
    {
        swal.close();
        $('#modalLihatBarangTanpaSJ').modal('show');

        // tableBarangTanpaSJ
        if(parseInt(data.jmlBarangTanpaSJ) > 0){
            $('#rowKosongBarangTanpaSJ').hide();
            $.each(data.dataBarangTanpaSJ, function(i, v){
                $('#tableBarangTanpaSJ tbody').append('<tr>'+
                    '<td>'+cetakNamaProduk(v.kode, v.nama, v.parent_id, v.kode_parent, v.nama_parent)+'</td>'+
                    '<td>'+v.jumlah+'</td>'+
                    '<td><button class="btn btn-danger btn-custom5 btn-sm"><span class="mdi md-delete"><span></button></td>'+
                '</tr>');
            })
        }

        $.each(data.dataBarang, function(i, v){
            var nama_produk = cetakNamaProduk(v.kode, v.nama, v.parent_id, v.kode_parent, v.nama_parent);
            $('#produk_id_tanpa_sj').append('<option value="'+v.id+'" class="optionTambahan">'+nama_produk+'</option>');
        });
    }

    $('#modalLihatBarangTanpaSJ').on('hidden.bs.modal', function(e){
        $('.optionTambahan').remove();
    });

    // $('#simpanTanpaSJ').on('click', function(e){

    // });
</script>
@endpush