@extends('layouts.app')

@section('title', 'Veriqo - Reset Your Password')

@section('content')

    <!-- main content -->
    <main class="auth-content">
        <section class="auth_sec animate-on-scroll" data-animation="fadeInUp">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-md-10">
                        <div class="auth_info_box">
                            <div class="reset_pass_title">
                                <h2>Reset Your Password</h2>
                                <p>Enter your email and we’ll send you a link to reset your password.</p>
                            </div>

                            <form id="resetPasswordForm" action="{{ url('/forgot-password') }}" method="post">
                              @csrf
                              
                                <div class="auth_inr">
                                    <div class="form-group">
                                        <input type="email" id="resetEmail" name="email" class="form-control" placeholder="Email*" maxlength="128">
                                        <small id="emailError" style="color: #dc3545; font-size: 12px; display: none;"></small>
                                        <small id="successMessage" style="color: #28a745; font-size: 12px; display: none;"></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;">Please verify that you are not a robot</small>
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" class="btn primary_btn w-100">Send Reset Link</button>
                                    </div>
                                    <div class="form-group text-center">
                                        <p>Back to<a href="./sign-in.html"> Sign In</a></p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <div id="successModal" class="success-modal" >
        <div class="modal-content">
            <!-- Close Button -->
            <button class="modal-close" id="modalCloseBtn">×</button>
            
            <div class="modal-icon">
                <img id="successIcon" src="assets/image/sucess.png" width="60" alt="" srcset="" style="display: none;">
                <img id="errorIcon" src="invalid.png" width="60" alt="" srcset="" style="display: none;">
            </div>
            <h3 class="modal-title">Password Reset Email Sent!</h3>
            <p class="modal-message">We've sent a password reset link to your email. Please check your inbox to reset your password.</p>
            <!-- <button id="loginBtn" class="modal-btn">Go to Login</button> -->
        </div>
    </div>

@endsection
  
  <script src="./assets/js/jquery.min.js"></script>
  <script src="./assets/js/bs.min.js"></script>
  <script src="{{ asset('assets/js/custom.js') }}"></script>
  <script>
$(document).ready(function () {

    $("#resetPasswordForm").on("submit", function(e) {

        let email = $("#resetEmail").val().trim();
        $("#emailError").hide();

        // Basic email validation
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (email === "") {
            e.preventDefault();
            $("#emailError").text("Email is required").show();
            return false;
        }

        if (!emailRegex.test(email)) {
            e.preventDefault();
            $("#emailError").text("Please enter a valid email").show();
            return false;
        }

        // Disable button during submit
        $("#submitBtn").prop("disabled", true).text("Sending...");
        return true; // allow normal form submit
    });

});

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>
 

</body>
</html>