@extends('layouts.auth')
@section('title', 'Login')
@section('content')
<h6 class="fw-bold text-center mb-1">Selamat Datang</h6>
<p class="text-muted text-center small mb-3">Masuk ke akun Anda untuk melanjutkan</p>

@if($errors->any())
    <div class="alert alert-danger small py-2">
        <i class="bi bi-exclamation-circle me-1"></i>
        {{ $errors->first() }}
    </div>
@endif

<form method="POST" action="{{ route('login') }}">
    @csrf
    <div class="mb-3">
        <label class="form-label fw-medium small">Email</label>
        <div class="input-group">
            <span class="input-group-text"><i class="bi bi-envelope"></i></span>
            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                   value="{{ old('email') }}" placeholder="Masukkan email" required autofocus>
        </div>
    </div>
    <div class="mb-3">
        <label class="form-label fw-medium small">Password</label>
        <div class="input-group">
            <span class="input-group-text"><i class="bi bi-lock"></i></span>
            <input type="password" name="password" class="form-control @error('password') is-invalid @enderror"
                   placeholder="Masukkan password" required>
            <button class="btn btn-outline-secondary" type="button" id="togglePwd">
                <i class="bi bi-eye" id="eyeIcon"></i>
            </button>
        </div>
    </div>
    <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" name="remember" id="remember">
        <label class="form-check-label small" for="remember">Ingat saya</label>
    </div>
    <button type="submit" class="btn btn-primary w-100">
        <i class="bi bi-box-arrow-in-right me-2"></i> Masuk
    </button>
</form>

<div class="mt-3 p-2 bg-light rounded small text-muted">
    <strong>Demo Login:</strong><br>
    Admin: admin@service.com / admin123<br>
    Teknisi: budi@service.com / teknisi123
</div>

<script>
document.getElementById('togglePwd').addEventListener('click', function() {
    const input = document.querySelector('input[name=password]');
    const icon = document.getElementById('eyeIcon');
    if (input.type === 'password') {
        input.type = 'text'; icon.classList.replace('bi-eye', 'bi-eye-slash');
    } else {
        input.type = 'password'; icon.classList.replace('bi-eye-slash', 'bi-eye');
    }
});
</script>
@endsection