@extends('base.layout')

@section('content')
<div class="wrapper">
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-12">
				<div class="page-title-box">
					<div class="btn-group pull-right">
						<ol class="breadcrumb hide-phone p-0 m-0">
							<li class="breadcrumb-item active">Profile</li>
						</ol>
					</div>
					<h4 class="page-title">Profile</h4>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12">
				<!-- meta -->
				<div class="profile-user-box card-box bg-custom">
					<div class="row">
						<div class="col-sm-6">
							<span class="pull-left mr-3">
							<a href="#" class="btnubahfoto">
								<img src="{{ Session('photo') }}" alt="" class="thumb-lg rounded-circle">
							</a>
							</span>
							<div class="media-body text-white">
								<h4 class="mt-1 mb-1 font-18">{{ Session('nama') }}</h4>
								<p class="font-13 text-light">{{ Session('previlage') }}</p>
								<p class="text-light mb-0">{{ config('global.Title') }} | {{ config('global.namaapps') }}</p>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="text-right">
								<button type="button" class="btn btn-light waves-effect" id="btneditprofile">
									<i class="mdi mdi-account-settings-variant mr-1"></i> Edit Password
								</button>
								<button type="button" class="btn btn-light waves-effect btnubahfoto">
									<i class="mdi mdi-account-settings-variant mr-1"></i> Change Profile Picture
								</button>
							</div>
						</div>
					</div>
				</div>
				<!--/ meta -->
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				
				<button type="button" class="btn btn-block btn-danger" id="btnopencreator">Change Signature</button>
				<div id="templatettd">
					<div class="card-box ribbon-box">
						<div class="ribbon ribbon-primary">Signature</div>
						<div class="clearfix"></div>
						<div class="small-box bg-green">
							<div class="inner">
							  <img src="{{ $tandatangan }}" width="100%" id="preview"/>
							</div>
						</div>
					</div>
				</div>
				<div id="buattemplatettd">
					<div class="card-box ribbon-box">
						<div class="ribbon ribbon-primary">Create New Signature</div>
						<p class="m-b-0"></p>
						<div class="form-group kotakttd">
							<canvas id="signature-pad" class="signature-pad" width=320 height=200></canvas>
							<canvas id="signature-blank" width=320 height=200 style='display:none'></canvas>
							<img src="{{ asset('boxed-bg.jpg') }}" width=320 height=200 />	
						</div>
						<div class="form-row">
							<div class="form-group col-md-6">
								<button id="btnclearttd" class="btn btn-danger">Clear</button>
								<button id="btnkembali" class="btn btn-warning">Cancel</button>
							</div>
							<div class="form-group col-md-4">
								<button id="btnsimpanttd" class="btn btn-primary">Save</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-8">
				<div class="row">
					<div class="col-sm-4">
						<div class="card-box bg-primary widget-flat border-info text-white">
                            <i class="icon-layers"></i>
                            <h3 class="m-b-10">{{ $totalppds }}</h3>
                            PPDS<br />
							<a href="{{ url('user') }}"><span class="badge badge-info pull-right"> List All</span></a>
                        </div>
					</div><!-- end col -->
					<div class="col-sm-4">
						<div class="card-box bg-success widget-flat border-info text-white">
                            <i class="icon-paypal"></i>
                            <h3 class="m-b-10">{{ $butuhverifikasi }}</h3>
                            Butuh Verifikasi<br />
							<a href="{{ url('reportppds') }}"><span class="badge badge-danger pull-right"> Halaman Verifikasi</span></a>
                        </div>
					</div><!-- end col -->
					<div class="col-sm-4">
						<div class="card-box bg-danger widget-flat border-info text-white">
                            <i class="icon-rocket"></i>
                            <h3 class="m-b-10">{{ $antrian }}</h3>
                            Antrian Hari Ini<br />
							<span class="text-white pull-right"> Dari Kemarin</span> <span class="badge badge-primary pull-right"> {{$persenantrian}} </span> 
                        </div>
					</div><!-- end col -->
				</div>				
				<div class="card-box">
					<h4 class="header-title mb-3">Early Warning Sistem</h4>
					<div class="table-responsive">
						<table class="table table-bordered table-striped table-sm">
							<thead>
								<tr>
									<th style="width: 70px;">No</th>
									<th>Subpoli</th>
									<th style="width: 180px;">Jumlah Warning</th>
									<th style="width: 160px;">Aksi</th>
								</tr>
							</thead>
							<tbody>
								@forelse($earlyWarningGroups as $i => $group)
									<tr>
										<td>{{ $i + 1 }}</td>
										<td>
											<strong>{{ $group['subpoli'] }}</strong>
										</td>
										<td><span class="badge badge-danger">{{ $group['total'] }} kasus</span></td>
										<td>
											<button class="btn btn-sm btn-info" type="button" data-toggle="collapse" data-target="#ews-group-{{ $i }}" aria-expanded="false" aria-controls="ews-group-{{ $i }}">
												Lihat Detail
											</button>
										</td>
									</tr>
									<tr class="collapse" id="ews-group-{{ $i }}">
										<td colspan="4">
											<div class="table-responsive">
												<table class="table table-bordered table-striped table-sm mb-0">
													<thead>
														<tr>
															<th>No</th>
															<th>No.Sample</th>
															<th>No.RM</th>
															<th>Nama</th>
															<th>Order</th>
															<th>Asal Pasien</th>
															<th>Status</th>
															<th>Daftar</th>
														<th>Target (Hari)</th>
														<th>Estimasi Selesai</th>
														<th>Warning</th>
														<th>Aksi</th>
													</tr>
												</thead>
												<tbody>
													@foreach($group['items'] as $j => $row)
														<tr>
																<td>{{ $j + 1 }}</td>
																<td>{{ $row['nofoto'] }}</td>
																<td>{{ $row['noregister'] }}</td>
																<td>{{ $row['nmpasien'] }}</td>
																<td>{{ $row['reques'] }}</td>
																<td>{{ $row['asalpasien'] }}</td>
																<td>{{ $row['status'] }}</td>
																<td>{{ $row['daftar'] }}</td>
																<td>{{ $row['target_hari'] }}</td>
																<td>{{ $row['target_selesai'] }}</td>
																<td>
																@if($row['sisa_menit'] <= 0)
																	<span class="badge badge-danger">{{ $row['warning_label'] }}</span>
																@else
																	<span class="badge badge-warning">{{ $row['warning_label'] }} ({{ $row['sisa_menit'] }} menit)</span>
																@endif
															</td>
															<td>
																<a href="{{ route('mikro.expertise', ['periksa' => $row['id'], 'return_to' => 'dashboard']) }}" class="btn btn-sm btn-primary">
																	Expertise
																</a>
																<button
																	type="button"
																	class="btn btn-sm btn-danger btn-ews-cancel"
																	data-id="{{ $row['id'] }}"
																	data-reques="{{ $row['reques'] }}"
																	data-nmpasien="{{ $row['nmpasien'] }}"
																	data-daftar="{{ $row['daftar'] }}"
																	data-nofoto="{{ $row['nofoto'] }}"
																	data-status="{{ $row['status'] }}"
																>
																	Batalkan
																</button>
															</td>
														</tr>
													@endforeach
												</tbody>
												</table>
											</div>
										</td>
									</tr>
								@empty
									<tr>
										<td colspan="4" class="text-center">Tidak ada data Early Warning.</td>
									</tr>
								@endforelse
							</tbody>
						</table>
					</div>
				</div>

			</div>
			<!-- end col -->

		</div>
	</div> <!-- end container -->
</div>
<!-- TOKEN -->
<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 User Data</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" action="{{ url('user/update') }}" method="POST">
				{{ csrf_field() }}
					<div class="form-group m-b-25">
						<div class="form-group m-b-25">
							<div class="col-12">
								<label>Username</label>
								<input class="form-control" type="text" value="{{ Session('username')}}" name="username" readonly>
							</div>
						</div>
						<div class="col-12">
							<label>Name</label>
							<input class="form-control" type="text" value="{{ Session('nama')}}" name="nama" required="">
						</div>
					</div>
					<div class="form-group m-b-25">
						<div class="col-12">
							<label>New Password</label>
							<input class="form-control" type="password" name="password">
						</div>
					</div>
					<div class="form-group m-b-25">
						<div class="col-12">
							<label>Repeat Password</label>
							<input class="form-control" type="password" name="password_confirmation">
						</div>
					</div>
					<div class="form-group account-btn text-center m-t-10">
						<span class="badge badge-danger">Untuk melihat perubahan setelah update data,silahkan relogin</span>
					</div>
					<input type="hidden" name="id_user" value="{{ Session('id')}}">
					<input type="hidden" name="previlage" value="{{ Session('previlage')}}">
					<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">Update</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 Foto Anda</h4>
			</div>
			<div class="modal-body">
				<div class="form-group m-b-0">
					<p class="mb-2 mt-4 font-weight-bold">Select Your Photo Profile</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 relogin</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>
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
<style>
	.kotakttd {
		position: relative;
		width: 320px;
		height: 200px;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.signature-pad {
		position: absolute;
		left: 0;
		top: 0;
		width:320px;
		height:200px;
	}
</style>
@endsection
@push('script')
<!-- SIGNATURE PAD -->
<script src="{{ asset('plugins/signature_pad/signature_pad.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#buattemplatettd').hide();
	$('#templatettd').show();
	$("#btnopencreator").click(function() {
        $('#templatettd').hide();
		$('#buattemplatettd').show();
    });
	$("#btnkembali").click(function() {
        $('#templatettd').show();
		$('#buattemplatettd').hide();
    });
	$('#btnclearttd').click(function () {
		signaturePad.clear();
	});
	var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
		backgroundColor: 'rgba(0, 0, 0, 0)',
		penColor: 'rgb(0, 0, 0)'
	});
	$('#btnsimpanttd').click(function () {
		var set01 	= signaturePad.toDataURL('image/png');
		if (set01 == document.getElementById('signature-blank').toDataURL()){ set01 = ''; }
		var token   = document.getElementById('token').value;
		$.post('{{ route("exTtd") }}',  { val01: 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
			});
			signaturePad.clear();
			$('#templatettd').show();
			$('#buattemplatettd').hide();
			if (set01 == ''){
				$('#preview').attr('src', 'boxed-bg.jpg');
			} else {
				$('#preview').attr('src', set01);
			}
			return false;
		});
	});
	$("#btneditprofile").click(function() {
        $('#updateModal').modal('show');
    });
	$(".btnubahfoto").click(function() {
        $('#modalupdatefoto').modal('show');
    });
	$(document).on('click', '.btn-ews-cancel', function () {
		var button = $(this);
		var id = button.data('id');
		var reques = button.data('reques') || '-';
		var nmpasien = button.data('nmpasien') || '-';
		var daftar = button.data('daftar') || '-';
		var nofoto = button.data('nofoto') || '-';
		var statusAwal = button.data('status') || '-';
		swal({
			title: 'Konfirmasi Pembatalan',
			text: 'Apakah anda yakin merubah status untuk pemeriksaan ' + reques + ' untuk nama ' + nmpasien + ' yang di order pada ' + daftar + ' dengan accession number ' + nofoto + ' dengan status awal ' + statusAwal + ' ?',
			type: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#d33',
			confirmButtonText: 'Ya, batalkan',
			cancelButtonText: 'Tidak'
		}).then(function(result) {
			var confirmed = false;
			if (typeof result === 'boolean') {
				confirmed = result;
			} else if (result) {
				confirmed = !!(result.value || result.isConfirmed);
			}
			if (!confirmed) return;

			button.prop('disabled', true);
			$.post('{{ url("dashboard/early-warning") }}/' + id + '/cancel', { _token: '{{ csrf_token() }}' }, function (data) {
				swal({
					title: data.status || 'Sukses',
					text: data.message || 'Status berhasil diperbarui.',
					type: 'success',
				}).then(function () {
					window.location.reload();
				});
			}).fail(function (xhr) {
				var response = xhr.responseJSON || {};
				swal({
					title: response.status || 'Gagal',
					text: response.message || 'Tidak dapat memperbarui status pemeriksaan.',
					type: 'error',
				});
			}).always(function () {
				button.prop('disabled', false);
			});
		});
	});
	$("#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("user/updatefoto") }}',
			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',
				})
			}
		});
	});
});
</script>
@endpush
