@extends('layout')

@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 -</span> Selesai</h3>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
			@if(\Auth::user()->role<=10)
			<a href="{{ route('delivery.createselesai') }}" class="btn btn-primary font-weight-bold font-size-lg">SELESAIKAN DELIVERY <i class="icon-plus2 ml-2"></i></a>
			@endif
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
		<div class="card">

			<div class="card-body">
				<div class="form-group row">

					<label class="col-form-label col-md-1">Periode</label>
					<div class="col-md-3">
						<input type="text" id="periode_filter"
								name="periode_filter"
								class="daterange-picker form-control border-1 border-teal">
						<span class="text-muted">* Showing data within 1 months by default</span>
					</div>

					@if(in_array(\Auth::user()->role,[1,2,5]))
						<div class="col-lg-8 text-right">
							<a href="{{ url('downloaddelivery/3')}}" target="_blank"><button type="button" class="btn btn-success"><i class="icon-file-spreadsheet mr-2"></i> Download Xls</button></a>
						</div>
					@endif
				</div>
				

				<div class="row">
					<div class="col">
						{{-- <a id="btn-filter" class="btn btn-success" href="{{ route('delivery.index').'?s='.app('request')->input('s')}}" data-uri="{{ route('delivery.index') }}"><i class="icon-paperplane mr-1"></i> Filter</a> --}}
						<button id="btn-filter" class="btn btn-success"><i class="icon-paperplane mr-1"></i> Filter</button>
						<a class="btn btn-info" href="{{ url('deliveryselesai')}}"><i class="icon-spinner11 mr-1"></i> View All</a>
					</div>
				</div>
				<hr>

				<table class="table datatable-basic table-hover">
					<thead>
						<tr>
							<th>No</th>
							<th>No. Surat Jalan</th>
							<th>Info Invoice</th>
							<th>Info Customer</th>
							<th>Tanggal Selesai</th>
							<th>Status Kirim</th>
							<th>Jenis Pengiriman</th>
							<th class="text-center">Action</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>
        </div>
	</div>

	<!-- modal cetak -->
	<div id="modal_cetak" class="modal fade" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-primary" align="center">
                    <h6 class="modal-title"><i class="icon-user mr-2"></i>Cetak Delivery </h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="form_cetak">
				    @csrf
					<div class="modal-body">
						<div class="form-group row">
							<label class="col-form-label col-lg-2">Display Alamat</label>
							<div class="col-lg-10" id="display_alamat">
							</div>
						</div>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
						<button type="submit" class="btn bg-primary" >Cetak</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->

	<!-- 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" >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/ui/moment/moment.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/anytime.min.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/pickers/pickadate/legacy.js')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script>
		// Status Kirim
		let status_kirim = {!! json_encode(config('custom.status_kirim')) !!};
		//Jenis Pengiriman
		let jenis_pengiriman = {!!  json_encode(config('custom.jenis_pengiriman')) !!};
		
		// init var filter
		var periode = null;

		//modal cetak
		$(document).on("click", ".cetakbutton", function () {
		     var url = $(this).data('uri');
			 var id = $(this).data('id');

		     $("#form_cetak").attr("action", url);

			//  ambil alamat berdasar id invoice
			$.ajax({
				url: "getalamatdelivery/"+id,
				type: 'GET',
				success: function (response) {
					var alamat_utama = response.data['alamat_utama']
					var alamat = response.data['alamats']
					$('#display_alamat').empty();

					let html = ''
					if (alamat_utama != null && alamat_utama != '') {
						html += `<div class="row">`
							html += `<label class="col-form-label col-lg-1"><input type="checkbox" name="display_alamat[]" value="alamat_utama"></label>`				
							html += `<label class="col-form-label col text-left">${alamat_utama}</label>`
						html += `</div>`
					}

					if (alamat.length > 0) {
						for (let idx = 0; idx < alamat.length; idx++) {
							html += `<div class="row">`
								html += `<label class="col-form-label col-lg-1"><input type="checkbox" name="display_alamat[]" value="${alamat[idx].id}"></label>`				
								html += `<label class="col-form-label col text-left">${alamat[idx].alamat}</label>`
							html += `</div>`
						}
						
					}
					$('#display_alamat').append(html);

					// var $select = $('.form-control-select2').select2();
					// $("#form_cetak").find('.modal-body').html(response);
				}
			});
		});

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

		$(document).on('click', '#btn-filter', function() {
			requestfilterstatus = $('#status_kirim option:selected').val();
			requestfilterjenis = $('#jenis_pengiriman option:selected').val();
			periode = $('#periode_filter').val();

            $('.datatable-basic').DataTable().clear().destroy()
			DatatableBasic.init()
		})

		// // kalau ada filter
		// if(requestfilterstatus != '' || requestfilterjenis != '') {
		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,
					width: 220,
					targets: [ 7 ]
				}],
				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({
				processing: true,
				serverSide: true,
				order: [[4, 'desc']],
				// ajax: "{{route('delivery-datatable')}}?s="+requestfilterstatus+"&j="+requestfilterjenis,
				ajax : {
					url : "{{route('deliveryselesai-datatable')}}",
						type: "GET",
                            data:{
                                _token: '{{csrf_token()}}',
                                periode: periode,
                            },
				},
				columns:[
					{data:'DT_RowIndex', name:'no'},
					{data:'no_surat_jalan', name:'no_surat_jalan'},
					{data:null, name:'no_invoice',render:function(data, type, row){
						let html = ''
						for (let idx = 0; idx < data.invoice_detail.length; idx++) {
							if (idx > 0) {
								html += `<br>`
							}
							html += `<span class='font-weight-semibold'>Invoice</span> : ${data.invoice_detail[idx].invoice.no_invoice}`
							html += `<br>No. Resi : ${data.invoice_detail[idx].no_resi}`
							// html += `<br>Kode Detail : ${data.invoice_detail[idx].barang_id}`
							for (let i = 0; i < data.invoice_detail[idx].receipt_detail.detail_barang.length; i++) {
								// html += `<br>Kode Detail : ${data.invoice_detail[idx].receipt_detail}`
								html += '<br>Kode Detail : ' + data.invoice_detail[idx].receipt_detail.detail_barang[i].id
							}
							// html += `<br>Kode Detail : ${data.invoice_detail[idx].barang_id}`
							
						}

						return html;
					}},
					{data:null, name:'custmarketing',render:function(data, type, row){
						let nama = data.namacustomer?ucwords(data.namacustomer):'-'
						nama += `<br>Marketing : ${data.namamarketing?ucwords(data.namamarketing):'-'}`
						return nama
					}},
					{data:null, name:'tgl_selesai',render:function(data, type, row){
						return moment(data.tgl_selesai, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY HH:mm');
					}},
					{data:null, name:'status_kirim',render:function(data, type, row){
						let html = "";

						if(data.status_kirim == 1){
							html += '<span class="font-size-sm badge badge-warning badge-pill">';
						}else if (data.status_kirim == 2){
							html += '<span class="font-size-sm badge badge-info badge-pill">';
						}else{
							html += '<span class="font-size-sm badge badge-success badge-pill">';
						}

						html += `${status_kirim[data.status_kirim]}</span>`;

						return html;
					}},
					{data:null, name:'jenis_pengiriman',render:function(data, type, row){
						return jenis_pengiriman[data.jenis_pengiriman];
					}},
					{data:null, render:function(data, type, row){
							let html = ''
							html += `<a href="{{url('cetakdelivery')}}/${data.id}" target="_blank"><button type="button" class="btn btn-light btn-icon"><i class="icon-printer2" title="Print"></i></button></a>`
							// html += `<a class="cetakbutton" data-toggle="modal"
							// 			data-target="#modal_cetak"
							// 			data-uri="{{ url('cetakdelivery')}}/${data.id}"
							// 			data-id="${data.id}"
							// 		>
							// 			<button type="button" class="btn btn-primary btn-icon">
							// 				<i class="icon-printer2" title="Print"></i>
							// 			</button>
							// 		</a>
							// 		`

							html += `<a href="{{url('delivery')}}/${data.id}"><button type="button" class="btn btn-light btn-icon"><i class="icon-eye" title="Show"></i></button></a>`;
						if( {{\Auth::user()->id}} == 2099 || {{\Auth::user()->role}} == 20 ||  {{\Auth::user()->role}} == 1 || ( {{\Auth::user()->role}} == 10 && data.status < 4) || ( {{\Auth::user()->role}} == 5 && data.status < 4) ){
							html += `<a class="delbutton" data-toggle="modal"
										data-target="#modal_theme_danger"
										data-uri="{{ url('delivery')}}/${data.id}"
									>
										<button type="button" class="btn btn-danger btn-icon">
											<i class="icon-x" title="Delete"></i>
										</button>
									</a>`;
						}
						return html;
					}},
				]
			});

			// 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">
		var $select = $('.form-control-select2').select2();

		$( document ).ready(function() {

			$('.daterange-picker').daterangepicker({
			applyClass: 'btn-primary',
			cancelClass: 'btn-light',

			startDate: '{{ $start_date }}',
			endDate: '{{ $end_date }}',
			

			locale: {
			format: 'YYYY/MM/DD'
			}
		});
	
	        // 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