@extends('layouts.auth')
@section('title','Sign In')
@section('content')

@if($errors->any())
<div class="alert alert-danger rounded-3 mb-3 py-2 px-3" style="font-size:.82rem;">
    <i class="bi bi-exclamation-triangle-fill me-1"></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" placeholder="you@company.com" value="{{ old('email') }}" autofocus required>
    </div>
    <div class="mb-4">
        <label class="form-label">Password</label>
        <div class="input-group">
            <input type="password" name="password" id="pwd" class="form-control" placeholder="Enter your password" required>
            <button class="btn btn-outline-secondary" type="button" onclick="togglePwd()" style="border-radius:0 10px 10px 0;border-color:#dde3ea;">
                <i class="bi bi-eye" id="pwd-icon"></i>
            </button>
        </div>
    </div>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <label class="d-flex align-items-center gap-2 cursor-pointer" style="font-size:.85rem;color:#374151;">
            <input type="checkbox" name="remember" class="form-check-input m-0"> Remember me
        </label>
    </div>
    <button type="submit" class="btn btn-primary w-100">
        <i class="bi bi-box-arrow-in-right me-2"></i>Sign In
    </button>
</form>

<div class="hint-box mt-3">
    <div class="fw-bold mb-1">Demo Credentials</div>
    <div>🏛️ President: <code>president@hrms.demo</code></div>
    <div>👤 HR Admin:  <code>hr.admin@hrms.demo</code></div>
    <div>📋 Employee:  <code>j.pewee@hrms.demo</code></div>
    <div class="mt-1 text-muted">Password: <code>password</code></div>
</div>

<script>
function togglePwd(){
    const i=document.getElementById('pwd');
    const ic=document.getElementById('pwd-icon');
    if(i.type==='password'){i.type='text';ic.className='bi bi-eye-slash';}
    else{i.type='password';ic.className='bi bi-eye';}
}
</script>
@endsection