{% extends 'main_base.html.twig' %}
{% block title %}Setze dein Passwort zurück{% endblock %}
{% block description %}Setze dein Passwort zurück{% endblock %}
{% block content %}
    <div class="page-area rp__section__wrapper">
        <div class="page-inner rp__section">
            <div class="page-content pb-0 mb-2">
                <div class="container p-0">
                    <div class="row">
                        <div class="col-md-8">
                            {{ form_start(resetForm) }}
                            {{ form_row(resetForm.plainPassword,{'attr':{'class':'form-control'}}) }}
                            <div class="passwort-alert mt-4">
                                <div class="line-height-1 my-2">
                                    <span></span>
                                    <div class="d-flex alert-line password-valid-step-1">
                                        <img src="{{ asset('media/site/red.svg') }}"
                                             class="alert-icon alert-icon-red mr-2" alt="">
                                        <img src="{{ asset('media/site/green.svg') }}"
                                             class="alert-icon alert-icon-green mr-2 d-none" alt="">
                                        <span class="alert-label small">Ihr Passwort muss mindestens 8 Charakter beinhalten</span>
                                    </div>
                                </div>
                                <div class="line-height-1 my-2">
                                    <span></span>
                                    <div class="d-flex alert-line password-valid-step-2">
                                        <img src="{{ asset('media/site/red.svg') }}"
                                             class="alert-icon alert-icon-red mr-2" alt="">
                                        <img src="{{ asset('media/site/green.svg') }}"
                                             class="alert-icon alert-icon-green mr-2 d-none" alt="">
                                        <span class="alert-label small">Ihr Passwort muss eine Ziffer oder Zahl beinhalten</span>
                                    </div>
                                </div>
                                <div class="line-height-1 my-2">
                                    <span></span>
                                    <div class="d-flex alert-line password-valid-step-3">
                                        <img src="{{ asset('media/site/red.svg') }}"
                                             class="alert-icon alert-icon-red mr-2" alt="">
                                        <img src="{{ asset('media/site/green.svg') }}"
                                             class="alert-icon alert-icon-green mr-2 d-none" alt="">
                                        <span class="alert-label small">Ihr Passwort muss Klein- und Grossbuchstaben beinhalten</span>
                                    </div>
                                </div>
                                <div class="line-height-1 my-2">
                                    <span></span>
                                    <div class="d-flex alert-line password-valid-step-4">
                                        <img src="{{ asset('media/site/red.svg') }}"
                                             class="alert-icon alert-icon-red mr-2" alt="">
                                        <img src="{{ asset('media/site/green.svg') }}"
                                             class="alert-icon alert-icon-green mr-2 d-none" alt="">
                                        <span class="alert-label small">Sie müssen Ihr Passwort bestätigen</span>
                                    </div>
                                </div>
                            </div>
                            {#<button type="submit" class="btn btn-secondary btn-submit mt-3">
                                <span>Setze dein Passwort zurück</span>
                            </button>#}

                            <button type="submit" class="btn md-btn btn-add-basket mt-5 btnResetPass">
                                <img src="{{ asset('assets/main/new/images/icon/green-tick.svg') }}"
                                     alt="Setze dein Passwort zurück" style="padding: 0; height: 34px; width: 34px;">
                                <span style="line-height: 1.5; height: 34px; padding: 7px 10px; font-size: 14px;"
                                      class="pbsfs2">bestätigen</span>
                            </button>


                            {{ form_end(resetForm) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        label {
            width: 100%;
        }
    </style>
    <script>
        let validInputs = document.getElementsByClassName("valid-password");
        for (input of validInputs) {
            input.addEventListener("input", function () {
                validPassWord(this);
            });
        }

        function validPassWord(e) {

            let validStep = 0;
            let totalStep = 3;
            let isValid = false;
            let value = e.value;
            let targetField = document.getElementsByClassName("passwort-alert")[0];

            let otherPasswordValue = document.getElementById("change_password_form_plainPassword_second").value;
            if (e.id === "change_password_form_plainPassword_first") {
                if (value.length >= 8) {
                    validStep++;
                    targetField.getElementsByClassName("password-valid-step-1")[0].getElementsByClassName("alert-icon-red")[0].classList.add("d-none");
                    targetField.getElementsByClassName("password-valid-step-1")[0].getElementsByClassName("alert-icon-green")[0].classList.remove("d-none");
                } else {
                    targetField.getElementsByClassName("password-valid-step-1")[0].getElementsByClassName("alert-icon-green")[0].classList.add("d-none");
                    targetField.getElementsByClassName("password-valid-step-1")[0].getElementsByClassName("alert-icon-red")[0].classList.remove("d-none");
                }

                if (/\d+/.test(value)) {
                    validStep++;
                    targetField.getElementsByClassName("password-valid-step-2")[0].getElementsByClassName("alert-icon-red")[0].classList.add("d-none");
                    targetField.getElementsByClassName("password-valid-step-2")[0].getElementsByClassName("alert-icon-green")[0].classList.remove("d-none");
                } else {
                    targetField.getElementsByClassName("password-valid-step-2")[0].getElementsByClassName("alert-icon-green")[0].classList.add("d-none");
                    targetField.getElementsByClassName("password-valid-step-2")[0].getElementsByClassName("alert-icon-red")[0].classList.remove("d-none");
                }

                if (/[a-z]/g.test(value) && /[A-Z]/g.test(value)) {
                    validStep++;
                    targetField.getElementsByClassName("password-valid-step-3")[0].getElementsByClassName("alert-icon-red")[0].classList.add("d-none");
                    targetField.getElementsByClassName("password-valid-step-3")[0].getElementsByClassName("alert-icon-green")[0].classList.remove("d-none");
                } else {
                    targetField.getElementsByClassName("password-valid-step-3")[0].getElementsByClassName("alert-icon-green")[0].classList.add("d-none");
                    targetField.getElementsByClassName("password-valid-step-3")[0].getElementsByClassName("alert-icon-red")[0].classList.remove("d-none");
                }

                if (validStep === 3) {
                    document.getElementById("change_password_form_plainPassword_second").disabled = false
                } else {
                    document.getElementById("change_password_form_plainPassword_second").disabled = true
                }
            } else {
                otherPasswordValue = document.getElementById("change_password_form_plainPassword_first").value;
            }

            if (value !== '' && value === otherPasswordValue) {
                validStep++;
                targetField.getElementsByClassName("password-valid-step-4")[0].getElementsByClassName("alert-icon-red")[0].classList.add("d-none");
                targetField.getElementsByClassName("password-valid-step-4")[0].getElementsByClassName("alert-icon-green")[0].classList.remove("d-none");
            } else {
                targetField.getElementsByClassName("password-valid-step-4")[0].getElementsByClassName("alert-icon-green")[0].classList.add("d-none");
                targetField.getElementsByClassName("password-valid-step-4")[0].getElementsByClassName("alert-icon-red")[0].classList.remove("d-none");
            }

            if (validStep === totalStep) {
                isValid = true;
            }

            return isValid;
        }
    </script>
{% endblock %}