@extends('layouts.auth')
@section('title', 'Login')

@section('content')
<div class="login-wrapper">
    {{-- Logo & Branding --}}

    {{-- Card Form Login --}}
    <div class="login-card">
        
        <div class="login-brand inside-card">
        <img src="{{ asset('images/pamsimas-logo.png') }}" alt="PAMSIMAS Logo" class="login-logo" />
        <p class="login-subtitle">Penyediaan Air Minum dan Sanitasi<br>Berbasis Masyarakat</p>
    </div>

    
        <h2 class="login-title">Masuk ke Akun</h2>

        @if(session('error'))
            <div class="alert alert-error">
                <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
            </div>
        @endif
        @if(session('status'))
            <div class="alert alert-success">
                <i class="fas fa-check-circle"></i> {{ session('status') }}
            </div>
        @endif

        <form action="{{ route('login.submit') }}" method="POST" class="login-form">
            @csrf
            <div class="input-group">
                <span class="input-icon"><i class="fas fa-envelope"></i></span>
                <input type="email" name="email" placeholder="Alamat Email" required autocomplete="email" />
            </div>
            <div class="input-group">
            <span class="input-icon"><i class="fas fa-lock"></i></span>
            <input type="password" name="password" id="password" placeholder="Kata Sandi" required autocomplete="current-password" />
            <span class="toggle-password" onclick="togglePassword()">
                <i id="toggleIcon" class="fas fa-eye"></i>
            </span>
            </div>
            <button type="submit" class="btn-login">
                <span>Login</span>
                {{-- <i class="fas fa-arrow-right"></i> --}}
            </button>
        </form>

        <div class="login-footer">
            Belum punya akun?
            <a href="{{ route('register') }}">Daftar sekarang</a>
        </div>
    </div>
</div>

<script>
function togglePassword() {
    const passwordInput = document.getElementById('password');
    const toggleIcon = document.getElementById('toggleIcon');

    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        toggleIcon.classList.remove('fa-eye');
        toggleIcon.classList.add('fa-eye-slash');
    } else {
        passwordInput.type = 'password';
        toggleIcon.classList.remove('fa-eye-slash');
        toggleIcon.classList.add('fa-eye');
    }
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var alerts = document.querySelectorAll('.alert');
    if (alerts.length > 0) {
        setTimeout(function() {
            alerts.forEach(function(alert) {
                alert.style.transition = 'opacity 0.5s ease';
                alert.style.opacity = '0';
                setTimeout(function() {
                    alert.remove();
                }, 500);
            });
        }, 5000); // 3 detik
    }
});
</script>
@endsection