@extends('admin.layouts.layout-full')
@section('content')
<div class="row g-0 min-vh-100">

    <div class="col-xl-6 col-lg-6 d-none d-lg-block login-bg"></div>

    <div class="col-xl-6 col-lg-6 d-flex align-items-center justify-content-center bg-grey-login">
        <div class="w-100 login-form">
            <div class="text-center mb-4">
                <img src="{{ \App\Helpers\Helper::getBrandingAsset('logo') }}" alt="Logo" class="login-logo">
                <h1>Two-Factor Verification</h1>
                <p class="text-muted">
                    @if($method === 1)
                        Enter the 6-digit code sent to your phone.
                    @else
                        Enter the 6-digit code from your authenticator app.
                    @endif
                </p>
            </div>

            @if($errors->any())
                <div class="alert alert-danger">{{ $errors->first() }}</div>
            @endif

            <form method="POST" action="{{ route('admin.2fa.verify.post') }}" id="tfa-form">
                @csrf
                <div class="form-group">
                    <input
                        type="text"
                        name="code"
                        id="tfa-code"
                        class="form-control form-control-lg text-center letter-spacing-lg"
                        maxlength="6"
                        inputmode="numeric"
                        pattern="[0-9]{6}"
                        placeholder="000000"
                        autocomplete="one-time-code"
                        autofocus
                        required>
                </div>

                <div class="d-grid gap-2 mt-4">
                    <button class="btn waves-effect waves-light" type="submit" id="tfa-submit">Verify</button>
                </div>
            </form>

            <div class="text-center mt-3">
                @if($method === 1)
                    <a href="#" id="resend-code-link" class="text-muted small">Resend code</a>
                    <span class="text-muted small ms-2" id="resend-timer"></span>
                    <br>
                @endif
                <a href="{{ route('admin.login') }}" class="text-muted small">Back to login</a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('page_script')
<script>
(function ($) {
    'use strict';

    // Auto-submit when 6 digits entered
    $('#tfa-code').on('input', function () {
        var val = $(this).val().replace(/\D/g, '').slice(0, 6);
        $(this).val(val);
        if (val.length === 6) {
            $('#tfa-form').submit();
        }
    });

    @if($method === 1)
    // Resend code with 30s cooldown
    var _cooldown = 0;
    var _resendTimer = null;

    function startCooldown(seconds) {
        _cooldown = seconds;
        $('#resend-code-link').addClass('disabled text-secondary').css('pointer-events', 'none');
        _resendTimer = setInterval(function () {
            _cooldown--;
            if (_cooldown <= 0) {
                clearInterval(_resendTimer);
                $('#resend-code-link').removeClass('disabled text-secondary').css('pointer-events', '');
                $('#resend-timer').text('');
            } else {
                $('#resend-timer').text('(' + _cooldown + 's)');
            }
        }, 1000);
    }

    $('#resend-code-link').on('click', function (e) {
        e.preventDefault();
        if ($(this).hasClass('disabled')) { return; }
        $.ajax({
            url: '{{ route("admin.2fa.resend") }}',
            method: 'POST',
            data: { _token: _token },
            success: function () {
                toastr.success('Code resent successfully.');
                startCooldown(30);
            },
            error: function (xhr) {
                var msg = xhr.responseJSON && xhr.responseJSON.error ? xhr.responseJSON.error : 'Failed to resend code.';
                toastr.error(msg);
            }
        });
    });
    @endif

})(jQuery);
</script>
<style>
.letter-spacing-lg { letter-spacing: 0.5em; font-size: 1.5rem; font-weight: 600; }
</style>
@endpush