@extends('auth.layout')

@section('content')
    <main class="login-form forgot_password">
        <div class="container h-100">
            <div class="row justify-content-center align-items-center h-100">
                <div class="col-md-6 col-lg-4">
                    <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;padding-top:25px;font-size: 20px;"><b>{{ __('Change Password') }}</b></h4>

                        </div>

                        <p class="card-title mb-1 text-center"><b>Please enter your Old Password first, and then enter your
                                New Password to reset it.</b></p>

                        <div class="card-body">

                            <form action="{{ route('update-password') }}" method="POST">
                                @csrf

                                @if (session('status') || session('message'))
                                    <div class="alert alert-success" role="alert">
                                        {{ session('status') ?? session('message') }}
                                    </div>
                                @elseif (session('error'))
                                    <div class="alert alert-danger" role="alert">
                                        {{ session('error') }}
                                    </div>
                                @endif



                                <div class="form-group">
                                    <label for="oldPasswordInput" class="col-md-12 col-form-label text-md-left">Old
                                        Password</label>
                                    <div class="col-md-12">
                                        <input name="old_password" type="password"
                                            class="form-control @error('old_password') is-invalid @enderror"
                                            id="oldPasswordInput" placeholder="Old Password">
                                        @error('old_password')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="newPasswordInput" class="col-md-12 col-form-label text-md-left">New
                                        Password</label>
                                    <div class="col-md-12">
                                        <input name="new_password" type="password"
                                            class="form-control @error('new_password') is-invalid @enderror"
                                            id="newPasswordInput" placeholder="New Password">
                                        @error('new_password')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group ">
                                    <label for="confirmNewPasswordInput"
                                        class="col-md-12 col-form-label text-md-left">Confirm New Password</label>
                                    <div class="col-md-12">
                                        <input name="new_password_confirmation" type="password" class="form-control"
                                            id="confirmNewPasswordInput" placeholder="Confirm New Password">
                                    </div>
                                </div>


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

                                <br>
                                <div class="col-md-12  text-center">
                                    <a href="{{ route('logout') }}" style="color:#fff"><b>Logout & Login with new
                                            Password</b></a>
                                </div>


                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const submitBtn = document.getElementById('submitBtn');

            const form = document.querySelector('form');
            const fields = ['old', 'new', 'confirm'].reduce((acc, key) => {
                const input = document.getElementById(key === 'confirm' ? 'confirmNewPasswordInput' :
                    `${key}PasswordInput`);
                const error = document.createElement('div');
                error.className = 'text-danger mt-1';
                error.style.fontSize = '12px';
                input.parentNode.appendChild(error);
                acc[key] = {
                    input,
                    error,
                    touched: false
                };
                return acc;
            }, {});

            const validatePassword = pwd => ({
                isValid: pwd.length >= 8 && [/[A-Z]/, /[a-z]/, /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,
                    /[0-9]/
                ].every(r => r.test(pwd)),
                message: pwd.length < 8 ?
                    "Password must be at least 8 characters long." :
                    "Password should contain 1 Uppercase, 1 Lowercase, 1 Special Character and 1 Numeric."
            });

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

                // Special case for confirm password
                if (key === 'confirm') {
                    const newPwd = fields.new.input.value.trim();
                    if (!value) {
                        field.error.textContent = 'The confirm password field is required.';
                    } else if (value !== newPwd) {
                        field.error.textContent = 'Passwords do not match.';
                    } else {
                        field.error.textContent = validatePassword(value).isValid ? '' : validatePassword(value)
                            .message;
                    }
                    return;
                }

                // Standard validation
                if (!value) {
                    field.error.textContent = `The ${key} password field is required.`;
                } else {
                    const validation = validatePassword(value);
                    field.error.textContent = validation.isValid ? '' : validation.message;
                }
            };

            // Setup events
            Object.keys(fields).forEach(key => {
                // Blur event
                fields[key].input.addEventListener('blur', () => {
                    fields[key].touched = true;
                    updateField(key);
                });

                // Input event
                fields[key].input.addEventListener('input', () => {
                    if (fields[key].touched) {
                        updateField(key);
                        // Update confirm field if new password changes
                        if (key === 'new' && fields.confirm.touched) {
                            updateField('confirm');
                        }
                    }
                });
            });

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

                if (Object.keys(fields).some(key => fields[key].error.textContent !== '')) {
                    e.preventDefault();
                } else {
                    submitBtn.disabled = true;
                    // submitBtn.innerHTML = 'Processing...';
                }
            });
        });
    </script>
@endsection