@extends('base.layout')

@section('content')
<div class="wrapper">
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-4">
				<div class="card-box ribbon-box">
					<div class="ribbon ribbon-danger">Mikroorganisme</div>
					<p></p>
					<div class="card-body">
						<button type="button" class="btn btn-light waves-effect" id="btnaddnewmikroorganisme">
							<i class="mdi mdi-briefcase-plus mr-1"></i> Add New
						</button>
					</div>
					<div class="card-footer">
						<div id="gridmikroorganisme"></div>
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="card-box ribbon-box">
					<div class="ribbon ribbon-warning">Bakteri</div>
					<p></p>
					<div class="card-body">
						<button type="button" class="btn btn-light waves-effect" id="btnaddnewbakteri">
							<i class="mdi mdi-briefcase-plus mr-1"></i> Add New
						</button>
					</div>
					<div class="card-footer">
						<div id="gridbakteri"></div>
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="card-box ribbon-box">
					<div class="ribbon ribbon-info">Any Paramater</div>
					<p></p>
					<div class="card-body">
						<button type="button" class="btn btn-light waves-effect" id="btnaddnewparameter">
							<i class="mdi mdi-briefcase-plus mr-1"></i> Add New
						</button>
					</div>
					<div class="card-footer">
						<div id="gridparameterlain"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12">
				<div class="card-box ribbon-box">
					<div class="ribbon ribbon-info">Kop Surat</div>
					<p></p>
					<div class="card-body">
						<button type="button" class="btn btn-light waves-effect btnubahfoto">
							<i class="mdi mdi-account-settings-variant mr-1"></i> Change Picture
						</button>
					</div>
					<div class="card-footer">
						<img src="{{ url('/templateimage/kopsurat.png') }}" width="100%" />
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="modalgakdipake">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Gakdipake..!!!</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="id_kesimpulan" class="col-form-label">Conclusion</label>
					<textarea id="id_kesimpulan" style="width: 100%; height: 200px; font-size: 12px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>	
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	<div id="ModalKategori" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">Add New Category</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
						<div class="form-group m-b-25">
							<div class="col-12">
								<label>Category Name</label>
								<input type="text" class="form-control" id="id_kategori">
								<input type="hidden" id="id_idkategori">
								<input type="hidden" id="id_idjawaban">
							</div>
						</div>
						<div class="form-group account-btn text-center m-t-10">
							<div class="col-12">
								<button class="btn w-lg btn-custom waves-effect waves-light" id="btnAddKategori" type="button">Save</button>
							</div>
						</div>
					</form>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div>
	<div id="modalupdatefoto" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">Pilih Gambar</h4>
				</div>
				<div class="modal-body">
					<div class="form-group m-b-0">
						<p class="mb-2 mt-4 font-weight-bold">Select Your Pic</p>
						<input type="file" class="filestyle" data-placeholder="No file" data-btnClass="btn-light" id="upload_file" name="upload_file">
					</div>
					<div class="form-group account-btn text-center m-t-10">
						<span class="badge badge-danger">Untuk melihat perubahan setelah update data, silahkan refresh</span>
					</div>
					<div class="form-group account-btn text-center m-t-10">
						<div class="col-12">
							<button class="btn w-lg btn-custom waves-effect waves-light" type="button" id="btnsimpanfoto">Update</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="ModalMikroandBakteri" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">Editor Data</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
						<div class="form-group m-b-25">
							<div class="col-12">
								<label>Name</label>
								<input type="text" class="form-control" id="mb_name">
							</div>
						</div>
						<div class="form-group m-b-25">
							<div class="col-12">
								<label>Category Name</label>
								<input type="text" class="form-control" id="mb_kategori">
							</div>
						</div>
						<div class="form-group account-btn text-center m-t-10">
							<div class="col-12">
								<input type="hidden" class="form-control" id="mb_id">
								<input type="hidden" class="form-control" id="mb_kelompok">
								<button class="btn w-lg btn-custom waves-effect waves-light" id="btnAddMB" type="button">Save</button>
							</div>
						</div>
					</form>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div>
	<div id="ModalParameterLain" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">Editor Data</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
						<div class="form-group m-b-25">
							<div class="col-12">
								<label>Kelompok</label>
								<select class="form-control" id="lain_kelompok" name="lain_kelompok">
									<option value="">Pilih Salah Satu</option>
									@if(isset($parameters) && !empty($parameters))
										@foreach($parameters as $rows)
											<option value="{!! $rows->kelompok !!}">{!! $rows->kelompok !!}</option>
										@endforeach
									@endif
								</select>
							</div>
						</div>
						<div class="form-group m-b-25">
							<div class="col-12">
								<label>Value</label>
								<textarea id="lain_value" style="width: 100%; height: 200px; font-size: 12px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
							</div>
						</div>
						<div class="form-group account-btn text-center m-t-10">
							<div class="col-12">
								<input type="hidden" class="form-control" id="lain_id">
								<button class="btn w-lg btn-custom waves-effect waves-light" id="btnAddParameters" type="button">Save</button>
							</div>
						</div>
					</form>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div>
</div>
<div id="tempatctk" style="overflow: hidden; display: none;">
	<div id="gridkategori"></div>
	<div id="divawal">
		<div id="griddetail"></div>
	</div>
	<div id="divtambahdata">
		<p></p>
		<h4 class="m-t-0 header-title">Add/Edit Expertise Template</h4>
		<div class="form-group">
			<label for="id_judul" class="col-form-label">Title</label>
			<input type="text" class="form-control" id="id_judul">
		</div>
		<div class="form-group">
			<label for="id_jawaban" class="col-form-label">Expertise</label>
			<textarea id="id_jawaban" style="width: 100%; height: 200px; font-size: 12px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
		</div>
		<div class="form-group">
			<input type="hidden" id="id_idjawaban">
			<button type="button" id="btnkembali" class="btn btn-custom">Back</button>
			<button type="button" id="btnAddDetail" class="btn btn-custom pull-right">Save</button>
		</div>
	</div>
</div>
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
@endsection

@push('script')
<script type="text/javascript">
	$(function() {
		CKEDITOR.env.isCompatible = true;
		CKEDITOR.replace( 'id_jawaban');
		CKEDITOR.replace( 'id_kesimpulan');
		CKEDITOR.replace( 'lain_value', {
			toolbarGroups	: [{"name":"paragraph","groups":["list"]}],
			removeButtons	: 'Strike',
			width			: '100%',
			height			: 50	
		});
	});
	function openedpage( jQuery ){
		var token					= document.getElementById('token').value;
		var sourcemikroorganisme 	= {
			datatype: "json",
			datafields: [
				{ name: 'id',type: 'text'},
				{ name: 'name',type: 'text'},
				{ name: 'category',type: 'text'},
				{ name: 'kelompok',type: 'text'},
			],
			type: 'POST',
			data: {	val01:'Mikroorganisme', _token: token },
			url: '{{ route("getriwayat") }}',
		};
		var jsonMikroorganisme 		= new $.jqx.dataAdapter(sourcemikroorganisme);
		$("#gridmikroorganisme").jqxGrid({
			width					: '100%',
			showfilterrow			: true,
			filterable				: true,
			source					: jsonMikroorganisme,
			columnsresize			: true,
			theme					: "energyblue",
			autoheight				: true,
			pageable				: true,
			altrows					: true,
			selectionmode			: 'multiplecellsextended',
			columns					: [
				{ text: 'Edit', filterable: false, columntype: 'button', cellsalign: 'center', align: 'center', width: '10%', cellsrenderer: function () {
					return "Edit";
					}, buttonclick: function (row) {
						editrowpoli 	= row;
						var offset      = $("#gridmikroorganisme").offset();       
						var dataRecord  = $("#gridmikroorganisme").jqxGrid('getrowdata', editrowpoli);
						$("#mb_id").val(dataRecord.id);
						$("#mb_kelompok").val(dataRecord.kelompok);
						$("#mb_kategori").val(dataRecord.category);
						$("#mb_name").val(dataRecord.name);
						$('#ModalMikroandBakteri').modal('show');
					}
				},
				{ text: 'Name', datafield: 'name', width: '40%', cellsalign: 'left', align: 'center' },
				{ text: 'Category', datafield: 'category', width: '40%', cellsalign: 'left', align: 'center' },
				{ text: 'Delete', editable: false, sortable: false, filterable: false, columntype: 'button', width: '10%', cellsrenderer: function () {
					return "Delete";
					}, buttonclick: function (row) {	
						editrow = row;	
						var offset 		= $("#gridmikroorganisme").offset();		
						var dataRecord 	= $("#gridmikroorganisme").jqxGrid('getrowdata', editrow);
						swal({
							title				: 'Are you sure?',
							text				: "Do you realy want to delete this data!",
							type				: 'warning',
							showCancelButton	: true,
							confirmButtonClass	: 'btn btn-confirm mt-2',
							cancelButtonClass	: 'btn btn-cancel ml-2 mt-2',
							confirmButtonText	: 'Yes, confirm it!'
						}).then(function () {
							var token   	= document.getElementById('token').value;		
							$.post('{{ route("deleteJawaban") }}', { id: 'mikroorganisme', idsirab: dataRecord.id, _token: token },	function(data){					
								var status  = data.status;
								var message = data.message;
								var warna 	= data.warna;
								var icon 	= data.icon;
								$.toast({
									heading: status,
									text: message,
									position: 'top-right',
									loaderBg: warna,
									icon: icon,
									hideAfter: 5000,
									stack: 1
								});
								$("#gridmikroorganisme").jqxGrid('updatebounddata', 'filter');
								return false;
							});
						});
					}
				},
			]
		});
		var sourcebakteri 			= {
			datatype	: "json",
			datafields	: [
				{ name: 'id',type: 'text'},
				{ name: 'name',type: 'text'},
				{ name: 'category',type: 'text'},
				{ name: 'kelompok',type: 'text'},
			],
			type: 'POST',
			data: {	val01:'Bakteri', _token: token },
			url	: '{{ route("getriwayat") }}',
		};
		var jsonBakteri 			= new $.jqx.dataAdapter(sourcebakteri);
		$("#gridbakteri").jqxGrid({
			width					: '100%',
			showfilterrow			: true,
			filterable				: true,
			source					: jsonBakteri,
			columnsresize			: true,
			theme					: "energyblue",
			autoheight				: true,
			pageable				: true,
			altrows					: true,
			selectionmode			: 'multiplecellsextended',
			columns					: [
				{ text: 'Edit', filterable: false, columntype: 'button', cellsalign: 'center', align: 'center', width: '10%', cellsrenderer: function () {
					return "Edit";
					}, buttonclick: function (row) {
						editrowpoli 	= row;
						var offset      = $("#gridbakteri").offset();       
						var dataRecord  = $("#gridbakteri").jqxGrid('getrowdata', editrowpoli);
						$("#mb_id").val(dataRecord.id);
						$("#mb_kelompok").val(dataRecord.kelompok);
						$("#mb_kategori").val(dataRecord.category);
						$("#mb_name").val(dataRecord.name);
						$('#ModalMikroandBakteri').modal('show');
					}
				},
				{ text: 'Name', datafield: 'name', width: '40%', cellsalign: 'left', align: 'center' },
				{ text: 'Category', datafield: 'category', width: '40%', cellsalign: 'left', align: 'center' },
				{ text: 'Delete', editable: false, sortable: false, filterable: false, columntype: 'button', width: '10%', cellsrenderer: function () {
					return "Delete";
					}, buttonclick: function (row) {	
						editrow = row;	
						var offset 		= $("#gridbakteri").offset();		
						var dataRecord 	= $("#gridbakteri").jqxGrid('getrowdata', editrow);
						swal({
							title				: 'Are you sure?',
							text				: "Do you realy want to delete this data!",
							type				: 'warning',
							showCancelButton	: true,
							confirmButtonClass	: 'btn btn-confirm mt-2',
							cancelButtonClass	: 'btn btn-cancel ml-2 mt-2',
							confirmButtonText	: 'Yes, confirm it!'
						}).then(function () {
							var token   	= document.getElementById('token').value;		
							$.post('{{ route("deleteJawaban") }}', { id: 'mikroorganisme', idsirab: dataRecord.id, _token: token },	function(data){					
								var status  = data.status;
								var message = data.message;
								var warna 	= data.warna;
								var icon 	= data.icon;
								$.toast({
									heading: status,
									text: message,
									position: 'top-right',
									loaderBg: warna,
									icon: icon,
									hideAfter: 5000,
									stack: 1
								});
								$("#gridbakteri").jqxGrid('updatebounddata', 'filter');
								return false;
							});
						});
					}
				},
			]
		});
		var sourceallany 			= {
			datatype	: "json",
			datafields	: [
				{ name: 'id',type: 'text'},
				{ name: 'name',type: 'text'},
				{ name: 'category',type: 'text'},
				{ name: 'kelompok',type: 'text'},
			],
			type: 'POST',
			data: {	val01:'allany', _token: token },
			url	: '{{ route("getriwayat") }}',
		};
		var jsonParameter 			= new $.jqx.dataAdapter(sourceallany);
		$("#gridparameterlain").jqxGrid({
			width					: '100%',
			showfilterrow			: true,
			filterable				: true,
			source					: jsonParameter,
			columnsresize			: true,
			theme					: "energyblue",
			autoheight				: true,
			pageable				: true,
			altrows					: true,
			selectionmode			: 'multiplecellsextended',
			columns					: [
				{ text: 'Edit', filterable: false, columntype: 'button', cellsalign: 'center', align: 'center', width: '10%', cellsrenderer: function () {
					return "Edit";
					}, buttonclick: function (row) {
						editrowpoli 	= row;
						var offset      = $("#gridparameterlain").offset();       
						var dataRecord  = $("#gridparameterlain").jqxGrid('getrowdata', editrowpoli);
						$("#lain_id").val(dataRecord.id);
						CKEDITOR.instances['lain_value'].setData(dataRecord.name);
						$("#lain_kelompok").val(dataRecord.kelompok);
						$('#ModalParameterLain').modal('show');
					}
				},
				{ text: 'Group', datafield: 'kelompok', width: '40%', cellsalign: 'left', align: 'center' },
				{ text: 'Value', datafield: 'name', width: '40%', cellsalign: 'left', align: 'center' },
				{ text: 'Delete', editable: false, sortable: false, filterable: false, columntype: 'button', width: '10%', cellsrenderer: function () {
					return "Delete";
					}, buttonclick: function (row) {	
						editrow = row;	
						var offset 		= $("#gridparameterlain").offset();		
						var dataRecord 	= $("#gridparameterlain").jqxGrid('getrowdata', editrow);
						swal({
							title				: 'Are you sure?',
							text				: "Do you realy want to delete this data!",
							type				: 'warning',
							showCancelButton	: true,
							confirmButtonClass	: 'btn btn-confirm mt-2',
							cancelButtonClass	: 'btn btn-cancel ml-2 mt-2',
							confirmButtonText	: 'Yes, confirm it!'
						}).then(function () {
							var token   	= document.getElementById('token').value;		
							$.post('{{ route("deleteJawaban") }}', { id: 'mikroorganisme', idsirab: dataRecord.id, _token: token },	function(data){					
								var status  = data.status;
								var message = data.message;
								var warna 	= data.warna;
								var icon 	= data.icon;
								$.toast({
									heading: status,
									text: message,
									position: 'top-right',
									loaderBg: warna,
									icon: icon,
									hideAfter: 5000,
									stack: 1
								});
								$("#gridparameterlain").jqxGrid('updatebounddata', 'filter');
								return false;
							});
						});
					}
				},
			]
		});
	}
	$(window).on('load', function () {
		openedpage();
	});
	$(document).ready(function() {
		$(".btnubahfoto").click(function() {
			$('#modalupdatefoto').modal('show');
		});
		$("#btnAddMB").click(function(){
			var set01 = document.getElementById('mb_name').value;
			var set02 = document.getElementById('mb_kategori').value;
			var set03 = document.getElementById('mb_kelompok').value;
			var set04 = document.getElementById('mb_id').value;
			if (set01 == '' || set02 == '' || set03 == ''){
				swal({
					title	: 'Mohon diLengkapi',
					text	: 'Data Dasar Wajib di Isi',
					type	: 'warning',
				});
			} else {
				$('#ModalMikroandBakteri').modal('hide');
				var form_data 	= 	new FormData();
					form_data.append('name', set01);
					form_data.append('category', set02);
					form_data.append('kelompok', set03);
					form_data.append('id', set04);
					form_data.append('tabel', 'Organisme');
					form_data.append('_token', '{{csrf_token()}}');
				$.ajax({
					url			: '{{ route("exSIRAb") }}',
					data		: form_data,
					type		: 'POST',
					contentType	: false,
					processData	: false,
					success		: function (data) {
						var status  = data.status;
						var message = data.message;
						var icon 	= data.icon;
						var warna 	= data.warna;
						$("html, body").animate({ scrollTop: 0 }, "slow");
						$.toast({
							heading		: status,
							text		: message,
							position	: 'top-right',
							loaderBg	: warna,
							icon		: icon,
							hideAfter	: 3000,
							stack		: 1
						});
						$("#gridbakteri").jqxGrid('updatebounddata', 'filter');
						$("#gridmikroorganisme").jqxGrid('updatebounddata', 'filter');
						return false;
					},
					error		: function (xhr, status, error) {
						var response 	= xhr.responseJSON || {};
						var traceText 	= response.trace ? JSON.stringify(response.trace) : null;
						swal({
							title	: response,
							text	: traceText,
							type	: 'error',
						})
					}
				});
			}
		});
		$("#btnAddParameters").click(function(){
			var set01 = CKEDITOR.instances['lain_value'].getData();
			var set02 = document.getElementById('lain_kelompok').value;
			var set03 = document.getElementById('lain_kelompok').value;
			var set04 = document.getElementById('lain_id').value;
			if (set01 == '' || set02 == '' || set03 == ''){
				swal({
					title	: 'Mohon diLengkapi',
					text	: 'Data Dasar Wajib di Isi',
					type	: 'warning',
				});
			} else {
				$('#ModalParameterLain').modal('hide');
				var form_data 	= 	new FormData();
					form_data.append('name', set01);
					form_data.append('category', set02);
					form_data.append('kelompok', set03);
					form_data.append('id', set04);
					form_data.append('tabel', 'Parameter');
					form_data.append('_token', '{{csrf_token()}}');
				$.ajax({
					url			: '{{ route("exSIRAb") }}',
					data		: form_data,
					type		: 'POST',
					contentType	: false,
					processData	: false,
					success		: function (data) {
						var status  = data.status;
						var message = data.message;
						var icon 	= data.icon;
						var warna 	= data.warna;
						$("html, body").animate({ scrollTop: 0 }, "slow");
						$.toast({
							heading		: status,
							text		: message,
							position	: 'top-right',
							loaderBg	: warna,
							icon		: icon,
							hideAfter	: 3000,
							stack		: 1
						});
						$("#gridparameterlain").jqxGrid('updatebounddata', 'filter');
						return false;
					},
					error		: function (xhr, status, error) {
						var response 	= xhr.responseJSON || {};
						var traceText 	= response.trace ? JSON.stringify(response.trace) : null;
						swal({
							title	: response,
							text	: traceText,
							type	: 'error',
						})
					}
				});
			}
			
		});
		$("#btnaddnewparameter").click(function() {
			$("#lain_id").val('new');
			CKEDITOR.instances['lain_value'].setData('');
			$('#ModalParameterLain').modal('show');
		});
		$("#btnaddnewmikroorganisme").click(function() {
			$("#mb_id").val('new');
			$("#mb_kelompok").val('mikroorganisme');
			$('#ModalMikroandBakteri').modal('show');
		});
		$("#btnaddnewbakteri").click(function() {
			$("#mb_id").val('new');
			$("#mb_kelompok").val('biakankultur');
			$('#ModalMikroandBakteri').modal('show');
		});
		$("#btnsimpanfoto").click(function(){
			var filegambar 	= 	document.getElementById('upload_file');
			$('#modalupdatefoto').modal('hide');
			var form_data 	= 	new FormData();
				form_data.append('file', filegambar.files[0]);
				form_data.append('_token', '{{csrf_token()}}');
				$.ajax({
					url: '{{ url("template/uploadkop") }}',
					data: form_data,
					type: 'POST',
					contentType: false,
					processData: false,
					success: function (data) {
						var status  = data.status;
						var message = data.message;
						if (status == 'Failed'){
							swal({
								title: status,
								text: message,
								type: 'warning',
							})
						}else {
							$("html, body").animate({ scrollTop: 0 }, "slow");
							$.toast({
								heading: status,
								text: message,
								position: 'top-right',
								loaderBg: '#5ba035',
								icon: 'success',
								hideAfter: 15000,
								stack: 1
							});
						}
						return false;
					},
					error: function (xhr, status, error) {
						swal({
							title: status,
							text: error,
							type: 'warning',
						})
					}
				});
		});
		$('#divtambahdata').hide();
		$('#divawal').hide();
		$("#btnkembali").click(function() {
			$('#divtambahdata').hide();
			$('#divawal').show();
		});
		var sourcekategori = {
			datatype: "json",
			datafields: [
				{ name: 'id'},
				{ name: 'jawaban', type: 'text'}
			],
			updaterow: function (rowid, rowdata, commit) {
			commit(true);
			},
			url: '{{ route("getListJawaban") }}',
			cache: false
		};      
		var dataAdaptercat = new $.jqx.dataAdapter(sourcekategori);
		$("#gridkategori").jqxGrid({
			width: '100%',
			enablebrowserselection: true,
			filterable: true,
			showfilterrow: true,
			pageable: false,
			autoheight: true,
			source: dataAdaptercat,
			theme: "energyblue",
			selectionmode: 'multiplecellsextended',
			columns: [
				{ text: 'Category', datafield: 'jawaban', width: '52%', align: 'center', cellsalign: 'left'},
				{ text: 'Detail', sortable: false, filterable: false, columntype: 'button', width: '15%', align: 'center', cellsrenderer: function () {
					return "Detail";
					}, buttonclick: function (row) {
						editrow 		= row;
						var offset 		= $("#gridkategori").offset();
						var dataRecord 	= $("#gridkategori").jqxGrid('getrowdata', editrow);
						var set01		= dataRecord.id;
						var set02		= dataRecord.jawaban;
						$("#id_idkategori").val(set01);
						var token       = document.getElementById('token').value;
						var source = {
							datatype: "json",
							datafields: [
								{ name: 'id'},
								{ name: 'kategori', type: 'text'},
								{ name: 'judul', type: 'text'},
								{ name: 'isine', type: 'text'},
								{ name: 'kesimpulan', type: 'text'},
							],
							type: 'POST',
							data: {val01:set01, val02:set02, _token: token},
							url: '{{ route("getListSubjawaban") }}'
						};
						$('#divawal').show();
						var dataAdapter = new $.jqx.dataAdapter(source);	
						$("#griddetail").jqxGrid({
							width: '100%',
							enablebrowserselection: true,
							filterable: true,
							showfilterrow: true,
							autoheight: true,
							pageable: false,
							source: dataAdapter,
							columnsresize: true,
							theme: "energyblue",
							selectionmode: 'multiplecellsextended',
							columns: [
								{ text: 'Category', sortable: false, filterable: false, datafield: 'kategori', width: '20%', cellsalign: 'left', align: 'center'  },
								{ text: 'Title', datafield: 'judul', width: '60%', cellsalign: 'left', align: 'center'  },
								{ text: 'Add/Edit', sortable: false, filterable: false, columntype: 'button', align: 'center', width: '10%', cellsrenderer: function () {
									return "Add/Edit";
									}, buttonclick: function (row) {        
										editrowruangan = row;   
										var offset      = $("#griddetail").offset();       
										var dataRecord  = $("#griddetail").jqxGrid('getrowdata', editrowruangan);
										var cek			= dataRecord.id;
										if (cek == 'gakboleh'){
											swal({
											title: 'Not Allowed',
											text: "Please The Category First!",
											type: 'warning',
											})
										} else if (cek == 'new'){
											$("#id_idjawaban").val(dataRecord.id);
											$("#id_judul").val('');
											CKEDITOR.instances['id_jawaban'].setData('')
											CKEDITOR.instances['id_kesimpulan'].setData('')
											$('#divtambahdata').show();
											$('#divawal').hide();
										} else {
											$("#id_idjawaban").val(dataRecord.id);
											$("#id_judul").val(dataRecord.judul);
											CKEDITOR.instances['id_jawaban'].setData(dataRecord.isine)
											CKEDITOR.instances['id_kesimpulan'].setData(dataRecord.kesimpulan)
											$('#divtambahdata').show();
											$('#divawal').hide();
										}
									}
								},   
								{ text: 'Delete', sortable: false, filterable: false, columntype: 'button', align: 'center', width: '10%', cellsrenderer: function () {
									return "Delete";
									}, buttonclick: function (row) {        
										editrow         = row;   
										var offset      = $("#griddetail").offset();       
										var dataRecord  = $("#griddetail").jqxGrid('getrowdata', editrow);                      
										var goook       = dataRecord.id;
										var token       = document.getElementById('token').value;
										swal({
											title: 'Are you sure?',
											text: "Do you realy want to delete this data!",
											type: 'warning',
											showCancelButton: true,
											confirmButtonClass: 'btn btn-confirm mt-2',
											cancelButtonClass: 'btn btn-cancel ml-2 mt-2',
											confirmButtonText: 'Yes, delete it!'
										}).then(function () {
											swal({
												title: 'Deleted !',
												text: "Your Data has been deleted",
												type: 'success',
												confirmButtonClass: 'btn btn-confirm mt-2'
											})
											$.post('{{ route("deleteSubjawaban") }}', { id: goook, _token: token },
											function(data){ 
												$("#griddetail").jqxGrid('updatebounddata');
												return false;
											}); 
										})                
									}
								},
							],
						});
					}
				},
				{ text: 'Add/Edit', sortable: false, filterable: false, columntype: 'button', align: 'center', width: '18%', cellsrenderer: function () {
					return "Add/Edit";
					}, buttonclick: function (row) {
						editrowpoli 	= row;   
						var offset      = $("#gridkategori").offset();       
						var dataRecord  = $("#gridkategori").jqxGrid('getrowdata', editrowpoli);
						var cek			= dataRecord.id;
						if (cek == 'new'){
							var jawaban = '';
						}
						else {
							var jawaban = dataRecord.jawaban;
						}
						$("#id_idkategori").val(dataRecord.id);
						$("#id_kategori").val(jawaban);
						$('#ModalKategori').modal('show');
					}
				},   
				{ text: 'Delete', sortable: false, filterable: false, columntype: 'button', align: 'center', width: '15%', cellsrenderer: function () {
					return "Delete";
					}, buttonclick: function (row) {
						editrow         = row;   
						var offset      = $("#gridkategori").offset();       
						var dataRecord  = $("#gridkategori").jqxGrid('getrowdata', editrow);                      
						var goook       = dataRecord.id;
						if (goook == 'new'){
							swal({
								title: 'Not Deleteable Data!',
								type: 'warning',
							})
						}
						else {
							var token = document.getElementById('token').value;
							swal({
								title: 'Are you sure?',
								text: "Do you realy want to delete this data!",
								type: 'warning',
								showCancelButton: true,
								confirmButtonClass: 'btn btn-confirm mt-2',
								cancelButtonClass: 'btn btn-cancel ml-2 mt-2',
								confirmButtonText: 'Yes, delete it!'
							}).then(function () {
								swal({
									title: 'Deleted !',
									text: "Your Data has been deleted",
									type: 'success',
									confirmButtonClass: 'btn btn-confirm mt-2'
								})
								$.post('{{ route("deleteJawaban") }}', { id: goook, _token: token },function(data){
									$("#gridkategori").jqxGrid('updatebounddata'); 
									return false;
								}); 
							})
						}
					}
				},
			]
		});
		$("#btnAddKategori").click(function(){
			var set01 = document.getElementById('id_kategori').value;
			var set02 = document.getElementById('id_idkategori').value;
			var token = document.getElementById('token').value;
			$.post('{{ route("updateJawaban") }}', { val01: set01, val02: set02, _token: token },
			function(data){
				var status  = data.status;
				var message = data.message;
				$.toast({
					heading: status,
					text: message,
					position: 'top-right',
					loaderBg: '#bf441d',
					icon: 'info',
					hideAfter: 5000,
					stack: 1
				});
				$('#ModalKategori').modal('hide');
				$("#gridkategori").jqxGrid('updatebounddata');
				return false;
			});
		});
		$("#btnAddDetail").click(function(){
			var set01 = document.getElementById('id_idkategori').value;
			var set02 = document.getElementById('id_idjawaban').value;
			var set03 = document.getElementById('id_judul').value;
			var set04 = CKEDITOR.instances['id_jawaban'].getData()
			var set05 = CKEDITOR.instances['id_kesimpulan'].getData()
			var token = document.getElementById('token').value;
			$.post('{{ route("updateSubjawaban") }}', { val01: set01, val02: set02, val03: set03, val04: set04, val05: set05, _token: token },
			function(data){
				var status  = data.status;
				var message = data.message;
				$.toast({
					heading: status,
					text: message,
					position: 'top-right',
					loaderBg: '#bf441d',
					icon: 'info',
					hideAfter: 5000,
					stack: 1
				});
				$('#divtambahdata').hide();
				$('#divawal').show();
				$("#griddetail").jqxGrid('updatebounddata');
				return false;
			});
		});
	});
</script>
@endpush