@extends('backend.layouts.auth')

@section('content')
<section id="wrapper" class="login-register" style="background-image: url('{{ asset('backend/assets/images/background/login-register.jpg') }}');">
    <div class="login-box card">
        <div class="card-body">
                <div class="logo text-center">
                    <span class="db">

                          <!-- Light Logo icon -->
                          @if (config('GET.main_logo'))

                           <img src="{{ asset('assets/photo/'.config('GET.main_logo')) }}" alt="homepage" class="light-logo" />

                      @else
                      <img src="{{ asset('assets/photo/dots.png') }}" alt="homepage" class="light-logo" />


                      @endif
                        <!-- <img src="{{ asset('assets/photo/logo-icon.png') }}" alt="logo" /> -->
                    </span>
                    <h5 class="font-medium m-b-20 mt-3">Recover Password</h5>
                    <p>Send reset password link to your mail.</p>

                </div>

                    @if(Session::has('error'))
                        <div class="alert alert-danger" role="alert">
                            <strong>Error - </strong> {{ Session::get('error') }}
                        </div>
                    @endif
                    @if(Session::has('status'))
                        <div class="alert alert-success" role="alert">
                            <strong>Success - </strong> {{ Session::get('status') }}
                        </div>
                    @endif

                    <!-- Form -->
                    <div class="row">
                        <div class="col-12">
                            <form id="reset-pwd-form" method="POST" action="{{ route('send_reset_mail') }}">
                                @csrf
                                <input type="hidden" name="role" value="admin">

                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1"><i class="ti-user"></i></span>
                                    </div>
                                    <input type="email" name="email" value="{{ old('email') }}" placeholder="Email" class="form-control form-control-lg" aria-label="Email" aria-describedby="basic-addon1">

                                    @error('email')
                                        <div class="invalid-error" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </div>
                                    @enderror
                                </div>

                                <label id="email-error" class="error" style="color: red;" for="email"></label>
                                <div class="text-right mt-1 mb-3">
                                    <a href="{{ route('login') }}" id="to-recover1"><strong>Back to login</strong></a>
                                </div>
                                <div class="form-group text-center">
                                    <button class="btn btn-block btn-lg btn-info btn-rounded" type="submit" id="resetpasswordbutton">Reset Password</button>
                                </div>

                            </form>
                        </div>
                    </div>
                 </div>
             </div>
</section>
@endsection
<script>
    document.addEventListener('DOMContentLoaded', function() {
        $.validator.addMethod("validEmail", function(value, element) {
    // Regular expression for validating an email address
    var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return this.optional(element) || emailPattern.test(value);
}, "Please enter a valid email address.");
        // Define custom validation methods if needed
        $.validator.addMethod("noOnlySpaces", function(value, element) {
            return $.trim(value).length > 0;
        }, "Spaces are not allowed.");

        // Initialize jQuery Validation for the profile update form
        $('#reset-pwd-form').validate({
            rules: {
                email: {
                    required: true,
                    email: true,
                    noOnlySpaces: true,
                    maxlength: 150,
                    validEmail:true
                }
            },
            messages: {
        email: {
            required: "Please enter your email address.",
            email: "Please enter a valid email address.",
            maxlength: "Email address cannot exceed 150 characters.",
            noOnlySpaces: "Email address cannot contain only spaces.",
            validEmail: "Please enter a valid email address format."
        }
    },
            errorClass: "error",
            highlight: function(element) {
                $(element).addClass('is-invalid').removeClass('is-valid');
            },
            unhighlight: function(element) {
                $(element).removeClass('is-invalid');
                // .addClass('is-valid');
            },
            submitHandler: function(form) {
                // Form is valid, submit the form
                form.submit();
            }
        });

        $('#reset-pwd-form').on('submit', function(e) {
    $('#resetpasswordbutton').attr('disabled', true); // Disable button

    setTimeout(() => {
        $('#resetpasswordbutton').removeAttr('disabled'); // Re-enable after 3 seconds
    }, 3000);
});
    });
</script>


