@extends('front.template.master') 
@section('title', 'Change Password')
@section('content')

<main id="content"> <!-- Landing Section Content Starts Here -->
	<div class="container">    	
    	<div class="row">
    		<div class="col-md-12 text-center">
    			<h1 class="my-5">Change Password</h1>
    			<form action = "{{ url('/changePasswordSuccessfully') }}" method="post"  class="register-form">
                    {{ csrf_field() }}

                    @if(Session::has('success'))
                       <div class="alert alert-success text-center">
                           {{ Session::get('success') }}
                        </div>
                    @endif

                    <div class="text-center">
	                    @include('admin.partials.flash_message')
	                </div>

                    <div class="row">
                        <div class="col-md-3">
                            <label for="exampleInputName1">Current Password:</label>
                        </div>
                        <div class="col-md-9">
							<input type="password" class="form-control" name="cpassword" id="cpassword" placeholder="Enter Your Current Passsword">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-3">
							<label for="password">New Password:</label>
                        </div>
                        <div class="col-md-9">
							<input type="password" class="form-control" name="password" id="password" placeholder="Enter Your New Password">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-3">
							<label for="password-confirm">Confirm Password:</label>
                        </div>
                        <div class="col-md-9">
							<input type="password" class="form-control" name="password_confirmation" id="password-confirm" placeholder="Enter Your Confirm Password">
						</div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-center">
                            <input type="submit" class="btn btn-primary btn-lg" value="Submit">
                        </div>
                    </div>
                </form>

    		</div>
    	</div>      
        
    </div>
</main>

<script>
        var password = document.getElementById("password")
        , confirm_password = document.getElementById("confirm_password");

      function validatePassword(){
        if(password.value != confirm_password.value) {
          confirm_password.setCustomValidity("Passwords Don't Match");
        } else {
          confirm_password.setCustomValidity('');
        }
      }

      password.onchange = validatePassword;
      confirm_password.onkeyup = validatePassword;
      </script>
	
@endsection