@extends('layout')

@section('content')
<style type="text/css">
  .password-tog-info {
  display: inline-block;
cursor: pointer;
font-size: 12px;
font-weight: 600;
position: absolute;
right: 50px;
top: 30px;
text-transform: uppercase;
z-index: 2;
}
</style>
<div class="container-fluid flex-grow-1 container-p-y">
    <h4 class="font-weight-bold py-3 mb-0">Change Passsword</h4>

    
<div class="card mb-4">
<div class="card-body">
<div id="alert_message"></div>
<form id="validation-form" method="post">
<div class="form-row">
  
@csrf
<input type="hidden" name="UserId" value="{{Session::get('UserId')}}">
<input type="hidden" name="PrevPass" value="{{$data[0]->Password}}">
<div class="form-group col-md-6">
<label class="form-label">Old Password</label>
<input type="password" name="OldPassword" id="OldPassword" class="form-control" placeholder="Old Password">
<span class="password-tog-info show" onclick="myFunction()"><i class="fa fa-eye" aria-hidden="true"></i></span>
</div>
<div class="form-group col-md-6"></div>
<div class="form-group col-md-6">
<label class="form-label">New Password</label>
<input type="password" name="AdminPassword" id="Password" class="form-control" placeholder="New Password">
<span class="password-tog-info show2" onclick="myFunction2()"><i class="fa fa-eye" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
<div class="form-group col-md-6"></div>
<div class="form-group col-md-6">
<label class="form-label">Confirm Password</label>
<input type="password" name="ConfirmPassword" id="ConfirmPassword" class="form-control" placeholder="Confirm Password">
<span class="password-tog-info show3" onclick="myFunction3()"><i class="fa fa-eye" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
</div>
<button type="submit" id="submit" class="btn btn-primary btn-finish">Change Password</button>
</form>
</div>
</div>

</div>
@endsection
@section('scriptcontent')
<script>
    function myFunction() {

var x = document.getElementById("OldPassword");
if (x.type === "password") {
  x.type = "text";
    $('.show').html('<i class="fa fa-eye-slash" aria-hidden="true"></i>');
} else {
  x.type = "password";
    $('.show').html('<i class="fa fa-eye" aria-hidden="true"></i>');
}
}
function myFunction2() {

var x = document.getElementById("Password");
if (x.type === "password") {
  x.type = "text";
    $('.show2').html('<i class="fa fa-eye-slash" aria-hidden="true"></i>');
} else {
  x.type = "password";
    $('.show2').html('<i class="fa fa-eye" aria-hidden="true"></i>');
}
}

function myFunction3() {

var x = document.getElementById("ConfirmPassword");
if (x.type === "password") {
  x.type = "text";
    $('.show3').html('<i class="fa fa-eye-slash" aria-hidden="true"></i>');
} else {
  x.type = "password";
    $('.show3').html('<i class="fa fa-eye" aria-hidden="true"></i>');
}
}
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

$(document).ready(function() {
   
    $('#validation-form').on('submit', function(e) {
        e.preventDefault();
        if ($('#validation-form').valid()) {
            var Password = $('#Password').val();
            var ConfirmPassword = $('#ConfirmPassword').val();
            if(Password != ConfirmPassword){
                $('#alert_message').removeClass('alert alert-success');
                     	$('#alert_message').fadeIn().addClass('alert alert-danger').html("Confirm Password Not Match");
        setTimeout(function(){  
            $('#alert_message').fadeOut("Slow"); 
        }, 2000);
            }
            else{
            $.ajax({
                url: "{{ url('updatePassword') }}",
                method: "POST",
                data: new FormData(this),
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $('#submit').attr('disabled', 'disabled');
                    $('#submit').text('Please Wait...');
                },
                success: function(data) {
                    if(data == 0){
                     	$('#alert_message').removeClass('alert alert-success');
                     	$('#alert_message').fadeIn().addClass('alert alert-danger').html("Old Password Not Match");
        setTimeout(function(){  
            $('#alert_message').fadeOut("Slow"); 
        }, 2000);
                     }
                     else{
                     	$('#alert_message').removeClass('alert alert-danger');
                     	$('#alert_message').fadeIn().addClass('alert alert-success').html("Password Changed Successfull...");
        setTimeout(function(){  
            $('#alert_message').fadeOut("Slow"); 
             window.location.href = '/{{projectUrl()}}dashboard';
        }, 2000);
                     }
                    $('#submit').attr('disabled', false);
                    $('#submit').text('Change Passsword');
                }
            });
        }
        }
    });


});
</script>
@endsection