@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 rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@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">Invoice Pembelian</li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-header bg-white">
                <form onsubmit="formFilter()">
                    <div class="row">
                        <div class="col-12">
                            <h6 class="card-title">Data Invoice Pembelian</h6>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="mb-2">
                                <select name="supplier" id="supplier" class="form-control select2Custom">
                                    <option value="">Pilih Supplier</option>
                                    @foreach ($dataSupplier 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="tipe" id="tipe" class="form-control select2Custom">
                                    <option value="">Pilih Tipe</option>
                                    <option value="SURAT_JALAN">Surat Jalan</option>
                                    <option value="PO">PO</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-3">
                            <div class="mb-2">
                                <select name="status" id="status" class="form-control select2Custom">
                                    <option value="">Pilih Status</option>
                                    @foreach ($listStatus as $key => $item)
                                    <option value="{{$key}}">{{$item}}</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 Invoice Pembelian" readonly>
                            </div>
                        </div>
                        <div class="col-12 col-md-3">
                            <div class="row">
                                <div class="col-6 pe-1">
                                    <button type="submit" 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>
                </form>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="datatable-serverside" class="table table-sm" style="width: 100%">
                        <thead>
                            <tr>
                                <th class="kolomNomor">No.</th>
                                <th>Nomor Faktur</th>
                                <th>Supplier</th>
                                <th>Tanggal</th>
                                <th>Jatuh Tempo</th>
                                <th>Total</th>
                                <th>Retur</th>
                                <th>Tipe</th>
                                <th>Refrensi</th>
                                <th>Status</th>
                                {{-- <th>Detail</th> --}}
                                <th>File Upload</th>
                                <th>NSFP</th>
                                <th class="kolomAksi">Aksi</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="card-footer" style="text-align: right;">
                @can('purchase-invoice.create')
                    <a class="btn btn-info btn-custom1" href="{{ url('/pembelian/invoice/create') }}">Tambah Dari Surat Jalan</a>
                    <a class="btn btn-info btn-custom1 ms-2" href="{{ route('pembelian.invoice-po.create') }}">Tambah Dari PO</a>
                @endcan
            </div>
        </div>
    </div>
</div>

{{-- modal --}}
<div id="modalLihatDetail" class="modal fade bd-example-modal-xl">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Data Detail Invoice</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="tableDetail">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Rol</th>
                                    <th>Nama Barang</th>
                                    <th>Warna</th>
                                    <th>Keterangan</th>
                                    <th>Qty (KG)</th>
                                    <th>Harga</th>
                                    <th>Jumlah</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="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" id="tableKelolaBerkas">
                            <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(['purchase-invoice.create', 'purchase-invoice.edit'])
                        <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="modalBatalkan" 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 Pembatalan Invoice</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_batal" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Keterangan Pembatalan</label>
                                <textarea name="keterangan_pembatalan" id="keterangan_pembatalan" cols="30" rows="10" class="form-control required" placeholder="Keterangan Pembatalan"></textarea>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanBatalkan" 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="modalNSFP" 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 NSFP</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_nsfp" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Jenis NSFP</label>
                                <select name="jenis_nsfp" id="jenis_nsfp" class="form-control required">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="1">Link</option>
                                    <option value="2">Tanpa Link</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12 jenis1" style="display:none;">
                            <div class="mb-3">
                                <label class="form-label">Link</label>
                                <input name="link" id="link" cols="30" rows="10" class="form-control" placeholder="Masukkan Link Disini" />
                            </div>
                        </div>
                        <div class="col-12 jenis2" style="display:none;">
                            <div class="mb-3">
                                <label class="form-label">No Faktur</label>
                                <input name="no_faktur_nsfp" id="no_faktur_nsfp" cols="30" rows="10" class="form-control" placeholder="Masukkan No Faktur NSFP Disini" />
                            </div>
                        </div>
                        <div class="col-12 jenis2" style="display:none;">
                            <div class="mb-3">
                                <label class="form-label">DPP</label>
                                <input name="dpp_nsfp" id="dpp_nsfp" cols="30" rows="10" class="form-control" placeholder="Masukkan DPP NSFP Disini" onchange="formatInputUang(this)" />
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            @canany(['purchase-invoice.create', 'purchase-invoice.edit'])
                                <button type="submit" id="btnSimpanNSFP" class="btn btn-primary btn-custom1">Simpan</button>
                            @endcanany
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="modalViewNSFP" class="modal fade bd-example-modal-lg">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">View NSFP</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" id="badanView">

                    </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>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
@endpush

@push('custom-scripts')
<script>
    let URLs = "{{ url('pembelian/invoice') }}";

    let datatable = $('#datatable-serverside').DataTable({
        lengthMenu: lengthMenuDatatable(),
        searchDelay: 1000,
        processing: true,
        serverSide: true,
        ajax: URLs,
        columns: [{
                data: 'DT_RowIndex',
                name: 'id',
                searchable: false
            },
            {
                data: 'no_faktur',
                name: 'no_faktur'
            },
            {
                data: 'supplier.nama',
                name: 'supplier.nama',
                searchable: false
            },
            {
                data: 'tanggal',
                name: 'tanggal',
                searchable: false
            },
            {
                data: 'tanggal_jatuh_tempo',
                name: 'tanggal_jatuh_tempo'
            },
            {
                data: 'grand_total',
                name: 'grand_total',
                class: 'text-end'
            },
            {
                data: 'total_retur',
                name: 'total_retur',
                class: 'text-end',
                searchable: false,
                orderable: false
            },
            {
                data: 'tipe',
                name: 'tipe',
                searchable: false
            },
            {
                data: 'refrensi',
                name: 'refrensi',
                searchable: false
            },
            {
                data: 'status',
                name: 'status',
                searchable: false
            },
            // {
            //     data: 'detail',
            //     name: 'detail',
            //     searchable: false,
            //     orderable: false
            // },
            {
                data: 'file_upload',
                name: 'file_upload',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'nsfp',
                name: 'nsfp',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'aksi',
                name: 'aksi',
                searchable: false,
                orderable: false
            },
        ],
    });

    $('#jenis_nsfp').on('change', function(e){
        var isian = $(this).val();
        if(isian == '1'){
            $('#link').addClass('required');
            $('.jenis1').show();

            $('.jenis2').hide();
            $('#no_faktur_nsfp').val('').removeClass('required');
            $('#dpp_nsfp').val('').removeClass('required');
        }else if(isian == '2'){
            $('#link').val('').removeClass('required');
            $('.jenis1').hide();

            $('.jenis2').show();
            $('#no_faktur_nsfp').addClass('required');
            $('#dpp_nsfp').addClass('required');
        }else{
            $('.jenis2').hide();
            $('#no_faktur_nsfp').val('').removeClass('required');
            $('#dpp_nsfp').val('').removeClass('required');
            $('#link').val('').removeClass('required');
            $('.jenis1').hide();
        }
    });

    function uploadNSFP(id, jenis_nsfp = '', link = '', no_faktur_nsfp = '', dpp_nsfp = '') {
        IDs = id;

        $('#jenis_nsfp').val(jenis_nsfp);
        $('#link').val(link);
        $('#no_faktur_nsfp').val(no_faktur_nsfp);
        $('#dpp_nsfp').val(dpp_nsfp);

        var isian = jenis_nsfp;
        if(isian == '1'){
            $('#link').addClass('required');
            $('.jenis1').show();

            $('.jenis2').hide();
            $('#no_faktur_nsfp').removeClass('required');
            $('#dpp_nsfp').removeClass('required');
        }else if(isian == '2'){
            $('#link').removeClass('required');
            $('.jenis1').hide();

            $('.jenis2').show();
            $('#no_faktur_nsfp').addClass('required');
            $('#dpp_nsfp').addClass('required');
        }else{
            $('.jenis2').hide();
            $('#no_faktur_nsfp').removeClass('required');
            $('#dpp_nsfp').removeClass('required');
            $('#link').removeClass('required');
            $('.jenis1').hide();
        }
        $('#modalNSFP').modal('show');
    }

    $('#form_nsfp').on('submit', function(e) {
        e.preventDefault();
        if (cekForm('form_nsfp') == true) {
            let data = {
                _token: "{{ csrf_token() }}",
                jenis_nsfp: $('#jenis_nsfp').val(),
                link: $('#link').val(),
                no_faktur_nsfp: $('#no_faktur_nsfp').val(),
                dpp_nsfp: $('#dpp_nsfp').val(),
            };
            let url = "{{ route('pembelian.invoice.input-nsfp', ':id') }}";
            url = url.replace(':id', IDs);
            sendJson(url, data, rSends);
        }
    });

    function lihatNSFP(data) {
        $('#badanView').html('');
        let isianHTML = '';

        try {
            let nomorFaktur = data.nomorFaktur;
            let firstPart = nomorFaktur.substr(0, 3);
            let secondPart = nomorFaktur.substr(3);

            nomorFaktur = firstPart + "-" + secondPart;
            firstPart = nomorFaktur.substr(0, 6);
            secondPart = nomorFaktur.substr(6);
            nomorFaktur = firstPart + "." + secondPart;

            isianHTML += '<table style="width: 100%; border: 1px solid; border-collapse: collapse;">';
            isianHTML += '<tr><td style="border: 1px solid; border-collapse: collapse; padding: 2px;" colspan="3">Kode dan Nomor Seri Faktur Pajak : ' + data.kdJenisTransaksi + data.fgPengganti + '.' + nomorFaktur + '</td></tr>';
            isianHTML += '<tr><td style="border: 1px solid; border-collapse: collapse; padding: 2px;" colspan="3">Pengusaha Kena Pajak</td></tr>';
            isianHTML += '<tr><td style="border: 1px solid; border-collapse: collapse; padding: 2px; border-bottom: 0px !important;" colspan="3">Nama: ' + data.namaPenjual + '<br />Alamat: ' + data.alamatPenjual + '<br />NPWP: ' + data.npwpPenjual + '</td></tr>';
            isianHTML += '<tr><td style="border: 1px solid; border-collapse: collapse; padding: 2px;" colspan="3">Pembeli Barang Kena Pajak / Penerima Jasa Kena Pajak</td></tr>';
            isianHTML += '<tr><td style="border: 1px solid; border-collapse: collapse; padding: 2px; border-bottom: 0px !important;" colspan="3">Nama: ' + data.namaLawanTransaksi + '<br />Alamat: ' + data.alamatLawanTransaksi + '<br />NPWP: ' + data.npwpLawanTransaksi + '</td></tr>';

            isianHTML += '<tr><td style="border: 1px solid; border-collapse: collapse; padding: 2px; text-align: center;">No.</td><td style="border: 1px solid; border-collapse: collapse; padding: 2px; text-align: center;">Nama Barang Kena Pajak / Jasa Kena Pajak</td><td style="border: 1px solid; border-collapse: collapse; padding: 2px; text-align: center;">Harga Jual/Penggantian/Uang Muka/Termin</td></tr>';
            let no = 1;
            isianHTML += '<tr><td style="border: 1px solid; border-collapse: collapse; padding: 2px; text-align: center;">' + no + '</td><td style="border: 1px solid; border-collapse: collapse; padding: 2px;">' + data.detailTransaksi.nama + '<br />Rp ' + formatNumber(parseFloat(data.detailTransaksi.hargaSatuan), 0, 2) + ' x ' + data.detailTransaksi.jumlahBarang + '</td><td style="border: 1px solid; border-collapse: collapse; padding: 2px; text-align: right;">' + formatNumber(parseFloat(data.detailTransaksi.hargaTotal), 0, 2) + '</td></tr>';

            isianHTML += '<tr><td style="border: 1px solid; border-collapse: collapse; padding: 2px;" colspan="2">Harga Jual/Penggantian</td><td style="border: 1px solid; border-collapse: collapse; padding: 2px; text-align: right;">' + formatNumber(parseFloat(data.jumlahDpp), 0, 2) + '</td></tr>';
            isianHTML += '<tr><td style="border: 1px solid; border-collapse: collapse; padding: 2px;" colspan="2">Dikurangi Potongan Harga</td><td style="border: 1px solid; border-collapse: collapse; padding: 2px; text-align: right;">' + formatNumber(parseFloat(0), 0, 2) + '</td></tr>';
            isianHTML += '<tr><td style="border: 1px solid; border-collapse: collapse; padding: 2px;" colspan="2">Dikurangi Uang Muka</td><td style="border: 1px solid; border-collapse: collapse; padding: 2px; text-align: right;">' + formatNumber(parseFloat(0), 0, 2) + '</td></tr>';
            isianHTML += '<tr><td style="border: 1px solid; border-collapse: collapse; padding: 2px;" colspan="2">Dasar Pengenaan Pajak</td><td style="border: 1px solid; border-collapse: collapse; padding: 2px; text-align: right;">' + formatNumber(parseFloat(data.jumlahDpp), 0, 2) + '</td></tr>';
            isianHTML += '<tr><td style="border: 1px solid; border-collapse: collapse; padding: 2px;" colspan="2">Total PPN</td><td style="border: 1px solid; border-collapse: collapse; padding: 2px; text-align: right;">' + formatNumber(parseFloat(data.jumlahPpn), 0, 2) + '</td></tr>';
            isianHTML += '<tr><td style="border: 1px solid; border-collapse: collapse; padding: 2px;" colspan="2">Total PPnBM (Pajak Penjualan Barang Mewah)</td><td style="border: 1px solid; border-collapse: collapse; padding: 2px; text-align: right;">' + formatNumber(parseFloat(data.jumlahPpnBm), 0, 2) + '</td></tr>';

            isianHTML += '</table>';
        } catch (error) {
            isianHTML = `<div class="alert alert-danger">${data.statusApproval}</div>`;
        }


        $('#badanView').html(isianHTML);
        $('#modalViewNSFP').modal('show');
    }

    function lihatNSFP2(no_faktur, dpp) {
        $('#badanView').html('');
        let isianHTML = '';

        try {
            isianHTML += '<div class="row">';
            isianHTML += '<div class="col-6">';
            isianHTML += '<div class="mb-3">';
            isianHTML += '<label class="form-label"><b>No Faktur : <b></label>';
            isianHTML += '<input cols="30" rows="10" class="form-control" disabled="disabled" value="'+no_faktur+'" />';
            isianHTML += '</div>';
            isianHTML += '</div>';
            isianHTML += '<div class="col-6">';
            isianHTML += '<div class="mb-3">';
            isianHTML += '<label class="form-label"><b>DPP : </b></label>';
            isianHTML += '<input cols="30" rows="10" class="form-control" disabled="disabled" value="'+dpp+'" />';
            isianHTML += '</div>';
            isianHTML += '</div>';
            isianHTML += '</div>';
        } catch (error) {
            isianHTML = `<div class="alert alert-danger">${data.statusApproval}</div>`;
        }


        $('#badanView').html(isianHTML);
        $('#modalViewNSFP').modal('show');
    }

    function batalkan(id) {
        IDs = id;
        $('#modalBatalkan').modal('show');
    }

    $('#btnSimpanBatalkan').on('click', function(e) {
        if (cekForm('form_batal') == true) {
            let data = {
                _token: "{{ csrf_token() }}",
                keterangan_pembatalan: $('#keterangan_pembatalan').val()
            };
            let url = "{{ route('pembelian.invoice.destroy', ':id') }}";
            url = url.replace(':id', IDs);
            sendJson(url, data, rSends);
        }
    });

    function rSends(data) {
        let 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") {
                $('.modal').modal('hide');
                datatable.ajax.reload();
            }
        })
    }

    function lihatDetail(id, tipe) {
        var data = {
            _token: "{{ csrf_token() }}",
        };
        let url = "{{ route('pembelian.invoice.detail', ':id') }}";
        url = url.replace(':id', id);
        if(tipe == 'SURAT_JALAN'){
            sendJson(url, data, rDetail);
        }
        if(tipe == 'PO'){
            sendJson(url, data, rDetailPo);
        }
    }

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

        var jmlData = 0;
        $.each(data, function(i, v) {
            jmlData = parseInt(jmlData) + 1;

            let kode_produk_parent = (v.surat_jalan_detail?.po_detail?.produk?.parent?.kode ?? '');
            let nama_produk_parent = (kode_produk_parent ? kode_produk_parent + ' | ' : '') + (v.surat_jalan_detail?.po_detail?.produk?.parent?.nama ?? '');
            // let kode_produk = (v.surat_jalan_detail?.po_detail?.produk?.kode ?? '');
            let nama_produk = (v.surat_jalan_detail?.po_detail?.produk?.nama ?? '');
            if (v.surat_jalan_detail?.po_detail?.produk?.parent ?? null) {
                nama_produk = nama_produk_parent + ' - ' + nama_produk;
            }
            $('#tableDetail').append(
                '<tr class="rowDetail">' +
                '<td>' + (i + 1) + '</td>' +
                '<td>' + formatNumber(parseFloat(v.surat_jalan_detail?.po_detail?.jumlah ?? 0)) + '</td>' +
                '<td>' + nama_produk + '</td>' +
                '<td>' + (v.surat_jalan_detail?.po_detail?.produk?.kode ?? '-') + '</td>' +
                '<td>PO : ' + (v.surat_jalan_detail?.po_detail?.po?.nomor_po ?? '-') + '</td>' +
                '<td>' + formatNumber(parseFloat(v.berat_bruto), 0, 2) + '</td>' +
                '<td>' + formatNumber(parseFloat(v.harga), 0, 2) + '</td>' +
                '<td>' + formatNumber(parseFloat((v.harga ?? 0) * (v.berat_bruto)), 0, 2) + '</td>' +
                '</tr>'
            );
        });

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

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

        $.each(data, function(i, v) {
            let kode_produk_parent = (v.po_detail?.produk?.parent?.kode ?? '');
            let nama_produk_parent = (kode_produk_parent ? kode_produk_parent + ' | ' : '') + (v.po_detail?.produk?.parent?.nama ?? '');
            // let kode_produk = (v.po_detail?.produk?.kode ?? '');
            let nama_produk = (v.po_detail?.produk?.nama ?? '');
            if (v.po_detail?.produk?.parent ?? null) {
                nama_produk = nama_produk_parent + ' - ' + nama_produk;
            }
            $('#tableDetail').append(
                '<tr class="rowDetail">' +
                '<td>' + (i + 1) + '</td>' +
                '<td>' + formatNumber(parseFloat(v.po_detail?.jumlah ?? 0)) + '</td>' +
                '<td>' + nama_produk + '</td>' +
                '<td>' + (v.po_detail?.produk?.kode ?? '-') + '</td>' +
                '<td>PO : ' + (v.po_detail?.po?.nomor_po ?? '-') + '</td>' +
                '<td>' + formatNumber(parseFloat(v.berat_bruto), 2) + '</td>' +
                '<td>' + formatNumber(parseFloat(v.harga), 2) + '</td>' +
                '<td>' + formatNumber(parseFloat((v.harga ?? 0) * (v.berat_bruto)), 2) + '</td>' +
                '</tr>'
            );
        });

        if (data.length > 0) {
            $('#rowKosongDetail').hide();
        } else {
            $('#rowKosongDetail').show();
        }
    }

    function kelolaBerkas(id) {
        IDs = id;
        let url = "{{ route('pembelian.invoice.read-file', ':id') }}";
        url = url.replace(':id', id);

        sendJson(url, {
            _token: "{{ csrf_token() }}",
        }, rKelolaBerkas);
    }

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

        $.each(data, function(i, v) {
            var url = "{{ asset('uploads/invoice/') }}" + '/' + 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() }}");
            var file = $('#file')[0].files;
            data.append('file', file[0]);

            let url = "{{ route('pembelian.invoice.upload-file', ':id') }}";
            url = url.replace(':id', IDs);

            uploads(url, 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('uploads/invoice/') }}" + '/' + 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>'
                );
            }
        })
    }

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

    var IDs2 = null;

    function hapusFile(id) {
        IDs2 = id;

        let url = "{{ route('pembelian.invoice.remove-file', ':id') }}";
        url = url.replace(':id', id);

        sendJson(url, {
            _token: "{{ csrf_token() }}"
        }, 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;
            }
        });
    }

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

    function formFilter() {
        event.preventDefault();
        let url = URLs + `?supplier=${$('#supplier').val()}&status=${$('#status').val()}&daterange=${$('#daterange').val()}&tipe=${$('#tipe').val()}`;
        datatable.ajax.url(url).load();
    }

    function filterReset() {
        $('#supplier').val('').trigger('change');
        $('#status').val('').trigger('change');
        $('#daterange').val('');
        datatable.ajax.url(URLs).load();
    }
</script>
@endpush