@extends('main')
@section('styles')
	<style media="screen">
	form label.error, form label.error.active {
color: #f20d0d !important;
font-size: 14px;
position: absolute;
left: 15px;
top: 7px;
}
	</style>
@endsection
@section('page-title')
	<section class="navigation">
		<div class="breadcrumbs-wrap">
			<div class="container clearfix">
				<div class="row">
					<div class="col-md-12">
						<h2>
							{{ __('Update Password') }}
						</h2>
						<ul class="breadcrumbs ul--inline ul--no-style">
							<li>
								<a href="{{ Route('mobily.site.home.page') }}">{{ __('Home') }}</a>
							</li>
							<span>/</span>
							<li>
								<a href="{{ Route('mobily.product.index') }}">{{ __('Products') }}</a>
							</li>
							<span>/</span>
							<li class="active">
								{{ __('Update Password') }}
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</section>
@endsection
@section('content')
	<div class="shop-header bg-color--grey fix-head">
		<div class="container space-y--15">
			<div class="row align-items-center">
				<div class="col-9">
					<h1 class="category-title text-right">{!! __('Update Password') !!}</h1>
				</div>
				<div class="col-3 text-left">
					<a href="javascript:history.back()" class="back-link">{!! __('Back') !!} <i class="fa fa-long-arrow-left"></i> </a>
				</div>
			</div>
		</div>
	</div>
	<section class="cart-wrap">
		<div class="section-content">
			<div class="container">
				<div class="dashboard">
					<div class="recent-orders">
						<div class="cart-collaterals container-row clearfix">
							<div class="totals col-sm-12 col-xs-12">
								<h3>{!! __('Update Password') !!}</h3>
							</div>
						</div>
					</div>
				</div>
				<div class="main-container col2-right-layout">
					<div class="container">
						<div class="row">
							<section class="col-sm-9 col-xs-12">
								<div class="well col-lg-4 col-lg-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
									<form class="form-horizontal" role="form" autocomplete="off" method="POST" action="{{ Route('mobily.update.account.password') }}">
										{{ csrf_field() }}
										<div class="form-group row">
											<div class="col-sm-12 col-xs-12">
													<div class="input-group">
													<input name="password" id="password" size="60" class="form-control @error('password') error @enderror" placeholder="{!! __('Password') !!}" type="password" required value="">
													</div>
												</div>
											</div>
											<div class="form-group row">
												<div class="col-sm-12 col-xs-12">
													<div class="input-group">
														<input name="password_confirmation" id="password_confirmation" size="60" class="form-control @error('password_confirmation') error @enderror" placeholder="{!! __('Confirm Password') !!}" type="password" required value="">
														</div>
													</div>
												</div>
												<div class="form-group text-center">
													<button  type="submit" class="btn btn-primary btn-">{{ __('Save Password') }}</button>
												</div>
											</form>
										</div>
									</section>
									<aside class="col-right sidebar col-sm-3 col-xs-12">
										@include('block.account.sidebar')
									</aside>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		@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