@extends('auth.layout')

@section('content')
    <main class="login-form forgot_password">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-5">
                    <div class="card">

                        <div class=" mb-1 text-center">

                            <img src="{{ asset('assets/app-assets/images/logo/logo.png') }}"
                                style="width:60px;padding-top:15px;" alt="">


                            <h4 style="color:#fff; font-size: 20px;padding-top: 15px;"><b>Reset Password</b></h4>
                        </div>

                        <p class="card-title mb-1 text-center"><b>You are only one step a way from your new password, Reset
                                your password now.</b></p>


                        <div class="card-body">
                            @if (session('message'))
                                <div class="alert alert-success" role="alert">
                                    {{ session('message') }}
                                </div>
                            @endif

                            @if (session('error'))
                                <div class="alert alert-danger" role="alert">
                                    {{ session('error') }}
                                </div>
                            @endif
                            <form action="{{ route('reset.password.post') }}" method="POST"
                                onsubmit="return validateEmail()">
                                @csrf
                                <input type="hidden" name="token" value="{{ $token }}">

                                <div class="form-group row">
                                    <label for="vEmail" class="col-md-12 col-form-label">E-Mail Address</label>
                                    <div class="col-md-12">
                                        <input type="text" id="vEmail" class="form-control" name="vEmail" autofocus>
                                        @if ($errors->has('vEmail'))
                                            <span class="text-danger">{{ $errors->first('vEmail') }}</span>
                                        @endif
                                        <span class="text-danger" id="error_Invalid_email_format"
                                            style="display:none;">Invalid email format. </span>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="password" class="col-md-12 col-form-label">Password</label>
                                    <div class="col-md-12">
                                        <input type="password" id="password" class="form-control" name="password"
                                            autofocus>
                                        @if ($errors->has('password'))
                                            <span class="text-danger">{{ $errors->first('password') }}</span>
                                        @endif
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="password-confirm" class="col-md-12 col-form-label ">Confirm Password</label>
                                    <div class="col-md-12">
                                        <input type="password" id="password-confirm" class="form-control"
                                            name="password_confirmation" autofocus>
                                        @if ($errors->has('password_confirmation'))
                                            <span class="text-danger">{{ $errors->first('password_confirmation') }}</span>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-12 text-center">
                                    <button type="submit" class="btn " style="background:#DB644D;color:white;">
                                        Reset Password
                                    </button>
                                </div>

                                <br>
                                <div class="col-md-12 text-center">
                                    <a href="/division" style="color:#fff"><b>Login</b></a>
                                </div>


                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');
            const fields = ['password', 'confirm'].reduce((acc, key) => {
                const input = document.getElementById(key === 'confirm' ? 'password-confirm' : key);
                const errorSelector = `[id^="${key === 'confirm' ? 'password-confirmation' : key}-error"]`;
                const errorDiv = document.querySelector(errorSelector) || (() => {
                    const div = document.createElement('div');
                    div.className = 'text-danger mt-1';
                    div.style.fontSize = '12px';
                    input.parentNode.appendChild(div);
                    return div;
                })();

                acc[key] = {
                    input,
                    error: errorDiv,
                    touched: false
                };
                return acc;
            }, {});

            // Password validation and field validation functions
            const validatePassword = pwd => {
                const hasMinLength = pwd.length >= 8;
                const valid = [/[A-Z]/, /[a-z]/, /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/, /[0-9]/]
                    .every(regex => regex.test(pwd));

                return {
                    isValid: valid && hasMinLength,
                    message: !hasMinLength ?
                        "Password must be at least 8 characters long." :
                        "Password should contain 1 Uppercase, 1 Lowercase, 1 Special Character and 1 Numeric."
                };
            };


            const validateField = key => {
                const field = fields[key];
                const value = field.input.value.trim();

                if (!value) {
                    field.error.textContent = `The ${key} field is required.`;
                    return false;
                }

                if (key === 'confirm') {
                    const match = value === fields.password.input.value.trim();
                    field.error.textContent = match ? '' : 'Passwords do not match.';
                    return match;
                }

                const validation = validatePassword(value);
                field.error.textContent = validation.isValid ? '' : validation.message;
                return validation.isValid;
            };

            // Setup events
            Object.keys(fields).forEach(key => {
                ['blur', 'input'].forEach(event => {
                    fields[key].input.addEventListener(event, function() {
                        if (event === 'blur' || fields[key].touched) {
                            fields[key].touched = true;
                            validateField(key);

                            // Update confirm validation if password changes
                            if (key === 'password' && fields.confirm.touched) {
                                validateField('confirm');
                            }
                        }
                    });
                });
            });

            // Form submission
            form.addEventListener('submit', e => {
                Object.keys(fields).forEach(key => fields[key].touched = true);

                if (!Object.keys(fields).every(validateField)) {
                    e.preventDefault();
                }
            });
        });
    </script>
@endsection