@extends('base.layout')

@section('content')
<div class="wrapper">
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-12">
				<div class="card-box ribbon-box">
					<div class="ribbon ribbon-danger">SIR Ab</div>
					<p></p>
					<div class="card-body">
						<button type="button" class="btn btn-light waves-effect" id="btnaddnewsirab">
							<i class="mdi mdi-briefcase-plus mr-1"></i> Add New
						</button>
					</div>
					<div class="card-footer">
						<div id="gridviralload"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="modalsirab" 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 SIR Ab</h4>
				</div>
				<div class="modal-body">
					<div class="form-group m-b-25">
						<div class="col-12">
							<label>Family</label>
							<input type="text" class="form-control" id="family">
						</div>
						<div class="col-12">
							<label>Spesies</label>
							<input type="text" class="form-control" id="spesies">
						</div>
						<div class="col-12">
							<label>Antibiotik</label>
							<input type="text" class="form-control" id="antibiotik">
						</div>
						<div class="col-12">
							<label>Sub Antibiotik</label>
							<input type="text" class="form-control" id="subantibiotik">
						</div>
						<div class="form-row">
							<div class="col-lg-3">
								<label>Disc</label>
								<input type="text" class="form-control" id="diskcontent">
							</div>
							<div class="col-lg-3">
								<label>S</label>
								<input type="text" class="form-control" id="batasatas">
							</div>
							<div class="col-lg-3">
								<label>I</label>
								<input type="text" class="form-control" id="midrange">
							</div>
							<div class="col-lg-3">
								<label>R</label>
								<input type="text" class="form-control" id="batasbawah">
							</div>
							<div class="col-lg-6">
								<label>Sumber</label>
								<input type="text" class="form-control" id="sumber">
							</div>
							<div class="col-lg-3">
								<label>ATU</label>
								<input type="text" class="form-control" id="atu">
							</div>
							<div class="col-lg-3">
								<label>Groub</label>
								<input type="text" class="form-control" id="kelompok">
							</div>
						</div>
					</div>
					<div class="form-group account-btn text-center m-t-10">
						<div class="col-12">
							<input type="hidden" class="form-control" id="id">
							<button class="btn w-lg btn-custom waves-effect waves-light" id="btnAddSirab" type="button">Save</button>
						</div>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div>
</div>
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
@endsection

@push('script')
<script type="text/javascript">
	function openedpage( jQuery ){
		var token	= document.getElementById('token').value;
		var sourcesirab 	= {
			datatype: "json",
			datafields: [
				{ name: 'id',type: 'text'},
				{ name: 'family',type: 'text'},
				{ name: 'spesies',type: 'text'},
				{ name: 'antibiotik',type: 'text'},
				{ name: 'subantibiotik',type: 'text'},
				{ name: 'diskcontent',type: 'text'},
				{ name: 'batasatas',type: 'text'},
				{ name: 'midrange',type: 'text'},
				{ name: 'batasbawah',type: 'text'},
				{ name: 'sumber',type: 'text'},
				{ name: 'kodedok',type: 'text'},
				{ name: 'atu',type: 'text'},
				{ name: 'kelompok',type: 'text'},
			],
			type: 'POST',
			data: {	val01:'sirab', _token: token },
			url: '{{ route("getriwayat") }}',
		};
		var jsonSirab 		= new $.jqx.dataAdapter(sourcesirab);
		$("#gridviralload").jqxGrid({
			width					: '100%',
			showfilterrow			: true,
			filterable				: true,
			source					: jsonSirab,
			columnsresize			: true,
			theme					: "energyblue",
			autoheight				: true,
			pageable				: true,
			altrows					: true,
			selectionmode			: 'multiplecellsextended',
			columns					: [
				{ text: 'Edit', filterable: false, columntype: 'button', cellsalign: 'center', align: 'center', width: '4%', cellsrenderer: function () {
					return "Edit";
					}, buttonclick: function (row) {
						editrowpoli 	= row;
						var offset      = $("#gridviralload").offset();       
						var dataRecord  = $("#gridviralload").jqxGrid('getrowdata', editrowpoli);
						$("#id").val(dataRecord.id);
						$("#family").val(dataRecord.family);
						$("#spesies").val(dataRecord.spesies);
						$("#antibiotik").val(dataRecord.antibiotik);
						$("#subantibiotik").val(dataRecord.subantibiotik);
						$("#diskcontent").val(dataRecord.diskcontent);
						$("#batasatas").val(dataRecord.batasatas);
						$("#midrange").val(dataRecord.midrange);
						$("#batasbawah").val(dataRecord.batasbawah);
						$("#sumber").val(dataRecord.sumber);
						$("#atu").val(dataRecord.atu);
						$("#kelompok").val(dataRecord.kelompok);
						$('#modalsirab').modal('show');
					}
				},
				{ text: 'Family', datafield: 'family', width: '10%', cellsalign: 'left', align: 'center' },
				{ text: 'Spesies', datafield: 'spesies', width: '20%', cellsalign: 'left', align: 'center' },
				{ text: 'Antibiotik', datafield: 'antibiotik', width: '13%', cellsalign: 'left', align: 'center' },
				{ text: 'Sub', datafield: 'subantibiotik', width: '11%', cellsalign: 'left', align: 'center' },
				{ text: 'Disk Content', datafield: 'diskcontent', width: '7%', cellsalign: 'left', align: 'center' },
				{ text: 'S', datafield: 'batasatas', width: '5%', cellsalign: 'center', align: 'center' },
				{ text: 'I', datafield: 'midrange', width: '5%', cellsalign: 'center', align: 'center' },
				{ text: 'R', datafield: 'batasbawah', width: '5%', cellsalign: 'center', align: 'center' },
				{ text: 'Contributor', datafield: 'kodedok', width: '6%', cellsalign: 'center', align: 'center' },
				{ text: 'ATU', datafield: 'atu', width: '5%', cellsalign: 'center', align: 'center' },
				{ text: 'Groub', datafield: 'kelompok', width: '5%', cellsalign: 'center', align: 'center' },
				{ text: 'Del', editable: false, sortable: false, filterable: false, columntype: 'button', width: '4%', cellsrenderer: function () {
					return "Del";
					}, buttonclick: function (row) {	
						editrow = row;	
						var offset 		= $("#gridviralload").offset();		
						var dataRecord 	= $("#gridviralload").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: 'sirab', 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
								});
								$("#gridviralload").jqxGrid('updatebounddata', 'filter');
								return false;
							});
						});
					}
				},
			]
		});
	}
	$(window).on('load', function () {
		openedpage();
	});
	$(document).ready(function() {
		$("#btnAddSirab").click(function(){
			var set01 = document.getElementById('family').value;
			var set02 = document.getElementById('spesies').value;
			var set03 = document.getElementById('antibiotik').value;
			var set04 = document.getElementById('subantibiotik').value;
			var set05 = document.getElementById('diskcontent').value;
			var set06 = document.getElementById('batasatas').value;
			var set07 = document.getElementById('midrange').value;
			var set08 = document.getElementById('batasbawah').value;
			var set09 = document.getElementById('sumber').value;
			var set10 = document.getElementById('atu').value;
			var set11 = document.getElementById('kelompok').value;
			var set12 = document.getElementById('id').value;
			if (set01 == '' || set02 == '' || set03 == ''){
				swal({
					title	: 'Mohon diLengkapi',
					text	: 'Data Dasar Seperti Family, Spesies dan Antibiotik Wajib di Isi',
					type	: 'warning',
				});
			} else {
				$('#modalsirab').modal('hide');
				var form_data 	= 	new FormData();
					form_data.append('family', set01);
					form_data.append('spesies', set02);
					form_data.append('antibiotik', set03);
					form_data.append('subantibiotik', set04);
					form_data.append('diskcontent', set05);
					form_data.append('batasatas', set06);
					form_data.append('midrange', set07);
					form_data.append('batasbawah', set08);
					form_data.append('sumber', set09);
					form_data.append('atu', set10);
					form_data.append('kelompok', set11);
					form_data.append('id', set12);
                    form_data.append('tabel', 'SIRAB');
					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
						});
                        $("#gridviralload").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',
						})
					}
				});
			}
			
		});
		$("#btnaddnewsirab").click(function() {
			$("#id").val('new');
			$('#modalsirab').modal('show');
		});
	});
</script>
@endpush