@extends('layouts.app')

@section('content')
<style>
    .field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
  width: 2.285714em
}

.container{
  padding-top:50px;
  margin: auto;
}
</style>
<div class="page-wrapper">
    <!-- Page-header start -->
    <div class="page-header">
        <div class="row align-items-end">
            <div class="col-lg-8">
                <div class="page-header-breadcrumb">
                    <ul class="breadcrumb-title">
                        <li class="breadcrumb-item">
                            <a href="index.html"> <i class="feather icon-home"></i> </a>
                        </li>
                        <li class="breadcrumb-item">Update Password</li>
                    </ul>
                </div>
                <div style="clear: both"></div>
                <div class="page-header-title">
                    <div class="d-inline">
                        <h4>Update Password</h4>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- Page-header end -->

    <!-- Page-body start -->
    <div class="page-body">
        <div class="row">
            <div class="col-sm-12">
                <!-- Zero config.table start -->
                <div class="card">
                    <div class="card-block">
                        <div class="mT-30">
                            @include('common.error')
                            <form class="container" method="POST" action="{{ route('change.password') }}" id="needs-validation">
                                @csrf
                                {{-- @foreach ($errors->all() as $error)
                                    <p class="text-danger">{{ $error }}</p>
                                @endforeach --}}
                                <div class="form-group" >
                                    <div class="col-md-6 control-label">
                                        <label for="validationCustom01">Old Password <span class="red">*</span></label>
                                        <input style="border-radius: 10px" id="password-field-1" type="password" class="form-control" placeholder="Old Password" name="current_password" autocomplete="off" required>
                                        <span toggle="#password-field-1" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-6 control-label">
                                        <label for="validationCustom01">New Password <span class="red">*</span></label>
                                        <input style="border-radius: 10px" id="password-field-2" type="password" class="form-control" placeholder="New Password" name="new_password" autocomplete="off" required>
                                        <span toggle="#password-field-2" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                    </div>
                                </div>

                                <div class="form-group" >
                                    <div class="col-md-6 control-label">
                                        <label for="validationCustom01">Confirm Password <span class="red">*</span></label>
                                        <input style="border-radius: 10px" id="password-field-3" type="password" class="form-control" placeholder="Confirmd Password" name="new_confirm_password" autocomplete="off" required>
                                        <span toggle="#password-field-3" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 control-label text-center" >
                                        <button class="btn btn-sm btn-success btn_width" type="submit"
                                            id="add_check">Save</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page-body end -->
</div>
<script>
    $(document).ready(function(){

        $('input[type="text"]').each(function(){
            $(this).attr('maxlength', '255');
        });
    });

   $(".toggle-password").click(function() {

    $(this).toggleClass("fa-eye fa-eye-slash");
    var input = $($(this).attr("toggle"));
    if (input.attr("type") == "password") {
    input.attr("type", "text");
    } else {
    input.attr("type", "password");
    }
   });
</script>
@endsection