@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="#" id="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>
							</div>
						</div>
					</div>
				</div>
				<!--/ meta -->
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="row">
					<div class="col-sm-2">
						<div class="card-box bg-primary widget-flat border-info text-white">
                            <i class="icon-layers"></i>
                            <h3 class="m-b-10">{{ $totalkasus }}</h3>
                            Total Kasus
                        </div>
					</div>
				</div>
			</div>
			<div class="col-md-12">
				<div class="card-box ribbon-box">
					<div class="ribbon ribbon-primary">Kalender</div>
					<div class="clearfix"></div>
					<div class="inbox-widget">
						<div id="gridjadwal"></div>
					</div>
				</div>
			</div>
		</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() }}">
@endsection

@push('script')
<script type="text/javascript">
$(document).ready(function() {
	$("#btneditprofile").click(function() {
        $('#updateModal').modal('show');
    });
	$("#btnubahfoto").click(function() {
        $('#modalupdatefoto').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("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',
					})
				}
			});
	});
	var sourcekalender = {
        datatype: "json",
        datafields: [
			{ name: 'id', type: 'string' },
			{ name: 'description', type: 'string' },
			{ name: 'location', type: 'string' },
			{ name: 'subject', type: 'string' },
			{ name: 'calendar', type: 'string' },
			{ name: 'start', type: 'date' },
			{ name: 'end', type: 'date' }
        ],
        id	: 'id',
        url	: '{{ route("getkalenderlist") }}'
    };      
    var datajsonawal = new $.jqx.dataAdapter(sourcekalender);
	$("#gridjadwal").jqxScheduler({
		date			: new $.jqx.date(),
		width			: 1024,
		height			: 600,
		source			: datajsonawal,
		showLegend		: true,
		view			: 'agendaView',
		theme			: 'energyblue',
		ready			: function () {
			$("#gridjadwal").jqxScheduler('ensureAppointmentVisible', 'id1');
		},
		resources:
		{
			colorScheme	: "scheme05",
			dataField	: "calendar",
			source		:  new $.jqx.dataAdapter(sourcekalender)
		},
		appointmentDataFields:
		{
			from		: "start",
			to			: "end",
			id			: "id",
			description	: "description",
			location	: "place",
			subject		: "subject",
			readOnly	: "readOnly",
			resourceId	: "calendar",
			
		},
		views			: 
						[
							'dayView',
							'weekView',
							'monthView',
							'agendaView'
						],
		
	});
});
</script>
@endpush