@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">Update Delivery</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="{{url('selesaidelivery')}}" method="post">
                    @csrf
                    <div class="form-group row">
                        <label class="col-form-label col-lg-3">Barcode</label>
                        <div class="col-lg-4">
                            <input type="text" name="scdelivery" class="form-control border-teal border-1" autofocus>
                        </div>
                        <div class="col-lg-3">
                            <button type="submit" class="btn btn-primary text-uppercase">Submit Barcode <i class="icon-barcode2 ml-2"></i></button>
                        </div>
                    </div>
                    
                </form>
                
                <hr>
                
                <form action="{{url('selesaidelivery')}}" method="post" id="form_delivery">
                    @csrf
                    <table class="table datatable-basic table-hover" id="table_delivery">
                        <thead>
                            <tr>
                                <th class="text-center">
                                    <input type="checkbox" id="all_delivery">
                                </th>
                                <th>No. Surat Jalan</th>
                                <th>Status</th>
                                <th>No. Invoice</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                            @if(count($deliveries))
                            @foreach($deliveries as $delivery)
                            
                            <tr id="tr{{$delivery->id}}">
                                <td align="center">
                                    <input type="checkbox" class="checked_delivery" name="nodelivery[]" value={{ $delivery->id }}>
                                </td>
                                <td>{{ $delivery->no_surat_jalan }}</td>
                                <td>{{ config('custom.status_kirim.'.$delivery->status_kirim) }}</td>
                                <td>
                                    @foreach ($delivery->delivery_detail as $detail)
                                    
                                    @if ($delivery->delivery_detail->count() > 1)
                                    {{ @$detail->invoice->no_invoice }}
                                    @if (!$loop->last),@endif
                                    
                                    @else
                                    {{ @$detail->invoice->no_invoice }}
                                    @endif
                                    
                                    @endforeach
                                </td>
                            </tr>
                            @endforeach
                            @endif
                            
                        </tbody>
                    </table>
                    <div class="row">
                    <button id="btn-delivery" class="btn btn-success btn-lg mr-2" type="submit" disabled><i class="icon-redo mr-2"></i> Proses</button>
                </form>
                <a href="{{url('deliveryselesai')}}" class="btn btn-danger btn-lg"><i class="icon-undo mr-2"></i> Kembali</a>
            </div>
            </div>
        </div>
        
    </div> <!-- End content -->
    
    <!-- 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="{{asset('assets/js/app.js')}}"></script>
    <script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
    <script>
        $(document).ready(function() {
			var tabledelivery = $('#table_delivery').DataTable();

			$('#form_delivery').on('submit', function(){
                var form = this;

                // Iterate over all checkboxes in the table
                tabledelivery.$('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)
                            );
                        }
                    } 
                });
                
            });

		});
        
        //modal delete
        $(document).on("click", ".delbutton", function () {
            var url = $(this).data('uri');
            $("#delform").attr("action", url);
        });
        
        
        // CHECK BARANG DI pengiriman
        $('#all_delivery').on("change", function(){
            let check = $(this).is(":checked");
            let $pengiriman = $('.checked_delivery');
            
            if(check){
                $pengiriman.prop('checked', true);
            } else {
                $pengiriman.prop('checked', false);
            }
        })
        
        
        $(document).on("change", "#all_delivery, .checked_delivery", function () {
            // $('#all_detail, .checked_detail').change(function() {
                let len = 0;
                $('.checked_delivery:checked').each(function () {
                    len = len+1;
                });
                
                if(len > 0){
                    $('#btn-delivery').removeAttr('disabled')
                } else {
                    $('#btn-delivery').attr('disabled', 'disabled')
                }
            })
            
            
            function format_rupiah(num){
                
                return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");
                
            }
            
            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: [[1, 'asc']],
                        columnDefs: [{ 
                            orderable: false,
                            width: 100,
                            targets: [ 0 ]
                        }],
                        lengthMenu: [[10, 20], [10, 20]],
                        pageLength: 10,
                        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 $select = $('.form-control-select2').select2();
                // 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