@extends('layouts.member.shell')

@section('content')

<h5>{{ __('member_info.info_title') }}</h5>
<hr>
<form method="POST" action="/member/info_modify">
	@csrf
	<div class="d-flex flex-column">
		<div class="d-flex justify-content-center">
			<div class="d-flex flex-column">
				<div class="d-flex justify-content-center">
					<div class="d-flex flex-column">
						@if ($head_shot != '')

						<img class="user-photo" src="{{ $head_shot }}">
						@else

						<img class="user-photo" src="images/user.png">
						@endif


						<a href="javascript: void(0);" onclick="user_photo_file.click()">{{ __('member_info.upload_picture') }}</a>
					</div>
				</div>

			</div>
		</div>
		<div class="input-box">
			<div class="form-group">
				<label>{{ __('member_info.user_name') }}</label>
				<input type="text" class="form-control" name="nickname" value="{{ $userName }}" required>
			</div>
			<div class="form-group">
				<label>{{ __('member_info.use_language') }}</label>
				<select class="form-control" name="lang">

					@if (session()->get('lang') == 'zh-TW')
					<option value="zh-TW" selected>繁體中文</option>
					<option value="en">English</option>
					<option value="ja-JP">日本</option>
					@endif

					@if (session()->get('lang') == 'en')
					<option value="zh-TW">繁體中文</option>
					<option value="en" selected>English</option>
					<option value="ja-JP">日本</option>
					@endif

					@if (session()->get('lang') == 'ja-JP')
					<option value="zh-TW">繁體中文</option>
					<option value="en">English</option>
					<option value="ja-JP" selected>日本</option>
					@endif

				</select>
			</div>
		</div>
		<div class="input-box">
			<div class="form-group">
				<label>{{ __('member_info.old_password') }}</label>
				<input type="password" class="form-control" name="old_pwd">
			</div>
			<div class="form-group">
				<label>{{ __('member_info.new_password') }}</label>
				<input type="password" class="form-control" name="new_pwd">
			</div>
			<div class="form-group">
				<label>{{ __('member_info.confirm_password') }}</label>
				<input type="password" class="form-control" name="confirm_pwd">
			</div>
		</div>
	</div>
	<input type="hidden" name="user" value="{{ session()->get('id') }}">
	<button class="btn btn-primary mt-5 mb-3" type="submit" style="display: flex;margin: 0 auto;">{{ __('member_info.modify') }}</button>
</form>

@endsection


@section('jsscript')

<script>
	var process_log = '{{ $process_log  }}';

	window.addEventListener('load', () => {

		switch (process_log) {

			case 'success':

				alert("{{ __('member_info.modify_success') }}");

				break;

			case 'error':

				alert("{{ __('member_info.modify_fail') }}");

				break;


		}



	});


	var user_photo_file = undefined;
	window.addEventListener('load', () => {

		user_photo_file = document.getElementById('user_photo_file');
		user_photo_file.addEventListener('change', changePhoto);

	});

	const changePhoto = e => {

		let photo = e.target;

		if (photo.files.length > 0) {

			let reader = new FileReader();
			reader.readAsDataURL(photo.files[0]);
			reader.onload = e => {

				let img = document.createElement("img");
				img.src = e.target.result;
				img.onload = () => {

					let canvas = document.createElement("canvas");
					let ctx = canvas.getContext("2d");
					ctx.drawImage(img, 0, 0);

					var MAX_WIDTH = 400;
					var MAX_HEIGHT = 400;
					var width = img.width;
					var height = img.height;

					if (width > height) {
						if (width > MAX_WIDTH) {
							height *= MAX_WIDTH / width;
							width = MAX_WIDTH;
						}
					} else {
						if (height > MAX_HEIGHT) {
							width *= MAX_HEIGHT / height;
							height = MAX_HEIGHT;
						}
					}
					canvas.width = width;
					canvas.height = height;

					ctx.drawImage(img, 0, 0, width, height);

					dataurl = canvas.toDataURL(photo.files[0].type);

					let formData = new FormData();
					formData.append('head_shot', dataurl);

					let uploader = new XMLHttpRequest();

					uploader.addEventListener('readystatechange', () => {

						if (uploader.readyState == XMLHttpRequest.DONE) {

							console.log(uploader.responseText);
							if (uploader.responseText.indexOf('ok') > -1) {

								location.reload();

							}
						}
					});
					uploader.open("POST", "/api/v1/update_user_image/{{ session()->get('id') }}/{{ session()->get('uuid') }}", true);
					uploader.send(formData);
				};
			}
		}
	};
</script>

@endsection