@extends('layout.default')

@section('styles')
<!--begin::Page Vendors Styles(used by this page)-->
<link href="{{env('STORAGE_URL_VIEW')}}plugins/custom/datatables/datatables.bundle.css?v=7.0.8" rel="stylesheet" type="text/css" />
<!--end::Page Vendors Styles-->
@endsection

@section('content')
<div class="card">
	<div class="card-body">
		@include('layout.notifications')
        <!--begin: Datatable-->
		<table class="table table-bordered table-checkable" id="kt_datatable">
			<thead>
				<tr>
					<th>Tanggal</th>
					<th>Filter</th>
					<th>Detail</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
	<div class="form">
		
	</div>
</div>
@endsection

@section('scripts')
<!--begin::Page Vendors(used by this page)-->
<script src="{{env('STORAGE_URL_VIEW')}}plugins/custom/datatables/datatables.bundle.js?v=7.0.8"></script>
<!--end::Page Vendors-->

@yield('filter_script')

<script>
	var table;
	$(document).ready(function() {
		// library initialization
		table = $('#kt_datatable').DataTable({
			serverSide: true,
			ajax: {
				url : "{{url('transaction/export')}}",
				type: 'GET',
				data: function (data) {
					const info = $('#kt_datatable').DataTable().page.info();
					data.page = (info.start / info.length) + 1;
				},
				dataSrc: 'data'
			},
            fnDrawCallback: function( oSettings ) {
                $('#list-filter-result-counter').text(oSettings.jqXHR.responseJSON.recordsTotal);
            },
            order: [[ 0, "desc" ]],
			columns: [
				{
					data: 'created_at',
					render: function(date) {
						const datex = new Date(date);
						date = datex.toLocaleString('id-ID',{ year: 'numeric', month: 'long', day: 'numeric' });
						time = datex.toLocaleString('id-ID',{ hour: '2-digit', minute: '2-digit' });

						date_time = date+'<br>'+time;

						return date_time;
					}
				},
				{
					data: 'filter',
					orderable: false,
					render: function(value) {
						value = JSON.parse(value);
						var html = '';
						if(value.rule) {
							html += '<strong>Seluruh filter harus terpenuhi</strong>';
							html += '<table>';
							for (index in value.rule) {
								const content = value.rule[index];
								if (!content.parameter || !content.hide) {
									continue;
								}

								html += `<tr><th>${content.subject}</th><td>${content.operator?content.operator:'='}</td><td>${content.parameter}</td></tr>`;
							}
							if (value.operator == 'or') {
								html += '</table><strong>Salah satu filter harus terpenuhi</strong><table>';
							}
							for (index in value.rule) {
								const content = value.rule[index];
								if (!content.parameter || content.hide) {
									continue;
								}

								html += `<tr><th>${content.subject}</th><td>${content.operator?content.operator:'='}</td><td>${content.parameter}</td></tr>`;
							}
							html += '</table>';
						} else {
							html += 'No filter applied';
						}
						return html;
					}
				},
				{
					data: 'status_export',
					className: "text-center",
					render: function(value, type, row) {
						if (value == 'Running') {
							return 'File belum siap <br><a class="btn btn-sm grey" href="" style="background-color: #b5b5c3;"><i class="ki ki-reload icon-nm" style="color: #0c0000;padding: 0px;"></i></a>';
						} else if (value == 'Deleted') {
							return 'File deleted';
						} else {
							return `
							<a href="{!! url('transaction/export-action/download/')."/" !!}${row.id_export_franchise_queue}" class="btn btn-sm" style="background-color: #0abb87"><i class="fa fa-download" style="padding-right: 0px!important;color: white;font-size: 15px;"></i></a>
							<a href="#" data-id="${row.id_export_franchise_queue}" class="btn btn-sm delete" style="background-color:#f64e60"><i class="fa fa-trash" style="padding-right: 0px!important;color: white;font-size: 15px;"></i></a>`;
						}
					}
				}
			],
			searching: false,
			responsive: true
		});

		// delete button listener
		$('#kt_datatable').on('click', '.delete', function() {
			const url = "{{url('transaction/export-action/deleted/')}}/" + $(this).data('id');
			const td = $(this).parents('td');
		    Swal.fire({
		        title: "Anda yakin?",
		        text: "",
		        icon: "warning",
		        showCancelButton: true,
		        confirmButtonText: "Ya, hapus permanen",
		        cancelButtonText: "Tidak"
		    }).then(function(result) {
		        if (result.value) {
		        	$.ajax({
		        		type: "get",
		        		url  : url,
		        		data : {
		        			'_token' : '{{csrf_token()}}'
		        		},
		        		success : function(response) {
		        			if(response.status == 'success') {
		        				td.text('File deleted');
			        			Swal.fire(
					                "Deleted!",
					                "Your data has been deleted.",
					                "success"
					            )		        				
		        			} else {
			        			Swal.fire(
					                "Gagal",
					                response.messages ? response.messages[0] : 'Something went wrong',
					                "error"
					            )
		        			}
		        		},
		        		error : function() {
		        			Swal.fire(
				                "Gagal",
				                "Failed delete data",
				                "error"
				            )
		        		}
		        	});
		        }
		    });
		});
	});

</script>

@endsection