@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Logistik</a></li>
        <li class="breadcrumb-item"><a href="#">Stok Opname (Isi)</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">
                    Input Data Stok Opname (Isi)
                </div>
            </div>
        </h5>
        <div class="mb-4">
            <div class="row">
                <form id="form_stok_opname">
                    <div class="col-12 border border-bottom-0 p-3">
                        <div class="form-group">
                            <label>Gudang</label>
                            <select name="id_master_gudang" id="id_master_gudang" class="form-control required select2Custom">
                                <option value="">Silahkan Pilih</option>
                                @foreach ($dataGudang as $itemGudang)
                                    <option value="{{ $itemGudang['id'] }}">{{ $itemGudang['nama'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 border border-top-0 p-3">
                        <div class="form-group">
                            <label>Tanggal</label>
                            <input type="date" id="tanggal_stok_opname" class="form-control required" placeholder="Tanggal" value="2025-06-08">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-12">
                <label for="view_nama">View Nama Barang</label>
                <div class="d-flex">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="view_nama" id="view_nama_asli" value="view_nama_asli" checked>
                        <label class="form-check-label" for="view_nama_asli">
                          Asli
                        </label>
                    </div>
                    <div class="form-check ms-2">
                        <input class="form-check-input" type="radio" name="view_nama" id="view_nama_alias" value="view_nama_alias">
                        <label class="form-check-label" for="view_nama_alias">
                          Alias
                        </label>
                    </div>
                    <div class="form-check ms-2">
                        <input class="form-check-input" type="radio" name="view_nama" id="view_nama_asli_alias" value="view_nama_asli_alias">
                        <label class="form-check-label" for="view_nama_asli_alias">
                          Keduanya
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-responsive" style="overflow-x: auto;">
            <table class="table table-bordered table-hover table-sm table-number" style="width: 100% !important;">
                <thead>
                    <tr>
                        <th style="width: 5% !important; white-space: normal; word-break:break-all; text-align: center;">No</th>
                        <th style="width: 20% !important; white-space: normal; word-break:break-all; text-align: center;">Nama Barang</th>
                        <th style="width: 10% !important; white-space: normal; word-break:break-all; text-align: center;">Nomor Urut</th>
                        <th style="width: 10% !important; white-space: normal; word-break:break-all; text-align: right;">QTY Bruto <br />(Lama)</th>
                        <th style="width: 10% !important; white-space: normal; word-break:break-all; text-align: right;">QTY Netto <br />(Lama)</th>
                        <th style="width: 10% !important; white-space: normal; word-break:break-all; text-align: right;">Susut</th>
                        <th style="width: 10% !important; white-space: normal; word-break:break-all; text-align: right;">QTY Bruto <br />(Baru)</th>
                        <th style="width: 10% !important; white-space: normal; word-break:break-all; text-align: right;">QTY Netto <br />(Baru)</th>
                        <th style="width: 7% !important; white-space: normal; word-break:break-all; text-align: right;">Selisih</th>
                        <th style="width: 5% !important; white-space: normal; word-break:break-all; text-align: center;">Aksi</th>
                    </tr>
                </thead>
                <tbody class="tampilBarang">
                    <tr class="infoKosong">
                        <td colspan="10" class="text-center">Belum Terdapat Data</td>
                    </tr>
                </tbody>
            </table>
        </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 Stok Opname (Isi)</button>
            </div>
            <div class="col-6">
                <a href="/logistik/stok-opname" 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="col-12">
                            <div class="table-responsive">
                                <table class="table table-sm table-modal-bordered" id="tableBarang" style="width: 100% !important;">
                                    <thead>
                                        <tr>
                                            <th class="text-start">Nama Barang</th>
                                            <th class="kolomAksi text-start">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-12 mt-3" style="text-align: right;">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="modalDetailBarang" 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 [<span id="judulBarang"></span>]</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="col-12">
                            <div class="table-responsive">
                                    <table class="table table-sm table-modal-bordered" id="tableDetailBarang" style="width: 100% !important;">
                                    <thead>
                                        <tr>
                                            <th>Tanggal Transaksi</th>
                                            <th class="text-end">QTY Bruto</th>
                                            <th class="text-end">QTY Netto</th>
                                            <th class="text-center">Nomor Urut</th>
                                            <th>Rak</th>
                                            <th class="kolomAksi"><input type="checkbox" id="checkBoxStokOpname" /></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </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>
@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('logistik/stok-opname') }}";
        var IDBarang = [];
        var jmlBarangAll = 0;

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

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

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

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

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

        function rBarang(data){
            swal.close();
            $('#tableBarang').DataTable().clear().destroy();
            $('#modalBarang').modal('show');
            IDBarang = [];
            $.each(data, function(i, v){
                var cekArray = $.inArray(v.id, IDBarang);

                if(cekArray == -1){
                    IDBarang.push(v.id);
                    var nama_produk = cetakNamaProduk(v.kode, v.nama, v.parent_id, v.parent.kode, v.parent.nama);

                    $('#tableBarang tbody').append(
                        '<tr class="rowBarang" id="rowBarang'+v.id+'">'+
                        '<td style="min-width: 80px !important; max-width: 80px !important; white-space: normal; word-break:break-all; text-align: left !important;">'+nama_produk+'</td>'+
                        '<td><a href="#" onclick="detailBarang(\''+v.id+'\')">Detail</a></td>'+
                        '</tr>'
                    );
                }
            });
            $('#tableBarang').DataTable().draw();
            $('#tableBarang').DataTable();
        }

        function detailBarang(id_barang){
            var gudang = $('#id_master_gudang').val();
            var data = {
                _token: "{{ csrf_token() }}",
                id_master_gudang: gudang,
                id_barang: id_barang,
                except: $('.beratBrutoBaru').map(function() {
                    return $(this).data('id');
                }).get()
            };
            // sendJson(URLs+'/barang-stok', data, rBarangItem);
            sendJson(URLs+'/barang-stok-item', data, rBarangItem);
        }

        function rBarangItem(data){
            swal.close();
            $('#tableDetailBarang').DataTable().clear().destroy();
            $('#modalBarang').modal('hide');
            $('#modalDetailBarang').modal('show');
            IDBarangCek = [];
            var detail_nama_barang = '-';
            $.each(data, function(i, v){
                var cekArray = $.inArray(parseInt(v.id_barang), IDBarangCek);

                if(cekArray == -1){
                    IDBarangCek.push(v.id_barang);
                    let produk = v.produk;
                    var nama_produk = cetakNamaProduk(produk.kode, produk.nama, produk.parent_id, produk.parent.kode, produk.parent.nama);

                    detail_nama_barang = nama_produk;
                }

                $('#tableDetailBarang tbody').append(
                    '<tr class="rowBarang" id="rowBarangDetail'+v.id+'">'+
                    '<td style="min-width: 80px !important; max-width: 80px !important; white-space: normal; word-break:break-all;">'+formatDate(v.stok_move_terima_paket?.tanggal_transaksi)+'</td>'+
                    '<td class="text-end">'+formatNumber((v.stok_opname_detail?.berat_bruto_baru ?? v.stok_move_terima_paket.surat_jalan_detail.berat_bruto))+'</td>'+
                    '<td class="text-end">'+formatNumber((v.stok_opname_detail?.berat_netto_baru ?? v.stok_move_terima_paket.surat_jalan_detail.berat_netto))+'</td>'+
                    '<td class="text-center">'+formatNumber(v.sort)+'</td>'+
                    '<td>'+(v.lokasi?.rak ?? '-')+'</td>'+
                    '<td><input type="checkbox" class="barangSupplier" value="'+v.id+'"></td>'+
                    '</tr>'
                );
            });
            $('#tableDetailBarang').DataTable({
                "columnDefs": [{
                "targets": [5],
                "orderable": false
                }]
            }).draw();
            $('#judulBarang').html(detail_nama_barang);
        }

        $(document).on('draw.dt', '#tableDetailBarang', function () {
            if (cekCentang == true) {
                $('.barangSupplier').prop('checked', true);
            }
        });

        $('#btnSimpanBarang').on('click', function(e){
            var jmlCek = $('.barangSupplier:checked').length;
            var IDBarangNew = [];
            if(parseInt(jmlCek) <= 0){
                swal('Perhatian', 'Pastikan Centang Barang Terlebih Dahulu', 'info');
            }else{
                $($('.barangSupplier:checked')).each(function(i, v){
                    IDBarang.push(parseInt($(this).val()));
                    IDBarangNew.push(parseInt($(this).val()));
                    jmlBarangAll = parseInt(jmlBarangAll)+1;
                });

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

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

            let jmlBarang = IDBarang.length;
            if(parseInt(jmlBarang) > 0){
                $.each(data, function(i, v){
                    let produk = v.produk;
                    let nama_produk = cetakNamaProduk(produk.kode, produk.nama, produk.parent_id, produk.parent.kode, produk.parent.nama);
                    let isiHTML = '<tr>'+
                        '<td style="width: 5% !important; white-space: normal; word-break:break-all;" class="number">'+(i+1)+'</td>'+
                        '<td style="width: 20% !important; white-space: normal; word-break:break-all;">'+nama_produk+'</td>'+
                        '<td style="width: 10% !important; white-space: normal; word-break:break-all;" class="text-center">'+v.sort+'</td>'+
                        '<td style="width: 10% !important; white-space: normal; word-break:break-all;" class="beratBrutoLama text-end" id="beratBrutoLama'+v.id+'">'+formatNumber((v.stok_opname_detail?.berat_bruto_baru ?? v.stok_move_terima_paket.surat_jalan_detail.berat_bruto))+'</td>'+
                        '<td style="width: 10% !important; white-space: normal; word-break:break-all;" class="beratNettoLama text-end" id="beratNettoLama'+v.id+'">'+formatNumber((v.stok_opname_detail?.berat_netto_baru ?? v.stok_move_terima_paket.surat_jalan_detail.berat_netto))+'</td>'+
                        '<td style="width: 10% !important; white-space: normal; word-break:break-all;" id="susut'+v.id+'" class="text-end">'+formatNumber((v.stok_opname_detail?.berat_bruto_baru ?? v.stok_move_terima_paket.surat_jalan_detail.berat_bruto) - (v.stok_opname_detail?.berat_netto_baru ?? v.stok_move_terima_paket.surat_jalan_detail.berat_netto))+'</td>'+
                        '<td style="width: 10% !important; white-space: normal; word-break:break-all;"><input type="text" class="form-control beratBrutoBaru text-end" disabled readonly id="beratBrutoBaru'+v.id+'" data-id="'+v.id+'" /></td>'+
                        '<td style="width: 10% !important; white-space: normal; word-break:break-all;"><input type="text" class="form-control beratNettoBaru text-end sanitizeMinusSign" id="beratNettoBaru'+v.id+'" data-id="'+v.id+'" onkeyup="dottocomma(this);onlyNumber(this);" /></td>'+
                        '<td style="width: 10% !important; white-space: normal; word-break:break-all;" class="text-end"><span id="selisih'+v.id+'"></span></td>'+
                        '<td style="width: 5% !important; white-space: normal; word-break:break-all;"><button onclick="destroyItem(this)" type="button" class="btn btn-danger btn-custom5 btn-sm"><span class="mdi mdi-delete"></span></button></td>'+
                        '</tr>';
                    $('.tampilBarang').append(isiHTML);
                });

                updateTableNumbers();
            }

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

        $(document).on('keyup', '.beratNettoBaru', function(e) {
            let id = $(this).data('id');
            let susut = formatInputUangToFloat($('#susut'+id).html());
            let berat_netto_baru = formatInputUangToFloat($(this).val());
            let berat_bruto_baru = berat_netto_baru + susut;

            $('#beratBrutoBaru'+id).val(formatNumber(berat_bruto_baru));

            let berat_bruto_lama = formatInputUangToFloat($('#beratBrutoLama'+id).html());
            let selisih = berat_bruto_baru - berat_bruto_lama;
            $('#selisih'+id).html(formatNumber(Math.abs(selisih)));
        });

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

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

                    if (cekFormDetail) {

                        arrIDDetail = [];
                        arrBeratBrutoBaru = [];
                        $.each($('.beratBrutoBaru'), function(i, v){
                            arrIDDetail.push($(this).data('id'));
                            arrBeratBrutoBaru.push(($(this).val()).replace(/,/g, '.'));
                        });

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

                        arrBeratBrutoLama = [];
                        $.each($('.beratBrutoLama'), function(i, v){
                            arrBeratBrutoLama.push(($(this).html()).replace(/,/g, '.'));
                        });

                        arrBeratNettoLama = [];
                        $.each($('.beratNettoLama'), function(i, v){
                            arrBeratNettoLama.push(($(this).html()).replace(/,/g, '.'));
                        });

                        var data = {
                            _token: "{{ csrf_token() }}",
                            id_gudang: $('#id_master_gudang').val(),
                            tanggal_stok_opname: $('#tanggal_stok_opname').val(),
                            idDetail: arrIDDetail.join('|'),
                            beratBrutoLama: arrBeratBrutoLama.join('|'),
                            beratNettoLama: arrBeratNettoLama.join('|'),
                            beratBrutoBaru: arrBeratBrutoBaru.join('|'),
                            beratNettoBaru: arrBeratNettoBaru.join('|'),
                        }

                        sendJson(URLs+'/store-barang-stok-opname', data, rSendsStokOpname);
                    } else {
                        swal('Perhatian', 'Masih Terdapat Inputan QTY Bruto Baru dan QTY Netto Baru yang Kosong', 'info');
                    }
                }
            }else{
                swal('Perhatian', 'Silahkan Pilih Barang Terlebih Dahulu', 'info');
            }
        });

        function rSendsStokOpname(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 = "/logistik/stok-opname";
                }
            })
        }

        const destroyItem = (e) => {
            $(e).closest('tr').remove();
            jmlBarangAll = parseInt(jmlBarangAll)-1;
            if(jmlBarangAll <= 0){
                $('.infoKosong').show();
            }
            updateTableNumbers();
        }
  </script>
@endpush