@extends('layouts.app')

@section('content')
<div class="content">

    <div class="col-md-12 ml-auto mr-auto">
        <div class="header bg-gradient-primary py-10 py-lg-2 pt-lg-12">
            <div class="container">
                <div class="header-body text-center mb-7">
                    <div class="row justify-content-center">
                        <div class="col-lg-12 col-md-9">
                            <p class="text-lead text-light mt-3 mb-0">
                                @include('alerts.migrations_check')
                            </p>
                        </div>
                        <div class="col-lg-5 col-md-6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default panel-bg">
                <div class="panel-heading">Passwort abgelaufen</div>
                <div class="panel-body">
    <form>
      <div>
        <label for="password">Passwort abgelaufen - Bitte neues Passwort festlegen:</label>
        <div class="password-input">
          <input type="password" id="password" name="password" required>
          <span class="password-toggle-icon" id="togglePassword">
            <i class="fas fa-lock"  title="Passwort anzeigen"></i>
          </span>
        </div>
        <div class="requirements">
          @if($rules->lowercaseAlphabeticCharacters == 1)
          <p class="requirement lowercase">Mindestens ein Kleinbuchstaben</p>
          @endif
          @if($rules->uppercaseAlphabeticCharacters == 1)
          <p class="requirement uppercase">Mindestens ein Großbuchstaben</p>
          @endif
          @if($rules->numberCharacters == 1)
          <p class="requirement number">Mindestens eine Ziffer</p>
          @endif
          @if($rules->specialCharacters1 == 1)
          <p class="requirement symbol1">Mindestens eine der folgenden Zeichen #$%&@^`~</p>
          @endif
          @if($rules->specialCharacters2 == 1)
          <p class="requirement symbol2">Mindestens eine der folgenden Zeichen .,:; or space</p>
          @endif
          @if($rules->specialCharacters3 == 1)
          <p class="requirement symbol3">Mindestens eine der folgenden Zeichen "'</p>
          @endif
          @if($rules->specialCharacters4 == 1)
          <p class="requirement symbol4">Mindestens eine der folgenden Zeichen /\|-_</p>
          @endif
          @if($rules->specialCharacters5 == 1)
          <p class="requirement symbol5">Mindestens eine der folgenden Zeichen ()[]{}&lt;&gt;</p>
          @endif
          @if($rules->specialCharacters6 == 1)
          <p class="requirement symbol6">Mindestens eine der folgenden Zeichen *+?!=</p>
          @endif
          @if($rules->specialCharacters7 == 1)
          <p class="requirement ascii">Mindestens eine der erweiterten ASCII Zeichen</p>
          @endif
          @if($rules->passwordLength >= 0)
          <p class="requirement length">Mindestens 16 Zeichen</p>
          @endif
        </div>
      </div>
      <div class="form-group">
        <label for="confirmPassword">Passwort bestätigen:</label>
        <input type="password" id="confirmPassword" name="confirmPassword" required>
      </div>
      <div class="form-group">
        <button type="submit" id="submit" disabled>Speichern</button>
      </div>
      <div class="error-message"></div>
    </form>
    <script>
const form = document.querySelector('form');
const passwordInput = document.querySelector('#password');
const confirmPasswordInput = document.querySelector('#confirmPassword');
const requirements = document.querySelector('.requirements');
const requirementList = requirements.querySelectorAll('.requirement');
const errorMessage = document.querySelector('.error-message');
const submitButton = document.querySelector('#submit');

const prevPasswords = [];

passwordInput.addEventListener('input', () => {
  const password = passwordInput.value;

  let matchedRequirements = 0;

  for (let i = 0; i < requirementList.length; i++) {
    const requirement = requirementList[i];
    const regex = getRequirementRegex(requirement);
    const isMatched = regex.test(password);
    if (isMatched) {
      requirement.classList.add('matched');
      matchedRequirements++;
    } else {
      requirement.classList.remove('matched');
    }
  }

  if (password.length < {{$rules->passwordLength}} || matchedRequirements < requirementList.length) {
    submitButton.disabled = true;
  } else {
    submitButton.disabled = false;
  }
});

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const password = passwordInput.value;
  const confirmPassword = confirmPasswordInput.value;

  if (password !== confirmPassword) {
    errorMessage.textContent = 'Passwörter stimmen nicht überein';
    return;
  }

  if (password.length < {{$rules->passwordLength}}) {
    errorMessage.textContent = 'Passwörter müssen mindestens {{$rules->passwordLength}} Zeichen lang sein';
    return;
  }
@if($rules->lowercaseAlphabeticCharacters == 1)
  if (!/[a-z]/.test(password)) {
    errorMessage.textContent = 'Passwort muss mindestens ein Kleinbuchstaben enthalten';
    return;
  }
@endif
@if($rules->uppercaseAlphabeticCharacters == 1)
  if (!/[A-Z]/.test(password)) {
    errorMessage.textContent = 'Passwort muss mindestens ein Großbuchstaben enthalten';
    return;
  }
@endif
@if($rules->numberCharacters == 1)
  if (!/\d/.test(password)) {
    errorMessage.textContent = 'Passwort muss mindestens eine Ziffer enthalten';
    return;
  }
@endif
@if($rules->specialCharacters1 == 1)
  if (!/[#$%&@^`~]/.test(password)) {
    errorMessage.textContent = 'Passwort muss mindestens eine der folgenden Zeichen enthalten: #$%&@^`~.';
    return;
  }
@endif
@if($rules->specialCharacters2 == 1)
  if (!/[\.\,:;\s]/.test(password)) {
    errorMessage.textContent = 'Passwort muss mindestens eine der folgenden Zeichen enthalten: .,:; oder leerzeichen.';
    return;
  }

@endif
@if($rules->specialCharacters3 == 1)
  if (!/['"]/g.test(password)) {
    errorMessage.textContent = 'Passwort muss mindestens eine der folgenden Zeichen enthalten: "\'".';
    return;
}

@endif
@if($rules->specialCharacters4 == 1)
  if (!/[\/\|\-_\.]/g.test(password)) {
      errorMessage.textContent = 'Passwort muss mindestens eine der folgenden Zeichen enthalten: /|\\-_.';
      return;
  }

@endif
@if($rules->specialCharacters5 == 1)
  if (!/[(){}\[\]<>]/g.test(password)) {
    errorMessage.textContent = 'Passwort muss mindestens eine der folgenden Zeichen enthalten: ()[]{}<>.';
    return;
}

@endif
@if($rules->specialCharacters6 == 1)
  if (!/[\*\+\?\!=]/g.test(password)) {
      errorMessage.textContent = 'Passwort muss mindestens eine der folgenden Zeichen enthalten: *+?!=.';
      return;
  }

@endif
@if($rules->specialCharacters7 == 1)
  if (!/[^\u0000-\u007F]/.test(password)) {
    errorMessage.textContent = 'Passwort muss mindestens eine der Zeichen des erweiterten ASCII-Zeichensatzes enthalten.';
    return;
}
  @endif

  if (prevPasswords.includes(password)) {
      errorMessage.textContent = 'This password has been used before. Please choose a different password.';
      return;
  }

  prevPasswords.push(password);
  if (prevPasswords.length > 8) {
      prevPasswords.shift();
  }
  const  confirmEmail= $('#confirmEmail').val();

  errorMessage.textContent = '';
    $.post('/users/passwordReset', {
        password: password,
        password_confirmation: confirmPassword
    }, function(data) {
        window.location.reload();
    })

  alert('Password successfully changed.');
});

function getRequirementRegex(requirement) {
    const requirementClass = requirement.classList[1];
    switch (requirementClass) {
        case 'lowercase':
            return /[a-z]/;
        case 'uppercase':
            return /[A-Z]/;
        case 'number':
            return /\d/;
        case 'symbol1':
            return /[#$%&@^`~]/;
    case 'symbol2':
        return /[\.\,:;\s]/;
    case 'symbol3':
        return /['"]/g;
    case 'symbol4':
      return /[\/\|\\\-_]/g;
    case 'symbol5':
      return /[(){}\[\]<>]/g;
    case 'symbol6':
      return /[\*\+\?\!=]/g;
    case 'ascii':
      return /[^\u0000-\u007F]/;
    case 'length':
      return /^.{16,}$/;
    default:
      return null;
      }
 }

 confirmPasswordInput.addEventListener('input', () => {
  const password = passwordInput.value;
  const confirmPassword = confirmPasswordInput.value;

  if (password === confirmPassword) {
    confirmPasswordInput.style.border = '2px solid green';
  } else {
    confirmPasswordInput.style.border = '2px solid red';
  }
});

const showPasswordCheckbox = document.querySelector('#togglePassword');

showPasswordCheckbox.addEventListener('click', () => {
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            showPasswordCheckbox.innerHTML = '<i class="fas fa-eye"></i>';
        } else {
            passwordInput.type = 'password';
            showPasswordCheckbox.innerHTML = '<i class="fas fa-lock"></i>';
        }
    });
    </script>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection