@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 (Lokasi)</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 (Lokasi)
                </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 border-bottom-0 p-3">
                        <div class="form-group">
                            <label>Rak</label>
                            <select name="id_rak" id="id_rak" class="form-control required select2Custom">
                                <option value="">Silahkan Pilih</option>
                            </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-19">
                        </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-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: 30% !important; white-space: normal; word-break:break-all; text-align: center;">Nama Barang</th>
                        <th style="width: 25% !important; white-space: normal; word-break:break-all; text-align: center;">QRCode</th>
                        <th style="width: 20% !important; white-space: normal; word-break:break-all; text-align: center;">QTY</th>
                        <th style="width: 15% !important; white-space: normal; word-break:break-all; text-align: center;">Nomor Urut</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="6" class="text-center">Belum Terdapat Data</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                <table border="0">
                    <tr>
                        <td colspan="2"><b>Catatan Warna: </b></td>
                    </tr>
                    <tr>
                        <td>
                            <div style="width: 15px; padding-bottom: 15px; background-color: white; border: solid 1px black;"></div>
                        </td>
                        <td class="pl-2">
                            Barang pada sistem tercatat datanya, namun secara fisik tidak ada.
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="width: 15px; padding-bottom: 15px; background-color: #aeffb0; border: solid 1px black;"></div>
                        </td>
                        <td class="pl-2">
                            Barang pada sistem tercatat datanya dan secara fisik juga ada.
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="width: 15px; padding-bottom: 15px; background-color: #fffdc3; border: solid 1px black;"></div>
                        </td>
                        <td class="pl-2">
                            Barang pada sistem tidak tercatat datanya, secara fisiknya ada.
                        </td>
                    </tr>
                </table>
            </div>
        </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 (Lokasi)</button>
            </div>
            <div class="col-6">
                <a href="/logistik/stok-opname-lokasi" 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-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 Stok Opname (Lokasi)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_barang" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Barang</label>
                                <div class="row" id="bagianBarang">
                                    <div class="col-12">
                                        <input type="text" id="barang" class="form-control required barangAdd" autocomplete="off" placeholder="Scan QRCODE / Manual">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanStokOpnameLokasi" 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="modalLihatBarang" 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 Belum Discan</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" id="tableDetailBarang" style="width: 100% !important;">
                                    <thead>
                                        <tr>
                                            <th>Nama Barang</th>
                                            <th>Supplier</th>
                                            <th>QTY IN</th>
                                            <th>Sort</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>
{{-- 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-lokasi') }}";
        var jmlBarangAll = 0;

        $('#id_rak').on('change', function(e){
            var id_gudang = $('#id_master_gudang').val();
            var id_rak = $('#id_rak').val();

            $('.rowAdd').remove();
            $('.infoKosong').show();

            if(id_gudang != null && id_gudang != '' && id_rak != null && id_rak != ''){
                var data = {
                    _token: "{{ csrf_token() }}",
                    id_rak: id_rak,
                    // id_stok_barang: IDBarang.join(',')
                };
                sendJson(URLs+'/lihat-barang', data, rLihatBarang);

            }else{
                swal('Perhatian', 'Pastikan Anda Menentukan Gudang dan Rak Dahulu', 'warning');
            }
        });

        function rLihatBarang(data){
            swal.close();
            var checked_view_nama = $('input[name="view_nama"]:checked').val();
            var jml = 0;
            $.each(data, function(i, v){
                vals = v.qty
                ketQTY = formatNumberComma(vals);

                jml = parseInt(jml)+1;
                $('.tampilBarang').append(
                    `<tr class="rowAdd" data-id="${v.id}" data-id_stok_barang="${v.id_stok_barang}" data-flag="0" data-qty="${v.qty}" data-unit="${v.unit}">
                        <td>${jml}</td>
                        <td>
                            <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>${v.qrcode}</td>
                        <td>${ketQTY} ${v.unit}</td>
                        <td>${v.sort}</td>
                        <td><button class="btn btn-sm btn-danger" id="btnDelete${v.id}" onclick="btnDelete('${v.id}')" style="display: none;"><span class="mdi mdi-delete"></span></button></td>
                    </tr>`
                );
            });

            if(jml <= 0){
                $('.rowAdd').remove();
                $('.infoKosong').show();
            }else{
                $('.infoKosong').hide();
            }
        }

        $('#id_master_gudang').on('change', function(e){
            var data = {
                _token: "{{ csrf_token() }}",
                id_master_gudang: $(this).val()
            };

            $('.rowAdd').remove();
            $('.infoKosong').show();

            $('.optTambahan').remove();
            if($(this).val() != null && $(this).val() != ''){
                sendJson(URLs+'/rak-gudang', data, rRak);
            }
        });

        function rRak(data){
            swal.close();
            $.each(data, function(i, v){
                $('#id_rak').append('<option value="'+v.id+'" class="optTambahan">'+v.rak+'</option>')
            });
        }

        $('#btnTambahBarang').on('click', function(e){
            var id_master_gudang = $('#id_master_gudang').val();
            var id_rak = $('#id_rak').val();
            if(id_master_gudang != null && id_master_gudang != '' && id_rak != null && id_rak != ''){
                $('#modalBarang').modal('show');
            }else{
                swal('Perhatian', 'Pastikan Anda Sudah Mengisi Gudang dan Rak', 'warning');
            }
        });

        $('#btnSimpanStokOpnameLokasi').on('click', function(e){
            var barang = $('#barang').val();
            if(barang != null && barang != ''){
                // barang = barang.substr(-3);
                var data = {
                    _token: "{{ csrf_token() }}",
                    qrcode: barang
                };
                sendJson(URLs+'/add-barang', data, rAddBarang);
            }else{
                swal('Perhatian', 'Pastikan Anda Melakukan Scan Barang Terlebih Dahulu', 'warning');
            }
        });

        function rAddBarang(data){
            $('#modalBarang').modal('hide');
            swal.close();
            if(parseInt(data.data?.id || 0) > 0){
                $('.infoKosong').hide();

                var cekKetemu = false;
                $.each($('.rowAdd'), function(i, v){
                    var dataId = $(this).data('id');

                    if(dataId == data.data.id){
                        cekKetemu = true;
                        // $(this).addClass('bg-success');
                        $(this).css("background-color", "#aeffb0");
                        $(this).data('flag', 1);
                        $('#btnDelete'+dataId).show();
                    }
                });

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

                    vals = data.data.qty
                    ketQTY = formatNumberComma(vals);

                    $('.tampilBarang').append(
                        `<tr class="rowAdd" style="background-color: #fffdc3;" data-id="${data.data.id}" data-id_stok_barang="${data.data.id_stok_barang}" data-flag="2" data-qty="${data.data.qty}" data-unit="${data.data.unit}">
                            <td style="width: 5% !important;" class="number">0</td>
                            <td>
                                <div class="view_nama_asli view_nama" ${checked_view_nama != 'view_nama_asli' ? 'style="display:none"' : ''}>
                                ${data.data.asli}
                                </div>
                                <div class="view_nama_alias view_nama" ${checked_view_nama != 'view_nama_alias' ? 'style="display:none"' : ''}>
                                ${data.data.alias}
                                </div>
                                <div class="view_nama_asli_alias view_nama" ${checked_view_nama != 'view_nama_asli_alias' ? 'style="display:none"' : ''}>
                                ${data.data.asli_alias}
                                </div>
                            </td>
                            <td>${data.data.qrcode}</td>
                            <td>${ketQTY} ${data.data.unit}</td>
                            <td>${data.data.sort}</td>
                            <td><button class="btn btn-sm btn-danger" id="btnDelete${data.data.id}" onclick="btnDelete('${data.data.id}')"><span class="mdi mdi-delete"></span></button></td>
                        </tr>`
                    );
                    updateTableNumbers();
                }
            }else{
                swal('Perhatian', 'Kode QRCode Tidak Ditemukan', 'warning');
            }
        }

        function btnDelete(id){
            var cekJml = 0;
            $.each($('.rowAdd'), function(i, v){
                var dataId = $(this).data('id');
                var dataFlag = $(this).data('flag');

                if(dataId == id){
                    if(dataFlag == '1' || dataFlag == 1){
                        // $(this).removeClass('bg-success');
                        $(this).css("background-color", "");
                        $(this).data('flag', 0);
                        $('#btnDelete'+dataId).hide();
                    }else{
                        $(this).remove();
                    }
                }
            });

            $.each($('.rowAdd'), function(i, v){
                cekJml = parseInt(cekJml)+1;
            });

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

        $('#btnSimpanData').on('click', function(e){
            var id_gudang = $('#id_master_gudang').val();
            var id_rak = $('#id_rak').val();

            if(id_gudang != null && id_gudang != '' && id_rak != null && id_rak != ''){
                var arrIdStokBarang = [];
                var arrFlag = [];
                let arrQty = [];
                let arrUnit = [];
                $.each($('.rowAdd'), function(i, v){
                    arrIdStokBarang.push(parseInt($(this).data('id_stok_barang')));
                    arrFlag.push(parseInt($(this).data('flag')));
                    arrQty.push(parseFloat($(this).data('qty')));
                    arrUnit.push($(this).data('unit'));
                });

                var data = {
                    _token: "{{ csrf_token() }}",
                    id_gudang: id_gudang,
                    id_rak: id_rak,
                    arr_id_stok_barang: arrIdStokBarang.join(','),
                    arr_flag: arrFlag.join(','),
                    arr_qty: arrQty.join(','),
                    arr_unit: arrUnit.join(',')
                };
                sendJson(URLs+'/store-sol', data, rSendsSOL);
            }else{
                swal('Perhatian', 'Pastikan Gudang dan Rak Tidak Kosong', 'warning');
            }
        });

        function rSendsSOL(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-lokasi";
                }
            })
        }

        $('#modalBarang').on('hidden.bs.modal', function(e){
            $('#barang').val('');
        });

        $('#modalLihatBarang').on('hidden.bs.modal', function(e){
            $('.rowAdd').remove();
        });
  </script>
@endpush