@extends('layouts.master')

@section('title', trans('message.profile'))

@section('style-libraries')

@stop

@section('styles')
    <style>
		.w3-modal-err-logout {
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			padding-top: 0;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.4);
			z-index: 11;
		}
		.w3-containe-logout {
			position: relative;
			border: 1px solid #888;
			padding: 40px;
			max-width: 500px;
			width: 80%;
			border-radius: 5px;
			background-color: #f2182866;
		}
	</style>
@stop

@section('content')
 <div id="content">
	<section id="account" class="mb-30">
		<div class="w3-container">
			<h3 class="fw-700">{{trans('message.accounts_and_services')}} </h3>
			<p>{{ @$sub_page }}</p>
			<div class="w3-row mt-20">
				<div class="w3-col s12 m3 mb-30">
					<div class="w3-card pro-menu">
						<ul class="p-menu">
							<li class="active"><a href="{{route('profile.dasboard')}}"><img src="./images/account/user.png" alt=""> <span>{{trans('message.profile')}}</span></a></li>
							<li><a href="{{route('account-transaction')}}"><img src="./images/account/file.png" alt=""><span>{{trans('message.transaction')}}</span></a></li>
							<li><a href="{{route('account-service')}}"><img src="./images/account/customer.png" alt=""><span>{{trans('message.services')}}</span></a></li>
							<li><a href="{{route('change_password')}}"><img src="./images/account/key.png" alt=""><span>{{trans('message.change_password')}}</span></a></li>
							<li class="line"></li>
							<li><a href="{{route('logout')}}"><img src="./images/account/logout.png" alt=""><span>{{trans('message.logout')}}</span></a></li>
						</ul>
					</div>
				</div>
				<div class="w3-col s12 m9" >
					<div class="w3-card w3-card-change-block">
						<!-- <h4 class="fw-700">Profile</h4> -->
						@if(session('success'))
							<div id="auth" class="w3-modal">
								<div class="w3-modal-content">
								<div class="w3-containe w3-center">
									<h3>{{ __('website.notify') }}</h3>
									<p>{{ __('auth.success_message_updateprofile') }}</p>
								</div>
								</div>
							</div>
						@endif

						@if(session('successpassword'))
							<div id="auth" class="w3-modal">
								<div class="w3-modal-content">
								<div class="w3-containe w3-center">
									<h3>{{ __('website.notify') }}</h3>
									<p>{{ session('successpassword') }}</p>
								</div>
								</div>
							</div>
						@endif
						@if($errors->has('message'))
							<div id="auth" class="w3-modal w3-modal-err">
								<div class="w3-modal-content-err">
									<div class="w3-containe w3-center">
										<h3>{{ __('website.notify') }}</h3>
										{{ $errors->first('message') }}
									</div>
								</div>
							</div>
						@endif

						@if(isset($disabledAuth))
							<div id="auth_logout" class="w3-modal w3-modal-err" style="display: block">
								<div class="w3-modal-content-err w3-modal-err-logout">
									<div class="w3-containe w3-center w3-containe-logout">
										<h3>{{ __('website.notify') }}</h3>
										{{ $disabledAuth }}
									</div>
								</div>
							</div>
						@endif

						<div class="personal__profile">
						    <div class="d-flex align-items-center">
						        <span class="b-avatar img-avatar badge-secondary rounded-circle">
						            <span class="b-avatar-img"><img src="./images/account/users-1.png" alt="avatar" /></span>
						        </span>
						        <div class="profile-info">
						            <div class="profile-info-div">
						                <p class="name fw-700">{{trans('message.user_account')}} {!! $user->email_verified_at == null ? '<a href="'.route('profile.email_not_active').'"><span style="color: yellow; font-size: 15px;">(Not active)</span></a>' : null !!}</p>
						                <div class="d-flex align-items-center">
						                    <span class="label">
						                        {{trans('message.gender')}}:
						                        <span class="info">
													@if ($user->gender)
														@if ($user->gender==1)
															{{trans('message.male')}}
														@else
															{{trans('message.female')}}
														@endif
													@else
														( {{trans('message.unknow')}} )
													@endif
												</span>
						                    </span>
						                    <svg viewBox="0 0 16 16" width="1em" height="1em" focusable="false" role="img" aria-label="blank" xmlns="http://www.w3.org/2000/svg" fill="#fff" class="bi-blank b-icon bi">
						                        <g></g>
						                    </svg>
						                    <span class="label">
												{{trans('message.birday')}}:
						                        <span class="info">
													@if ($user->birthday)
														{{$user->birthday}}
													@else
														( {{trans('message.unknow')}} )
													@endif
												</span>
						                    </span>
						                </div>
						            </div>
						            <div class="button-change">
						                <a href="#" class="fw-700"  id="change-button">{{trans('message.change')}}</a>
						            </div>
						        </div>
						    </div>
						</div>

						<div class="personal__account-security mt-30">
							<h5 class="fw-600">{{trans('message.account_and_security')}}</h5>
							<div class="col">
							    <div class="item">
							        <span class="label"><span class="i-title">{{trans('message.fullname')}}:</span> <span data-v-cb6343be="" class="info">&nbsp;&nbsp;{{ $user->fullname }}</span></span>
							    </div>
							</div>
							<div class="col">
							    <div class="item">
							        <span class="label"><span class="i-title">{{trans('message.id')}}:</span> <span data-v-cb6343be="" class="info">&nbsp;&nbsp;{{ $user->id }}</span></span>
							    </div>
							</div>
							<div class="col">
							    <div class="item">
							        <span class="label"><span class="i-title">{{trans('message.email')}}:</span> <span data-v-cb6343be="" class="info">&nbsp;&nbsp;{{ $user->email }}</span></span>
							    </div>
							</div>
							<div class="col">
							    <div class="item">
							        <span class="label"><span class="i-title">{{trans('message.location')}}:</span> <span data-v-cb6343be="" class="info">&nbsp;&nbsp; @if($user->country) {{ $user->country->name }} @else <span> (Unknow)</span> @endif </span></span>
							    </div>
							</div>
							<div class="col">
							    <div class="item">
							        <span class="label"><span class="i-title">{{trans('message.password')}}:</span> <span data-v-cb6343be="" class="info">&nbsp;&nbsp;*****</span></span>
							    </div>
							</div>
						</div>
					</div>


					<div class="w3-card w3-card-change">
						<form action="{{route('update_profile')}}" method="post">
							{{ csrf_field() }}
							<div class="personal__profile">
								<div class="d-flex align-items-center">
									<span class="b-avatar img-avatar badge-secondary rounded-circle">
										<span class="b-avatar-img"><img src="./images/account/users-1.png" alt="avatar" /></span>
									</span>
									<div class="profile-info">
										<div class="profile-info-div">
											<p class="name fw-700">{{trans('message.user_account')}}</p>
											<div class="d-flex align-items-center">
												<span class="label">
													{{trans('message.gender')}}:
													<span class="info">
														<select class="info custom-select custom-input" id="mySelect" name="gender">
															<option value="">{{trans('message.choose_gender')}}</option>
															<option value="1"
																@if ($user->gender ==1)
																	selected
																@endif
															>{{trans('message.male')}}</option>
															<option value="2"
															@if ($user->gender ==2)
																selected
															@endif
															>{{trans('message.female')}}</option>
														</select>
													</span>
												</span>
												<svg viewBox="0 0 16 16" width="1em" height="1em" focusable="false" role="img" aria-label="blank" xmlns="http://www.w3.org/2000/svg" fill="#fff" class="bi-blank b-icon bi">
													<g></g>
												</svg>
												<span class="label">
													{{trans('message.birday')}}:
													<span class="info">
														<input class="form-control custom-input" id="datepicker" type="text" name="birthday" value="{{$user->birthday}}" placeholder="{{trans('message.date_of_birth')}}">
													</span>
												</span>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="personal__account-security mt-30">
								<h5 class="fw-600">{{trans('message.account_and_security')}}</h5>
								<div class="col">
									<div class="item">
										<span class="label"><span class="i-title">{{trans('message.fullname')}}:</span> &nbsp;&nbsp; <input class="form-control custom-input" type="text" name="fullname" id="fullname" value="{{ $user->fullname }}"></span>
									</div>
								</div>
								<div class="col">
									<div class="item">
										<span class="label"><span class="i-title">{{trans('message.id')}}:</span> <span data-v-cb6343be="" class="info">&nbsp;&nbsp;{{ $user->id }}</span></span>
									</div>
								</div>
								<div class="col">
									<div class="item">
										<span class="label"><span class="i-title">{{trans('message.email')}}:</span> &nbsp;&nbsp;  <input type="email" class="custom-input" readonly disabled id="email" autocomplete="chrome-off" autofill="off" name="email" placeholder="" value="{{$user->email}}"/></span>
										<div class="help-block" id="emailError"></div>
									</div>
								</div>
								<div class="col">
									<div class="item">
										<span class="label"><span class="i-title">{{trans('message.location')}}:</span> &nbsp;&nbsp;  
											<select name="country_id" class="form-control select2" id="country_id"  data-allow-clear="true"  data-placeholder="{{trans('message.choose_location')}}" id="locationSelect">
												<option value="">Chọn vị trí</option>
												@foreach ($countries as $countrie)
													<option value="{{$countrie->id}}" @if ($user->country_id == $countrie->id) selected @endif style="white-space: nowrap;">{{$countrie->name}}</option>
												@endforeach
											</select>
										</span>
									</div>
								</div>
								<div class="col">
									<div class="item">
										<button type="submit" class="btn btn-primary">{{trans('message.update')}}</button>
									</div>
								</div>
							</div>
						</form>
					
					</div>
				</div>
			</div>
        </div>
	</section>
        
</div>

@endsection
@section('styles')
	<style type="text/css">
		select[readonly].select2 + .select2-container {
		  pointer-events: none;
		  touch-action: none;
		  
		  .select2-selection {
		    background: #eee;
		    box-shadow: none;
		  }
		  .select2-selection__arrow,
		  .select2-selection__clear {
		    display: none;
		  }
		}
	
	</style>
@stop
@section('scripts')
	<link rel="stylesheet" href="{{url('css/jquery-ui.css')}}">
	<script src="{{ url('js/packages/jquery-ui.js')}}"></script>
	<script src="{{ url('js/packages/select2.min.js') }}"></script>
	<link rel="stylesheet" href="{{ url('css/select2.min.css') }}">
	<script>
		$(document).ready(function() {
			$('.select2').select2();
		});

		document.addEventListener('DOMContentLoaded', function() {
			var changeButton = document.getElementById('change-button');
			var cardChangeBlock = document.querySelector('.w3-card-change-block');
			var cardChange = document.querySelector('.w3-card-change');

			changeButton.addEventListener('click', function() {
				cardChangeBlock.style.display = 'none';
				cardChange.style.display = 'block';
			});
		});

		$(document).ready(function() {
			$('#datepicker').datepicker({
				dateFormat: 'yy-mm-dd', 
				minDate: new Date(), 
				maxDate: '+1y',
				showButtonPanel: true 
			});
		});
		$('#email').on('input', function() {
			var email = $(this).val();
			var errorMessage = $('#emailError');
			var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

			if (!emailPattern.test(email)) {
				$(this).removeClass('success');
				errorMessage.text('{{trans('message.invalid_email')}}');
			} else {
				$(this).addClass('success');
				errorMessage.text('');

				var loggedInEmail = "{{$user->email}}";
				var _token = "{{ csrf_token() }}";
				var urlCheckEmail = "{{ route('checkEmail') }}";

				$.post(urlCheckEmail, { email: email, _token: _token }, function(data) {
				if (data.exists && email !== loggedInEmail) {
					$('#email').removeClass('success');
					errorMessage.text('{{ trans('message.email_exists') }}');
				} else {
					$('#email').addClass('success');
					errorMessage.text('');
				}
				}, 'json');
			}
		});

		$('#password').on('input', function() {
	        var passwordValue = $('#password').val();
	        var errorMessage = $('#passwordError');
	        var rePassword = $('#re-password').val();

	        if (passwordValue.length < 6) {
	        	$('#password').removeClass('success');
	            errorMessage.text('Password must be at least 6 characters long');
	        }else {
	        	$('#password').addClass('success');
	            errorMessage.text('');
	        }
	    });

		var modal = document.getElementById('auth');
		if(modal){
			var timeout = 3000;
			setTimeout(function() {
				modal.style.display = 'none';
			}, timeout);

			window.addEventListener('click', function(event) {
				if (event.target !== modal) {
					modal.style.display = 'none';
				}
	    	});
		}
	</script>
@stop