{% extends 'main_base.html.twig' %}
{% block title %}Registrieren{% endblock %}
{% block description %}Registrieren{% endblock %}
{% block content %}
    <div class="page-area register__section__wrapper">
        <div class="page-inner register__section">
            <form method="post" action="{{ path('main_register') }}" enctype="multipart/form-data" id="">
                {% include "main/Auth/Register/_form.html.twig" %}
            </form>
        </div>
    </div>
{% endblock %}
{% block pageScript %}
    <script>
        $(".valid-password").on("input", function () {
            validPassWord(this);
        });

        function go_url(url) {
            window.location = url;
        }

        $(".btn-submit").off("click").on("click", function (e) {

            var invoiceType = $("input[name=invoice_type]:checked").val();
            if (invoiceType === "1") {
                var tcInput = $("input[name=tc_no]");
                var tcNo = tcInput.val();
                Site.tcKeyup(tcInput);
                var result = Site.tckimlikkontorolu(tcNo);
                console.log("result", result);
                if (result !== true) {
                    e.preventDefault();
                }
            }
        });
        $('.acordion-header').on('click', function () {
            var icon = $(this).find('.acordion-icon');
            var body = $(this).parent('.acordions').find('.acordion-basket-body');
            var color = $(this).find('.basket-text');
            var val = icon.html();
            if (val == '+') {
                $('.acordion-icon').html('+');
                $('.acordion-basket-body').slideUp(500);
                $('.basket-text').removeClass('regular');
                $('.basket-title-info').removeClass('disactive');
                icon.html('-');
                body.slideDown(500);
                color.addClass('regular');
                $(this).find('.basket-title-info').addClass('disactive');
                $(this).find('p.text-muted').addClass('text-dark').removeClass('text-muted');
            } else {
                icon.html('+');
                body.slideUp(500);
                color.removeClass('regular');
                $(this).find('.basket-title-info').removeClass('disactive');
                $(this).find('p.text-dark').addClass('text-muted').removeClass('text-dark');
            }
        });
        $('#profile_typ').change(function () {
            $val = $(this).val();
            if ($val == 0) {
                $('#profile_firma').removeAttr('required').parent().hide();
                $('#profile_name').attr('required', 'required')/*.attr('oninvalid', $valid1).attr('oninput', $valid2)*/;
                $('#profile_vorname').attr('required', 'required')/*.attr('oninvalid', $valid1).attr('oninput', $valid2)*/;
                $('.yildiz_kontrol').show();
            } else {
                $('#profile_firma').attr('required', 'required').parent().show();
                $('#profile_name').removeAttr('required')/*.removeAttr('oninvalid').removeAttr('oninput')*/;
                $('#profile_vorname').removeAttr('required')/*.removeAttr('oninvalid').removeAttr('oninput')*/;
                $('.yildiz_kontrol').hide();
            }
        });

        function check(input) {
            if (input.value != document.getElementById('user_password').value) {
                input.setCustomValidity('Passwörter stimmen nicht überein');
            } else {
                input.setCustomValidity('');
            }
        }

        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("user_passwort_widerholen").value;
            if (e.id === "user_password") {
                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("user_passwort_widerholen").disabled = false
                } else {
                    document.getElementById("user_passwort_widerholen").disabled = true
                }
            } else {
                otherPasswordValue = document.getElementById("user_password").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 %}