@extends('layouts.guest')

@section('content')
    <div class="text-center">
        <div class="logo-box">
            <i class="bi bi-calendar-check"></i>
        </div>
        <h3 class="fw-bold text-dark mb-1">Welcome Back</h3>
        <p class="text-muted mb-4">Log in to manage your productivity</p>
    </div>

    <form action="{{ url('/login') }}" method="POST">
        @csrf
        <div class="mb-3">
            <label class="form-label fw-medium">Email Address</label>
            <div class="input-group">
                <span class="input-group-text bg-light border-end-0 rounded-start-2">
                    <i class="bi bi-envelope text-muted"></i>
                </span>
                <input type="email" name="email"
                    class="form-control bg-light border-start-0 @error('email') is-invalid @enderror"
                    placeholder="name@company.com" value="{{ old('email') }}" required autofocus>
                @error('email')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="mb-3">
            <div class="d-flex justify-content-between align-items-center mb-1">
                <label class="form-label fw-medium mb-0">Password</label>
                <a href="#" class="text-primary text-decoration-none small">Forgot Password?</a>
            </div>
            <div class="input-group">
                <span class="input-group-text bg-light border-end-0 rounded-start-2">
                    <i class="bi bi-shield-lock text-muted"></i>
                </span>
                <input type="password" name="password"
                    class="form-control bg-light border-start-0 @error('password') is-invalid @enderror"
                    placeholder="Min 8 characters" required>
                @error('password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="mb-4 d-flex align-items-center">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="remember" id="remember">
                <label class="form-check-label text-muted small" for="remember">
                    Keep me logged in
                </label>
            </div>
        </div>

        <button type="submit" class="btn btn-primary w-100 py-2 fw-bold text-uppercase tracking-wider rounded-2">
            Log In Now
        </button>
    </form>
@endsection
