@extends('layouts.auth')

@section('title', __('Two Factor Challenge'))

@section('content')

    <div class="flex-fill d-flex flex-column justify-content-center">
        <div class="container-tight py-6">
            <div class="text-center mb-4">
                <img src="{{ siteLogo() }}" height="100" alt="">
            </div>
            @if (session('status'))
                <div class="alert alert-success" role="alert">
                    {{ __('A fresh verification link has been sent to your email address.') }}
                </div>
            @endif
            <div class="card">
                <div class="card-body">
                    <p class="contentCode">{{ __('Please confirm access to your account by entering the authentication code provided by your authenticator application.') }}</p>
                    <p class="contentRecoveryCode" style="display: none">{{ __('Please confirm access to your account by entering one of your emergency recovery codes. ') }}</p>

                    <form class="d-inline" method="POST" action="{{ url('two-factor-challenge') }}">
                        @csrf
                        <div class="mt-3 contentCode">
                            <label class="form-label">{{ __('Code') }}</label>
                            <input type="text" class="form-control" name="code" autocomplete="off">
                        </div>
                        <div class="mt-3 contentRecoveryCode" style="display: none">
                            <label class="form-label">{{ __('Recovery Code') }}</label>
                            <input type="text" class="form-control" name="recovery_code" autocomplete="off">
                        </div>

                        <div class="text-right mt-4">
                            <button type="button" class="btn btn-link text-gray-dark text-decoration-underline toggleContent" data-show="contentRecoveryCode" data-hide="contentCode">
                                Use a recovery code
                            </button>

                            <button type="button" class="btn btn-link text-gray-dark text-decoration-underline toggleContent" data-show="contentCode" data-hide="contentRecoveryCode" style="display: none">
                                Use an authentication code
                            </button>

                            <button type="submit" class="btn btn-primary">
                                Login
                            </button>

                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script !src="">
        $('.toggleContent').click(function(){
            let button = this;
            let contentShow = $(this).data('show');
            let contentHide = $(this).data('hide');
            $('.'+contentShow).css('display', 'block')
            $('.'+contentHide).css('display', 'none')

            if(contentShow == 'contentRecoveryCode'){
                $('.toggleContent[data-show="contentCode"]').css('display', 'inline');
                $('.toggleContent[data-show="contentRecoveryCode"]').css('display', 'none');
            }else{
                $('.toggleContent[data-show="contentRecoveryCode"]').css('display', 'inline');
                $('.toggleContent[data-show="contentCode"]').css('display', 'none');
            }
        });
    </script>
@endpush