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

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

{% block styles %}

    <style>
        header {
            display: none;
        }
    </style>

{% endblock %}

{% block body %}
    <div class="container h-100">
        <a href="{{ path('app_home') }}" class="logo-absolute">
            <div class="logo-wrap">
                <img src="/images/cumas_logo.svg" alt="Cumas Logo"/>
                <div class="d-flex"
                     style="color: white">
                    {#                        because letter space #}
                    <span>Filetransfe</span>r
                </div>
            </div>
        </a>
        <a href="{{ path('app_home') }}" class="return-link">
            <svg 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="white" stroke-width="2" stroke-linecap="round"/>
                <path d="M22.5 22.5L37.5 37.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
                <path d="M37.5 22.5L22.5 37.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
            </svg>
        </a>
        <div class="row h-100">
            <div class="col-6 d-none d-lg-block"></div>
            <div class="col-sm-12 col-lg-6 p-0 mb-sm-3 display-flex-center h-100 position-relative">
                <img class="bumble-img" src="/images/bumble.png" alt=""/>
                <div class="auth-container container z-index-1 pt-5 pt-sm-0">
                    {% for flash_error in app.flashes('verify_email_error') %}
                        <div class="alert alert-danger" role="alert">{{ flash_error }}</div>
                    {% endfor %}
                    <h1 class="mt-5">{{ 'lang.register'|trans }}</h1>
                    {{ form_start(registrationForm) }}
                    {{ form_errors(registrationForm) }}
                    <div class="input-wrap">
                        {{ form_errors(registrationForm.email) }}
                        {{ form_widget(registrationForm.email) }}
                        {{ form_label(registrationForm.email) }}
                    </div>
                    <div id="output_email_error"></div>
                    <div class="input-wrap">
                        {{ form_errors(registrationForm.plainPassword) }}
                        {{ form_widget(registrationForm.plainPassword) }}
                        {{ form_label(registrationForm.plainPassword) }}
                    </div>
                    <div class="input-wrap">
                        {{ form_widget(registrationForm.firstName) }}
                        {{ form_label(registrationForm.firstName) }}
                    </div>
                    <div class="input-wrap">
                        {{ form_widget(registrationForm.lastName) }}
                        {{ form_label(registrationForm.lastName) }}
                    </div>
                    <div class="input-wrap">
                        {{ form_errors(registrationForm.cellphone) }}
                        {{ form_widget(registrationForm.cellphone) }}
                        {{ form_label(registrationForm.cellphone) }}
                    </div>
                    <div class="input-wrap">
                        {{ form_widget(registrationForm.company) }}
                        {{ form_label(registrationForm.company) }}
                    </div>
                    {#        <div class="row"> #}
                    {#            <div class="col-md-8"> #}
                    {#                {{ form_row(registrationForm.agreeTerms) }} #}
                    {#            </div> #}
                    {#            <div class="col-md-4"> #}
                    {#                <a href="{{ path('app_terms_and_conditions') }}" target="_blank">{{ 'lang.show'|trans }}</a> #}
                    {#            </div> #}
                    {#        </div> #}
                    {#        <div class="row"> #}
                    {#            <div class="col-md-8"> #}
                    {#                {{ form_row(registrationForm.agreeDataProtection) }} #}
                    {#            </div> #}
                    {#            <div class="col-md-4"> #}
                    {#                <a href="https://cumas365.com/datenschutzerklarung/" target="_blank">{{ 'lang.show'|trans }}</a> #}
                    {#            </div> #}
                    {#        </div> #}
                    <a href="{{ path('app_terms_and_conditions') }}" class="a-small-white">
                        {{ 'lang.creatingAccountAgreeTerms' | trans }}
                    </a>
                    <button type="submit" class="button button-gradient"
                            id="submitBtn">{{ 'lang.registerSend' | trans }}</button>
                    <a href="{{ path('app_login') }}">
                        <p class="a-medium-white">{{ 'lang.accountExist' | trans }}</p>
                    </a>
                    {{ form_end(registrationForm) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('register') }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const phoneInput = document.getElementById('registration_form_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 %}