@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="#">Master</a></li>
        <li class="breadcrumb-item active" aria-current="page">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 Master Rak</h6>
                <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
                    <thead>
                        <tr>
                            <th class="kolomNomor">No.</th>
                            <th>Gudang</th>
                            <th>Rak</th>
                            <th>Deskripsi</th>
                            <th>QRCode</th>
                            <th>Cetak</th>
                            <th class="kolomAksi">Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="card-footer" style="text-align: right;">
                <button class="btn btn-secondary" id="printData" disabled>Cetak Label</button>
                @can('master-data.create')
                <button class="btn btn-info btn-custom1" id="tambahMasterLokasi">Tambah Data</button>
                @endcan
            </div>
        </div>
    </div>
</div>

{{-- Modal --}}
<div id="modalMasterLokasi" 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 Master 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_master_lokasi" class="forms-sample">
                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Gudang</label>
                                <select name="id_master_gudang" class="form-control required">
                                    <option value="">Silahkan Pilih</option>
                                                                    </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Rak <small class="text-danger">(Maksimal 16 Karakter)</small></label>
                                <input type="text" class="form-control required" name="rak" autocomplete="off" placeholder="Rak">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Deskripsi</label>
                                <textarea name="deskripsi" id="deskripsi" class="form-control" cols="30" rows="10"></textarea>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanMasterLokasi" 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="modalPreviewPrint" 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">Preview Cetak Label Rak</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 mb-3" id="previewRak">
                    </div>
                    <div class="col-12" style="text-align: right;">
                        <button type="button" id="btnPrintKonfirmasi" class="btn btn-primary btn-custom1">Cetak Label</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                    </div>
                </div>
            </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('master/rak') }}";
    var dns_printer = "{{ @$GlobalVar->dns_printer }}";

    let datatable = $('#datatable-serverside').DataTable({
        lengthMenu: lengthMenuDatatable(),
        processing: true,
        serverSide: true,
        ajax: URLs + '/get-data',
        columns: [{
                data: 'DT_RowIndex',
                name: 'id',
                searchable: false
            },
            {
                data: 'nama_gudang',
                name: 'nama_gudang'
            },
            {
                data: 'rak',
                name: 'rak'
            },
            {
                data: 'deskripsi',
                name: 'deskripsi'
            },
            {
                data: 'qrcode',
                name: 'qrcode'
            },
            {
                data: 'print_data',
                name: 'print_data',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'aksi',
                name: 'aksi',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
        ],
    });

    $('[name="rak"]').on("keyup", function() {
        var maxLength = 16;
        var currentLength = $(this).val().length;

        if (currentLength > maxLength) {
            $(this).val($(this).val().substr(0, maxLength));
            swal('Perhatian', 'Inputan Tidak Boleh Lebih Dari 16 Karakter', 'info');
        }
    });

    $(document).on('change', '.checkPrint', function(e) {
        if ($('.checkPrint:checked').length > 0) {
            $('#printData').prop('disabled', false);
        } else {
            $('#printData').prop('disabled', true)
        }
    });

    $('#printData').on('click', function(e) {
        var idPrint = [];
        $.each($('.checkPrint:checked'), function(i, v) {
            idPrint.push($(this).val());
        });

        var data = {
            _token: "{{ csrf_token() }}",
            arr_id: idPrint.join(",")
        };
        sendJson(URLs + "/read_print", data, rPrintData);
    });

    var arrDataPrint = [];

    function rPrintData(data) {
        swal.close();
        $('#modalPreviewPrint').modal('show');
        var isiHtml = '<div class="table-responsive">' +
            '<table class="table table-sm">' +
            '<thead>' +
            '<tr>' +
            '<th>GUDANG</th>' +
            '<th>NAMA RAK</th>' +
            '<th>QRCODE</th>' +
            '</tr>' +
            '</thead>' +
            '<tbody>';
        $.each(data, function(i, v) {
            arrDataPrint.push(v);

            isiHtml += '<tr>';
            isiHtml += '<td>' + v.nama_gudang + '</td>';
            isiHtml += '<td>' + v.rak + '</td>';
            isiHtml += '<td>' + v.qrcode + '</td>';
            isiHtml += '</tr>';
        });
        isiHtml += '</tbody>';
        isiHtml += '</table>';
        isiHtml += '</div>';
        $('#previewRak').html(isiHtml);
    }

    $('#btnPrintKonfirmasi').on('click', function(e) {
        var datas = {
            data: arrDataPrint,
        }

        if (dns_printer == null && dns_printer == '') {
            sendJson("{{env('PRINTER_ZEBRA_HOST')}}/zebra_cetak_label_rak.php", datas, rSends, '');
        } else {
            sendJson(dns_printer + "/zebra_cetak_label_rak.php", datas, rSends, '');
        }
    });

    $('#tambahMasterLokasi').on('click', function(e) {
        stat = "add";
        $('#modalMasterLokasi').modal('show');
    });

    $('#btnSimpanMasterLokasi').on('click', function(e) {
        if (cekForm('form_master_lokasi') == true) {
            var data = $('#form_master_lokasi').serialize();
            data += "&_token={{ csrf_token() }}";
            if (stat == "add") {
                sendJson(URLs + "/add", data, rSends);
            } else {
                data += "&id=" + IDs;
                sendJson(URLs + "/update", data, rSends);
            }
        }
    });

    function readData(id) {
        stat = "update";
        IDs = id;
        var data = {
            act: "read",
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs + "/read", data, rReads);
    }

    function rReads(data) {
        swal.close();
        $('#modalMasterLokasi').modal("show");
        $.each(data, function(idx, vals) {
            if (idx == 'deskripsi') {
                $('[name=' + idx + ']').html(vals);
            } else {
                $('[name=' + idx + ']').val(vals);
            }
        })
    }

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

    $('#modalMasterLokasi').on('hidden.bs.modal', function(e) {
        $('#form_master_lokasi input, #form_master_lokasi select').val('');
        $('#form_master_lokasi textarea').html('');
        IDs = '';
        stat = '';
    });

    $('#modalPreviewPrint').on('hidden.bs.modal', function(e) {
        $('#previewRak').html('');
        IDs = null;
        arrDataPrint = [];
    });
</script>
@endpush