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

@push('styles')
<style>
.auth-wrap { min-height: calc(100vh - 68px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 40px; width: 100%; max-width: 420px; }
.auth-header { text-align: center; margin-bottom: 32px; }
.auth-icon { width: 56px; height: 56px; background: rgba(108,99,255,0.12); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--accent); margin: 0 auto 16px; }
.auth-header h1 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
.auth-header p { color: var(--muted); font-size: 0.88rem; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.form-group input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 11px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.9rem; outline: none; transition: border-color .2s; }
.form-group input:focus { border-color: var(--accent); }
.form-group .error { color: #f87171; font-size: 0.78rem; margin-top: 4px; }
.remember-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 0.83rem; }
.checkbox-label { display: flex; align-items: center; gap: 7px; color: var(--muted); cursor: pointer; }
.remember-row a { color: var(--accent); text-decoration: none; }
.submit-btn { width: 100%; padding: 12px; background: var(--accent); color: #fff; border: none; border-radius: 9px; font-family: var(--font-head); font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: background .2s; }
.submit-btn:hover { background: #7c72ff; }
.auth-footer { text-align: center; margin-top: 20px; font-size: 0.85rem; color: var(--muted); }
.auth-footer a { color: var(--accent); text-decoration: none; }
</style>
@endpush

@section('content')
<div class="auth-wrap">
    <div class="auth-card">
        <div class="auth-header">
            <div class="auth-icon"><i class="fa fa-key"></i></div>
            <h1>Welcome Back</h1>
            <p>Sign in to manage your licenses</p>
        </div>

        @if($errors->any())
        <div class="alert alert-error"><i class="fa fa-exclamation-circle"></i> {{ $errors->first() }}</div>
        @endif

        <form method="POST" action="{{ route('login') }}">
            @csrf
            <div class="form-group">
                <label>Email Address</label>
                <input type="email" name="email" value="{{ old('email') }}" placeholder="you@example.com" required autofocus>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" placeholder="••••••••" required>
            </div>
            <div class="remember-row">
                <label class="checkbox-label">
                    <input type="checkbox" name="remember" style="width:auto;">
                    Remember me
                </label>
            </div>
            <button type="submit" class="submit-btn"><i class="fa fa-sign-in-alt"></i> Sign In</button>
        </form>

        <div class="auth-footer">
            Don't have an account? <a href="{{ route('register') }}">Create one free</a>
        </div>
    </div>
</div>
@endsection