@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">Jasa Transfer - <span class="font-weight-light">
				{{config('custom.jasa_transfer_status.'.$status)}}
			</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-header">
				<a class="btn btn-success" href="{{route('jasatransfer.create')}}"><i class="icon-stack-plus mr-1"></i> Tambah</a>
			</div> --}}
			<div class="card-body">

				{{-- @if(\Auth::user()->role != 99) --}}
				@if(!in_array(\Auth::user()->role, [20, 21, 99]))
					@if ($transfers)
						<div class="form-group">
							<label>Filter Data</label>
							<div class="row">
								<div class="col-md-4">
									<select id="select_member" class="form-control form-control-select2" {{$transfers?'':'disabled'}}>
										<option value="">-- Choose Member --</option>
										@if ($transfers)
											@foreach($filtertransfers as $filtertransfer)
											<option value="{{$filtertransfer['kode_member']}}" {{ app('request')->input('m') == $filtertransfer['kode_member'] ? 'selected' : null }}>{{ $filtertransfer['member'] }}</option>
											@endforeach
										@endif
									</select>
								</div>
								<div class="col-md-4">
									<a id="btn-filter" class="btn btn-success" href="{{ route('jasatransfer.index').'?m='.app('request')->input('m')}}" data-uri="{{ route('jasatransfer.index') }}"><i class="icon-paperplane mr-1"></i> Filter</a>
									<a class="btn btn-info" href="{{ route('jasatransfer.index')}}"><i class="icon-spinner11 mr-1"></i> View All</a>
								</div>
							</div>
						</div>
					@endif
				@endif

				<div class="row">
					<div class="col">
						<table class="table datatable-basic table-hover">
							<thead>
								<tr>
									<th>No.</th>
									<th>Kode Order</th>
									<th>Tanggal Dibuat</th>
									<th>Member</th>
									<th>Nominal</th>
									<th>Total (IDR)</th>
									{{-- <th>Rekening Tujuan (CN)</th> --}}
									<th>Status</th>
									{{-- <th>Keterangan</th> --}}
									<th>Action</th>
								</tr>
							</thead>
							<tbody>
								@if(count($transfers) > 0)
								@php($i = 1)
									@foreach($transfers as $transfer)
										<tr>
											<td>{{ $i }}</td>
											<td>{{ $transfer['kode_order'] }}</td>
											<td>{{ date('d/m/Y', strtotime($transfer['created_at'])) }}</td>
											<td>{{ ucwords($transfer['member']) }}</td>
											<td>Rp. {{ isset($transfer['nominal'])?ribuan($transfer['nominal']):0 }} <br>
												¥ {{ isset($transfer['nominal_rmb'])?yuan($transfer['nominal_rmb']):0 }} <br>
												{{-- $ {{ isset($transfer['nominal_usd'])?$transfer['nominal_usd']:0 }} --}}
											</td>
											<td>Rp. {{$transfer['total_rupiah']?ribuan($transfer['total_rupiah']):0}}</td>
											{{-- <td>{{$transfer['rekening_tujuan_cn']?$transfer['rekening_tujuan_cn']:'-'}}</td> --}}
											<td>{{config('custom.jasa_transfer_status')[$transfer['status']]}}</td>
											{{-- <td>{{ $transfer['keterangan'] }}</td> --}}
											<td>
												{{-- <a class="upbutton" data-toggle="modal" data-target="#modal_theme_upload" data-id="{{$transfer['id']}}" data-uri="{{ url('jtuploadfiles')}}"><button type="button" class="btn btn-info btn-icon"><i class="icon-files-empty" title="Upload"></i></button></a> --}}
												

												@if (in_array($transfer['status'],[12, 15]))													
													<a target="_blank" href="{{url('cetakinvoicejasatranfer',$transfer['id'])}}" class="btn btn-icon bg-purple-400"><i class="icon-printer2"></i></a>
												@endif

												@if (in_array($transfer['status'],[17, 2]))													
													<a target="_blank" href="{{url('cetakjasatransfer',$transfer['id'])}}" class="btn btn-icon btn-success"><i class="icon-printer2"></i></a>
												@endif

												@if ($transfer['status'] != 2)
													
													@if ($transfer['status'] != 17)
														@if ($transfer['token'])
															{{-- <a data-popup="tooltip" target="_blank" title="Link Upload Bukti" href="{{env('URL_ORDERIMPORT', 'http://dev.orderimport.local.com').'/jasatransfer?token='.$transfer['token']}}">
																<button class="btn btn-icon btn-warning">
																	<i class="icon icon-link"></i>
																</button>
															</a> --}}
															<button type="button" class="btn btn-icon btn-warning btncopylink" data-id="{{$transfer['id']}}"><i class="icon icon-link"></i></button>
															<input id="link{{$transfer['id']}}" type="hidden" value="{{env('URL_ORDERIMPORT', 'http://dev.orderimport.local.com')}}/jasatransfer?token={{$transfer['token']}}">
														@else
															<button id="btngeneratelink{{$transfer['id']}}" data-popup="tooltip" title="Generate Link Upload Bukti" class="btn btn-icon btn-primary btngeneratelink" data-id="{{$transfer['id']}}">
																<i class="icon icon-link"></i>
															</button>
														@endif
													@endif
												@endif

												@if ($transfer['status'] == 2)
													<a data-popup="tooltip" title="Uploaded Files" href="{{url('jtuploadedfiles/'.$transfer['id'])}}">
														<button class="btn btn-icon btn-warning">
															<i class="icon icon-file-eye"></i>
														</button>
													</a>
												@endif

											</td>
										</tr>
										@php($i++)
									@endforeach
								@else
								<tr>
									<td align="center" colspan="7">Data Kosong</td>
								</tr>
								@endif

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


	<!-- Danger modal -->
	<div id="modal_theme_upload" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-info" align="center">
					<h3>Upload File</h3>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal-body" align="center">
					<form action="" method="post" id="upform" enctype="multipart/form-data">
						@csrf
						<fieldset>
							<div class="form-group row">
								<input name="vb_jasa_transfer_id" id="id_jt" type="hidden">
								<label class="col-form-label col-lg-2">Nama File</label>
								<div class="col-lg-10">
									<input name="nama_file" type="text" class="form-control">
								</div>
							</div>

							<div class="form-group row">
								<label class="col-form-label col-lg-2">Upload File</label>
								<div class="col-lg-10">
									<input name="file" type="file" class="form-control">
									<span class="text-danger">* Format file yang diterima : .jpg, .pdf, .csv, .xls, .doc, .docx</span>
								</div>
							</div>
						</fieldset>
						<div>
							<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
							<button type="submit" class="btn bg-danger" >Upload</button>
						</div>
					</form>
					<span id="listfile">

					</span>
				</div>

			</div>
		</div>
	</div>
	<!-- /default modal -->

	@endsection

	@section('js')
	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script>
		$(document).on('click', '.btncopylink', function() { 
			var id = $(this).data('id');
			var $input = $('#link' + id); // jQuery object of the input element
			var link = $input.val();      // The value to copy

			// console.log(id, $input, link);
			// Use temporary input for copy
			const tempInput = document.createElement("input");
			tempInput.value = link;
			document.body.appendChild(tempInput);
			tempInput.select();
			tempInput.setSelectionRange(0, 99999); // For mobile
			document.execCommand("copy");
			document.body.removeChild(tempInput);

			// Notification
			new PNotify({
				title: 'Success',
				text: 'Link Copied',
				icon: 'icon-checkmark3',
				type: 'success'
			});
		});

		$(document).on("click", ".btngeneratelink", function () {
			var url = `{{env('URL_ORDERIMPORT', 'http://dev.orderimport.local.com')}}`
			var link_generate = '/api/generatelinkjasatransfer/'
			var link_jasatransfer = '/jasatransfer'
			var id = $(this).data('id');
			var token = null
			
			// $('#btngeneratelink'+id).remove()

			$.ajax({
					type: 'get',
					url : url+link_generate+id,
					success : function(res){
						if (res && res.code == 200) {
							token = res.data.token
							var url_jasa_transfer = url+link_jasatransfer+'?token='+token

							new PNotify({
								title: 'Success',
								text: 'Link Generated',
								icon: 'icon-checkmark3',
								type: 'success'
							});
							// reload the page after 3 seconds
							// setTimeout(function() {
							// 	window.location.reload();
							// }, 2000)

							// Get the existing button
							const editBtn = document.getElementById("btngeneratelink"+id);

							const button = document.createElement("button");
							button.className = "btn btn-icon btn-warning btncopylink";
							button.setAttribute("data-id", id);

							// Create the <i> icon tag
							const icon = document.createElement("i");
							icon.className = "icon icon-link";

							// Nest the <i> into the <button>, then <button> into the <a>
							button.appendChild(icon);

							// Insert it after the existing button
							editBtn.parentNode.insertBefore(button, editBtn.nextSibling);

							const hiddenInput = document.createElement("input");
							hiddenInput.type = "hidden";
							hiddenInput.id = "link" + id;
							hiddenInput.value = url_jasa_transfer;

							editBtn.parentNode.insertBefore(hiddenInput, editBtn.nextSibling);

							// remove the existing button
							$('#btngeneratelink'+id).tooltip('dispose');
							$('#btngeneratelink'+id).remove()

							$('[data-popup="tooltip"]').tooltip();
						} else {
							new PNotify({
								title: 'Error',
								text: 'Error Generate Link',
								icon: 'icon-blocked',
								type: 'error'
							});
						}
					}
			})
		})

		//modal delete
		$(document).on("click", ".upbutton", function () {
		     var id = $(this).data('id');
			 var url = $(this).data('uri');
		     $("#upform").attr("action", url);
		     $("#id_jt").val(id);

			 $.ajax({
					type: 'get',
                	headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
					url : '{{url("getfilejt")}}/'+id,
					success : function(res){
						console.log(res)
						if (res.id) {
							var id = res.id;
							var downurl = res.url+"/"+res.file
							var destroyfile = '{{url("destroyfilejt")}}/'+res.id
							let $html = '<span>Download :</span> <a target="_blank" href="'+downurl+'" download>'+res.nama_file+'</a>'
							+'<br><span class="text-muted">Property File : '+res.file+'</span>'
							+'<br><br> <a class="btn btn-sm btn-danger" href='+destroyfile+'><i class="icon-x mr-1"></i> Hapus</a>';
							$("#listfile").text('');
							$("#listfile").append( $html );
							$('#upform').hide()
						}else{
							$("#listfile").text('');
							$('#upform').show()

						}

					},
					error:function(res){
						console.log('Error',res);
					}
				});
		});


		$('#select_member').change(function(){
            var uri = $('#btn-filter').data('uri');
            // var val1 = $('#select_destination').find(":selected").val();
            // let val2 = $('#select_customer').find(":selected").val();
            let val1 = $(this).val();
            // let href = `${uri}?c=${val1}&i=${val2}&n=${val3}`;
            let href = `${uri}?m=${val1}`;
			// console.log(uri);
            $('#btn-filter').attr('href', href);
        })

		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

		});
	</script>
	@endsection