@extends('layouts.app')

@section('title', 'Log In')

@section('content')
    <h1>Log In</h1>
    <p class="subtitle">Sign in to create, upload, and approve RFIs.</p>

    <div class="card">
        <form method="POST" action="{{ route('login.store') }}">
            @csrf

            <div class="field">
                <label for="email">Email</label>
                <input type="text" name="email" id="email" value="{{ old('email') }}" required autofocus>
            </div>

            <div class="field">
                <label for="password">Password</label>
                <div class="password-wrap">
                    <input type="password" name="password" id="password" required>
                    <button type="button" class="password-toggle" id="password-toggle" aria-label="Show password">Show</button>
                </div>
            </div>

            <div class="field" style="display:flex; align-items:center; gap:8px;">
                <input type="checkbox" name="remember" id="remember" style="width:auto;">
                <label for="remember" style="margin:0; font-weight:400;">Remember me</label>
            </div>

            <button class="btn w-full" type="submit">Log In</button>
        </form>
    </div>

    <script>
        document.getElementById('password-toggle').addEventListener('click', function () {
            const input = document.getElementById('password');
            const isHidden = input.type === 'password';
            input.type = isHidden ? 'text' : 'password';
            this.textContent = isHidden ? 'Hide' : 'Show';
            this.setAttribute('aria-label', isHidden ? 'Hide password' : 'Show password');
        });
    </script>

    <style>
        .password-wrap { position: relative; }
        .password-wrap input { padding-right: 56px; }
        .password-toggle {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--brand);
            font-size: .82rem;
            font-weight: 600;
            cursor: pointer;
            padding: 6px 8px;
        }
        .password-toggle:active { opacity: .7; }
    </style>
@endsection