@extends('layout')

@section('css')
<style type="text/css">
    .datatable-column-width {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }
</style>
@endsection

@section('content')

<!-- Page header -->

<div class="page-header page-header-light">
    <div class="page-header-content header-elements-md-inline">
        <div class="page-title d-flex">
            <h3 class="font-weight-bold"><span class="font-weight-light">Pre Receipt -</span> Data</h3>
            <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
        </div>
    </div>
</div>
<!-- /page header -->

<!-- Content area -->
<div class="content">
    <!-- Hover rows -->
    <div class="card">
		@if(\Auth::user()->coload_id != 5)
            <div class="card-header header-elements-inline">
                <a href="{{url('/prereceipt/create')}}"><button type="button" class="btn btn-success rounded-round"><i
                            class="icon-add mr-2"></i> Tambah</button></a>
            </div>
        @endif

        <table class="table datatable-basic table-hover">
            <thead>
                <tr>
                    <th style="width:5%;">No</th>
                    <th>No. Receipt</th>
                    <th>No Resi Coload</th>
                    <th>Marking</th>
                    <th>Info Karton</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <!-- /hover rows -->

</div>
<!-- /content area -->

<!-- Danger modal -->
<div id="modal_theme_danger" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger" align="center">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <form action="" method="post" id="delform">
                @csrf
                @method('DELETE')
                <div class="modal-body" align="center">
                    <h2> Apakah anda yakin untuk menghapus data ini? </h2>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn bg-danger">Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /default modal -->

<!-- print carton modal --->
<div id="modal_printcode" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success">
                <h2 class="modal-title font-weight-semibold">Print Code</h2>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

                <div class="modal-body">
                    <div class="row">
                        <label class="col-form-label col-lg-4">No. Receipt</label>
                        <div class="col-lg-8">
                            <div class="form-control-plaintext" id="pr_noresi"></div>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-form-label col-lg-4">Total Jumlah Karton</label>
                        <div class="col-lg-8">
                            <div class="form-control-plaintext font-weight-semibold" id="pr_jmlkarton"></div>
                            <input type="hidden" id="pr_jkarton">
                        </div>
                    </div>

                    <legend class="text-uppercase font-size-sm font-weight-bold">Print per Halaman</legend>
                    <div class="text-danger font-weight-semibold mb-1">
                        * Maksimum 50 Kode per sesi print
                    </div>

                    <form id="form_printcode" action="{{url('printcodereceipt')}}" method="post">
                        @csrf
                        <div class="row mb-4">
                            <div class="col-md-6 form-control-plaintext">
                                Pilih Halaman
                            </div>
                            <div class="col-md-4">
                                <input type="hidden" id="pr_receipt" name="receipt_id">
                                <select class="form-control" id="pr_halaman" name="halaman">
                                </select>
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-success" type="submit" formtarget="_blank"><i class="icon-printer2"></i> Print</button>
                            </div>
                        </div>
                    </form>

                    <legend class="text-uppercase font-size-sm font-weight-bold">Print dengan Input</legend>

                    <form id="form_printcodeinput" action="{{url('printcodereceiptinput')}}" method="post">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 form-control-plaintext">
                                <p>Input No. Carton secara lengkap.</p>
                                <p>contoh : CART0017/1</p>
                            </div>
                            <div class="col-md-4">
                                <input type="hidden" id="pr_receipt2" name="receipt_id">
                                <input class="form-control" id="pr_no_carton" name="no_carton" type="text">
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-success" type="submit" formtarget="_blank"><i class="icon-printer"></i> Print</button>
                            </div>
                        </div>
                    </form>

                </div>

        </div>
    </div>
</div>

@endsection

@section('js')
<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>

<script src="{{asset('assets/js/app.js')}}"></script>

<script>
    //modal delete
    $(document).on("click", ".delbutton", function () {
        var url = $(this).data('uri');
        $("#delform").attr("action", url);
    });

    $(document).on("click", ".btnprint", function () {
        var idresi = $(this).data('idresi')
        var noresi = $(this).data('noresi')
        var prekarton = $(this).data('carton')

        console.log(prekarton)

        $('#pr_noresi').text(noresi)
        $('#pr_no_carton').val(noresi+'/')

        $('#pr_receipt').val(idresi)
        $('#pr_receipt2').val(idresi)

        $('#pr_jmlkarton').text(prekarton)
        $('#pr_jkarton').val(prekarton)

        var jmlhlm1 = (prekarton/50);
        var jmlhlm = Math.ceil(jmlhlm1);
        var select = $('#pr_halaman')

        for (var i = 1; i <= jmlhlm; i++) {
            var option = $("<option>", {
                value: i,
                text: i
            });
            select.append(option);
        }
    });

    var DatatableBasic = function () {

        // Basic Datatable examples
        var _componentDatatableBasic = function () {
            if (!$().DataTable) {
                console.warn('Warning - datatables.min.js is not loaded.');
                return;
            }

            // Setting datatable defaults
            $.extend($.fn.dataTable.defaults, {
                autoWidth: false,
                columnDefs: [{
                    orderable: false,
                },
                ],
                dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                language: {
                    search: '<span>Search:</span> _INPUT_',
                    searchPlaceholder: 'Type to search...',
                    lengthMenu: '<span>Show:</span> _MENU_',
                    paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
                }
            });

            // Basic datatable
            $('.datatable-basic').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ url('prereceipt') }}",
                    beforeSend: function () {
                        $('.datatable-basic > tbody').html(
                            '<tr class="odd">' +
                            '<td valign="top" colspan="100%" class="dataTables_empty"><div class="spinner-border text-success" role="status"><span class="sr-only">Loading...</span></div></td>' +
                            '</tr>'
                        );
                    },
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'no' },
                    { data: 'no_resi', name: 'no_resi' },
                    { data: 'no_resi_coload', name: 'no_resi_coload' },
                    { data: 'shipping_mark', name: 'shipping_mark' },
                    { data: null, render: function (data, type, row) {
                        var html = ''
                        var ctn = 0;

                        if(data.total_ctn){
                            ctn = data.total_ctn
                        }else{
                            ctn = '0';
                        }

                        html += `Jml. : <span class="font-weight-semibold">${ctn}</span>`;
                        
                        return html;
                    }},
                    { data: null, render: function ( data, type, row ) {
				            let html = '';
							if(data.valid_resi == 1) {
								html += '<span class="font-size-sm mb-1 badge badge-success badge-pill">';
								html += 'Resi Valid';
								html += '</span>';
                            }
							if (data.valid_resi == 0) {
								html += '<span class="font-size-sm mb-1 badge badge-danger badge-pill">';
								html += 'Pre Resi';
								html += '</span>';
							}
							html += '<br>'

							return html;
				        }},
                    { data: null, render: function (data, type, row) {
                            let html = '';
                            html += `<div style="text-align:center">`
                                // html += `<a href="{{ url('printpreresi/${data.id}')}}" target='_blank'>
                                //             <button type="button" class="btn btn-success btn-icon"><i class="icon-printer2" title="Edit"></i></button>
                                //         </a>`
                                var carton = data.total_ctn
                                html += `<button type="button" class="btn btn-success btnprint" data-idresi='${data.id}' data-noresi='${data.no_resi}' data-carton='${carton}' data-toggle="modal" data-target="#modal_printcode" data-uri="#">
                                            PRINT CODE <i class="icon-barcode2"></i>
                                        </button>`
                                html += `<a href="{{ url('receipt/${data.id}/edit')}}">
                                            <button type="button" class="btn btn-primary btn-icon"><i class="icon-pencil7" title="Edit"></i></button>
                                        </a>`
                                html += `<a class="delbutton" data-toggle="modal" data-target="#modal_theme_danger" data-uri="{{ url('receipt/${data.id}') }}">
                                            <button type="button" class="btn btn-danger btn-icon"><i class="icon-x" title="Delete"></i></button>
                                        </a>`
                                html += `</div>`;
                            return html
                        }
                    }
                ],
                // "order": [[0, "desc"]],
            });

            // Alternative pagination
            $('.datatable-pagination').DataTable({
                pagingType: "simple",
                language: {
                    paginate: { 'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev' }
                }
            });

            // Datatable with saving state
            $('.datatable-save-state').DataTable({
                stateSave: true
            });

            // Scrollable datatable
            var table = $('.datatable-scroll-y').DataTable({
                autoWidth: true,
                scrollY: 300
            });

            // Resize scrollable table when sidebar width changes
            $('.sidebar-control').on('click', function () {
                table.columns.adjust().draw();
            });
        };

        // Select2 for length menu styling
        var _componentSelect2 = function () {
            if (!$().select2) {
                console.warn('Warning - select2.min.js is not loaded.');
                return;
            }

            // Initialize
            $('.dataTables_length select').select2({
                minimumResultsForSearch: Infinity,
                dropdownAutoWidth: true,
                width: 'auto'
            });
        };


        //
        // Return objects assigned to module
        //

        return {
            init: function () {
                _componentDatatableBasic();
                _componentSelect2();
            }
        }
    }();

    // Initialize module
    // ------------------------------

    document.addEventListener('DOMContentLoaded', function () {
        DatatableBasic.init();
    });
</script>

<script type="text/javascript">
    $(document).ready(function () {
        // Default style
        @if (session('error'))
            new PNotify({
                title: 'Error',
                text: '{{ session('error') }}.',
                icon: 'icon-blocked',
                type: 'error'
            });
        @endif
        @if (session('success'))
            new PNotify({
                title: 'Success',
                text: '{{ session('success') }}.',
                icon: 'icon-checkmark3',
                type: 'success'
            });
        @endif

    });
</script>
@endsection