@extends('layout')

@section('css')
<style>
    h4{
        margin:0;
        font-size: 1.2em;
    }
</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">Delivery by Coload <span class="font-weight-semibold">(Udara)</span> -</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">
    <div class="card">
        <div class="card-body">
            <form action="{{ route('deliver.container.coload') }}" method="post" id="form1a">
                <input name="delivercoloadurl" id="delivercoloadurl" type="hidden" value="{{url('deliver.container.coload')}}">
                @csrf
                @method('put')
                <table class="table datatable-basic table-hover" id="table_warehouse">
                    <thead>
                        <tr>
                            @if (!in_array(\Auth::user()->role, [10,15,20,21]))
                            <th align="center">
                                <input type="checkbox" id="all_deliver">
                            </th>
                            @endif
                            <th>No</th>
                            <th>No. Resi</th>
                            <th>No. Resi Coload</th>
                            <th>Shipping Mark</th>
                            <th>Jumlah Carton</th>
                            <th>Destination</th>
                            <th>Status Resi</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>    
                        </tbody>
                    </table>
                    
                    @if (\Auth::user()->role!=10 && \Auth::user()->role!=20 && \Auth::user()->role!=21)
                    {{-- <div class="row">
                        <div class="col">
                            <button type="submit" id="btn-port" class="btn btn-success float-left" disabled><i class="icon-office mr-1"></i> Status update : Sampai Di Port Indonesia</button>
                            <input type="hidden" id="hrefport" value="{{url('delivercoloadport')}}">
                        </div>
                    </div> --}}
                    
                    {{-- <div class="row mt-2">
                        <div class="col">
                            <button type="submit" id="btn-undoport" class="btn btn-warning float-left" disabled><i class="icon-undo mr-1"></i> Status undo : Deliveries by Coload</button>
                            <input type="hidden" id="undohrefport" value="{{url('undodelivercoloadport')}}">
                        </div>
                    </div> --}}
                    {{-- <div class="row mt-2">
                        <div class="col-md-1">
                            <button id="btn-delay" class="btn btn-danger float-left" disabled><i class="icon-alarm mr-1"></i> Delay</button>
                            <input type="hidden" id="hrefdelay" value="{{url('delaydeliverycoload')}}">
                        </div>
                            <div class="col-md-1 formdelay" style="line-height: 36px; vertical-align: middle; display:none">
                                Keterangan Delay :
                            </div>
                            <div class="col-md-2 formdelay" style="display:none">
                                <input type="text" name="keterangan_status" id="keterangan_status" class="form-control">
                            </div>
                            <div class="col formdelay" style="display:none">
                                <button id="btn-delay-cancel" class="btn btn-light float-left" style="margin-right: 12px;"><i class="icon-cross mr-1"></i> Batal</button>
                                <button id="btn-delay-submit" type="submit" class="btn btn-primary float-left"><i class="icon-paperplane mr-1"></i> Simpan</button>
                            </div>
                        </div>
                        <hr> --}}
                        @if (!in_array(\Auth::user()->role, [10,15,20,21]))
                            <div class="row mt-1">
                                <div class="col">
                                    <button type="submit" id="btn-deliver" class="btn btn-primary float-left" disabled><i class="icon-cube mr-1"></i> Status update : Unstuffing Indonesia</button>
                                </div>
                            </div>
                        @endif
                        @endif
                    </form>
                </div>
            </div>
        </div>
        
        <!-- 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> Hapus Data? </h2>
                        </div>
                        
                        <div class="modal-footer">
                            <button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
                            <button type="submit" class="btn bg-danger" disabled>Hapus</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- /default modal -->
        
        @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="https://maps.googleapis.com/maps/api/js?key={{ env('G_API_KEY', 'error')}}"></script>
        
        <script src="{{asset('assets/js/app.js')}}"></script>
        <script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
        <script>
            
            //modal delete
            $(document).on("click", ".delbutton", function () {
                var url = $(this).data('uri');
                $("#delform").attr("action", url);
            });
            
            // check all item in datatable
            $('#all_deliver').on("change", function(){
                let check = $(this).is(":checked");
                let $deliver = $('.checked_deliver');
                
                if(check){
                    $deliver.prop('checked', true);
                } else {
                    $deliver.prop('checked', false);
                }
            })
            
            $('#btn-port').on('click', function(e) {
                var form = document.getElementById('form1a');
                var url1 = $('#delivercoloadurl').val();
                var url2 = $("#hrefport").val();
                let len = 0;
                let allcheck =$('#all_deliver');
                $('.checked_deliver:checked').each(function () {
                    len = len+1;
                });
                
                if(len == 0){
                    e.preventDefault()
                    new PNotify({
                        title: 'Error',
                        text: 'Silahkan pilih resi terlebih dahulu.',
                        icon: 'icon-blocked',
                        type: 'error'
                    });
                } else {
                    console.log(url2)
                    $("#form1a").attr("action", url2);
                    $('#btn-deliver').attr('disabled', 'disabled')
                    $('#btn-undoport').attr('disabled', 'disabled')
                    $('#btn-delay').attr('disabled', 'disabled')
                    // return false;
                    form.submit()
                }
            })
            
            $('#btn-undoport').on('click', function(e) {
                var form = document.getElementById('form1a');
                var url1 = $('#delivercoloadurl').val();
                var url3 = $("#undohrefport").val();
                let len = 0;
                let allcheck =$('#all_deliver');
                $('.checked_deliver:checked').each(function () {
                    len = len+1;
                });
                
                if(len == 0){
                    e.preventDefault()
                    new PNotify({
                        title: 'Error',
                        text: 'Silahkan pilih resi terlebih dahulu.',
                        icon: 'icon-blocked',
                        type: 'error'
                    });
                } else {
                    console.log(url3)
                    $("#form1a").attr("action", url3);
                    $('#btn-port').attr('disabled', 'disabled')
                    $('#btn-deliver').attr('disabled', 'disabled')
                    $('#btn-delay').attr('disabled', 'disabled')
                    // return false;
                    form.submit()
                }
            })
            
            $('#btn-delay').on('click', function(e) {
                e.preventDefault()
                var form = document.getElementById('form1a');
                var url1 = $('#delivercoloadurl').val();
                var url2 = $("#hrefdelay").val();
                let len = 0;
                let allcheck =$('#all_deliver');
                $('.checked_deliver:checked').each(function () {
                    len = len+1;
                });
                
                if(len == 0){
                    
                    new PNotify({
                        title: 'Error',
                        text: 'Silahkan pilih resi terlebih dahulu.',
                        icon: 'icon-blocked',
                        type: 'error'
                    });
                } else {
                    console.log(url2)
                    $("#form1a").attr("action", url2);
                    $('#btn-deliver').attr('disabled', 'disabled')
                    $('#btn-undoport').attr('disabled', 'disabled')
                    $('#btn-port').attr('disabled', 'disabled')
                    $('.formdelay').show()
                    // return false;
                    // form.submit()
                }
            })
            
            $('#btn-delay-cancel').on('click', function(e) {
                e.preventDefault()
                $('.formdelay').hide()
                var url1 = $('#delivercoloadurl').val();
                $("#form1a").attr("action", url1);
                
                $('#btn-delay').attr('disabled', 'disabled')
                $('#all_deliver').prop('checked', false);
                $('.checked_deliver').prop('checked', false);
            })
            
            // PREVENT NULL CHECKBOX
            $(document).on('change', '#all_deliver, .checked_deliver', function() {
                let len = 0;
                // console.log(hrefport)
                let allcheck =$('#all_deliver');
                $('.checked_deliver:checked').each(function () {
                    len = len+1;
                });
                
                if(len > 0){
                    $('#btn-port').removeAttr('disabled')
                    $('#btn-undoport').removeAttr('disabled')
                    $('#btn-deliver').removeAttr('disabled')
                    $('#btn-delay').removeAttr('disabled')
                } else {
                    allcheck.prop('checked', false);
                    $('#btn-port').attr('disabled', 'disabled')
                    $('#btn-undoport').attr('disabled', 'disabled')
                    $('#btn-deliver').attr('disabled', 'disabled')
                    $('#btn-delay').attr('disabled', 'disabled')
                    $('.formdelay').hide()
                }
            })
            
            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,
                        order: [[{{\Auth::user()->role!=15?1:0}}, 'asc']],
                        columnDefs: [{
                            orderable: false,
                            width: 150,
                            targets: [ 0,5 ]
                        }],
                        dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                        language: {
                            search: '<span>Filter:</span> _INPUT_',
                            searchPlaceholder: 'Type to filter...',
                            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();
                    
                    // 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() {
                
                var warehouseTable = $('#table_warehouse').DataTable({
                    serverside: true,
                    processing: true,
                    scrollX: true,
                    ajax: {
                        url: "/delivercoload",
                        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: "checkbox",
                            name: "all_deliver",
                            
                        },
                        {
                            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: "total_ctn",
                            name: "total_ctn"
                        },
                        {
                            data: "shipping_to",
                            name: "shipping_to"
                        },
                        {
                            data: "status_receipt",
                            name: "status_receipt"
                        },
                        {
                            data: null,
                            name: null,
                            render: (data, type, row) =>{
                                return `<td align="center">
                                            <a href="/delivercoload/${data?.id}">
                                                <button type="button" class="btn btn-light btn-icon"><i class="icon-eye" title="Show"></i></button>
                                            </a>
                                        </td>`
                            }
                        }
                    ]
                });
                
                $('#form1a').on('submit', function(){
                    var form = this;
                    
                    // Iterate over all checkboxes in the table
                    warehouseTable.$('input[type="checkbox"]').each(function(){
                        // If checkbox doesn't exist in DOM
                        if(!$.contains(document, this)){
                            // If checkbox is checked
                            if(this.checked){
                                // Create a hidden element
                                $(form).append(
                                $('<input>')
                                .attr('type', 'hidden')
                                .attr('name', this.name)
                                .val(this.value)
                                );
                            }
                        }
                    });
                    
                });
                
                // 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