@extends('layouts.guest')

@section('title', 'Internet Banking Login')

@section('content')
@php
    $demoPassword = 'Password@123';
    $demos = [
        ['role' => 'David Okoro', 'id' => 'FFC-C-000001'],
        ['role' => 'Greenfield Agro Ltd', 'id' => 'FFC-C-000002'],
        ['role' => 'Halima Sani', 'id' => 'FFC-C-000005'],
    ];
    $prefill = old('identifier', request('identifier', ''));
@endphp

<h2 style="text-align:center;margin-bottom:1.25rem;font-family:var(--font-display);color:var(--fundi-navy);">Internet Banking</h2>
<p style="text-align:center;color:var(--fundi-ink-muted);font-size:0.875rem;margin-bottom:1.5rem;">Sign in with your customer number or registered email.</p>

<form method="POST" action="{{ route('portal.login') }}" id="portal-login-form">
    @csrf
    <div class="fundi-form-group">
        <label for="identifier">Customer No. or Email</label>
        <input type="text" id="identifier" name="identifier" class="fundi-input @error('identifier') is-invalid @enderror" value="{{ $prefill }}" required autofocus placeholder="e.g. FFC-C-000001">
    </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('identifier') ? $demoPassword : '' }}">
    </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 customers</p>
    <p class="fundi-demo__hint">Click a customer 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-id="{{ $demo['id'] }}"
                data-demo-password="{{ $demoPassword }}">
                <span class="fundi-demo__role">{{ $demo['role'] }}</span>
                <span class="fundi-demo__id">{{ $demo['id'] }}</span>
            </button>
        @endforeach
    </div>
    <p class="fundi-demo__pw">Password for all demos: <code>{{ $demoPassword }}</code></p>
</div>

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

@section('footer')
    <a href="{{ route('login') }}">Staff Login</a>
    ·
    <a href="{{ url('/') }}">Back to home</a>
@endsection