@extends('layouts.auth')
@section('title', 'Sign in')
@section('auth_title', 'Sign in to your account')
@section('auth_subtitle', 'Access the ' . ($appSettings->app_name ?? config('app.name', 'department')) . ' recruitment portal.')

@section('content')

<form method="POST" action="{{ route('login') }}" autocomplete="off" class="auth-form" novalidate>
    @csrf

    <div class="auth-group">
        <label for="email" class="auth-label">Email address</label>
        <div class="auth-input-wrap">
            <svg class="bi-lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M22 6l-10 7L2 6"/></svg>
            <input type="email" id="email" name="email" value="{{ old('email') }}"
                   class="auth-input @error('email') is-invalid @enderror"
                   placeholder="name@example.com"
                   required autofocus autocomplete="username">
        </div>
        @error('email')
            <div class="auth-error">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
                {{ $message }}
            </div>
        @enderror
    </div>

    <div class="auth-group">
        <div class="auth-meta-row">
            <label for="password" class="auth-label" style="margin:0;">Password</label>
            @if(Route::has('password.request'))
                <a href="{{ route('password.request') }}" class="auth-link">Forgot password?</a>
            @endif
        </div>
        <div class="auth-input-wrap">
            <svg class="bi-lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
            <input type="password" id="password" name="password"
                   class="auth-input has-trailing @error('password') is-invalid @enderror"
                   placeholder="Enter your password"
                   required autocomplete="current-password">
            <button type="button" class="auth-trailing-btn" id="togglePassword" tabindex="-1" aria-label="Toggle password visibility">
                <svg id="toggleIconOn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                <svg id="toggleIconOff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="display:none;"><path d="M17.94 17.94A10.94 10.94 0 0112 20c-7 0-11-8-11-8a21.77 21.77 0 015.06-5.94M9.9 4.24A10.94 10.94 0 0112 4c7 0 11 8 11 8a21.77 21.77 0 01-3.17 4.25M1 1l22 22"/></svg>
            </button>
        </div>
        @error('password')
            <div class="auth-error">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
                {{ $message }}
            </div>
        @enderror
    </div>

    <button type="submit" class="auth-submit">
        Sign in
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </button>

    <div class="auth-divider">or</div>

    <p class="auth-footnote">
        New candidate? <a href="{{ route('register') }}">Create an account</a>
    </p>
    <p class="auth-footnote" style="margin-top:6px;">
        Taking the exam? <a href="{{ route('exam-portal.login') }}">Sign in with roll number</a>
    </p>
</form>

@endsection

@push('scripts')
<script>
document.getElementById('togglePassword').addEventListener('click', function () {
    var pw = document.getElementById('password');
    var on = document.getElementById('toggleIconOn');
    var off = document.getElementById('toggleIconOff');
    if (pw.type === 'password') {
        pw.type = 'text'; on.style.display = 'none'; off.style.display = 'block';
    } else {
        pw.type = 'password'; on.style.display = 'block'; off.style.display = 'none';
    }
});
</script>
@endpush