@extends('layouts.app')

@section('title', 'Password Reset')

@section('content')
<style type="text/css">
    .toggle-password {
            position: absolute;
            right: -5px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
</style>
@if(session('success'))
<div class="alert alert-success">
    {{ session('success') }}
</div>
@endif
<div class="box">
    <div class="box-header">
        <h3 class="box-title">Change Password</h3>
    </div>
    <form class="box-body" id="chngps-form" action="{{ route('password.set') }}" method="post">
        @csrf
        <div class="row">

            <div class="form-group col-xs-10">
                <label for="email" class="col-sm-3 control-label">E-Mail Address</label>

                <div class="col-sm-4">
                    <input type="text" class="form-control" id="email" name="email" value="{{ $user_email->email }}" readonly>
                </div>
            </div>

            <div class="form-group col-xs-10">
                <label for="current_password" class="col-sm-3 control-label">Current Password</label>

                <div class="col-sm-4">
                    <input type="current_password" class="form-control" id="current_password" name="current_password" placeholder="Enter current password">
                    <span class="input-group-text toggle-password" onclick="togglePasswordVisibility('current_password')">
                        <i class="fa fa-eye-slash" aria-hidden="true"></i>
                    </span>
                </div>
                &nbsp;
                @error('current_password')
                <strong style="color: red;">{{ $message }}</strong>
                @enderror
            </div>

            <div class="form-group col-xs-10">
                <label for="password" class="col-sm-3 control-label">Password</label>

                <div class="col-sm-4">
                    <input type="password" class="form-control" id="password" name="password" placeholder="Enter password">
                    <span class="input-group-text toggle-password" onclick="togglePasswordVisibility('password')">
                        <i class="fa fa-eye-slash" aria-hidden="true"></i>
                    </span>
                </div>
                &nbsp;
                @error('password')
                <strong style="color: red;">{{ $message }}</strong>
                @enderror
            </div>
            <div class="form-group col-xs-10">
                <label for="confirm_password" class="col-sm-3 control-label">Confirm Password</label>

                <div class="col-sm-4">
                    <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Enter confirm password">
                    <span class="input-group-text toggle-password" onclick="togglePasswordVisibility('confirm_password')">
                        <i class="fa fa-eye-slash" aria-hidden="true"></i>
                    </span>
                </div>
                &nbsp;
                @error('confirm_password')
                <strong style="color: red;">{{ $message }}</strong>
                @enderror
            </div>
        </div>
        <input id="reg" type="hidden" name="reg" value={{ $reg_no }}>
        <input id="act" type="hidden" name="act" value={{ $act }}>
        <div class="row">
            <div class="form-group col-xs-2 pull-right">
                <button type="submit" class="btn btn-block btn-social btn-dropbox" id="chng_ps">
                    Change Password
                </button>
            </div>
        </div>
    </form>
</div>
@endsection
@push('scripts')
<script>
    function togglePasswordVisibility(passwordFieldId) {
            var passwordInput = document.getElementById(passwordFieldId);
            var passwordToggle = passwordInput.parentElement.querySelector('.toggle-password');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                passwordToggle.innerHTML = '<i class="fa fa-eye" aria-hidden="true"></i>';
            } else {
                passwordInput.type = 'password';
                passwordToggle.innerHTML = '<i class="fa fa-eye-slash" aria-hidden="true"></i>';
            }
        }
</script>
@endpush