<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login — {{ config('app.name') }}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="{{ asset('css/axis-enterprise.css') }}?v={{ filemtime(public_path('css/axis-enterprise.css')) }}" rel="stylesheet">
</head>
<body class="axis-login-page">
<div class="axis-login-shell">
    <div class="axis-login-card">
        <div class="axis-login-header">
            <div class="axis-login-brand">
                @include('partials.login-brand-logo')
            </div>
            <p class="axis-login-welcome">Welcome to AXIS ERP</p>
            <p class="axis-login-tagline">Sign in to Manage your Books</p>
        </div>

        @if(session('success'))
            <div class="axis-login-alert axis-login-alert-success">{{ session('success') }}</div>
        @endif

        @if($errors->any())
            <div class="axis-login-alert axis-login-alert-error">{{ $errors->first() }}</div>
        @endif

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

            <div class="axis-login-field">
                <input type="text"
                       name="username"
                       class="axis-login-input @error('username') is-invalid @enderror"
                       value="{{ old('username') }}"
                       placeholder="Enter your Username"
                       autocomplete="username"
                       autofocus
                       required>
            </div>

            <div class="axis-login-field">
                <input type="password"
                       name="password"
                       id="password"
                       class="axis-login-input @error('password') is-invalid @enderror"
                       placeholder="Enter your password"
                       autocomplete="current-password"
                       required>
            </div>

            <button type="submit" class="axis-login-submit" id="loginBtn">Sign In</button>
        </form>

        <div class="axis-login-footer">{{ strtoupper(config('app.name')) }}</div>
    </div>
</div>

<script>
document.getElementById('loginForm').addEventListener('submit', function () {
    const btn = document.getElementById('loginBtn');
    btn.textContent = 'Signing in...';
    btn.disabled = true;
});
</script>
</body>
</html>
