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

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

{% set block_to_render = 'body' %}
{% block body %}
    {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_GLOBAL_ADMIN') %}
        <div class="action-container">
            {{ form_start(form) }}
            {{ form_row(form._token) }}
            <div class="action-section">
                <input type="hidden" name="user_id" id="user_id" value="{{ user.id }}">
                <input type="hidden" name="old_password" id="old_password" value="{{ user.password }}">
                <div class="display-flex-between mb-4">
                    <h1>
                        {{ 'lang.updateUser'|trans }}
                    </h1>
                    <a href="{{ path('app_user_index') }}">
                        <svg width="60"
                             class="svg-close"
                             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_edit.html.twig') }}
                    <input type="hidden" id="pathToUserCheck" value="{{ path('app_user_check') }}">

                </div>
                <div class="button-wrap">
                    <button type="submit" class="button button-filled" id="submit_button">
                        {{ 'lang.saveChanges'|trans }}
                    </button>

                    {% if user.isMainAccount != true %}
                        <a href="{{ path('app_user_delete', {'id': user.id}) }}">
                            <button class="button button-delete">
                                {{ 'lang.deleteUser' | trans }}
                            </button>
                        </a>
                    {% endif %}
                </div>
            </div>
            {{ form_end(form) }}
        </div>

    {% endif %}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('user_edit') }}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Проверяем значение переменной Twig через JSON
            var isGuest = {{ is_guest ? 'true' : 'false' }};

            if (isGuest) {
                // Показываем элемент memberSection через изменение стиля
                document.getElementById('memberSection').style.display = 'block';
                console.log('da');
            } else {
                console.log('net');

            }


            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>
{% endblock %}