@extends('layouts.master')
@section('main-content')
    <div class="">
        <h1>Change Password</h1>
        <form action="" method="post" name="frmPassword" id="frmPassword" novalidate class="needs-validation">
            @csrf
            <div class="row">
            <div class="col-md-4">
                <div class="card mb-5">
                    <div class="card-body">
                        <div class="d-flex flex-column">
                            <div class="form-group">
                                <input type="password" name="old_password" class="form-control" placeholder="Old Password" autocomplete="false" required>
                                <div class="invalid-feedback">Field is required</div>
                            </div>
                            <div class="form-group">
                                <input type="password" name="new_password" id="new_password" class="form-control" placeholder="Enter your new password" autocomplete="false" required>
                                <div class="invalid-feedback">New password is required</div>
                            </div>
                            <div class="form-group">
                                <input type="password" name="confirm_password" id="confirm_password"  class="form-control" placeholder="Re-enter your new password" required>
                                <div class="invalid-feedback">This field is required</div>
                            </div>
                            <input type="hidden" name="user" value="{{loggedin_userSession()->id}}">
                        </div>
                        <button class="btn btn-primary ">Change Password</button>
                    </div>
                </div>
            </div>
            </div>
        </form>
    </div>

    <div class="separator-breadcrumb border-top"></div>

@endsection
@section('bottom-js')
    <script src="{{asset('assets/js/form.validation.script.js')}}"></script>
    <script>
        $(document).ready(function(){
            $('#frmPassword').submit(function(){
                if( $('#new_password').val() !== $('#confirm_password').val() ){
                    alert('New passwords do not match')
                    return false;
                }
            });
        });
    </script>
@endsection