@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">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">
				@if(\Session::get('bearer_vb') == null && \Auth::user()->role == 20)
				<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>数字</th>
								<th>发票号码</th>
								<th>发票日期</th>
								<th>付款总额</th>
								@if (\Auth::user()->role != 5)
									{{-- <th>Total Biaya</th> --}}
									{{-- <th>状态</th> --}}
								@endif
								<th class="text-center">行动</th>
							@else
								<th>No</th>
								@if(in_array(\Auth::user()->role, [1, 7, 8, 9, 10, 20]))
								<th>Nama Member</th>
								<th>Marking Member</th>
								<th>Nama 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>No. Invoice</th>
								<th>Tgl. Invoice</th>
								<th>Total Biaya</th>
								<th>Status</th>
								@if (\Auth::user()->role != 5)
									<th>Generate Link</th>
								@endif
								<th class="text-center">Action</th>
							@endif

						</tr>
					</thead>
					<tbody>
					@foreach($orderans as $orderan)
						@if(\Auth::user()->role == 7)
							@if(in_array($orderan->status, [9,10,101,11,12,0]))
							<tr>
								<td>{{$no}}</td>
								@if(in_array(\Auth::user()->role, [1, 7, 8, 9, 10, 20]))
								<td>
									{{-- <img src="{{url($members[$orderan->evamember_kode]->gambar)}}"
											 class="rounded-circle shadow"
											 style="height: 30px"
									>&nbsp; --}}
									@if (array_key_exists($orderan->evamember_kode, $members))
										{{ucwords(isset($members[$orderan->evamember_kode]->nama) ? @$members[$orderan->evamember_kode]->nama : 'Data Not Found')}}
									@else
									<span class="font-italic">- Data Not Found -</span>
									@endif
								</td>
								<td>
									@if (array_key_exists($orderan->evamember_kode, $members))
										{{isset($members[$orderan->evamember_kode]->shipping_mark) ? @$members[$orderan->evamember_kode]->shipping_mark : 'Data Not Found'}}
									@else
									<span class="font-italic">- Data Not Found -</span>
									@endif
								</td>
								<td>
									@if (array_key_exists($orderan->evamember_kode, $members))
										{{ucwords(isset($members[$orderan->evamember_kode]->sales->nama) ? @$members[$orderan->evamember_kode]->sales->nama : 'Data Not Found')}}
									@else
									<span class="font-italic">- Data Not Found -</span>
									@endif
								</td>
								@endif
								@if(\Auth::user()->role == 1 || \Auth::user()->role == 7 || \Auth::user()->role == 8 || \Auth::user()->role == 9)
								<td>
									@if (array_key_exists($orderan->evamember_kode, $coload))
										{{$coload[$orderan->evamember_kode]}}
									@else
									<span class="font-italic">- Data Not Found -</span>
									@endif
								</td>
								@endif
								<td>{{$orderan->invoice}}</td>
								<td>{{$orderan->tanggal}}</td>
								@if (\Auth::user()->role != 5)
									<td>
										Rp. {{ribuan($orderan->total_biaya + $orderan->ppn)}}
									</td>
								@endif
								<td>
								@if (\Auth::user()->role == 5)
									{{config('custom.status_order_vb_cina')[$orderan->status]}}
								@else
									{{config('custom.status_order_vb')[$orderan->status]}}
								@endif
								</td>

								@if (\Auth::user()->role != 5)
									<td>
										@php
											$link_copy = url('titipbeliin/?token='.urlencode($orderan->token_member).'&invoice='.$orderan->invoice);
										@endphp
										<button id="copyclip" class="btn btn-sm btn-info text-white" data-popup="tooltip" data-original-title="Copy to Clipboard" data-copytext="{{$link_copy}}" onclick="copyclip(this)">Link Tambah Barang <i class="icon-copy3"></i></button>
									</td>
								@endif

								<td>
									<button class="btn btn-primary btn-primary"
													data-toggle="modal"
													data-target="#modal_edit_order"
													onclick="editOrderan('{{$orderan->invoice}}', '{{$orderan->id}}', '{{$orderan->confirm}}', '{{@$members[$orderan->evamember_kode]->nama}}')"
									>
										<i class="icon-list"></i>&nbsp;
										{{\Auth::user()->role == 5?'订单详细信息':'Detail Pesanan'}}
									</button>
									<a href="{{url('/downloadexceljastip/'.$orderan->id)}}" class="btn btn-success mt-1">
										<i class="icon-file-excel"></i>&nbsp;
										{{\Auth::user()->role == 5?'下载订单详细':'Download Detail Order'}}
									</a>
								</td>
							</tr>
								@php
								$no++;
								@endphp
							@endif
						@else
						<tr>
							<td>{{$no}}</td>
							@if(in_array(\Auth::user()->role, [1, 7, 8, 9, 10, 20]))
							<td>
								{{-- <img src="{{url($members[$orderan->evamember_kode]->gambar)}}"
										 class="rounded-circle shadow"
										 style="height: 30px"
								>&nbsp; --}}
								@if (array_key_exists($orderan->evamember_kode, $members))
									{{isset($members[$orderan->evamember_kode]->nama) ? @$members[$orderan->evamember_kode]->nama : 'Data Not Found'}}
								@else
								<span class="font-italic">- Data Not Found -</span>
								@endif
							</td>
							<td>
								@if (array_key_exists($orderan->evamember_kode, $members))
									{{isset($members[$orderan->evamember_kode]->shipping_mark) ? @$members[$orderan->evamember_kode]->shipping_mark : 'Data Not Found'}}
								@else
								<span class="font-italic">- Data Not Found -</span>
								@endif
							</td>
							<td>
								@if (array_key_exists($orderan->evamember_kode, $members))
									{{isset($members[$orderan->evamember_kode]->sales->nama) ? @$members[$orderan->evamember_kode]->sales->nama : 'Data Not Found'}}
								@else
								<span class="font-italic">- Data Not Found -</span>
								@endif
							</td>
							@endif
							@if(\Auth::user()->role == 1 || \Auth::user()->role == 7 || \Auth::user()->role == 8 || \Auth::user()->role == 9)
							<td>
								@if (array_key_exists($orderan->evamember_kode, $coload))
									{{$coload[$orderan->evamember_kode]}}
								@else
								<span class="font-italic">- Data Not Found -</span>
								@endif
							</td>
							@endif
							<td>{{$orderan->invoice}}</td>
							<td>{{$orderan->tanggal}}</td>
							@if (\Auth::user()->role != 5)
								<td>
									Rp. {{ribuan($orderan->total_biaya + $orderan->ppn)}}
								</td>
							@endif
							<td>
							@if (\Auth::user()->role == 5)
								{{config('custom.status_order_vb_cina')[$orderan->status]}}
							@else
								{{config('custom.status_order_vb')[$orderan->status]}}
							@endif
							</td>

							@if (\Auth::user()->role != 5)
								<td>
									@php
										$link_copy = url('titipbeliin/?token='.urlencode($orderan->token_member).'&invoice='.$orderan->invoice);
									@endphp
									<button id="copyclip" class="btn btn-sm btn-info text-white" data-popup="tooltip" data-original-title="Copy to Clipboard" data-copytext="{{$link_copy}}" onclick="copyclip(this)">Link Tambah Barang <i class="icon-copy3"></i></button>
								</td>
							@endif

							<td>
								<button class="btn btn-primary btn-primary"
												data-toggle="modal"
												data-target="#modal_edit_order"
												onclick="editOrderan('{{$orderan->invoice}}', '{{$orderan->id}}', '{{$orderan->confirm}}', '{{@$members[$orderan->evamember_kode]->nama}}')"
								>
									<i class="icon-list"></i>&nbsp;
									{{\Auth::user()->role == 5?'订单详细信息':'Detail Pesanan'}}
								</button>
								<a href="{{url('/downloadexceljastip/'.$orderan->id)}}" class="btn btn-success mt-1">
									<i class="icon-file-excel"></i>&nbsp;
									{{\Auth::user()->role == 5?'下载订单详细':'Download Detail Order'}}
								</a>
							</td>
						</tr>
							@php
							$no++;
							@endphp
						@endif
					@endforeach
					</tbody>
				</table>

				@endif
			</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>

						<!-- 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>
									<th class="text-center">Pengiriman CN (Rp)</td>
									<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 (\Auth::user()->role == 20 || \Auth::user()->role == 21 || \Auth::user()->role == 1)
				<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/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>

		//JSON Data Detail Order
		var detail_orders = {!! json_encode($detail_orders) !!};

		@if(\Auth::user()->role == 10)
		//Jika User Role Admin Coload Menampilkan Data User
		var users = {!! json_encode(@$members) !!}
		@endif

		// console.log(detail_orders);

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

			@if(\Auth::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);
			@endif

			$("#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 = "";
			detail_orders[id_invoice].forEach(function(item, index){
				@if(\Auth::user()->role == 20 || \Auth::user()->role == 21 || \Auth::user()->role == 10 || \Auth::user()->role == 1)
					console.log(item.property)
					if (item.property != '-') {
						tipetext = ""
						var property = JSON.parse(item.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>
								<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><br>
								${tipetext}
							</td>
							<td class="text-center">${item.harga}</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>
							<td class="text-center">${item.pengiriman_indo}</td>
							<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}</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++;
				@endif
			});

			$("#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();

				// 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() {
			// 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