@extends('layout.master')

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

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Pembelian</a></li>
        <li class="breadcrumb-item"><a href="/pembelian/kontra-bon">Kontra Bon</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">
                    Kontra Bon Pembelian
                </div>
            </div>
        </h5>
        <div class="container mb-4">
            <div class="row">
                <div class="col-12 border p-3">
                    <form id="form_kontra_bon_header">
                        <div class="form-group mb-3">
                            <label>Supplier</label>
                            <select name="supplier_id" id="supplier_id" class="form-control required">
                                <option value="">Silahkan Pilih</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-12">
                                    <label>Tanggal Kontra Bon</label>
                                    <input class="form-control resetForm required" type="date" name="tanggal_kontra_bon" id="tanggal_kontra_bon" placeholder="Tanggal Kontra Bon" value="2025-06-08">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-12">
                <label for="view_nama">View Nama Barang</label>
                <div class="d-flex">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="view_nama" id="view_nama_asli" value="view_nama_asli" checked>
                        <label class="form-check-label" for="view_nama_asli">
                          Asli
                        </label>
                    </div>
                    <div class="form-check ms-2">
                        <input class="form-check-input" type="radio" name="view_nama" id="view_nama_alias" value="view_nama_alias">
                        <label class="form-check-label" for="view_nama_alias">
                          Alias
                        </label>
                    </div>
                    <div class="form-check ms-2">
                        <input class="form-check-input" type="radio" name="view_nama" id="view_nama_asli_alias" value="view_nama_asli_alias">
                        <label class="form-check-label" for="view_nama_asli_alias">
                          Keduanya
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-responsive" style="overflow-x: auto;">
            <table class="table table-bordered table-hover table-sm table-number" style="width: 100% !important;">
                <thead>
                    <tr>
                        <th style="width: 5% !important;">No</th>
                        <th style="width: 15% !important;">Nomor PO</th>
                        <th style="width: 30% !important;">Nama Barang</th>
                        <th style="width: 10% !important;">Nomor Faktur</th>
                        <th style="width: 20% !important;" class="text-end">Total Harga</th>
                        <th style="width: 20% !important;">Keterangan</th>
                        <th class="kolomAksi">Aksi</th>
                    </tr>
                </thead>
                <tbody class="tampilBarang">
                    <tr class="infoKosong">
                        <td colspan="6" 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="btnTambahPO" 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 Kontra Bon</button>
            </div>
            <div class="col-6">
                <a href="/pembelian/kontra-bon" class="btn btn-warning btn-custom8" style="width: 100% !important;">Kembali ke Halaman Sebelumnya</a>
            </div>
        </div>
    </div>
</div>

{{-- Modal --}}
<div id="modalBarang" class="modal fade bd-example-modal-xl" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Data Barang</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form class="forms-sample">
                    <div class="row">
                        <div class="mb-2">
                            <x-checkbox-view-nama-modal />
                        </div>
                        <div class="col-12">
                            <table class="table table-sm table-modal-bordered" id="tableBarang" style="width: 100% !important;">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th style="width: 15% !important; white-space: normal; word-break:break-all;">Nomor PO</th>
                                        <th style="width: 35% !important; white-space: normal; word-break:break-all;">Nama Barang</th>
                                        <th style="width: 10% !important; white-space: normal; word-break:break-all;" class="text-end">Jumlah</th>
                                        <th style="width: 10% !important; white-space: normal; word-break:break-all;">Satuan</th>
                                        <th style="width: 10% !important; white-space: normal; word-break:break-all;">Harga</th>
                                        <th style="width: 10% !important; white-space: normal; word-break:break-all;">Total</th>
                                        <th class="kolomAksi">
                                            {{-- <input type="checkbox" id="checkBoxKontraBon" /> --}}
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-12 mt-3" style="text-align: right;">
                            <button type="button" id="btnSimpanBarang" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{-- Akhiran Modal --}}
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
  <script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
@endpush

@push('custom-scripts')
    <script src="{{ asset('assets/js/data-table.js') }}"></script>
    <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

    <script>
        var URLs = "{{ url('pembelian/kontra-bon') }}";
        var IDBarang = [];
        var jmlBarangAll = 0;

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

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

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

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

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

            if(supplier == null || supplier == ''){
                swal('Perhatian', 'Tentukan Supplier Terlebih Dahulu', 'info');
            }else{
                var checked_view_nama = $('input[name="view_nama"]:checked').val();

                $('#modalBarang').modal('show');
                $('#tableBarang').DataTable().clear().destroy();
                $('#tableBarang').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: URLs+'/barang-supplier-po',
                        type: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}",
                            supplier_id: supplier,
                            arrIdBarang: IDBarang.join(',')
                        }
                    },
                    columns: [
                        { data: 'DT_RowIndex', name: 'id', searchable: false },
                        { data: 'nomor_po', name: 'nomor_po', width: '15%', searchable: false },
                        {
                            data: null,
                            name: 'name',
                            width: '35%',
                            searchable: false,
                            render: function(data, type, row) {
                                return `
                                    <div class="view_nama_asli view_nama" ${checked_view_nama != 'view_nama_asli' ? 'style="display:none"' : ''}>${data.asli}</div>
                                    <div class="view_nama_alias view_nama" ${checked_view_nama != 'view_nama_alias' ? 'style="display:none"' : ''}>${data.alias}</div>
                                    <div class="view_nama_asli_alias view_nama" ${checked_view_nama != 'view_nama_asli_alias' ? 'style="display:none"' : ''}>${data.asli_alias}</div>
                                `;
                            }
                        },
                        { data: 'jumlah', name: 'jumlah', width: '10%', searchable: false, render: $.fn.dataTable.render.number('.', ',', 0), class: 'text-end' }, 
                        { data: 'satuan', name: 'satuan', width: '10%', searchable: false },
                        { data: 'harga', name: 'harga', width: '10%', searchable: false, render: $.fn.dataTable.render.number('.', ',', 0), class: 'text-end' },
                        { data: 'total', name: 'total', width: '10%', searchable: false, render: $.fn.dataTable.render.number('.', ',', 0), class: 'text-end' },
                        {
                            data: 'id',
                            name: 'id',
                            // width: '10%',
                            // orderable: false,
                            // searchable: false,
                            // render: function(data, type, row) {
                            //     return `<input type="checkbox" class="barangSupplier" value="${data}">`;
                            // }
                        }
                    ],
                    columnDefs: [
                        {
                            targets: 7,
                            checkboxes: {
                                selectRow: true
                            },
                        }
                    ],
                    select: {
                        style: 'multi'
                    },
                });
            }
        });

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

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

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

        function rSendsBarang(data) {
            swal.close();

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

            $('#modalBarang').modal('hide');
            $('#tableBarang tbody').html('');

            var jmlBarang = IDBarang.length;
            if(parseInt(jmlBarang) > 0){
                // $('.rowBarangDetail').remove();
                $.each(data, function(i, v){
                    var isiHTML = `<tr id="rowBarangDetail${v.id}" class="rowBarangDetail">
                            <td class="number"></td>
                            <td>${v.nomor_po}</td>
                            <td style="white-space: normal; word-break:break-all;">
                                <div class="view_nama_asli view_nama" ${checked_view_nama != 'view_nama_asli' ? 'style="display:none"' : ''}>
                                    ${v.asli}
                                </div>
                                <div class="view_nama_alias view_nama" ${checked_view_nama != 'view_nama_alias' ? 'style="display:none"' : ''}>
                                    ${v.alias}
                                </div>
                                <div class="view_nama_asli_alias view_nama" ${checked_view_nama != 'view_nama_asli_alias' ? 'style="display:none"' : ''}>
                                    ${v.asli_alias}
                                </div>
                            </td>
                            <td><input type="hidden" class="form-control idDetail id${v.id}" value="${v.id}" data-produk_id="${v.produk_id}"><input type="text" class="form-control nomorFakturDetail nomorFaktur${v.id}"></td>
                            <td><input type="text" class="form-control removeMinusSign totalHargaDetail totalHarga${v.id} formatInputUang text-end" onkeyup="dottocomma(this)" value="${formatNumber(parseFloat(v.total), 0, 2)}" data-id="${v.id}"></td>
                            <td><input type="text" class="form-control keteranganDetail keterangan${v.id}"></td>
                            <td class="kolomAksi"><button type="button" onclick="hapusBarang(\'${v.id}\')" class="btn btn-danger btn-custom5 btn-sm"><span class="mdi mdi-delete"></span></button></td>
                        </tr>`;

                    $('.tampilBarang').append(isiHTML);
                });
            }

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

        function hapusBarang(id)
        {
            IDBarangTemp = [];
            $.each(IDBarang, function(i, v){
                if(v != id){
                    IDBarangTemp.push(v);
                }
            });
            IDBarang = IDBarangTemp;
            jmlBarangAll = parseInt(jmlBarangAll)-1;

            $('#rowBarangDetail'+id).remove();
            $('#rowBarangDetailNama'+id).remove();
            updateTableNumbers();

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

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

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

                    if (cekFormDetail) {

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

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

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

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

                        var data = {
                            _token: "{{ csrf_token() }}",
                            supplier_id: $('#supplier_id').val(),
                            tanggal_kontra_bon: $('#tanggal_kontra_bon').val(),
                            idDetail: arrIDDetail.join('|'),
                            produkIDDetail: arrProdukIDDetail.join('|'),
                            nomorFakturDetail: arrNomorFakturDetail.join('|'),
                            totalHargaDetail: arrTotalHargaDetail.join('|'),
                            keteranganDetail: arrKeteranganDetail.join('|')
                        }

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

        function rSendsPembelianPO(data) {
            var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
            swal({
                title: titles,
                text: data.response,
                type: data.type,
                confirmButtonText: "OK"
            }).then(function() {
                if (data.type == "success") {
                    window.location.href = "/pembelian/kontra-bon";
                }
            })
        }

        // $(document).on('keyup', '.totalHargaDetail', function(e){
        //     var idPosisi = $(this).data('id');
        //     $('.totalHarga'+idPosisi).mask('0.000.000.000.000.000.000.000.000.000', {reverse: true});
        // });
    </script>
@endpush