@extends('layouts.app')

@section('title','Login')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-4">

        <h4 class="mb-3 text-center fw-bold">Login e-Bansos</h4>

        @if ($errors->any())
        <div class="alert alert-danger">
            {{ $errors->first() }}
        </div>
        @endif

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

            <div class="mb-3">
                <label class="form-label">Username</label>
                <input type="text"
                    name="username"
                    class="form-control"
                    value="{{ old('username') }}"
                    required autofocus>
            </div>

            <div class="mb-3">
                <label class="form-label">Password</label>
                <input type="password"
                    name="password"
                    id="password"
                    class="form-control"
                    required>
            </div>

            {{-- Tampilkan Password --}}
            <div class="form-check mb-3">
                <input class="form-check-input"
                    type="checkbox"
                    id="showPassword"
                    onclick="togglePassword()">
                <label class="form-check-label" for="showPassword">
                    Tampilkan password
                </label>
            </div>

            <button class="btn btn-primary w-100 fw-semibold">
                Login
            </button>
        </form>

        {{-- LOGIN FINGERPRINT --}}
        <form method="POST" action="{{ route('login.fingerprint') }}" class="mt-3">
            @csrf
            <button class="btn btn-outline-secondary w-100">
                🔐 Login dengan Sidik Jari
            </button>
        </form>

        <small class="text-muted d-block mt-3 text-center">
            Akun harus aktif. Hubungi <b>Admin Sistem</b> jika bermasalah.
        </small>

        {{-- STATUS KONEKSI --}}
        <small class="d-block mt-1 text-center text-muted">
            <span id="connStatus">Memeriksa koneksi...</span>
        </small>

    </div>
</div>

{{-- Script --}}
<script>
    function togglePassword() {
        const pwd = document.getElementById('password');
        pwd.type = pwd.type === 'password' ? 'text' : 'password';
    }

    // Status online / offline
    function updateConnectionStatus() {
        const status = document.getElementById('connStatus');
        if (navigator.onLine) {
            status.innerHTML = '🟢 Online';
            status.classList.remove('text-danger');
            status.classList.add('text-success');
        } else {
            status.innerHTML = '🔴 Offline (login offline jika tersedia)';
            status.classList.remove('text-success');
            status.classList.add('text-danger');
        }
    }

    window.addEventListener('load', updateConnectionStatus);
    window.addEventListener('online', updateConnectionStatus);
    window.addEventListener('offline', updateConnectionStatus);
</script>
@endsection