@extends('layouts.master')

@section('title', 'Reset Password | ITVJP.COM')

@section('style-libraries')

@stop

@section('styles')
    
@stop

@section('content')
<div id="content">
    <br>
    <br>
    <section id="loginPage" style="min-height: 400px;">
        <div class="w3-container">
            <div id="login">
                <h4 class="text-center">{{ __('Reset Password') }}</h4>
                <p class="text-center">Enter your email address to retrieve your password</p>
               
                @if(session('error'))
                        <div id="auth" class="w3-modal">
                            <div class="w3-modal-content">
                            <div class="w3-containe w3-center">
                                <h3>{{ __('website.notify') }}</h3>
                                <p>{{ session('error') }}</p>
                            </div>
                            </div>
                        </div>
                    @endif
                    @if(session('success'))
                        <div id="auth" class="w3-modal">
                            <div class="w3-modal-content">
                            <div class="w3-containe w3-center">
                                <h3>{{ __('website.notify') }}</h3>
                                <p>{{ session('success') }}</p>
                            </div>
                            </div>
                        </div>
                    @endif
                <form method="POST" action="{{ route('password.email') }}" id="forgot">
                    {!! csrf_field() !!}
                    <input type="hidden" name="device_id" id="device_id" value="">
                    <div class="form-input">
                        <input type="email" class=" @if($errors->has('email')) w3-border-red @endif w3-input w3-border w3-round-large" id="email" value="{{ old('email') }}" name="email" placeholder=""/>
                        @if($errors->has('email'))
                            <div class="error w3-text-red">{{ $errors->first('email') }}</div>
                        @endif
                    </div>
                    <div class="form-input">
                        <button class="btn btn-login" id="submitbtn">{{ trans('Retrieve Password') }}</button>
                    </div>

                    <div class="w3-center fw-700 mb-20">
                        <a href="mailto:cs@itvmax.org">cs@itvmax.org</a>
                    </div>
              </form>
            </div>  
        </div>
    </section>
</div>
@endsection

@section('scripts')
    <script src="https://www.google.com/recaptcha/api.js?render={{ env('RECAPTCHA_SITE_KEY') }}"></script>

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            var form = document.getElementById('forgot');

            form.addEventListener('submit', function (event) {
                event.preventDefault();
                
                // Xác thực reCAPTCHA
                grecaptcha.ready(function() {
                    grecaptcha.execute('{{ env('RECAPTCHA_SITE_KEY') }}', { action: 'submit_form' })
                        .then(function(token) {
                            // Gửi token đến máy chủ để xác thực
                            fetch('/validate-recaptcha', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                body: JSON.stringify({ token: token })
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    // reCAPTCHA xác thực thành công
                                    form.submit(); // Gửi form đi nếu reCAPTCHA hợp lệ
                                    $('#submitbtn').addClass('disabled');
                                    $('#submitbtn').attr('disabled', true);
                                } else {
                                    // reCAPTCHA không hợp lệ
                                    alert('reCAPTCHA validation failed');
                                }
                            });
                        });
                });
            });
        });
        @if(session('success'))
            $('#auth').click(function() {
                window.location.href = "{{ route('get-login') }}";
            });
        @endif
    </script>
@stop