@extends('layouts.auth')

@section('title', 'Login')
@section('auth-title', 'Selamat Datang Kembali')
@section('auth-subtitle', 'Silakan login untuk mengakses dashboard')

@section('content')
<form method="POST" action="{{ route('login') }}">
    @csrf

    <div class="form-group">
        <label for="email">Alamat Email</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-envelope"></i></span>
            </div>
            <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" 
                   value="{{ old('email') }}" placeholder="Masukkan email" required autofocus>
            @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="form-group">
        <label for="password">Kata Sandi</label>
        <div class="input-group" style="position: relative;">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-lock"></i></span>
            </div>
            <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror" 
                   placeholder="Masukkan kata sandi" required>
            <span class="password-toggle" style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10; color: #888;">
                <i class="fa fa-eye"></i>
            </span>
            @error('password')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="form-group d-flex justify-content-between align-items-center">
        <div class="form-check">
            <input type="checkbox" name="remember" id="remember" class="form-check-input" {{ old('remember') ? 'checked' : '' }}>
            <label class="form-check-label" for="remember">Ingat Saya</label>
        </div>
        @if (Route::has('password.request'))
            <a href="{{ route('password.request') }}" style="color: #667eea; font-size: 0.9rem;">Lupa Password?</a>
        @endif
    </div>

    <button type="submit" class="btn btn-login">
        <i class="fa fa-sign-in"></i> Login
    </button>

    <div class="auth-link">
        Belum punya akun? <a href="{{ route('register') }}">Daftar Sekarang</a>
    </div>
</form>
@endsection