@extends('layouts.master')
@section('title')Change Password @endsection
@section('css')
<link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/libs/summernote/summernote.min.css')}}">
@endsection
@section('content')
@component('common-components.breadcrumb')
@slot('title') Change Password @endslot
@endcomponent
<style>
.form-control{
	color: #314667 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
            .success-msg,.error-msg {
                margin: 10px 0;
                padding: 10px;
                border-radius: 3px 3px 3px 3px;
              }
              .error-msg {
                color: #D8000C;
                background-color: #FFBABA;
              }
              .success-msg {
                color: #270;
                background-color: #DFF2BF;
              }



</style>

<div class="row">
    <div class="col-12">
        <div class="card mb-2">
           <div class="card-body">

            @if (Session::get('error'))
            <div class="error-msg alert">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <i class="fa fa-times-circle"></i>
            {{ Session::get('error') }}
            </div>
            @endif

            <!-- For Success Messages -->
            @if (Session::get('success'))
            <div class="success-msg alert">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <i class="fa fa-check"></i>
            {{ Session::get('success') }}
            </div>
            @endif

            <form name="frm1" id="frm1" class="needs-validation" method="post" enctype="multipart/form-data" action="{{route('updatepassword_in_admin')}}" novalidate>
                 @csrf


                 <div class="form-group row mb-4">
                    <label for="projectname" class="col-form-label col-lg-2">Old Password <span style="color:red;">*</span></label>
                    <div class="col-lg-10">
                        <input type="password" maxlength="50"  class="form-control" name="old_password" id="old_password" placeholder="Enter your old password" required>
                    </div>
                  </div>

                 <div class="form-group row mb-4">
                    <label for="projectname" class="col-form-label col-lg-2">New Password<span style="color:red;">*</span></label>
                    <div class="col-lg-10">
                        <input type="password" maxlength="50" class="form-control"  name="new_password" id="new_password" placeholder="Enter your new password" required>
                    </div>
                  </div>

                  <div class="form-group row mb-4">
                    <label for="projectname" class="col-form-label col-lg-2">Confirm Password<span style="color:red;">*</span></label>
                    <div class="col-lg-10">
                        <input type="password" maxlength="50" class="form-control" name="confirm_password" id="confirm_password" placeholder="Re-enter your new password" required>
                    </div>
                  </div>
                  <div class="row justify-content-end">
                    <div class="col-lg-10">
                            <button class="btn btn btn-success" type="submit" id="save">Change Password</button>
                            <a href="../admin/dashboard" class="btn btn-danger">Cancel</a>
                     </div>
                    </div>

                    {{-- <div class="form-group">
                        <label for="formrow-quest_name-input"><span style="color:red;">*</span></label>
						<input type="password" maxlength="50"  class="form-control" name="old_password" id="old_password" placeholder="Enter Your Old Password" required>
                        <div class="invalid-feedback">
                            Please provide a old password
                        </div>
                        <span id="checkerror" class="checkerror" style="margin-top: 0.25rem;
    font-size: 80%;
    color: #f46a6a;"></span>
                    </div> --}}
                    {{-- <div class="form-group">
                        <label for="formrow-quest_name-input">New Password<span style="color:red;">*</span></label>
						<input type="password" maxlength="50" class="form-control"  name="new_password" id="new_password" placeholder="Enter Your New Password" required>
                        <div class="invalid-feedback">
                            Please provide a new  password
                        </div>
                    </div> --}}
                    {{-- <div class="form-group">
                        <label for="formrow-quest_name-input">Confirm Password<span style="color:red;">*</span></label>
						<input type="password" maxlength="50" class="form-control" name="confirm_password" id="confirm_password" placeholder="Enter Your Confirm Password" required>
                        <div class="invalid-feedback">
                            Please provide a confirm password
                        </div>
                        <div style="margin-top: 7px;margin-top: 0.25rem;font-size: 80%;color: #f46a6a;" id="CheckPasswordMatch"></div>
                    </div> --}}

                  {{-- <div class="row">
                    <div class="col-md-6">
                        <div class="form-group ">
                            <button class="btn btn-warning"  style="color: white;" type="submit" id="save">Save</button>
                        <a href="/" class="btn btn-dark">Cancel</a>
                        </div>
                    </div>
                </div> --}}
                </form>
            </div>
        </div>
    </div> <!-- end col -->
</div>
<!-- end row -->
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js" integrity="sha512-6S5LYNn3ZJCIm0f9L6BCerqFlQ4f5MwNKq+EthDXabtaJvg3TuFLhpno9pcm+5Ynm6jdA9xfpQoMz2fcjVMk9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(function(){
            $("form[name='frm1']").validate({

            rules: {
                old_password:{
                    required: true,
                },
                new_password: {
                required: true,
                minlength: 5
              },
              confirm_password: {
                    required:true,
                    minlength: 5,
                    equalTo: "#new_password"
                }
            },
            // Specify validation error messages
            messages: {
                old_password: {
                required: "Please provide a old password",
               },
                new_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
              },
              confirm_password:{
                required:"Please provide a confirm password",
                minlength: "Your password must be at least 5 characters long"
              },

            },
            submitHandler: function(form) {
              form.submit();
            }
          });
        });
</script>
@endsection