@extends('layouts/fullLayoutMaster')

@section('title', 'Set up multi-factor authentication')

@section('page-style')
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/authentication.css')) }}">
@endsection

@section('content')
    <div class="auth-wrapper auth-basic px-2">
        <div class="auth-inner my-2">
            <div class="card mb-0">
                <div class="card-body">
                    <a href="{{ route('login') }}" class="brand-logo justify-content-center mb-2">
                        <img src="{{ app_logo_url() }}" alt="{{ config('app.name') }}">
                    </a>
                    <h2 class="card-title fw-bolder mb-1">Security setup required</h2>
                    <p class="card-text mb-2">Your organization requires multi-factor authentication. Complete one method to continue.</p>

                    @if($methods === [])
                    @elseif(is_array($enrollment) && ($enrollment['method'] ?? null) === 'totp')
                        <h5>Authenticator app</h5>
                        <p>Scan this QR code with your authenticator app, then verify the generated code.</p>
                        <div class="text-center mb-1">
                            <canvas data-totp-qr="{{ $enrollment['otpauth_uri'] }}"
                                    aria-label="Authenticator setup QR code"></canvas>
                        </div>
                        <p class="mb-50">Alternatively, enter this setup key manually:</p>
                        <div class="alert alert-secondary">
                            <code class="user-select-all">{{ $enrollment['secret'] }}</code>
                        </div>
                        <details class="mb-1">
                            <summary>Advanced setup URI</summary>
                            <code class="small text-break user-select-all">{{ $enrollment['otpauth_uri'] }}</code>
                        </details>
                        @include('auth.mfa.partials.enrollment-code-form', ['method' => 'totp'])
                    @elseif(is_array($enrollment) && in_array($enrollment['method'] ?? null, ['email', 'sms', 'whatsapp'], true))
                        <h5 class="text-capitalize">{{ $enrollment['method'] }} OTP</h5>
                        <p>Enter the code sent to {{ $enrollment['identifier'] }}.</p>
                        @include('auth.mfa.partials.enrollment-code-form', ['method' => $enrollment['method']])
                    @else
                        <div class="list-group mb-2">
                            @if(in_array('totp', $methods, true))
                                <form method="post" action="{{ route('mfa.enrollment.start') }}" class="list-group-item">
                                    @csrf
                                    <input type="hidden" name="method" value="totp">
                                    <button class="btn btn-outline-primary w-100" type="submit">Set up authenticator app</button>
                                </form>
                            @endif

                            @if(in_array('email', $methods, true))
                                <form method="post" action="{{ route('mfa.enrollment.start') }}" class="list-group-item">
                                    @csrf
                                    <input type="hidden" name="method" value="email">
                                    <button class="btn btn-outline-primary w-100" type="submit">Verify {{ $user->email }} by email</button>
                                </form>
                            @endif

                            @foreach(['sms' => 'SMS', 'whatsapp' => 'WhatsApp'] as $method => $label)
                                @if(in_array($method, $methods, true))
                                    <form method="post" action="{{ route('mfa.enrollment.start') }}" class="list-group-item">
                                        @csrf
                                        <input type="hidden" name="method" value="{{ $method }}">
                                        <label class="form-label" for="{{ $method }}-identifier">{{ $label }} phone number</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="{{ $method }}-identifier"
                                                   name="identifier" placeholder="+15551234567" required>
                                            <button class="btn btn-outline-primary" type="submit">Send code</button>
                                        </div>
                                    </form>
                                @endif
                            @endforeach

                            @if(in_array('passkey', $methods, true))
                                <div class="list-group-item">
                                    <label class="form-label" for="forced-passkey-name">Passkey name</label>
                                    <input type="text" id="forced-passkey-name" class="form-control mb-1" value="My passkey">
                                    <button type="button" class="btn btn-outline-primary w-100"
                                            data-passkey-register
                                            data-name-target="#forced-passkey-name"
                                            data-options-url="{{ route('mfa.passkeys.options') }}"
                                            data-submit-url="{{ route('mfa.passkeys.store') }}">
                                        Create passkey
                                    </button>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset(mix('js/mfa.js')) }}"></script>
    @if($methods === [])
        <script>
            toastr.error('No usable MFA provider is enabled. Contact an administrator.', 'Error');
        </script>
    @endif
    @if(in_array('passkey', $methods, true))
        <script src="{{ asset(mix('js/passkeys.js')) }}"></script>
    @endif
@endpush