@extends(backpack_view('layouts.auth'))

@section('content')
    <div class="page page-center input-2fa-container">
        <div class="container container-tight py-4">
            <div class="text-center mb-4 display-6 auth-logo-container">
                {!! backpack_theme_config('project_logo') !!}
            </div>
            <div class="card card-md">
                <div class="card-body">
                    <div class="text-center">
                        <div>Signing in as</div>
                        <div class="fw-bold">{{ $email }}</div>
                    </div>
                    <div class="mb-3">
                        <h2 class="h2 text-center my-4">Two-Factor Authentication</h2>
                    </div>
                    
                    <div class="mb-2">
                        <form method="POST">
                            @csrf

                            <div class="form-group mb-2">
                                {{-- <label class="form-label" for="one_time_password">Authentication Code</label> --}}
                                <input type="text" id="one_time_password" name="one_time_password" class="form-control" placeholder="Enter Authentication Code" required>
                                @error('one_time_password')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <input type="checkbox" id="check_use_backup_code" name="check_use_backup_code" value="1"/> <label for="check_use_backup_code">Use Backup Code</label>
                            </div>

                            <div class="form-footer">
                                <button type="submit" class="btn btn-primary mt-3 w-100">Verify</button>
                            </div>
                        </form>
                        <div class="text-center">
                            <a href="{{ route('backpack.auth.logout') }}">
                                Sign in with a different user
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


{{-- Inline JS --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const checkbox = document.getElementById('check_use_backup_code');
    const input = document.getElementById('one_time_password');

    checkbox.addEventListener('change', function () {
        if (this.checked) {
            input.placeholder = 'Enter Backup Code';
        } else {
            input.placeholder = 'Enter Authentication Code';
        }
    });
});
</script>