@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">Konfirmasi Selesai 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">
        
        <form action="{{url('confirmselesaidelivery')}}" method="post" id="form_pengiriman" enctype="multipart/form-data">
        @csrf
        @if (isset($deliveries))
    
            @if (!$deliveries->isEmpty())
            
                @foreach ($deliveries as $delivery)
                
                <div class="card">
                    <div class="card-header bg-success">
                        <span class="text-uppercase font-weight-bold">
                            <div class="row">
                                <div class="col"><i class="icon-file-text2 mr-2"></i> No. Surat Jalan / {{ $delivery->no_surat_jalan }}</div>
                            </div>
                        </span>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <div class="row">
                                    <div class="col-md-2 font-weight-semibold">Nama Member</div>
                                    <div class="col">: {{ @$delivery->user->nama }}</div>
                                    <input class="form-control" type="hidden" name="id_surat_jalan[]" value="{{$delivery->id}}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <div class="row">
                                    <div class="col-md-2 font-weight-semibold">Alamat Kirim</div>
                                    <div class="col">: {{ $delivery->alamat_kirim }}</div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <div class="row">
                                    <div class="col-md-2 font-weight-semibold">Notes Pengiriman</div>
                                    <div class="col">: {{ $delivery->notes }}</div>
                                </div>
                            </div>
                        </div>
                        
                        <legend class="font-weight-semibold mt-2">Detail Invoice</legend>
                        <div class="row">
                            <div class="col">
                                @foreach ($delivery->delivery_detail as $detail)
                                <div class="row mb-1">
                                    <div class="col-md-2 font-weight-semibold">No. Invoice</div>
                                    <div class="col-md-3">: {{ @$detail->invoice->no_invoice }}</div>

                                    <div class="col-md-2 font-weight-semibold">Total Tagihan</div>
                                    <div class="col-md-3">: Rp. {{ ribuan(@$detail->invoice->total_tagihan) }}</div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                                
                    </div>
                </div>

                @endforeach

            @endif

        @else

        <div class="card">
            <div class="card-header bg-success">
                <span class="text-uppercase font-weight-bold">
                    <div class="row">
                        <div class="col"><i class="icon-file-text2 mr-2"></i> No. Surat Jalan / {{ $delivery->no_surat_jalan }}</div>
                    </div>
                </span>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <div class="row">
                            <div class="col-md-2 font-weight-semibold">Nama Member</div>
                            <div class="col">: {{ @$delivery->user->nama }}</div>
                            <input class="form-control" type="hidden" name="id_surat_jalan[]" value="{{$delivery->id}}">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <div class="row">
                            <div class="col-md-2 font-weight-semibold">Alamat Kirim</div>
                            <div class="col">: {{ $delivery->alamat_kirim }}</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <div class="row">
                            <div class="col-md-2 font-weight-semibold">Notes Pengiriman</div>
                            <div class="col">: {{ $delivery->notes }}</div>
                        </div>
                    </div>
                </div>
                
                <legend class="font-weight-semibold mt-2">Detail Invoice</legend>
                <div class="row">
                    <div class="col">
                        @foreach ($delivery->delivery_detail as $detail)
                        <div class="row mb-1">
                            <div class="col-md-2 font-weight-semibold">No. Invoice</div>
                            <div class="col-md-3">: {{ @$detail->invoice->no_invoice }}</div>

                            <div class="col-md-2 font-weight-semibold">Total Tagihan</div>
                            <div class="col-md-3">: Rp. {{ ribuan(@$detail->invoice->total_tagihan) }}</div>
                        </div>
                        @endforeach
                    </div>
                </div>
                           
            </div>
        </div>

        @endif
    
            <div class="card">
                <div class="card-body">
                    
                    <div class="form-group row mb-4">
						<label class="col-form-label col-lg-3">Tanggal Selesai</label>
						<div class="col-lg-2">
							<input type="text" name="tgl_selesai" id="tgl_selesai" class="form-control daterange-single" value="{{ date('Y-m-d') }}">
						</div>
						<div class="col-lg-2">
							<div class="input-group">
								<span class="input-group-prepend">
									<span class="input-group-text"><i class="icon-alarm"></i></span>
								</span>
								<input type="text" id="jam_selesai" name="jam_selesai" class="form-control pickatime-editable" value="{{ date('H:i') }}">
							</div>
						</div>
                    </div>
                    
                    <div class="form-group row mb-4">
						<label class="col-form-label font-weight-semibold col-lg-3">Keterangan tambahan</label>
						<div class="col-lg-9">
							<textarea class="form-control" name="ket_tambahan" cols="30" rows="5"></textarea>
						</div>
					</div>

                    <div class="text-danger">
                        <p>* Pastikan Data sesuai!</p>
                    </div>

                    <div class="row">
                        <button id="btn-pengiriman" class="btn btn-success btn-lg mr-2" type="submit"><i class="icon-redo mr-2"></i> Proses</button>
                        <a href="{{route('delivery.createselesai')}}" class="btn btn-danger btn-lg"><i class="icon-undo mr-2"></i> Kembali</a>
                    </div>
                </div>
            </div>
        </form>

        <form action="{{url('uploadimagedelivery')}}" id="uploadimgform" enctype="multipart/form-data" method="POST">
            @csrf
            
            <div class="card">
                <div class="card-body">
                    <div class="row" id="divimg">

                        @if (is_array($deliveryimages))
                            @foreach ($deliveryimages as $deliveryimage)
                                @foreach ($deliveryimage as $images)
                            
                                <div class="col-md-2 text-center mb-2">
                                    <div class="row">
                                        <div class="col">
                                            @if (isset($images->gambar))
                                                <img src="{{$images->gambar?$images->gambar:'global_assets/images/image.png'}}" alt="" style="height:150px;width:150px;object-fit: cover;border-radius: 10px;">
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            {{@$images->delivery->no_surat_jalan}}
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            @endforeach
                        @else
                            @foreach ($deliveryimages as $images)
                            
                                <div class="col-md-2 text-center mb-2">
                                    <div class="row">
                                        <div class="col">
                                            @if (isset($images->gambar))
                                                <img src="{{$images->gambar?$images->gambar:'global_assets/images/image.png'}}" alt="" style="height:150px;width:150px;object-fit: cover;border-radius: 10px;">
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            {{@$images->delivery->no_surat_jalan}}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <hr>
                    <div class="form-group row mb-4">
						<label class="col-form-label font-weight-semibold col-lg-3">Upload Gambar</label>
						<div class="col-lg-9">
							<input class="form-control" id="gambar" name="gambar" type="file" required>
						</div>
                    </div>

                    @if (isset($deliveries))
                    <div class="form-group row mb-4">
						<label class="col-form-label font-weight-semibold col-lg-3">Pilih No. Surat Jalan</label>
						<div class="col-lg-9">
                                <select class="form-control" id="delivery_id" name="delivery_id">
                                    @foreach ($deliveries as $delivery)
                                    <option value="{{$delivery->id}}">{{$delivery->no_surat_jalan}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        {{-- <input type="hidden" name="no_surat_jalan" value="{{$delivery->no_surat_jalan}}"> --}}
                    @else
                        <input type="hidden" id="delivery_id" name="delivery_id" value="{{$delivery->id}}">
                        <input type="hidden" id="no_surat_jalan" name="no_surat_jalan" value="{{$delivery->no_surat_jalan}}">
                    @endif

                    <button class="btn btn-success" id="btnupimg" type="submit">Upload</button>
                </div>
            </div>
        </form>
            
</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('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
	<script src="{{asset('global_assets/js/main/bootstrap.bundle.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.date.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.time.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/loaders/blockui.min.js')}}"></script>
    
    <script src="{{asset('assets/js/app.js')}}"></script>
    <script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
    <script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>
    
    <script>
        
		var $select = $('.form-control-select2').select2();
		
		$( document ).ready(function() {

            $('#uploadimgform').on('submit',(function(e) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                e.preventDefault();
                var formData = new FormData();
                    formData.append("gambar",$('#gambar')[0].files[0]);
                    formData.append("delivery_id",$("#delivery_id").val());
                
                $.ajax({
                    url: "{{ url('uploadimagedelivery')}}",
                    data:formData,
                    type:'POST',
                    
                    contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                    processData: false, // NEEDED, DON'T OMIT THIS
                    success:function(data){
                        if (data == 'error') {
                            new PNotify({
                                title: 'Error',
                                text: 'Cek Kembali format Gambar yang di upload.',
                                icon: 'icon-cross2',
                                type: 'danger'
                            });

                        } else {

                            new PNotify({
                                title: 'Success',
                                text: 'Image Uploaded.',
                                icon: 'icon-checkmark3',
                                type: 'success'
                            });
    
                            var image = data['gambar'];
                            var nosuratjalan = $('#delivery_id option:selected').text();
                            if (nosuratjalan == null || nosuratjalan == '' || nosuratjalan == undefined) {
                                nosuratjalan = $('#no_surat_jalan').val()
                            }
                            console.log(nosuratjalan)
                            var html = '<div class="col-md-2 text-center mb-2"><div class="row"><div class="col">'+
                                        '<div class="row"><div class="col">'+
                                        '<img src="'+image+'" alt="" style="height:150px;width:150px;object-fit: cover;border-radius: 10px;">'+
                                        '</div></div>'+
                                        '<div class="row"><div class="col">'+
                                            nosuratjalan+
                                        '</div></div></div>';
    
                            $("#divimg").append(html); 
    
                            $('#gambar').val('')
                        }

                     },
                    error: function(data){
                        new PNotify({
                            title: 'Error',
                            text: 'Error!.',
                            icon: 'icon-blocked',
                            type: 'error'
                        });
                    }
                    
                });
            }));
				
				
			});

        //modal delete
        $(document).on("click", ".delbutton", function () {
            var url = $(this).data('uri');
            $("#delform").attr("action", url);
        });
        
        
        // CHECK BARANG DI pengiriman
        $('#all_pengiriman').on("change", function(){
            let check = $(this).is(":checked");
            let $pengiriman = $('.checked_pengiriman');
            
            if(check){
                $pengiriman.prop('checked', true);
            } else {
                $pengiriman.prop('checked', false);
            }
        })
        
        
        $(document).on("change", "#all_pengiriman, .checked_pengiriman", function () {
            // $('#all_detail, .checked_detail').change(function() {
                let len = 0;
                $('.checked_pengiriman:checked').each(function () {
                    len = len+1;
                });
                
                if(len > 0){
                    $('#btn-pengiriman').removeAttr('disabled')
                } else {
                    $('#btn-pengiriman').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 ]
                        }],
                        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>

var DateTimePickers = function() {
		
		var _componentDaterange = function() {
			if (!$().daterangepicker) {
				console.warn('Warning - daterangepicker.js is not loaded.');
				return;
			}
			// Single picker
			$('.daterange-single').daterangepicker({ 
                singleDatePicker: true,
				locale: {
                    format:'YYYY-MM-DD'
                }
			});
			
		};
		
		// Pickatime picker
		var _componentPickatime = function() {
			if (!$().pickatime) {
				console.warn('Warning - picker.js and/or picker.time.js is not loaded.');
				return;
			}
			
			
			var $input_time = $('.pickatime-editable').pickatime({
                editable: true,
                format: 'H:i',
                formatLabel: 'H:i',
                formatSubmit: 'H:i',
				onClose: function() {
					$('.datepicker').focus();
				}
			});
			var picker_time = $input_time.pickatime('picker');
			$input_time.on('click', function(event) {
				if (picker_time.get('open')) {
					picker_time.close();
				} else {
					picker_time.open();
				}                        
				event.stopPropagation();
			});
			
		};
		
		return {
			init: function() {
				_componentDaterange();
				// _componentPickadate();
				_componentPickatime();
				// _componentAnytime();
			}
		}
	}();
	// Initialize module
	// ------------------------------
	
	document.addEventListener('DOMContentLoaded', function() {
		DateTimePickers.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