@extends('base.layout')

@section('content')
	<div class="wrapper">
		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-12">
					<div class="card-box ribbon-box">
						<div class="ribbon ribbon-primary">Patient List</div>
						<p class="m-b-0"></p>
						<div class="form-row">
							<div class="form-group col-lg-4">
								<button type="button" class="btn btn-custom waves-light waves-effect" data-toggle="modal" data-target="#addModal">Add New Patient Data</button>
							</div>
							<div class="form-group col-lg-4">
								<input type="text" id="getnorm" name="getnorm" class="form-control">
							</div>
							<div class="form-group col-lg-4">
								<button type="button" class="btn btn-success pull-left" id="btnimport">Import Data Pasien By No.RM</button>
							</div>
						</div>
						<div id="gridk1"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="addModal" 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">Form Add New Patient</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" action="{{ url('pasien/store') }}" method="POST">
					{{ csrf_field() }}
						<div class="form-group m-b-25">
							<div class="col-4">
								<label>No.RM</label>
								<input class="form-control" type="text" name="norm">
							</div>
							<div class="col-8">
								<label>Name</label>
								<input class="form-control" type="text" name="nama" required="">
							</div>
						</div>
						<div class="form-group m-b-25">
							<div class="col-12">
								<label>Gender</label>
								<div class="radio">
									<input type="radio" name="jk" id="radio1" value="L">
									<label for="radio1">Laki-laki</label>&ensp;
									<input type="radio" name="jk" id="radio2" value="P">
									<label for="radio2">Perempuan</label>
								</div>
							</div>
						</div>
						<div class="form-group m-b-25">
							<div class="col-12">
								<label>Birth Date</label>
								<div class="input-group">
									<input type="text" name="tgl_lahir" class="form-control" placeholder="yyyy-mm-dd" id="tgl_lahir">
									<div class="input-group-append">
										<span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group m-b-25">
							<div class="col-12">
								<label>City</label>
								<input class="form-control" type="text" name="kota" required="">
							</div>
						</div>
						<div class="form-group m-b-25">
							<div class="col-12">
								<label>Origin Address</label>
								<textarea class="form-control" name="alamat" rows="5"></textarea>
							</div>
						</div>
						<div class="form-group m-b-25">
							<div class="col-12">
								<label>Phone</label>
								<input class="form-control" type="text" id="telpon" name="telpon" required="">
							</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" type="submit">Save</button>
							</div>
						</div>
					</form>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div>
	<div id="updateModal" 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">Update Patient Data</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" action="{{ url('pasien/update') }}" method="POST">
					{{ csrf_field() }}
						<div class="form-group m-b-25">
							<div class="col-lg-4">
								<label>No.RM</label>
								<input class="form-control" type="text" id="id_norm" name="norm">
							</div>
							<div class="col-lg-8">
								<label>Name</label>
								<input class="form-control" type="text" id="id_nama" name="nama" required="" >
							</div>
						</div>
						<div class="form-group m-b-25">
							<div class="col-lg-12">
								<label>Gender</label>
								<div class="radio">
									<input type="radio" name="jk" id="radio3" value="L">
									<label for="radio3">Laki-laki</label>&ensp;
									<input type="radio" name="jk" id="radio4" value="P">
									<label for="radio4">Perempuan</label>
								</div>
							</div>
						</div>
						<div class="form-group m-b-25">
							<div class="col-lg-12">
								<label>Birth Date</label>
								<div class="input-group">
									<input type="text" class="form-control" name="tgl_lahir" placeholder="yyyy-mm-dd" id="id_tgl">
										<div class="input-group-append">
											<span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
										</div>
								</div>
							</div>
						</div>
						<div class="form-group m-b-25">
							<div class="col-lg-12">
								<label>City</label>
								<input class="form-control" type="text" id="id_kota" name="kota" required="">
							</div>
						</div>
						<div class="form-group m-b-25">
							<div class="col-lg-12">
								<label>Origin Address</label>
								<textarea class="form-control" id="id_alamat" name="alamat" rows="5"></textarea>
							</div>
						</div>
						<div class="form-group m-b-25">
							<div class="col-lg-12">
								<label>Phone</label>
								<input class="form-control" type="text" id="id_telpon" name="telpon" required="">
							</div>
						</div>
						<input type="hidden" name="id_pasien" id="id_pasien">
						<div class="form-group account-btn text-center m-t-10">
							<div class="col-lg-12">
								<button class="btn w-lg btn-custom waves-effect waves-light" type="submit">Update</button>
							</div>
						</div>
					</form>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div>
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
@endsection

@push('script')
<script type="text/javascript">
    $(document).ready(function() {
		$("#tgl_lahir").datepicker({format: 'yyyy-mm-dd'});
		$("#id_tgl").datepicker({format: 'yyyy-mm-dd'});
		$("#btnimport").click(function(){
			var val01	= document.getElementById('getnorm').value;
			$.post('{{ route("getnamebyrm") }}', { id: val01, _token: "{{ csrf_token() }}" },
			function(data){
				$("#id_pasien").val(data.id);
				$("#id_tgl").val(data.tgl);
				$("#id_kota").val(data.kota);
				$("#id_alamat").val(data.alamt);
				$("#id_telpon").val(data.telpon);
				$("#id_nama").val(data.nama);
				$("#id_norm").val(data.norm);
				var jk  = data.jk;
				if (jk == 'L') {
					document.getElementById("radio3").checked = true;
				} else {
					document.getElementById("radio4").checked = true;
				}
				$("#updateModal").modal('show'); 
				return false;
			});
		});
        var source = {
			datatype: "json",
			datafields: [
				{ name: 'id'},
				{ name: 'nama', type: 'text'},
				{ name: 'norm', type: 'text'},
				{ name: 'alamat', type: 'text'},
				{ name: 'kota', type: 'text'},
				{ name: 'jk', type: 'text'},
				{ name: 'tgl_lahir', type: 'text'},
				{ name: 'telpon', type: 'text'},
				{ name: 'keterangan', type: 'text'},
			],
			type		: 'GET',
			url			: '{{ route("getPatienalllist") }}',
		};
		var dataAdapter = new $.jqx.dataAdapter(source);
		$("#gridk1").jqxGrid({
			width			: '100%',
			filterable		: true,
			pageable		: true,
			autoheight		: true,
			showfilterrow	: true,
			source			: dataAdapter,
			columnsresize	: true,
			pagesizeoptions	: ['10', '20', '30', '50', '100'],
			columns: [
				{ text: 'Edit', editable: false, sortable: false, filterable: false, columntype: 'button', width: '5%', cellsrenderer: function () {
					return "Edit";
					}, buttonclick: function (row) {
						editrow = row;	
						var offset 		= $("#gridk1").offset();
						var dataRecord 	= $("#gridk1").jqxGrid('getrowdata', editrow);
						var id  	=   dataRecord.id;
						var norm  	=   dataRecord.norm;
						var nama  	=   dataRecord.nama;
						var jk  	=   dataRecord.jk;
						var tgl  	=   dataRecord.tgl_lahir;
						var kota  	=   dataRecord.kota;
						var alamt  	=   dataRecord.alamat;
						var telpon 	=   dataRecord.telpon;
						$("#id_pasien").val(id);
						$("#id_tgl").val(tgl);
						$("#id_kota").val(kota);
						$("#id_alamat").val(alamt);
						$("#id_telpon").val(telpon);
						$("#id_nama").val(nama);
						$("#id_norm").val(norm);
						if (jk == 'L') {
							document.getElementById("radio3").checked = true;
						} else {
							document.getElementById("radio4").checked = true;
						}
						$("#updateModal").modal('show'); 
					}
				},
				{ text: 'Nama', datafield: 'nama', width: '20%', cellsalign: 'left', align: 'center'  },
				{ text: 'No.RM', datafield: 'norm', width: '15%', cellsalign: 'left', align: 'center'  },
				{ text: 'Alamat', datafield: 'alamat', width: '10%', align: 'center', cellsalign: 'left'},
				{ text: 'Kota', filtertype: 'checkedlist', datafield: 'kota', width: '15%', cellsalign: 'left', align: 'center' },
				{ text: 'Telpon', datafield: 'telpon', width: '15%', cellsalign: 'left', align: 'center' },
				{ text: 'Keterangan', datafield: 'keterangan', width: '15%', cellsalign: 'left', align: 'center' },
				{ text: 'Delete', editable: false, sortable: false, filterable: false, columntype: 'button', width: '5%', cellsrenderer: function () {
					return "Delete";
					}, buttonclick: function (row) {	
						editrow = row;	
						var offset 		= $("#gridk1").offset();		
						var dataRecord 	= $("#gridk1").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 set01		= dataRecord.id;
							var token   	= document.getElementById('token').value;		
							$.post('{{ route("deletePasien") }}', { pasien_id: set01, _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
									});
									$("#gridk1").jqxGrid('updatebounddata', 'filter');
									return false;
							});
						});
					}
				},
			]
		});
    });
</script>
@endpush