@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="#">Logistik</a></li>
    <li class="breadcrumb-item"><a href="/logistik/storing/rak/{{ $dataRak->id_master_gudang }}">Storing ({{ $dataRak->nama_gudang }})</a></li>
    <li class="breadcrumb-item active" aria-current="page">Rak ({{ $dataRak->rak }})</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Data Storing</h6>
        <div class="mb-2">
            <x-checkbox-view-nama-top />
        </div>
        <div class="table-responsive">
            <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
                <thead>
                    <tr>
                        <th></th>
                        <th class="kolomNomor">No.</th>
                        <th>Nama Barang</th>
                        {{-- <th>Alias</th> --}}
                        <th>Supplier</th>
                        <th>QTY In</th>
                        <th>Nomor Urut</th>
                        {{-- <th>Tanggal</th> --}}
                        {{-- <th>Pindah Rak</th> --}}
                        <th class="kolomAksi">Aksi</th>
                    </tr>
                </thead>
            </table>
        </div>
        {{-- <div class="mt-2">
            <x-checkbox-view-nama-bottom />
        </div> --}}
      </div>
      <div class="card-footer" style="text-align: right;">
        <button class="btn btn-warning btn-custom1" id="pindahRak">Pindah Rak</button>
        <button class="btn btn-info btn-custom1" id="tambahStoring">Tambah Data</button>
      </div>
    </div>
  </div>
</div>

{{-- Modal --}}
<div id="modalStoring" 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 Storing [{{ $dataRak->rak }}]</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_storing" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Tanggal Storing</label>
                                <input type="date" class="form-control required" name="tanggal_storing" id="tanggal_storing" autocomplete="off" placeholder="Tanggal Storing" value="2025-06-08">
                            </div>
                        </div>
                        <div class="mb-2">
                          <x-checkbox-view-nama-modal />
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <table class="table table-sm" id="tableDetail" style="width: 100% !important;">
                                    <thead>
                                        <tr>
                                            <th style="width: 38% !important; white-space: normal; word-break:break-all;">Nama Barang</th>
                                            {{-- <th style="width: 38% !important; white-space: normal; word-break:break-all;">Alias</th> --}}
                                            <th style="width: 14% !important; white-space: normal; word-break:break-all;">Nomor Urut</th>
                                            <th style="width: 10% !important; white-space: normal; word-break:break-all;">QTY In</th>
                                            <th><input type="checkbox" id="checkBoxStoring" /></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanStoring" 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="modalPindahRak" 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 Pindah Rak</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_pindah_rak" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <label class="form-label">Tanggal Storing</label>
                            <input type="date" class="form-control required" name="tanggal_storing_pindah" id="tanggal_storing_pindah" autocomplete="off" placeholder="Tanggal Storing" value="2025-06-08">
                        </div>
                        <div class="col-12 mt-3">
                            <label class="form-label">Rak</label>
                            <select name="id_lokasi_pindah" id="id_lokasi_pindah" class="form-control required select2CustomModal">
                                <option value="">Silahkan Pilih</option>
                                                            </select>
                        </div>
                        <div class="col-12 mt-3" style="text-align: right;">
                            <button type="button" id="btnSimpanPindahRak" 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 type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>

  <script>
    var URLs = "{{ url('logistik/storing') }}";

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs+'/get-data-rak-stok/{{ $dataRak->id }}?view_nama='+$('input[name="view_nama"]:checked').val(),
      searching: false,
      columns: [
        // {data: 'pindah_rak', name: 'pindah_rak', searchable: false, orderable: false, class: 'text-center'},
        {data: 'id_stok_barang', name: 'id_stok_barang', searchable: false, orderable: false, class: 'text-center'},
        {data: 'DT_RowIndex', name: 'id'},
        {data: 'nama_barang', name: 'nama_barang'},
        // {data: 'alias', name: 'alias'},
        {data: 'supplier', name: 'supplier'},
        {data: 'qty_in', name: 'qty_in'},
        {data: 'sort', name: 'sort', class: 'text-center'},
        {data: 'aksi', name: 'aksi', searchable: false, orderable: false, class: 'text-center'},
      ],
      columnDefs: [
        {
          targets: 0,
          checkboxes: true,
          searchable: false,
          orderable: false
        }
      ],
      select: {
        style: 'multi'
      },
      order: [[1, 'asc']]
    });


    $('input[name="view_nama"]').on('change', function(e) {
      datatable.ajax.url(URLs+'/get-data-rak-stok/{{ $dataRak->id }}?view_nama='+$('input[name="view_nama"]:checked').val());
    })

    $('#pindahRak').on('click', function(e){
        let rows_selected = datatable.column(0).checkboxes.selected();
        if(rows_selected.length <= 0){
            swal('Perhatian', 'Pastikan Terlebih Dahulu Bahwa Sudah Ada Barang yang Dipilih', 'warning');
        }else{
            $('#modalPindahRak').modal('show');
        }
    });

    $('#tambahStoring').on('click', function(e){
        var data = {
            _token: "{{ csrf_token() }}",
            id_gudang: "{{ $dataRak->id_master_gudang }}",
        };

        sendJson(URLs+'/barang-storing', data, rBarangStoring);
    });

    function rBarangStoring(data){
        swal.close();
        $('#modalStoring').modal('show');

        let checked_view_nama = $('input[name="view_nama"]:checked').val();
        $.each(data, function(i, v){
            var alias = cetakNamaProduk(v.kode_dari_supplier, v.nama_dari_supplier, v.parent_id, v.kode_parent_dari_supplier, v.nama_parent_dari_supplier);
            var nama_produk = cetakNamaProduk(v.kode, v.nama, v.parent_id, v.kode_parent, v.nama_parent);

            $('#tableDetail tbody').append(
                '<tr class="rowDetail" id="rowDetail'+v.id+'">'+
                '<td style="width: 60% !important; white-space: normal; word-break:break-all;">'+
                  `<span class="view_nama_asli view_nama" ${checked_view_nama != 'view_nama_asli' ? 'style="display:none"' : ''}>
                    ${nama_produk}
                  </span>
                  <span class="view_nama_alias view_nama" ${checked_view_nama != 'view_nama_alias' ? 'style="display:none"' : ''}>
                    ${alias}
                  </span>
                  <span class="view_nama_asli_alias view_nama" ${checked_view_nama != 'view_nama_asli_alias' ? 'style="display:none"' : ''}>
                    ${nama_produk} <br/> ${alias}
                  </span>`
                +'</td>'+
                // '<td style="width: 38% !important; white-space: normal; word-break:break-all;">'+alias+'</td>'+
                '<td style="width: 15% !important; white-space: normal; word-break:break-all;">'+formatNumber(parseFloat(v.sort), 0, 2)+'</td>'+
                '<td style="width: 20% !important; white-space: normal; word-break:break-all;">'+formatNumber(parseFloat(v.qty_in), 0, 2)+' '+v.ket_satuan_stock+'</td>'+
                '<td><input type="checkbox" class="barangStoring" value="'+v.id_stok_barang+'"></td>'+
                '</tr>'
            );
        });
    }

    $('#btnSimpanPindahRak').on('click', function(e){
        if($('#tanggal_storing_pindah').val() != null && $('#tanggal_storing_pindah').val() != '' && $('#id_lokasi_pindah').val() != null && $('#id_lokasi_pindah').val() != ''){
            let IDBarang = [];
            let rows_selected = datatable.column(0).checkboxes.selected();
            $(rows_selected).each(function(i, v){
                IDBarang.push(v);
            });

            var arrBarangStokBarang = IDBarang.join("|");
            var data = {
                arr_stok_barang: arrBarangStokBarang,
                tanggal_storing: $('#tanggal_storing_pindah').val(),
                id_lokasi: $('#id_lokasi_pindah').val(),
                _token: "{{ csrf_token() }}"
            }
            sendJson(URLs+'/store-barang-storing', data, rSends);
        }else{
            swal('Perhatian', 'Pastikan Tanggal Storing dan Rak Sudah Terisi', 'warning');
        }
    })

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

            var arrBarangStokBarang = IDBarang.join("|");
            var data = {
                arr_stok_barang: arrBarangStokBarang,
                tanggal_storing: $('#tanggal_storing').val(),
                id_lokasi: "{{ $dataRak->id }}",
                _token: "{{ csrf_token() }}"
            }
            sendJson(URLs+'/store-barang-storing', data, rSends);
        }
    });

    $('#modalStoring').on('hidden.bs.modal', function(e){
        $('#tableDetail tbody').html('');
    });

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

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

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

    $(document).on('draw.dt', '#tableDetail', function () {
        if (cekCentang == true) {
            $('.barangStoring').prop('checked', true);
        }else{
        }
    });
  </script>
@endpush