@extends('layouts.guest')

@section('title', 'Staff Login')

@section('content')
@php
    $demoPassword = 'Password@123';
    $demos = [
        ['role' => 'System Admin', 'email' => 'admin@fundifinance.ng'],
        ['role' => 'Managing Director', 'email' => 'md@fundifinance.ng'],
        ['role' => 'Credit Lead', 'email' => 'credit.lead@fundifinance.ng'],
        ['role' => 'Credit Officer', 'email' => 'credit1@fundifinance.ng'],
        ['role' => 'CFO / Treasurer', 'email' => 'cfo@fundifinance.ng'],
        ['role' => 'Compliance', 'email' => 'compliance@fundifinance.ng'],
        ['role' => 'Ops Authorizer', 'email' => 'ops.auth@fundifinance.ng'],
        ['role' => 'Ops Inputer', 'email' => 'ops.input@fundifinance.ng'],
        ['role' => 'HR', 'email' => 'hr@fundifinance.ng'],
        ['role' => 'Legal', 'email' => 'legal@fundifinance.ng'],
    ];
    $prefill = old('email', request('email', ''));
@endphp

<h2 style="text-align:center;margin-bottom:1.25rem;font-family:var(--font-display);color:var(--fundi-navy);">Staff Login</h2>
<p style="text-align:center;color:var(--fundi-ink-muted);font-size:0.875rem;margin-bottom:1.5rem;">Sign in to the {{ platform_name() }} operations platform.</p>

<form method="POST" action="{{ route('login') }}" id="staff-login-form">
    @csrf
    <div class="fundi-form-group">
        <label for="email">Email address</label>
        <input type="email" id="email" name="email" class="fundi-input @error('email') is-invalid @enderror" value="{{ $prefill }}" required autofocus autocomplete="username">
    </div>
    <div class="fundi-form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" class="fundi-input @error('password') is-invalid @enderror" required autocomplete="current-password" value="{{ request()->has('email') ? $demoPassword : '' }}">
    </div>
    <div class="fundi-form-group">
        <label class="fundi-checkbox">
            <input type="checkbox" name="remember" value="1" {{ old('remember') ? 'checked' : '' }}>
            Remember me
        </label>
    </div>
    <button type="submit" class="fundi-btn fundi-btn--primary" style="width:100%;">Sign In</button>
</form>

<div class="fundi-demo">
    <p class="fundi-demo__label">Demo accounts</p>
    <p class="fundi-demo__hint">Click a role to fill the form, then sign in.</p>
    <div class="fundi-demo__list">
        @foreach($demos as $demo)
            <button type="button"
                class="fundi-demo__btn"
                data-demo-email="{{ $demo['email'] }}"
                data-demo-password="{{ $demoPassword }}">
                <span class="fundi-demo__role">{{ $demo['role'] }}</span>
                <span class="fundi-demo__id">{{ $demo['email'] }}</span>
            </button>
        @endforeach
    </div>
    <p class="fundi-demo__pw">Password for all demos: <code>{{ $demoPassword }}</code></p>
</div>

<script>
(function () {
    var form = document.getElementById('staff-login-form');
    var email = document.getElementById('email');
    var password = document.getElementById('password');
    document.querySelectorAll('[data-demo-email]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            email.value = btn.getAttribute('data-demo-email') || '';
            password.value = btn.getAttribute('data-demo-password') || '';
            email.focus();
        });
    });
})();
</script>
@endsection

@section('footer')
    <a href="{{ route('portal.login') }}">Customer Internet Banking</a>
    ·
    <a href="{{ url('/') }}">Back to home</a>
@endsection