@extends('layouts.app')

@section('title', 'Veriqo - Set New Password')

@section('content')

    <!-- main content -->
    <main class="auth-content">
        <section class="auth_sec animate-on-scroll" data-animation="fadeInLeft">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-md-10">
                        <div class="auth_info_box">
                            <h2>Set New Password</h2>

                            <form id="setPasswordForm" action="{{ route('resetPassword.handle') }}" method="post" novalidate>
                                @csrf
                                <input type="hidden" name="token" value="{{ $token }}">
                                <input type="hidden" name="email" value="{{ $email }}">                                <div class="auth_inr">
                                    <div class="form-group">
                                        <div style="position: relative;">
                                            <input type="password" id="password" name="password" class="form-control" placeholder="New Password*" style="padding-right: 40px;" maxlength="16">
                                            <span class="password-toggle" id="newPasswordToggle" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10;">
                                                <img src="./assets/image/hidden 1.png" alt="Show password" id="newPasswordToggleIcon" style="width: 20px; height: 20px;">
                                            </span>
                                        </div>
                                        <small id="passwordError" style="color: #dc3545; font-size: 12px; display: none; margin-top: 5px;"></small>
                                    </div>
                                    <div class="form-group">
                                        <div style="position: relative;">
                                            <input type="password" id="confirmPassword" name="password_confirmation" class="form-control" placeholder="Re-enter Password*" style="padding-right: 40px;" maxlength="16">
                                            <span class="password-toggle" id="confirmPasswordToggle" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10;">
                                                <img src="./assets/image/hidden 1.png" alt="Show password" id="confirmPasswordToggleIcon" style="width: 20px; height: 20px;">
                                            </span>
                                        </div>
                                        <small id="confirmPasswordError" style="color: #dc3545; font-size: 12px; display: none; margin-top: 5px;"></small>
                                    </div>
                                    <div class="form-group">
                                        <!-- reCAPTCHA v3 runs invisibly in background - no widget needed -->
                                        <small id="recaptchaError" style="color: #dc3545; font-size: 12px; display: none; margin-top: 5px;">Please verify that you are not a robot</small>
                                    </div>
                                    <div class="form-group">
                                        <small id="successMessage" style="color: #28a745; font-size: 12px; display: none; margin-top: 5px;"></small>
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" id="SubmitBtn" class="btn primary_btn w-100">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

  @endsection
  
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script src="{{ asset('assets/js/bs.min.js') }}"></script>
<script src="{{ asset('assets/js/custom.js') }}"></script>
  
  <script>
    document.addEventListener('DOMContentLoaded', function () {
        const Swal = window.Swal;

        // Show SUCCESS message
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: "{{ session('success') }}",
                confirmButtonText: 'OK',
                customClass: {
                    popup: 'swal2-popup',
                    confirmButton: 'btn btn-success'
                },
                buttonsStyling: false
            });
        @endif

        // Show ERROR message (custom error, not validation)
        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: "{{ session('error') }}",
                confirmButtonText: 'OK',
                customClass: {
                    popup: 'swal2-popup',
                    confirmButton: 'btn btn-danger'
                },
                buttonsStyling: false
            });
        @endif

        // Show VALIDATION errors (from $errors)
        @if($errors->any())
            let errorMessage = '';
            @foreach($errors->all() as $error)
                errorMessage += "• {{ $error }}\n";
            @endforeach

            Swal.fire({
                icon: 'error',
                title: 'Validation Failed',
                text: errorMessage.trim(),
                confirmButtonText: 'Fix',
                customClass: {
                    popup: 'swal2-popup',
                    confirmButton: 'btn btn-primary'
                },
                buttonsStyling: false
            }).then(() => {
                // Optional: focus first input
                document.querySelector('.form-control')?.focus();
            });
        @endif
    });
  </script>
  <script>
  document.addEventListener('DOMContentLoaded', function () {

    const resetForm = document.getElementById('setPasswordForm');
    const submitBtn = document.getElementById('SubmitBtn');
    if (!resetForm) {
        console.error('Reset password form not found!');
        return;
    }

    resetForm.addEventListener('submit', function(e) {
        if (!validateForm()) {
                e.preventDefault(); // Stop submission
                // Revert button to original state (in case it was changed)
                submitBtn.textContent = 'Submit';
                submitBtn.disabled = false;
                return;
            }

            // ✅ Validation passed → show "Processing..."
            submitBtn.textContent = 'Processing...';
            submitBtn.disabled = true;
        // If valid, form submits normally via POST
    });

    // Toggle password visibility
    const passwordToggle = document.getElementById('newPasswordToggleIcon');
    const confirmPasswordToggle = document.getElementById('confirmPasswordToggle');

    if (passwordToggle) {
        passwordToggle.addEventListener('click', () => togglePassword('password'));
    }
    if (confirmPasswordToggle) {
        confirmPasswordToggle.addEventListener('click', () => togglePassword('confirm'));
    }

    function togglePassword(type = 'password') {
        const inputId = type === 'confirm' ? 'confirmPassword' : 'password';
        const iconId = type === 'confirm' ? 'confirmPasswordToggleIcon' : 'newPasswordToggleIcon';
        const input = document.getElementById(inputId);
        const icon = document.getElementById(iconId);
        if (!input || !icon) return;

        if (input.type === 'password') {
            input.type = 'text';
            icon.src = './assets/image/Icon.png';
        } else {
            input.type = 'password';
            icon.src = './assets/image/hidden 1.png';
        }
    }

    function showError(elementId, message) {
        const errorEl = document.getElementById(elementId);
        if (errorEl) {
            errorEl.textContent = message;
            errorEl.style.display = 'block';
        }
    }

    function validateForm() {
        let isValid = true;

        // Clear previous errors
        document.querySelectorAll('small[id$="Error"]').forEach(el => {
            el.style.display = 'none';
            el.textContent = '';
        });

        // Password
        const password = document.getElementById('password').value;
        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{6,16}$/;
        if (!password) {
            showError('passwordError', 'Password is required.');
            isValid = false;
        } else if (password.length < 6) {
            showError('passwordError', 'Password must be at least 6 characters long.');
            isValid = false;
        } else if (password.length > 16) {
            showError('passwordError', 'Password cannot exceed 16 characters.');
            isValid = false;
        } else if (!passwordRegex.test(password)) {
            showError('passwordError', 'Password must contain at least 1 uppercase letter, 1 lowercase letter, 1 number, and 1 special character.');
            isValid = false;
        } else if (/\s/.test(password)) {
            showError('passwordError', 'Password cannot contain spaces.');
            isValid = false;
        }

        // Confirm Password
        const confirmPassword = document.getElementById('confirmPassword').value;
        if (!confirmPassword) {
            showError('confirmPasswordError', 'Confirm Password is required.');
            isValid = false;
        } else if (confirmPassword !== password) {
            showError('confirmPasswordError', 'Passwords do not match.');
            isValid = false;
        }

        return isValid;
    }

    function handleRecaptchaAndSubmit(form) {
        grecaptcha.ready(function() {
            grecaptcha.execute('6Lep5CQsAAAAALuw10BFqhYnFmOgWWs6My4IcavJ', { action: 'signup' }).then(function(token) {
                let recaptchaInput = form.querySelector('input[name="g-recaptcha-response"]');
                if (!recaptchaInput) {
                    recaptchaInput = document.createElement('input');
                    recaptchaInput.type = 'hidden';
                    recaptchaInput.name = 'g-recaptcha-response';
                    form.appendChild(recaptchaInput);
                }
                recaptchaInput.value = token;
                form.submit(); // Now submit the form normally (no AJAX)
            }).catch(function() {
                showError('recaptchaError', 'reCAPTCHA verification failed. Please try again.');
            });
        });
    }

  });
  </script>
</body>
</html>