@extends('layouts.agency')

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

@section('style-libraries')

@stop

@section('content')
 <div id="content">
	<section id="account" class="mb-30">
		<div class="w3-container">
			<h3 class="fw-700 text-center">{{ __('message.admin_dashboard')}}</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">
						@include('pages.agency.profile.nav', ['action' => @$action])
					</div>
				</div>
				<div class="w3-col s12 m9" >
					<div class="w3-card w3-card-change-block">
						@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" class="w3-modal w3-modal-err">
								<div class="w3-modal-content-err">
									<div class="w3-containe w3-center">
										<h3>{{ __('website.notify') }}</h3>
										{{ $disabledAuth }}
										<p>{{__('message.click_anywhere')}}</p>
									</div>
								</div>
							</div>
							<script>
								document.addEventListener('click', function() {
									location.reload();
								});
								document.querySelector('.w3-modal-content-err').addEventListener('click', function(event) {
									event.stopPropagation();
								});
							</script>
						@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="{{asset('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.agency_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.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.phone')}}:</span> <span data-v-cb6343be="" class="info">&nbsp;&nbsp;{{ @$user->phone }}</span></span>
							    </div>
							</div>
							<div class="col">
							    <div class="item">
							        <span class="label"><span class="i-title">{{trans('message.address')}}:</span> <span data-v-cb6343be="" class="info">&nbsp;&nbsp; {{@$user->address}} </span></span>
							    </div>
							</div>
						</div>
					</div>


					<div class="w3-card w3-card-change">
						<form action="{{route('agency.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="{{asset('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.agency_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')}}" autocomplete="off">
													</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.email')}}:</span> <span data-v-cb6343be="" class="info">&nbsp;&nbsp;{{ @$user->email }}</span>  </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.phone')}}:</span> &nbsp;&nbsp; <input class="form-control custom-input" type="text" name="phone" id="phone" value="{{ @$user->phone }}"></span>
									</div>
								</div>
								<div class="col">
									<div class="item">
                                        <span class="label"><span class="i-title">{{trans('message.address')}}:</span> &nbsp;&nbsp; <input class="form-control custom-input" type="text" name="address" id="address" value="{{ @$user->address }}"></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;
		  }
		}
		#auth .w3-modal-content{
			background-color: #00BCD4;
		}
	
	</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 
			});
		});
		// 

		$('#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