@extends('login.layout')
@section('content')
    <h2 class="mt-6 text-center text-[26px] font-bold tracking-tight text-gray-900">Forgot Password</h2>
    <div class="mt-6 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white py-8 px-4 border border-gray-100 shadow sm:rounded-lg sm:px-10">
            @if ($message = Session::get('error'))
                <div class="w-full mb-3 flex items-center p-4 border-l-4 border-red-500 bg-red-50 rounded shadow-sm animate-fade-in"
                    role="alert">
                    <svg class="w-5 h-5 text-red-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                    <span class="text-red-700 text-sm font-medium">{{ $message }}</span>
                </div>
            @endif
            <form action="{{ Route('user.setPasswordView') }}" method="POST">
                @csrf
                <div class="block">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700">User ID</label>
                        <div class="mt-1">
                            <input name="user_id" id="user_id" placeholder="User ID" type="text"
                                class="block w-full appearance-none rounded-md border px-3 py-2 placeholder-gray-400 shadow-sm focus:border-green-500 focus:outline-none focus:ring-green-500 sm:text-sm border-gray-300"
                                required>
                        </div>
                    </div>
                    <div class="mt-4 mb-4 flex flex-col items-center">
                        <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"
                            data-callback="recaptchaCallback"></div>
                        @if ($errors->has('g-recaptcha-response'))
                            <span class="mt-2 text-xs text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12" />
                                </svg>
                                {{ $errors->first('g-recaptcha-response') }}
                            </span>
                        @endif
                    </div>
                    <div class="pt-0">
                        <button type="submit" id="submitBtn"
                            class="flex w-full justify-center rounded-md border border-transparent bg-green-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 opacity-50 cursor-not-allowed"
                            disabled>{{ __('Forget_Password_btn') }}</button>
                    </div>

                    <div class="text-center mt-3">
                        <div class="text-sm">
                            <p class="text-[14px] text-[#ADADAD]">Already have an account? <a href="/"
                                    class="text-[#009966]">Sign In</a></p>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection


@push('scripts')
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        function validateEmail(email) {
            const re = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
            return re.test(email);
        }

        function enableSubmitIfValid() {
            var btn = document.getElementById('submitBtn');
            var userId = document.getElementById('user_id').value.trim();
            var recaptchaResponse = document.querySelector('textarea[name="g-recaptcha-response"]');
            var recaptchaValid = recaptchaResponse && recaptchaResponse.value.length > 0;
            if (validateEmail(userId) && recaptchaValid) {
                btn.disabled = false;
                btn.classList.remove('opacity-50', 'cursor-not-allowed');
            } else {
                btn.disabled = true;
                btn.classList.add('opacity-50', 'cursor-not-allowed');
            }
        }

        function recaptchaCallback() {
            enableSubmitIfValid();
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('user_id').addEventListener('input', enableSubmitIfValid);
        });
    </script>
@endpush