@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>Marketing</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>
							</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('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/media/fancybox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/switchery.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/switch.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/gallery_library.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/form_checkboxes_radios.js')}}"></script>
	<script>
		let jasa_transfer_status = {!! json_encode(config('custom.jasa_transfer_status')) !!};

		$(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, Reloading Page ...',
								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({
                    processing: true,
                    serverSide: true,
                    order: [[0, 'desc']],
                    // ajax: "{{route('jasatransfer-datatable')}}",
                    ajax: {
						url:"{{route('jasatransfer-datatable')}}",
						type: "GET",
						data: {
                            statusjt:'{{$status}}',
                        }
					},
                    columns:[
						{data:'DT_RowIndex', name:'no'},
						{data:'kode_order', name:'kode_order'},
                        {data: null, name:'created_at', render: function( data, type, row ){
                            // console.log(data)
							let html = ''

                            html += moment(data.created_at).format('DD/MM/YYYY')
                            
                            return html
						}},
						{data: null, name:'member', render: function( data, type, row ){
							let html = ''
                            if (data.member) {
                                html += data.member
                            } else {
                                html += '-'
                            }

                            return html
						}},
                        {data: null, name:'marketing_name', render: function( data, type, row ){
							let html = ''
                            if (data.marketing_name) {
                                html += data.marketing_name
                            } else {
                                html += '-'
                            }

                            return html
						}},
                        {data: null, render: function( data, type, row ){
							let html = ''

                            if (data.nominal) {
                                html += "Rp. " + data.nominal.toLocaleString('id-ID')
                            } else {
                                html += "Rp. 0"
                            }
                            html += '<br>'
                            if (data.nominal_rmb) {
                                html += "¥ " + data.nominal_rmb.toLocaleString('zh-CN')
                            } else {
                                html += "¥ 0"
                            }
                            
                            return html
						}},
                        {data: null, name:'total_rupiah', render: function( data, type, row ){
							let html = ''

                            if (data.total_rupiah) {
                                html += "Rp. " + data.total_rupiah.toLocaleString('id-ID')
                            } else {
                                html += "0"
                            }
                            return html
						}},
                        {data: null, render: function( data, type, row ){
							let html = ''

                            html += jasa_transfer_status[data.status]

                            return html
						}},
                        {data: null, render: function( data, type, row ){
							let html = ''

                            if (data.status == 12 || data.status == 15) {
                                html += `<a target="_blank" href="{{url('cetakinvoicejasatranfer')}}/${data.id}" class="btn btn-icon bg-purple-400">
                                            <i class="icon-printer2"></i>
                                        </a>`
                            }
                            if (data.status == 17 || data.status == 2) {
                                html += `<a target="_blank" href="{{url('cetakjasatransfer')}}/${data.id}" class="btn btn-icon btn-success">
                                            <i class="icon-printer2"></i>
                                        </a>`
                            }
                            if (data.status != 2) {
                                if (data.status != 17) {
                                    if (data.token) {
                                        html += `<button type="button" class="btn btn-icon btn-warning btncopylink" data-id="${data.id}">
                                                    <i class="icon icon-link"></i>
                                                </button>
                                                <input id="link${data.id}" type="hidden" value="{{env('URL_ORDERIMPORT', 'http://dev.orderimport.local.com')}}'/jasatransfer?token='${data.token}">`
                                    } else {
                                        html += `<button type="button" class="btn btn-icon btn-primary btngeneratelink" data-id="${data.id}">
                                                    <i class="icon icon-link"></i>
                                                </button>`
                                    }
                                    
                                }
                            }

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

					// "fnDrawCallback": function () {
					// 	$(".kelaslightbox").fancybox();
					// }
                });

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