@extends('main')
@section('styles')
	<style media="screen">
	label.error {
		display: block;
		text-align: center;
		color: red;
		vertical-align: top;
		position: absolute;
		z-index: 99999;
		top: 10px;
		left: 10px;
	}
	.input-group .form-control {
		height: 40px;
		margin: 0;
	}
	.input-group {
		position: relative;
		display: flex;
		border-collapse: separate;
	}
	.input-group-addon {
		padding: 1px 12px;
		font-size: 14px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		color: #555;
		text-align: center;
		background-color: #eee;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
	</style>
@endsection
@section('page-title')
@endsection
@section('content')
	<div class="breadcrumbs">
		<div class="container">
			<div class="row">
				<div class="col-xs-12">
					<ul>
						<li class="home">
							<a href="{{ Route('site.home.page') }}">{{ __('Home') }} <span>/</span></a>
						</li>
						<li>
							{{ __('My account') }}
						</li>
						<li>
							{{ __('Update Password') }}
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="main-container col2-right-layout">
		<div class="main container">
			<div class="row">
				@if (isDesktop())
					<div class="col-right sidebar col-sm-3 col-xs-12">
						@include('block.account.sidebar')
					</div>
				@endif
				<div class="col-sm-9 col-xs-12">
					<div class="col-main">
						<div class="dashboard">
							@if (session()->has('success'))
								<div class="alert alert-success">
									{{ session()->get('success') }}
								</div>
							@endif
							@if (session()->has('error'))
								<div class="alert alert-danger">
									{{ session()->get('error') }}
								</div>
							@endif
							<h2 class="page-heading">
								{!! __('My account') !!} <small> {{ __('Update Password') }}</small>
							</h2>
							<form class="form-horizontal" role="form" autocomplete="off" method="POST" action="{{ Route('update.account.password') }}">
								{{ csrf_field() }}
								<div class="cart-collaterals">
									<div class="col-md-6 ">
										<div class="form-group ">
											<div class="input-group">
												<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
												<input name="password" id="password" size="60" class="form-control @error('password') error @enderror" placeholder="{!! __('Password') !!}" type="password" required value="" autocomplete="off">
												</div>
											</div>
											<div class="form-group ">
												<div class="input-group">
													<span class="input-group-addon"><i class="fa fa-lock fa" aria-hidden="true"></i></span>
													<input name="password_confirmation" id="password_confirmation" size="60" class="form-control @error('password_confirmation') error @enderror" placeholder="{!! __('Confirm Password') !!}" type="password" required value="" autocomplete="off">
													</div>
												</div>
												<div class="form-group text-center">
													<button type="submit" class="btn btn-primary btn-">{{ __('Save Password') }}</button>
												</div>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		@endsection
		@section('scripts')
			{!! Html::script(Theme::current()->assetPath.'/js/jquery.validate.js') !!}
			<script type="text/javascript">
				(function(){
					$.validator.messages.required = "{{ __('This field is required.') }}";
					$.validator.messages.digits 	= "{{ __('Please enter only digits') }}";
					$.validator.messages.email 		= "{{ __('Please enter a valid email address.') }}";
					$.validator.messages.min 		  = "{{ __('Number of few letters') }}";
					$.validator.messages.equalTo 	= "{{ __('Passwords do not match') }}";
					$(".form-horizontal").validate({
						rules: {
							password: {
								required: true,
							},
							password_confirmation: {
								equalTo: "#password"
							}
						}
					});
				})();
			</script>
		@endsection