@extends('layouts.auth')
@section('title', 'Sign In')
@section('content')
<h2>Welcome back</h2>
<p>Sign in to access your Credit Union account</p>

@if($errors->any())
    <div class="alert alert-danger mb-3">
        <i class="fa-solid fa-circle-exclamation me-2"></i>
        {{ $errors->first() }}
    </div>
@endif

<form method="POST" action="{{ route('login') }}">
    @csrf
    <div class="mb-3">
        <label class="form-label">Email Address</label>
        <input type="email" name="email" class="form-control" value="{{ old('email') }}" placeholder="you@ul.edu.lr" required autofocus>
    </div>
    <div class="mb-4">
        <label class="form-label">Password</label>
        <div class="input-group">
            <input type="password" name="password" class="form-control" id="passwordField" placeholder="••••••••" required>
            <span class="input-group-text" onclick="togglePwd()">
                <i class="fa-regular fa-eye" id="eyeIcon" style="font-size:.85rem;"></i>
            </span>
        </div>
    </div>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="remember" id="remember">
            <label class="form-check-label" for="remember" style="font-size:.82rem; color:#6b7a8d;">Remember me</label>
        </div>
        <a href="{{ route('password.request') }}" style="font-size:.82rem; color:#c9a84c; text-decoration:none;">Forgot password?</a>
    </div>
    <button type="submit" class="btn btn-auth">Sign In</button>
</form>

<div class="auth-divider">or</div>
<p style="text-align:center; font-size:.83rem; color:#6b7a8d;">
    Are you a new member? <a href="{{ route('register') }}" style="color:#0d1b2a; font-weight:600; text-decoration:none;">Request Access</a>
</p>

@push('scripts')
<script>
function togglePwd() {
    const f = document.getElementById('passwordField');
    const i = document.getElementById('eyeIcon');
    if (f.type === 'password') {
        f.type = 'text';
        i.className = 'fa-regular fa-eye-slash';
    } else {
        f.type = 'password';
        i.className = 'fa-regular fa-eye';
    }
}
</script>
@endpush
@endsection