@extends('layouts.master-landing-page')
@section('content')
    <div class="login-page">
        <div class="login-screen">
            <div class="logo text-center">
                <a href="{{ route('landing-page.home') }}">
                    <img src="{{ asset('images/logo-basetax.svg') }}" alt="">
                </a>
            </div>
            <div class="img-center text-center">
                <img src="{{ asset('images/graphic-login.png') }}" alt="">
            </div>
            <div class="two-factor-header text-center">
                <strong>Two-Factor Authentication</strong>
                <p id="two-factor-status" class="text-muted mt-2">
                    Sending verification code to your email...
                </p>
            </div>
            <form novalidate="" class="form-login" method="post" action="{{ route('auth.two-factor.verify') }}">
                @csrf
                @if ($errors->has('code'))
                    <div class="alert alert-danger">
                        {{ $errors->first('code') }}
                    </div>
                @endif
                <div class="form-group">
                    <label>Verification Code</label>
                    <input type="text"
                           name="code"
                           placeholder="000000"
                           class="form-control text-center code-input"
                           maxlength="6"
                           inputmode="numeric"
                           pattern="[0-9]{6}"
                           autocomplete="one-time-code"
                           required=""
                           autofocus>
                    <small class="form-text text-muted">Enter the 6-digit code sent to your email</small>
                </div>
                <div class="form-group remember-me">
                    <label for="trust_device" class="ui-checkbox">
                        <input name="trust_device" id="trust_device" type="checkbox" value="1" checked>
                        <span>Trust this device for 30 days</span>
                    </label>
                    <small class="form-text text-muted">You won't be asked for a code on this device for the next month</small>
                </div>
                <button class="btn btn-block btn-primary" type="submit">
                    Verify Code
                </button>
            </form>
            <div class="resend-section text-center mt-3">
                <span class="text-muted">Didn't receive the code?</span>
                <form method="post" action="{{ route('auth.two-factor.resend') }}" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-link p-0">Resend Code</button>
                </form>
            </div>
            <div class="back-to-login text-center mt-3">
                <a href="{{ route('auth.login') }}">&larr; Back to Login</a>
            </div>
        </div>
    </div>
@endsection

@section('import-library')
    <style>
        .login-screen {
            background: #fff;
            padding: 1.5rem 1.25rem 1.875rem;
        }

        @media screen and (min-width: 768px) {
            .login-screen {
                padding: 4rem .9375rem 4.375rem;
                max-width: 27.5rem;
                margin: 0 auto;
            }
        }

        .login-screen .logo {
            text-align: center;
            max-width: unset;
        }

        .login-screen .logo a {
            display: block;
        }

        .login-screen .logo a img {
            width: 8.3125rem;
            height: 1.375rem;
            text-decoration: none;
        }

        @media screen and (min-width: 768px) {
            .login-screen .logo a img {
                width: 12.5rem;
                height: 2rem;
            }
        }

        .login-screen .img-center {
            margin-top: 2.25rem;
            text-align: center;
        }

        @media screen and (min-width: 768px) {
            .login-screen .img-center {
                margin-top: 3.125rem;
            }
        }

        .login-screen .img-center img {
            width: 6.25rem;
            height: 6.25rem;
        }

        @media screen and (min-width: 768px) {
            .login-screen .img-center img {
                width: 9.375rem;
                height: 9.375rem;
            }
        }

        .login-screen .form-login {
            margin-top: .625rem;
        }

        .two-factor-header {
            margin-top: 1rem;
        }

        .code-input {
            font-size: 1.5rem;
            letter-spacing: 8px;
            font-family: monospace;
            font-weight: bold;
        }

        .btn.btn-primary {
            color: #fff;
        }

        .btn-link {
            color: #2D237C;
            text-decoration: underline;
        }

        .back-to-login {
            margin-top: 1rem;
        }
    </style>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            // Only allow numeric input for the code field
            $('input[name="code"]').on('input', function () {
                this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6);
            });

            // Trigger 2FA code email via AJAX on page load
            $.post('{{ route('auth.two-factor.send') }}', {
                _token: '{{ csrf_token() }}'
            }).done(function () {
                $('#two-factor-status').text('We\'ve sent a 6-digit code to your email. Please enter it below to complete your login.');
            }).fail(function () {
                $('#two-factor-status').text('Failed to send code. Please click "Resend Code" below.');
            });
        });
    </script>
@endsection