{% extends 'base.html.twig' %}
{% form_theme form 'bootstrap_5_layout.html.twig' %}

{% block title %}
    {{ 'lang.newUser'|trans }}
{% endblock %}

{% set block_to_render = 'body' %}
{% block body %}
    {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_GLOBAL_ADMIN') %}
        <div class="action-container">
            <div class="action-section">
                {{ form_start(form) }}
                {{ form_row(form._token) }}
                <div class="display-flex-between mb-4">
                    <h1>{{ 'lang.newUser'|trans }}</h1>
                    <a href="{{ path('app_user_index') }}">
                        <svg class="svg-close" width="60" height="60" viewBox="0 0 60 60" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M30 52.5C27.0453 52.5 24.1194 51.918 21.3896 50.7873C18.6598 49.6566 16.1794 47.9992 14.0901 45.9099C12.0008 43.8206 10.3434 41.3402 9.21271 38.6104C8.08198 35.8805 7.5 32.9547 7.5 30C7.5 27.0453 8.08198 24.1194 9.21271 21.3896C10.3434 18.6598 12.0008 16.1794 14.0901 14.0901C16.1794 12.0008 18.6598 10.3434 21.3896 9.21271C24.1195 8.08198 27.0453 7.5 30 7.5C32.9547 7.5 35.8806 8.08198 38.6104 9.21271C41.3402 10.3434 43.8206 12.0008 45.9099 14.0901C47.9992 16.1794 49.6566 18.6598 50.7873 21.3896C51.918 24.1195 52.5 27.0453 52.5 30C52.5 32.9547 51.918 35.8806 50.7873 38.6104C49.6566 41.3402 47.9992 43.8206 45.9099 45.9099C43.8206 47.9992 41.3402 49.6566 38.6104 50.7873C35.8805 51.918 32.9547 52.5 30 52.5L30 52.5Z"
                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            <path d="M22.5 22.5L37.5 37.5" stroke="currentColor" stroke-width="2"
                                  stroke-linecap="round"/>
                            <path d="M37.5 22.5L22.5 37.5" stroke="currentColor" stroke-width="2"
                                  stroke-linecap="round"/>
                        </svg>
                    </a>
                </div>
                <div class="card-body">
                    {{ include('user/_form.html.twig') }}
                    {{ include('user/_form_members.html.twig') }}
                    <input type="hidden" id="pathToUserCheck" value="{{ path('app_user_check') }}">
                </div>
                <div class="d-flex">
                    <button class="button button-filled ml-mr-auto mb-4 mt-4" type="submit" id="submit_button">
                        {{ 'lang.addUser'|trans }}
                    </button>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block javascripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const userPassword = document.getElementById('user_password')
            const errorDiv = document.getElementById('user_password_error')

            const userRole = document.getElementById('selected_user_role')
            const userRoles = document.getElementById('user_roles')
            const memberSection = document.getElementById('memberSection')
            const select = document.getElementById('contact_member')


            const inputForEvent = userRole ? userRole : userRoles

            inputForEvent.addEventListener('input', function () {
                if (inputForEvent.value === "ROLE_GUEST") {
                    memberSection.style.display = 'block'
                    select.required = true
                } else {
                    select.required = false
                }
            })

            userPassword.addEventListener('input', function () {
                if (userPassword.value.length < 8) {
                    errorDiv.textContent = 'Passwort ist ungültig min. Zeichen: 8'

                } else {
                    errorDiv.textContent = ''
                    if (inputForEvent.value === "ROLE_GUEST") {
                        memberSection.style.display = 'block'
                        select.required = true
                    } else {
                        select.required = false
                    }
                }
            })
            const phoneInput = document.getElementById('user_cellphone');

            if (phoneInput) {
                phoneInput.addEventListener('input', formatPhoneNumber);
                phoneInput.addEventListener('keypress', validateKeyPress);

                formatPhoneNumber.call(phoneInput);
            }

            function formatPhoneNumber() {
                const cursorPos = this.selectionStart;
                const originalLength = this.value.length;

                this.value = this.value.replace(/[^\d+]/g, '');

                if (this.value.includes('+')) {
                    const withoutPlus = this.value.replace(/\+/g, '');
                    this.value = '+' + withoutPlus;
                }

                const newLength = this.value.length;
                const posDiff = newLength - originalLength;
                this.setSelectionRange(cursorPos + posDiff, cursorPos + posDiff);
            }

            function validateKeyPress(e) {
                const char = String.fromCharCode(e.charCode);

                if (!/[\d]/.test(char) && !(char === '+' && this.selectionStart === 0 && !this.value.includes('+'))) {
                    e.preventDefault();
                }
            }

        })

    </script>


    {{ encore_entry_script_tags('user_new') }}
{% endblock %}