@extends('dashboard.layouts.master')
@section('title', 'Change Password - Step 3')
@section('content')
<style>
.field-wrapper {
    position: relative;
}
.eye-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
}
</style>
<div class="padding p-30 edit-package">
    <div class="box">
        <div class="box-header m-b-2">
            <div class="box-header-left">
                <h3>Change Password</h3>
                <small>
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> / Change Password
                </small>
            </div>
            <div class="box-header-right">
                <div class="box-tool">
                    <ul class="nav">
                        <li class="nav-item inline">
                            <a class="nav-link" href="{{route('users')}}">
                                <i class="material-icons md-18">×</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="box-body">
            {!! Form::open(['route' => ['admin-change-password-update-with-otp'], 'method' => 'POST','name' => 'edit_password', 'id' => 'edit_password', 'autocomplete' => 'off','class'=>'form-horizontal']) !!}
            
            <div class="form-group row">
                <label for="password" class="col-xl-3 form-control-label">New Password <span class="valid_field">*</span></label>
                <div class="col-xl-9">
                    <div class="field-wrapper position-relative">
                         <input type="password" name="password" class="form-control" id="password" placeholder="Enter New Password" required>
                         <span class="eye-icon new-pass" onclick="togglePassword('password', 'eye-icon-new')">
                                <i class="fas fa-eye" id="eye-icon-new"></i>
                        </span>
                    </div>
                    @if(Session::has('errorMessageNewPassword'))
                        <span class="help-block"><span style="color: red;" class='validate'>{{ Session::get('errorMessageNewPassword') }}</span></span>
                    @endif
                    <div>
                        <small>
                            <i class="material-icons">&#xe8fd;</i>
                            Note : New Password must contain at least 1 uppercase letter, 1 lowercase letter, 1 number, 1 special character, and be at least 8 characters long
                        </small>
                    </div>
                </div>
            </div>

            <div class="form-group row">
                <label for="password_confirmation" class="col-xl-3 form-control-label">Re-enter New Password<span class="valid_field">*</span></label>
                <div class="col-xl-9">
                    <div class="field-wrapper position-relative">
                        <input type="password" name="password_confirmation" class="form-control" id="password_confirmation" placeholder="Enter Re-enter New Password" required>
                        <span class="eye-icon" onclick="togglePassword('password_confirmation', 'eye-icon-confirm')">
                                <i class="fas fa-eye" id="eye-icon-confirm"></i>
                        </span>
                    </div>
                    @if(Session::has('errorMessageConformPassword'))
                        <span class="help-block"><span style="color: red;" class='validate'>{{ Session::get('errorMessageConformPassword') }}</span></span>
                    @endif
                </div>
            </div>

            <div class="form-group row m-t-md">
                <div class="offset-xl-3 col-xl-9">
                    <button type="submit" class="solid-button m-r-1" id="save-update-btn">Save & Update</button>
                 </div>
            </div>

            {{Form::close()}}
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    function togglePassword(passwordId, eyeIconId) {
        var passwordField = document.getElementById(passwordId);
        var eyeIcon = document.getElementById(eyeIconId);
        
        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            eyeIcon.classList.remove('fa-eye');
            eyeIcon.classList.add('fa-eye-slash');
        } else {
            passwordField.type = 'password';
            eyeIcon.classList.remove('fa-eye-slash');
            eyeIcon.classList.add('fa-eye');
        }
    }
    
    $('#edit_password').on('submit', function() {
        $('#save-update-btn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Saving...');
    });
</script>
@endsection