djid_siput/resources/views/program/metadata_program/helpers/chart/js.blade.php

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<?php
$end = explode('/', url()->current());
$end = end($end);
?>
<script type="text/javascript">
@foreach($tahunProgramDetail as $row)
	var j = jQuery.noConflict();
	function trimNull(data)
	{
		if (data != null) {
			return data;
		}

		return '';
	}

	var table = j('#server-side-{{$row->id}}').DataTable({
		"order": [[ 0, "DESC" ]],
		"lengthChange": true,
		orderCellsTop: true,
		fixedHeader: true,
		"processing": true,
		"serverSide": true,
		"ajax": {
			"type": "GET",
			"url": "{{ url('program/metadata_program/list/'.$row->id) }}{{ $end == 'filter-data' ? '/filter-data' : null }}",
			"data": function (d) {
				console.log(d);
				return j.extend({}, d, {
					"type": "WEB",
					<?php
					if (!empty($_GET['dari'])) {
						?>
						"dari": "{{ $_GET['dari'] }}",
						<?php
					}
					?>
					<?php
					if (!empty($_GET['sampai'])) {
						?>
						"sampai": "{{ $_GET['sampai'] }}",
						<?php
					}
					?>
					<?php
					if (!empty($_GET['upt'])) {
						?>
						"upt": "{{ $_GET['upt'] }}",
						<?php
					}
					?>
				});
			},
		},
		"columns": [
			{
				"data":"periode",
			},
			@if(!empty($row->templateProgramDetail->itemProgram))
				@foreach($row->templateProgramDetail->itemProgram->sortBy('order_by') as $item)
				{
					"data": "{{$item->kolom}}",
				},
				@endforeach
			@endif
			
			{
				"data":"upt",
			},
			{
				"data": null,
				"render": function (data, type, row, meta) {
					var attr = '';
					@if(!empty($row->templateProgramDetail->itemProgram))
						@foreach($row->templateProgramDetail->itemProgram->sortBy('order_by') as $opt)
							if("{{$opt->tipe_kolom}}"!="file"){
								attr += 'data-{{$opt->kolom}}="'+data['{{$opt->kolom}}']+'" ';
							}

						@endforeach

						//for periode & target
						attr += 'data-id-template-program-detail="{{$row->id_template_program_detail}}" ';
						attr += 'data-id-tahun-program-detail="{{$row->id}}" ';
						attr += 'data-periode="'+data['periode']+'" ';
						attr += 'data-target-periode="'+data['targetPeriode']+'" ';
						
					@endif
					return '<a href="#" data-toggle="modal" id="btn-edit-'+data.id+'" data-target="#editModal{{$row->id_template_program_detail}}" class="btn btn-warning btn-sm"' +
					'onclick="edit_data(' + trimNull(data.id) + ')"'+
					attr+
					'><i class="fa fa-edit"></i></a>'+
					'<a class="btn btn-danger btn-sm" '+
					'id="getDelete"' +
					'data-toggle="modal"' +
					'data-target="#deleteModal"' +
					'data-id="' + trimNull(data.id) + '"' +
					'onclick="delete_data(' + trimNull(data.id) + ')"'+
					'><i class="fa fa-trash"></i>' +
					'</a>';
				}
			},
		],
		"ordering": true
	});
@endforeach
</script>

<script type="text/javascript">
	function delete_data(id){
		$('#form-delete').attr('action', "{{url('program/metadata_program')}}/"+id+"/delete");
	}

	function edit_data(id){
		var id_template_program_detail = $('#btn-edit-'+id).attr('data-id-template-program-detail');
		$('#edit_id_template_program_detail_'+id_template_program_detail).val(id_template_program_detail);

		var id_tahun_program_detail = $('#btn-edit-'+id).attr('data-id-tahun-program-detail');
		$('#edit_id_tahun_program_detail_'+id_template_program_detail).val(id_tahun_program_detail);

		@foreach($template as $key => $row_template)
			@foreach($row_template->itemProgram->sortBy('order_by') as $row)
				var value = $('#btn-edit-'+id).attr('data-{{$row->kolom}}');
				if(value!='-'){
					$('#edit_{{$row->kolom}}_'+id_template_program_detail).val(value);
				}
			@endforeach
		@endforeach
		
		//periode
		var value = $('#btn-edit-'+id).attr('data-periode');
		$('#edit_periode').text();
		$('#edit_periode').text(value);

		//target
		var value = $('#btn-edit-'+id).attr('data-target-periode');
		$('#edit_target_periode').text();
		$('#edit_target_periode').text(value);

		$('#form-edit-'+id_template_program_detail).attr('action', "{{url('program/metadata_program')}}/"+id+"/update");
	}
</script>

@include('dev.helpers.jquery')

<script src="{{asset('templates/assets/js/jquery-confirm.js') }}"></script>
<script>

$('input[type=number]').on('input', function() {
  $(this).val($(this).val().replace(/[^a-z0-9]/gi, ''));
});

$('.fileUpload').on("change",function () {

	var fileExtension = ['pdf','rar','jpg','jpeg','png','zip','xls','xlsx','doc','docx'];
	if (($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) || (this.files[0].size > 50000000)) {
		alert("*Maksimal upload file 20 MB");
		$(this).val('');
	}
}) 

</script>