@extends('layouts.plain')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6 col-xl-5">
        <div class="card overflow-hidden">

            <h5 class="bg-primary-subtle d-flex justify-content-center align-items-center text-primary py-3">Two-Factor Authentication</h5>

            <div class="card-body pt-0">
                <div class="p-2">
                    <form class="form-horizontal" method="POST" action="{{ route('two-factor.verify') }}">
                        @csrf

                        <div class="mb-3 bg-light p-3 rounded">
                            <p><strong>Two-factor code has been sent to:</strong></p>

                            <p>
                                Email:
                                {{ Str::limit(auth()->user()->email, 3) }}***{{ Str::afterLast(auth()->user()->email, '@') }}
                            </p>

                            @if(auth()->user()->phone_number)
                                <p>
                                    Phone:
                                    {{ substr(auth()->user()->phone_number, 0, 2) }}******{{ substr(auth()->user()->phone_number, -2) }}
                                </p>
                            @endif
                        </div>

                        <div class="mb-3">
                            <label for="code" class="form-label">Code</label>
                            <div class="input-group auth-pass-inputgroup">
                                <input type="text" class="form-control @error('code') is-invalid @enderror" name="code" id="code" placeholder="Enter code" required parsley-type="code" value="{{ old('code') }}">
                                @error('code')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="d-flex justify-content-start">
                            <button type="submit" class="btn btn-primary w-md">Verify</button>
                            @if($code_expired)
                                <button type="button" class="btn btn-warning w-md ms-2" id="regenerate-button">Regenerate Code</button>
                            @endif

                            <a class="btn btn-secondary w-md ms-2" href="{{ route('logout') }}"
                            onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                            Back to Login
                            </a>


                        </div>
                    </form>

                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                        @csrf
                     </form>
                </div>
            </div>
        </div>

        <div class="mt-5 text-center">
            <div>
                <p>© <script>document.write(new Date().getFullYear())</script> Smart Media. Crafted with <i class="mdi mdi-heart text-danger"></i></p>
            </div>
        </div>
    </div>
</div>

@endsection

@section('page-specific-script')
<script>
    document.getElementById('regenerate-button').addEventListener('click', function() {
        // Redirect to regenerate code or trigger the backend action via AJAX
        window.location.href = "{{ route('two-factor.regenerate') }}";
    });
</script>
@endsection