@php
    // W projekcie global nie korzystamy z tabeli sw000_organizacja.
    $extends_file = 'layouts.index';
@endphp

@extends($extends_file)

@section('title', 'Weryfikacja 2FA')

@section('content')

{{-- left div */ --}}
<div class="my_FormLogin_LeftDiv">
    <img class="img_logo_login" src="{{ asset('/img/logo/logo_LoginForm_01.png') }}" alt="Logo">
</div>

{{-- right div */ --}}
<div class="my_FormLogin_RightDiv">

</div>

    <div class="my_FormLogin">
        <div class="my_FormLogin_card">
            <div class="card-header">Weryfikacja 2FA</div>
            <div class="card-body">
                @if(session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <p>Podaj kod z aplikacji Authenticator albo kod awaryjny.</p>
                <p class="text-muted">Konto: <strong>{{ $pendingUser->email }}</strong></p>

                <form method="POST" action="{{ route('2fa.verify') }}">
                    @csrf

                    <div class="form-group mb-3">
                        <label class="d-block mb-2">Wybierz sposob weryfikacji</label>
                        <div class="btn-group twofa-switch-group" role="group" aria-label="Przelacznik metody 2FA">
                            <button type="button" class="btn btn-outline-primary active" data-twofa-mode-trigger="totp">2FA</button>
                            <button type="button" class="btn btn-outline-secondary" data-twofa-mode-trigger="recovery">Kod awaryjny</button>
                        </div>
                    </div>

                    <div class="form-group" data-twofa-mode-panel="totp">
                        <label for="code">Kod TOTP</label>
                        @include('auth.partials.totp-code-inputs', [
                            'fieldName' => 'code',
                            'fieldId' => 'code',
                            'oldValue' => old('code'),
                            'length' => 6,
                            'mode' => 'numeric',
                            'separatorEvery' => 0,
                            'inactive' => false,
                            'placeholder' => 'np. 123456'
                        ])
                    </div>

                    <div class="form-group d-none" data-twofa-mode-panel="recovery">
                        <label for="recovery_code">Kod awaryjny</label>
                        @include('auth.partials.totp-code-inputs', [
                            'fieldName' => 'recovery_code',
                            'fieldId' => 'recovery_code',
                            'oldValue' => old('recovery_code'),
                            'length' => 12,
                            'mode' => 'alnum',
                            'separatorEvery' => 4,
                            'inactive' => true,
                            'placeholder' => 'np. AAAA-BBBB-CCCC'
                        ])
                    </div>

                    <button type="submit" class="btn btn-primary">Zweryfikuj</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        (function () {
            function setMode(mode) {
                var panels = document.querySelectorAll('[data-twofa-mode-panel]');
                var triggers = document.querySelectorAll('[data-twofa-mode-trigger]');

                panels.forEach(function (panel) {
                    var panelMode = panel.getAttribute('data-twofa-mode-panel');
                    var isActive = panelMode === mode;
                    panel.classList.toggle('d-none', !isActive);

                    var widgets = panel.querySelectorAll('[data-twofa-code-widget]');
                    widgets.forEach(function (widget) {
                        widget.dispatchEvent(new CustomEvent('twofa-widget-toggle', {
                            detail: { active: isActive }
                        }));
                    });
                });

                triggers.forEach(function (btn) {
                    var isActive = btn.getAttribute('data-twofa-mode-trigger') === mode;
                    btn.classList.toggle('active', isActive);
                    if (isActive) {
                        btn.classList.remove('btn-outline-secondary');
                        btn.classList.add('btn-outline-primary');
                    } else {
                        btn.classList.remove('btn-outline-primary');
                        btn.classList.add('btn-outline-secondary');
                    }
                });
            }

            document.addEventListener('DOMContentLoaded', function () {
                var defaultMode = '{{ old('recovery_code') ? 'recovery' : 'totp' }}';
                setMode(defaultMode);

                var triggers = document.querySelectorAll('[data-twofa-mode-trigger]');
                triggers.forEach(function (btn) {
                    btn.addEventListener('click', function () {
                        setMode(btn.getAttribute('data-twofa-mode-trigger'));
                    });
                });
            });
        })();
    </script>
@endsection