@extends($activeTemplate . 'layouts.auth')
@section('content')
    <div class="login-text">
        <p><span style="color: #EC2244">Log in</span> to your investment account</p>
    </div>
    <form action="{{ route('user.login') }}" method="POST" class="verify-gcaptcha account-form">
                    @csrf
        <div class="input-group mb-3" id="uname_email_err">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="uil uil-user"></i></span>
            </div>
            <input type="text" class="form-control" placeholder="email address or username" id="uname" name="username">
        </div>
                <div class="input-group mt-3" id="u_password_err">
    <div class="input-group-prepend">
        <span class="input-group-text"><i class="uil uil-lock"></i></span>
    </div>
    <input type="password" class="form-control" placeholder="Enter a password" name="password" id="password" required>
    <div class="input-group-append">
        <span class="input-group-text uil uil-eye" id="togglePassword" onclick="togglePasswordVisibility('password')"></span>
    </div>
</div>

        <div class="row mt-3">
    
        </div>
        <input type="hidden" id="browser" name="browser"/>
        <button type="submit" id="login-btn" class="btn  btn-block">Log in</button>
        <div id="result"></div>
    </form> 
    <div class="or-text">
        <p>or</p>
    </div>
    <div class="row forgot" style="padding: 0px; margin: 0px;">
        <div class="col" style="padding: 0px; margin: 0px;">
            <p style="font-weight: 500;"><a style="color:  #EC2244;" href="{{ route('user.password.request') }}">Forgot password <i class="uil uil-question-circle"></i></a></p>
        </div>
        <div class="col" style="padding: 0px; margin: 0px;">
            <p style="text-align: right; font-weight: 500; color: red;"><a href="{{ route('user.register') }}" style="color: #EC2244; text-decoration: underline;">Sign up <i class="uil uil-arrow-up-right"></i></a></p>
        </div>
    </div>
@endsection

@push('script')

<script>
    function togglePasswordVisibility(inputId) {
        const passwordInput = document.getElementById(inputId);
        const togglePasswordIcon = document.getElementById('togglePassword');

        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            togglePasswordIcon.classList.remove('uil-eye');
            togglePasswordIcon.classList.add('uil-eye-slash');
        } else {
            passwordInput.type = 'password';
            togglePasswordIcon.classList.remove('uil-eye-slash');
            togglePasswordIcon.classList.add('uil-eye');
        }
    }
</script>

@endpush