@extends('frontend.master')
@section('content')
<script src="{{ url('/') }}/frontend/js/jquery.min.2.0.0.js"></script>
<script src="{{ url('/') }}/frontend/js/jquery.cropit.js"></script>
<div class='content'>
	<div class="container">
		<div id="settingGeo">
			<form id='form'>
				<div class="row account-information">
					<div class='col-lg-4'>
						<div class="mobi-change-avatar">
							<div class="row mobi-text-avatar">
								<div class="col-12">
									<div class='form-group'>
										<div class="avatar">
											<img id="image-loading" src="{{ asset('general/images/bx_loader.gif') }}" width="50" height="50">
											<input type="hidden" id="avatar" name="avatar" value="{{ Auth::user()->avatar }}">
										</div>
										<div class='avatar-container'>
											<div class="image-editor text-center">
												<div class="cropit-preview"></div>
												<input type="range" class="cropit-image-zoom-input slider" style='display:none;'>
												<div style="padding-bottom:13px;padding-top:10px;">({{ __('messages.setting_minium_is') }} 250x250)</div>
												<input type="file" class="cropit-image-input" id="image-file-input" style='display:none;'>
												<div class="btn btn-primary" onclick="$('.cropit-image-input').val('');$('.cropit-image-input').click()">{{ __('messages.change_avatar') }}</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class='col-lg-8'>
						<div>
							<label for="">{{ __('messages.email_address') }}</label>
							<input type="text" class="form-control" value="{{ Auth::user()->email }}" disabled>
						</div>
						<div>
							<div class="mobi-bil-email">
								<label for="">{{ __('messages.billing_email') }}</label>
								<input type="text" class="form-control" id="addEmail" value="{{ Auth::user()->billing_email }}">
								<p class="alert-email alert-errors"></p>
							</div>
						</div>
						<div>
							<p>{{ __('messages.enter_a_billing_email') }}.</p>
						</div>
						<div>
							<label for="">{{ __('messages.password') }}</label>
							<input type="password" class="form-control" id="updatePassword" autocomplete="new-password">
							<p class="alert-password alert-errors"></p>
							<p>{{ __('messages.leave_blank_to_keep_your_password') }}.</p>
						</div>
						<div>
							<label for="">{{ __('messages.confirm_password') }}</label>
							<input type="password" class="form-control" id="updateConfirmPassword" autocomplete="new-password">
							<p class="alert-confirmpassword alert-errors"></p>
						</div>
						<div>
							<label for="">{{ __('messages.name') }}</label>
							<input type="text" class="form-control" id="updateName" value="{{ Auth::user()->name }}">
						</div>
					</div>
					<div class="col-lg-12">
						<p class="alert-change-password" style="color: #00b8ff;text-align: center;"></p>
						<button type="button" class="btn btn-primary col-lg-2 offset-lg-5" id="updateAccount">{{ __('messages.update') }}</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<link rel="stylesheet" href="{{ url('/') }}/frontend/js/jcrop.css" type="text/css" />
<script>
	var done_upload = false;
	var _URL = window.URL || window.webkitURL;
	@if(strlen(Auth::user()->avatar) > 0)
		var avatar_url = "{{ url('/') }}/uploads/{{ Auth::user()->avatar }}";
	@else
		var avatar_url = "{{ url('/') }}/frontend/images/avatar200_200.jpg";
	@endif

	function upload_image(callback){
		if(done_upload){
			callback(true);
		}else{
			done_upload = true;
			var imageData = $('.image-editor').cropit('export');
			if(imageData){
				var formData = new FormData(document.getElementById("form"));
				formData.append("base64", imageData);
				$.ajaxSetup({
					headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
				});
				$.ajax({
					url: "{{ $url_link }}/images/uploadImage",
					type: "POST",
					data: formData,
					contentType: false,
					processData: false,
					success: function(data) {
						if(data.code == 200){
							$('#avatar-image').attr('src', "{{ $url_link }}/uploads/" + data.image_url);
							$('#avatar').val(data.image_url);
							callback(true);
						}else{
							callback('<div class="alert-danger">{{ __('messages.setting_an_error_account_during_upload_avatar') }}</div>');
						}
					},
					error: function(data) {
						callback("Error");
					}
				});
			}else{
				callback(true);
			}
		}
	}
	function do_clear_cropit(){
		$('.image-editor').cropit('destroy');
		$('.image-editor').cropit();
		$('.cropit-preview-image').attr('src', avatar_url);
	}

	$(document).ready(function(){
		if(localStorage.getItem("formUserData")){
			getLocalStore();
		}
		$('.image-editor').cropit({});
		$('.cropit-preview-image').attr('src', avatar_url);

		$("#image-file-input").change(function(e) {
			done_upload = false;
			$('.cropit-image-zoom-input').hide();
			var file, img;
			if ((file = this.files[0])) {
				img = new Image();
				img.onerror = function() {
					do_clear_cropit();
					Swal.fire({
						type: 'warning',
						text: '{{ __('messages.setting_the_image_is_incorrect_format') }}',
						confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
					})
				};
				img.onload = function() {
					var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp', 'webp', 'jfif'];
					if ($.inArray($("#image-file-input").val().split('.').pop().toLowerCase(), fileExtension) == -1) {
						do_clear_cropit();
						Swal.fire({
							type: 'warning',
							html: '<div class="alert-danger">{{ __('messages.setting_only_formats_are_allowed') }}: '+fileExtension.join(', ')+'</div>',
							confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
						})
					}else if(this.width < 250 || this.height < 250){
						do_clear_cropit();
						Swal.fire({
							type: 'warning',
							text: '{{ __('messages.setting_minium_image_must_be') }} >= 250x250!',
							confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
						})
					}else{
						$('.cropit-image-zoom-input').show();
					}
				};
				img.src = _URL.createObjectURL(file);
			}
		});

		$('#updateAccount').click(function(){
			$('.alert-errors').html('');
			$(".ajax_waiting").addClass("loading");
            upload_image(function(response){
				if(response === true){
					var password = $.trim($('#updatePassword').val());
					var confirmpassword = $.trim($('#updateConfirmPassword').val());
					var name = $('#updateName').val();
					var email = $('#addEmail').val();
					var avatar = $('#avatar').val();
					var data = {
						password : password,
						confirmpassword : confirmpassword,
						name : name,
						email : email,
						avatar: avatar,
					};
					$.ajaxSetup({
						headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
					});
					$.ajax({
						method: "POST",
						url: '{{ $url_link }}/update-account-ajax',
						data: data,
						dataType: 'json',
						success: function (response) {
							$(".ajax_waiting").removeClass("loading");
							if(response.status == 200){
								Swal.fire({
									type: 'success',
									text: '{{ __('messages.update_success') }}.',
									confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
								}).then( result => {
									location.reload()
								})
							}
						},
						error: function (data) {
							$.each(data.responseJSON.errors, function( index, value ) {
								$(".ajax_waiting").removeClass("loading");
								$('.alert-' + index).html(value);
								if(value == 'validation.regex_email'){
									$('.alert-' + 'email').html('{{ __('messages.setting_the_email_must_be_valid_email_address') }}');
								}
							});
						}
					});
				}else{
					$(".ajax_waiting").removeClass("loading");
					Swal.fire({
						type: 'warning',
						html: response,
						confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
					})
				}
			});
		});
    });
</script>
<style>
	.cropit-preview{background-color:#f8f8f8;background-size:cover;border-radius:3px;margin-top:7px;width:200px;height:200px;-webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);-moz-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);}
	.cropit-preview-image-container{cursor:move;}
	.avatar-container{}
	.image-size-label{margin-top:10px;}
	input, .export{display:block;}
	button{margin-top:10px;}
	.image-editor input[type='range']{margin:0 auto;width:200px;display: block;margin-top: 21px;}
	.image-editor{width:250px;border:2px dashed #ccc;border-radius:10px;margin-left:auto;margin-right:auto;text-align:center !important;padding:20px;padding-top:15px;}
	.slider{-webkit-appearance:none;width:100%;height:10px;border-radius:5px;background:#d3d3d3;outline:none;opacity:0.7;-webkit-transition:.2s;transition:opacity .2s;}
	.slider:hover{opacity:1;}
	.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#037cd5;cursor:pointer;}
	.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#037cd5;cursor:pointer;}
	.slider::-webkit-slider-thumb:hover{background:#fdd921;}
	.slider::-moz-range-thumb:hover{background:#fdd921;}
</style>

@endsection