@extends('layout')

@section('css')
<style>
	h4{
		margin:0;
		font-size: 1.2em;
	}
	.icn-spinner {
	animation: spin-animation 0.5s infinite;
	display: inline-block;
	}

	@keyframes spin-animation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
	}
</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">My Order</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">

				<div class="row">
					<div class="col">
						<button class="btn btn-success btn-downexcel" data-toggle="modal" data-target="#modal_download_excel">
							<i class="icon-file-excel mr-1"></i> Download Excel
						</button>
					</div>
				</div>
				
				<hr>
				@php
					$statusvb = Request::get('statusvb');
					$statusfilter = null;
					$arraystatus = [];
					if (in_array($statuspage,[20,1,3,4])) {
						$statusfilter = 20;
						$arraystatus = [1,3,4];
					}

					if (in_array($statuspage,[77,7,8,0])) {
						$statusfilter = 77;
						$arraystatus = [7,8,0];
					}
				@endphp
				@if (in_array($statusvb,[20,1,3,4,77,7,8,0]))
				<div class="form-group row">
					<div class="col-form-label col-lg-1">Tanggal</div>
					<div class="col-lg-3">
						<input id="filtertanggal" name="tanggal" type="text" class="form-control daterange-buttons filtervb" value="{{$tanggal1? date('Y/m/d',strtotime($tanggal1)).' - '.date('Y/m/d',strtotime($tanggal2)) : date('Y/m/d',strtotime('-60 days')).' - '.date('Y/m/d') }}">
					</div>
					<div class="col-form-label col-lg-1">Status</div>
					<div class="col-lg-4">
						<select id="filterstatus" name="statusvb" class="form-control form-control-select2 filtervb">
							<option value="{{$statusfilter}}" selected>-- Pilih Status --</option>
							@if (in_array(\Auth::user()->role, [2,5]))
								
								@foreach (config('custom.status_order_vb_cina') as $key => $value)
									@if (in_array($key, $arraystatus))
										<option value="{{$key}}" {{ $statusvb == $key ? 'selected' : '' }}>{{$value}}</option>
									@endif
								@endforeach
							@else
								@foreach (config('custom.status_order_vb') as $key => $value)
									@if (in_array($key, $arraystatus))
										<option value="{{$key}}" {{ $statusvb == $key ? 'selected' : '' }}>{{$value}}</option>
									@endif
								@endforeach
							@endif
						</select>
					</div>
					<div class="col text-right">
						<button type="button" id="btn-filter" class="btn btn-success"><i class="icon-paperplane mr-1"></i> Filter</button>
						<a class="btn btn-info" href="{{ url('myorderpage?statusvb='.$statusfilter)}}" ><i class="icon-undo mr-1"></i> Reset</a>
					</div>
				</div>
					<hr>
				@endif
				{{-- <span class="text-info">* Data yang ditampilkan berdasar 2 bulan terakhir, gunakan filter untuk mencari data yang diinginkan</span> --}}

				@if(\Session::get('bearer_vb') == null && \Auth::user()->role == 20 && \Auth::user()->role == 21)
				<div class="text-center">
					<div>
						<i class="icon-warning icon-2x text-danger"></i>
					</div>
					<input type="hidden" id="bearer_vb" value="{{\Session::get('bearer_vb')}}">
					<h3>There's been a mistake, please reload the page</h3> <br>
					<a class="btn btn-warning" href="{{url('myorder')}}">
						<i class="icon-rotate-cw3 mr-1"></i> Reload
					</a>
				</div>
				@else
				<input type="hidden" id="bearer_vb" value="{{\Session::get('bearer_vb')}}">
				<table class="table datatable-basic table-hover">
					<thead>
						<tr>
							@if (\Auth::user()->role == 5)
								<th style="display: none">id</th>
								<th>数字</th>
								<th>发票</th>
								{{-- <th>发票号码</th> --}}
								{{-- <th>发票日期</th> --}}
								<th>付款总额</th>
								<th>Status</th>
								@if (\Auth::user()->role != 5)
									{{-- <th>Total Biaya</th> --}}
									{{-- <th>状态</th> --}}
								@endif
								<th class="text-center">行动</th>
							@else
								<th style="display: none">id</th>
								<th>No</th>
								@if(in_array(\Auth::user()->role, [1, 7, 8, 9, 10, 20, 21]))
								<th>Member</th>
								<th>Marking Member</th>
								<th>Marketing</th>
								@endif
								@if(\Auth::user()->role == 1 || \Auth::user()->role == 7 || \Auth::user()->role == 8 || \Auth::user()->role == 9)
								<th>Coload</th>
								@endif
								<th>Invoice</th>
								<th style="display: none">Tgl. Invoice</th>
								<th>Total (IDR)</th>
								@if(in_array($statuspage, [51]))
								<th>Kurang Bayar (IDR)</th>
								@endif
								<th>Status</th>
								{{-- @if (\Auth::user()->role != 5) --}}
									{{-- <th>Generate Link</th> --}}
									{{-- <th>Link</th> --}}
								{{-- @endif --}}
								<th class="text-center">
									<i class="icon-more2"></i>
								</th>
							@endif

						</tr>
					</thead>
					<tbody>
					
					</tbody>
				</table>

				@endif
			</div>
		</div>
	</div>

	<div id="modal_file_order" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<h4>Uploaded Files</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				
				<div class="modal-body" align="center">

					<div id="uploaded_files">

					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div id="modal_bukti_order" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-danger" align="center">
					<h4>Bukti Consumer</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				
				<div class="modal-body" align="center">
					<div class="row">
						<div class="col-lg-3">
							Bukti
						</div>
						<div class="col-lg-3">
							Atas Nama
						</div>
						<div class="col-lg-3">
							Nominal
						</div>
						<div class="col-lg-3">
							Action
						</div>
					</div>

					<div id="bukti_consumer_files">

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

	<div id="modal_download_excel" class="modal fade" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<h4>Download Excel</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				
				<div class="modal-body" align="center">
					<form action="{{url('stat_jastip_download_excel')}}" method="post">
						@csrf
						<div class="row">
							<label class="col-form-label col-lg-1" for="">Marketing</label>
							@if (in_array(\Auth::user()->role, [10]))
								<label class="col-form-label col" for="">{{\Auth::user()->nama}}</label>
								<input type="hidden" name="excel_marketing" value="{{\Auth::user()->id}}">
							@else
							<div class="col">
								<select id="excel_marketing" name="excel_marketing" class="form-control form-control-select2" required>
									<option value="" selected disabled>-- Pilih Marketing --</option>
									@foreach ($marketings as $marketing)
										<option value="{{$marketing->id}}">{{$marketing->nama}}</option>
									@endforeach
								</select>
							</div>
							@endif

							<label class="col-form-label col-lg-2">Periode</label>
							<div class="col">
								<input type="text" id="periode_filter" name="periode_filter" class="daterange-picker form-control">
							</div>
							
							<input type="hidden" name="excel_status" value="{{$statuspage}}">
							<div class="col text-right">
								<button class="btn btn-success" type="submit">Download</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

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

				<form action="{{route('myorder.store')}}" method="post">
					@csrf
					<input type="hidden" name="id_invoice" id="id_invoice" value="">
					<div class="modal-body" align="center">

						<!-- Menampilkan alert -->
						<div id="alert_konfirmasi" class="alert alert-warning py-1 font-weight-bolder" role="alert">
						</div>
						
						<div id="loadingdetail" style="display: none">
							<hr>
							<i class="icon icon-spinner2 icn-spinner" style="font-size: 30px"></i>
							<hr>
						</div>
						
						<!-- Menampilkan pesanan detail orders -->
						<table class="table table-striped table-hover">
							<thead>
								<tr>
									<th class="text-center">#</th>
									<th>Item</th>
									<th class="text-center">Harga (¥)</th>
									<th class="text-center">Minimal Qty</th>
									<th class="text-center">Qty</th>
									<th class="text-center">Pengiriman CN (¥)</td>
										@if (in_array(\Auth::user()->role, [8,20,21]))
											<th class="text-center">Total Yuan</td>
										@endif
									<th>Resi CN</td>
									<th>Keterangan</th>
								</tr>
							</thead>
							<tbody id="detail_orders">

							</tbody>
						</table>

					</div>
					@if(\Auth::user()->role == 99)
					<div class="modal-footer">
						<button type="button"
								class="btn btn-link"
								data-dismiss="modal"
						>
						Batal
						</button>
						<button type="submit"
								id="submit_confirm"
								class="btn bg-success"
						>
						Konfirmasi
						</button>
					</div>
					@endif
				</form>
				@if ( (in_array(\Auth::user()->role, [20, 21, 1, 8, 9])) && (!in_array($statuspage,[5,6])) )
				<div class="modal-footer">
					<button type="button"
							class="btn btn-link"
							data-dismiss="modal"
					>
					Batal
					</button>
					<a href="" id="submit_confirm_sales" class="btn btn-success">Konfirmasi</a>
				</div>
				@endif
			</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/forms/selects/select2.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>

		var token_eva = {!! json_encode(@$token_eva) !!}
		var member_codes = {!! json_encode(@$codes) !!}
		var eva_member_code = {!! json_encode(@$evamember_kode) !!}
		var urlvb = `{{env('URL_ORDERIMPORT')}}`

		var status_order_vb_cina = {!! json_encode(config('custom.status_order_vb_cina')) !!}
		var status_order_vb = {!! json_encode(config('custom.status_order_vb')) !!}

		var user_role = "{{\Auth::user()->role}}"

		$(document).on('click', '#btn-filter', function() {
			let status = $('#filterstatus').find('option:selected').val();
			let filtertanggal = $('#filtertanggal').val();

			console.log(status);
			// reload the page with status as new param
			let url = new URL(window.location.href);
			
			url.searchParams.set('statusvb', status);
			url.searchParams.set('filtertanggal', filtertanggal);
			window.location.href = url.href;
		})

		function getFileOrder(id_order) {
			$("#uploaded_files").empty();

			$.ajax({
				url: urlvb+'/api/eva_getfileorder',
				type: 'get',
				data: {
					_token: '{{ csrf_token() }}',
					id_order: id_order,
				},
				success: function (res) {
					let data = res['data']
					var html = ''

					if (data != 'kosong') {
						if (data.length > 0) {
							for (let i = 0; i < data.length; i++) {
								html += `<div class="form-group row">
											<div class="col-lg-4">
												<img src="${urlvb}/${data[i].file}" alt="" style="height:100px;width:100px;object-fit: contain;">
											</div>
											<label class="col-form-label col-lg-4">${data[i].nama_file}</label>
											<label class="col-form-label col-lg-4" >
												<a href="${urlvb}/${data[i].file}" target="_blank">Download</a>
											</label>
										</div>`

								$("#uploaded_files").html(html);
							}
						}
					} else {
						html += `<div class="form-group row">
									<div class="col">
										- Belum ada file -
									</div>
								</div>`

						$("#uploaded_files").append(html);
					}
					
				}
			})
		}

		function getBuktiOrder(id_order) {
			$("#bukti_consumer_files").empty();

			$.ajax({
				url: urlvb+'/api/eva_getbukticonsumer',
				type: 'get',
				data: {
					_token: '{{ csrf_token() }}',
					id_order: id_order,
				},
				success: function (res) {
					let data = res['data']
					var html = ''

					console.log(data)

					if (data != 'kosong') {
						if (data.length > 0) {
							for (let i = 0; i < data.length; i++) {
								if (data[i].upload.length > 0) {
									for (let x = 0; x < data[i].upload.length; x++) {
										
										if (data[i].upload[x].gambar != null && data[i].upload[x].gambar != '') {
											html += `<div class="form-group row">
														<div class="col-lg-3">
															<img src="${urlvb}/${data[i].upload[x].gambar}" alt="" style="height:100px;width:100px;object-fit: contain;">
														</div>
														<label class="col-form-label col-lg-3">${data[i].atas_nama}</label>
														<label class="col-form-label col-lg-3">${Intl.NumberFormat('id-id').format(data[i].nominal)}</label>
														<label class="col-form-label col-lg-3" >
															<a href="${urlvb}/${data[i].upload[x].gambar}" target="_blank">Download</a>
														</label>
													</div>`
			
										} else {
											html += `<div class="form-group row">
														<div class="col">
															- Tidak ada file -
														</div>
													</div>`
										}
									}
								}

								$("#bukti_consumer_files").html(html);
							}
						}
					} else {
						html += `<div class="form-group row">
									<div class="col">
										- Belum ada file -
									</div>
								</div>`

						$("#bukti_consumer_files").append(html);
					}
					
				}
			})
		}

		$('.btn-downexcel').click(function(){
			// var $select = $('.form-control-select2').select2();
			
			var $select = $('.form-control-select2').select2({
                dropdownParent: $('#modal_download_excel .modal-content')
            });
		})
		// console.log(detail_orders);
		// $('#filtertanggal').change(function(){
		$('.filtervb').change(function(){
            var uri = $('#btn-filter').data('uri');
            // let val1 = $(this).val();
			let val1 = $('#filtertanggal').val();
			let val2 = $('#filterstatus').find('option:selected').val();

            let href = `${uri}?filtertanggal=${val1}&filterstatus=${val2}`;
            $('#btn-filter').attr('href', href);
        })

		function editOrderan(no_invoice, id_invoice, konfirmasi, nama_member){
			$("#id_invoice").val(id_invoice)

			if (user_role == 10) {
				$("#title_order").html('<i class="icon-file-text2"></i>&nbsp;'+no_invoice+' | '+nama_member);
			} else {
				$("#title_order").html('<i class="icon-file-text2"></i>&nbsp;'+no_invoice);
			}

			$("#detail_orders").html("");

			var html_alert = '';

			if(konfirmasi == 1){
				$("#submit_confirm_sales").hide();
				$("#submit_confirm").hide();
				var html_alert = '<i class="icon-checkmark3"></i>&nbsp;Pesanan telah dikonfirmasi'
				$("#alert_konfirmasi").removeClass('alert-warning');
				$("#alert_konfirmasi").addClass('alert-success');
			}
			else{
				$("#submit_confirm").show();
				$("#submit_confirm_sales").show();
				var html_alert = '<i class="icon-warning"></i>&nbsp;Harap pastikan pesanan! pesanan tidak dapat direvisi setelah klik tombol konfirmasi'
				$("#alert_konfirmasi").removeClass('alert-success');
				$("#alert_konfirmasi").addClass('alert-warning');
			}

			$("#alert_konfirmasi").html(html_alert);

			$("#submit_confirm_sales").attr("href", "{{url('accjastipsales')}}"+"/"+id_invoice)

			var html = "";
			var no = 1;
			var tipetext = "";
			$.ajax({
				type: 'GET',
				url: "{{env('URL_ORDERIMPORT')}}/api/getdataorderajax/"+id_invoice,
				beforeSend: function(){
					$('#loadingdetail').show();
				},
				complete: function(){
					$('#loadingdetail').hide();
				},
				success: function (data) {
					console.log(data.data.order_detail);
					//$('#sales_id').prop( "disabled", false );

					// array cek role
					var arr_role = ["20","21","10","1","8","9"]

					data.data.order_detail.forEach(function(item, index){
						tipetext = ''
						var totalharga = 0
						
						if (arr_role.includes(user_role)) {
								// console.log(item.gambar)
								if (item.property != '-') {
									var property = item.property
									var pattern = /[\'\-]/g;
									if (pattern.test(property)) {
										property = property.replace(/'/g, '');
									}
									
									property = JSON.parse(property)
									$.each(property, function (index, value) {
										// console.log(index, value)
										tipetext += index + ' : ' + value + '<br>';
									})
								} else {
									tipetext = "-"
								}

							html += `<tr>
										<td class="text-center">
											${no}
										</td>
										<td>`
										if (item.gambar) {
											html += `<img src="${item.gambar}" class="circle shadow" style="height: 30px">`
										}
											html += `<a href="${item.url_produk}" style="text-decoration:none;" target="_blank">
												${item.nama_produk}
											</a><br>
											${tipetext}
										</td>
										<td class="text-center">${item.harga_yuan}</td>
										<td class="text-center">${item.min_quantity == null ? 1 : item.min_quantity}</td>
										<td class="text-center">${item.jumlah}</td>
										<td class="text-center">${item.pengiriman_yuan}</td>`
										
										@if (in_array(\Auth::user()->role, [8,20,21]))
											// totalharga = (parseInt(item.harga_yuan) * parseInt(item.jumlah)) + parseInt(item.pengiriman_yuan)
											var fharga = new Intl.NumberFormat('zh-cn').format(item.total_yuan)

											html += `<th class="text-center">${fharga}</td>`
										@endif

								html += `<td>${item.resi ? item.resi : '-'}</td>
										<td>${item.keterangan}</td>
									</tr>`;
							no++;
						} else {
							html += `<tr>
										<td class="text-center">
											<input type="hidden" name="id_order[]" value="${item.id}" />
											${no}
										</td>
										<td>
											<img src="${item.gambar}" class="circle shadow" style="height: 30px">
											<a href="${item.url_produk}" style="text-decoration:none;" target="_blank">
												${item.nama_produk}
											</a>
										</td>
										<td class="text-center">${item.harga_yuan}</td>
										<td class="text-center">${item.min_quantity == null ? 1 : item.min_quantity}</td>
										<td class="text-center">
											<input type="number"
														name="qty[]"
														class="form-control"
														min="1"
														value="${item.jumlah}"
														${konfirmasi == 1 ? 'disabled' : 'required'}
											>
										</td>
										<td class="text-center">${item.pengiriman_yuan.toLocaleString('ID')}</td>
										<td class="text-center">${item.pengiriman_indo.toLocaleString('ID')}</td>
										<td>${item.resi ? item.resi : '-'}</td>
										<td>
											<textarea name="keterangan[]"
													class="form-control"
													${konfirmasi == 1 ? 'disabled' : ''}
											>${item.keterangan}</textarea>
										</td>
									</tr>`;
							no++;
						}
						
					});
					
				$("#detail_orders").html(html);
				}
			});
			

		}

		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: 150,
					// 	targets: [ 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({
					processing: true,
					serverSide: true,
					bDestroy: true,
					bJQueryUI: true,
					aoColumnDefs: [
						{
						"bSearchable": false,
						"bVisible": false,
						"aTargets": [0]
						}
					],
					order: [[0, 'desc']],
					@if(\Auth::user()->role == 10)
					
						ajax: {
							url: "{{env('URL_ORDERIMPORT')}}/api/ofgetallorderajax?tanggalstart={{$tanggal1}}&tanggalend={{$tanggal2}}&fstatus={{$statuspage}}",
							type: 'POST',
							data: { token_eva : token_eva},
						},
					@elseif(in_array(\Auth::user()->role,[20,21]))
					ajax: {
						url: "{{env('URL_ORDERIMPORT')}}/api/getsalesorderajax?tanggalstart={{$tanggal1}}&tanggalend={{$tanggal2}}&fstatus={{$statuspage}}",
						type: 'POST',
						data: { kode_member : {!! json_encode(@$codes) !!} },
					},
					@elseif(\Auth::user()->role == 99)
					ajax: {
						url: "{{env('URL_ORDERIMPORT')}}/api/getordermemberajax?tanggalstart={{$tanggal1}}&tanggalend={{$tanggal2}}&fstatus={{$statuspage}}",
						type: 'POST',
						data: { evamember_kode : eva_member_code},
					},
					@else
						ajax : "{{env('URL_ORDERIMPORT')}}/api/getalldataorderdatatable?tanggalstart={{$tanggal1}}&tanggalend={{$tanggal2}}&fstatus={{$statuspage}}",

					@endif
					columns:[
						{data:'id', name:'id'},
						{data:'DT_RowIndex', name:'no'},
						@if(in_array(\Auth::user()->role,[1,7,8,9,10,20,21]))
						{ data: null, name: 'nama_customer',render: function ( data, type, row ) {
							// console.log(data)
							var html = ''
							html += data.nama_customer?data.nama_customer:'Data Not Found'
							
							return html;
						}},
						{ data: 'shipping_mark', nama:'shipping_mark'},
						{ data: 'nama_sales', name:'nama_sales'},
						@endif
						@if(\Auth::user()->role == 1 || \Auth::user()->role == 7 || \Auth::user()->role == 8 || \Auth::user()->role == 9)
						{ data: 'nama_coload', nama:'nama_coload'},
						@endif
						// {data:'invoice', name:'invoice'},
						// {data:'tanggal', name:'tanggal'},
						{ data: null, name: 'invoice', render: function ( data, type, row ) {
							var html = ''
							var date = moment(data.created_at).format('DD-MM-YYYY')
							
							html += `<span class="font-weight-semibold">${data.invoice}</span>`
							html += `<br>Date : ${date}`

							return html;
						}},
						{
							data: function (row) {
								// console.log(row)
								return `${row.tanggal}`;
							},
							visible: false, // hide it from the table
							searchable: true // allow searching
						},
						{ data: null, render: function ( data, type, row ) {
							var html = ''
							var total = data.total_biaya - data.nominal_potongan 

							html += `${total.toLocaleString('id-ID')}`
							return html;
						}},
						@if ($statuspage == 51)
							{ data: null, render: function ( data, type, row ) {
								console.log(data)
								var html = ''
								let kurangbayar = data.kurang_bayar?data.kurang_bayar:'0'
								let terbayar = data.jumlah_terbayar?data.jumlah_terbayar:'0'

								let nominal = kurangbayar - terbayar

								html += `${nominal.toLocaleString('id-ID')}`
								return html;
							}},
						@endif
						{ data: null, render: function ( data, type, row ) {
							var html = ''
							var status = null

							// jika halaman = daftar order
							// tampilkan status biasa
							// if ('{{$statuspage}}' == 1) {
							if ( '{{\Auth::user()->role}}' == 2 ||'{{\Auth::user()->role}}' == 5) {
								html += status_order_vb_cina[data.status]
							} else {
								html += status_order_vb[data.status]
							}
							// } else {

							// 	html += `<select class="form-control form-control-select2" 
							// 				name="status_order" id="status_order_${data.id}"
							// 				onChange="updateStatusOrder(${data.id})" 
							// 				data-old_status="${data.status}">`
							// 			Object.keys(status_order_vb).forEach(key => {
							// 				html += `<option value="${key}" ${data.status == key? 'selected' : ''}>${status_order_vb[key]}</option>`
							// 			});
								
							// 	html += `</select>`
	
							// 	if (data.status == 51) {
							// 		html += `<br>`
							// 		html += `<span> <i class="icon-primitive-dot text-info"></i> `
							// 			if (data.status_kurang_bayar == 1) {
							// 				html += 'Pembayaran 1'
							// 			} 
							// 			else if (data.status_kurang_bayar == 2) {
							// 				html += 'Pembayaran 2'
							// 			} else {
							// 				html += '-'
							// 			}
							// 		html += `</span>`
							// 	}
							// }

							@if (\Auth::user()->role == 5)
								// status = status_order_vb_cina[data.status]
							@else
								// status = status_order_vb[data.status]
							@endif

							// if (status == null) {
							// 	status = '-'
							// }
							// html += status
							return html;
						}},
						{ data: null, render: function ( data, type, row ) {
							var html = ''
							let link_copy = `{{url('')}}`+'/titipbeliin/?token='+data.token_member+'&invoice='+data.invoice;
							let link_tagihan = `${urlvb}/tagihancustomer?inv=${data.invoice}`

							html += `
							<div class="list-icons">
								<div class="dropdown">
									<a href="#" class="list-icons-item dropdown-toggle caret-0" data-toggle="dropdown"><i class="icon-menu7"></i></a>
									<div class="dropdown-menu dropdown-menu-right">`

									// Link Tambah Barang 
									if ('{{$statuspage}}' == 20 || '{{$statuspage}}' == 99) {
										html += `<div class="dropdown-item">`
											html += `<a data-copytext="${link_copy}" onclick="copyclip(this)">
														<i class="icon-copy3 text-info mr-1"></i> Copy Link Tambah Barang
													</a>`
										html += `</div>`
									}

									// Link Tagihan Customer 
									if (data.status == 5) {
										html += `<div class="dropdown-item">`
												html += `<a data-copytext="${link_tagihan}" onclick="copyclip(this)">
															<i class="icon-copy3 mr-1 text-warning"></i> Copy Link Tagihan Customer
														</a>`
										html += `</div>`
									}

									// file order admin
									if ('{{$statuspage}}' == 74 || '{{$statuspage}}' == 77 || '{{$statuspage}}' == 99) {
										html += `<div class="dropdown-item">`
											html += `<a data-toggle="modal" data-target="#modal_file_order"
														onclick='getFileOrder("${data.id}")'
														>
														<i class="icon-copy3 text-info mr-1"></i> Bukti Pembelian
													</a>`
										html += `</div>`
									}

									// bukti order customer
									if ('{{$statuspage}}' != 20 && '{{$statuspage}}' != 5) {
										html += `<div class="dropdown-item">`
											html += `<a data-toggle="modal" data-target="#modal_bukti_order"
														onclick='getBuktiOrder("${data.id}")'
														>
														<i class="icon-copy3 text-danger mr-1"></i> Bukti Consumer
													</a>`
										html += `</div>`
									}

									html += `<div class="dropdown-item">`
										html += `<a data-toggle="modal" data-target="#modal_edit_order"
													onclick='editOrderan("${data.invoice}", "${data.id}", "${data.confirm}", "${data.nama_customer}")'>
													<i class="icon-list mr-1 text-primary"></i> Detail Pesanan
												</a>`
												// {{\Auth::user()->role == 5?'订单详细信息':'Detail Pesanan'}}
									html += `</div>`
												
									if ( ('{{$statuspage}}' != 20)) {
										html += `<div class="dropdown-item">`
											html += `<a style="color:#333;text-decoration:none" href="{{env('URL_ORDERIMPORT')}}/jastip/cetakinvoice/${data.id}" 
														target="_blank">
														<i class="icon-printer text-warning mr-1"></i> Cetak Invoice
													</a>`
										html += `</div>`
									}

									if ('{{$statuspage}}' == 77) {
										html += `<div class="dropdown-item">`
											html += `<a style="color:#333;text-decoration:none" href="{{env('URL_ORDERIMPORT')}}/jastip/kwitansi/${data.id}" 
														target="_blank">
														<i class="icon-printer text-success mr-1"></i> Cetak Kwitansi Lunas
													</a>`
										html += `</div>`
									}

									html += `<div class="dropdown-item">`
										html += `<a style="color:#333;text-decoration:none" href="{{ url('downloadexceljastip') }}/${data.id}">
													<i class="icon-file-excel text-success mr-1"></i> Download Detail Order
												</a>`
									html += `</div>`

										// <a href="#" class="dropdown-item"><i class="icon-file-text2"></i> Edit campaign</a>
										// <a href="#" class="dropdown-item"><i class="icon-file-locked"></i> Disable campaign</a>
										// <div class="dropdown-divider"></div>
										// <a href="#" class="dropdown-item"><i class="icon-gear"></i> Settings</a>

							html += `</div>
								</div>
							</div>
							`
							
							return html;
						}},
					],
					drawCallback: function (settings) {
						var $select = $('.form-control-select2').select2();

						$('[data-popup="tooltip"]').tooltip({
							"html": true,
							"trigger":"hover",
							// "delay": {"show": 100, "hide": 0},
						});
					}
				});

				// 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();
		});

		function updateStatusOrder(id) {
			var urlvb = `{{env('URL_ORDERIMPORT')}}`
			var val = $('#status_order_'+id).val();
			var old_status = $('#status_order_'+id).data('old_status');
			// console.log(val)
			let row = $(this).closest('tr');

			if (confirm("Apakah anda yakin ingin mengubah status pesanan ini?")) {
				
				try {
					$.ajax({
						url: urlvb+'/api/eva_updatestatusorder',
						type: 'get',
						data: {
							_token: '{{ csrf_token() }}',
							id: id,
							status: val
						},
						success: function (data) {
							console.log(data)
							if (data.code == 200) {
								new PNotify({
									title: 'Success',
									text: 'Status Order Berhasil diubah, menyesuaikan list order..',
									icon: 'icon-checkmark3',
									type: 'success'
								});
	
								setTimeout(function () {
									if (val !== old_status) {
										$('.datatable-basic').DataTable().row(row).remove().draw(false);								// 'false' keeps pagination on the same page
									} else {
										// Optionally update cell if needed
										$('.datatable-basic').DataTable().row(row).invalidate().draw(false);
										// table.row(row).invalidate().draw(false);
									}
								}, 3000);
							} else {
								new PNotify({
									title: 'Error',
									text: 'Status Order Gagal diubah, Status dikembalikan ke status order sebelumnya',
									icon: 'icon-blocked',
									type: 'error'
								});
								$('#status_order_'+id).val(old_status).trigger('change');
	
							}
						}
					})
				} catch (error) {
					new PNotify({
						title: 'Error',
						text: 'Something wrong. refreshing the table',
						icon: 'icon-blocked',
						type: 'error'
					});
					console.log(error)
					// $('#status_order_'+id).val(old_status);
					$('.datatable-basic').DataTable().ajax.reload(null, false);

				}
			} else {
				new PNotify({
					text: 'Refreshing the table',
					icon: 'icon-info3',
					type: 'info'
				});
				// $('#status_order_'+id).val(old_status);
				$('.datatable-basic').DataTable().ajax.reload(null, false);
			}
		}

		$('.daterange-picker').daterangepicker({
			applyClass: 'btn-primary',
			cancelClass: 'btn-light',
			
			startDate: '{{ $start_date }}',
			endDate: '{{ $end_date }}',
			
			locale: {
				format: 'YYYY/MM/DD'
			}
		});
		
		$( document ).ready(function() {
			var $select = $('.form-control-select2').select2();

			// Button class options
			$('.daterange-buttons').daterangepicker({
				applyClass: 'btn-success',
				cancelClass: 'btn-danger',
				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

		});

		function copyclip(e) {
				var copied = $(e).data('copytext')

				var textArea = document.createElement( "textarea" );
				textArea.value = copied;
				document.body.appendChild( textArea );
				textArea.select();

				try {
					var successful = document.execCommand( 'copy' );
					var msg = successful ? 'successful' : 'unsuccessful';
				} catch (err) {
					console.log('Oops, unable to copy',err);
				}
				document.body.removeChild( textArea );

				new PNotify({
					title: msg,
					text: 'Copying url ' + msg,
					icon: 'icon-checkmark3',
					type: 'success'
				});
		}
	</script>
	@endsection