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

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

{% block footer %}{% endblock %}

{% block body %}
<div class="min-h-screen flex">
    {# Левая часть - декоративная с информацией #}
    <div class="hidden lg:flex lg:w-1/2 h-screen bg-gradient-to-br from-primary via-primary-dark to-primary relative overflow-hidden items-center justify-center">

        <div class="relative z-10 text-center text-white max-w-md px-12">
            <h1 class="text-4xl font-bold mb-4">{{ 'lang.register'|trans }}</h1>
            <p class="text-xl mb-8 text-white text-opacity-90">{{ 'lang.createAccountStart'|trans }}</p>
            <div class="space-y-4">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-check text-secondary text-base"></i>
                    <span class="text-white text-opacity-90">{{ 'lang.fastRegistration'|trans }}</span>
                </div>
                <div class="flex items-center space-x-3">
                    <i class="fas fa-check text-secondary text-base"></i>
                    <span class="text-white text-opacity-90">{{ 'lang.freeAccess'|trans }}</span>
                </div>
                <div class="flex items-center space-x-3">
                    <i class="fas fa-check text-secondary text-base"></i>
                    <span class="text-white text-opacity-90">{{ 'lang.personalDataProtection'|trans }}</span>
                </div>
            </div>
            <div class="mt-12 pt-8 border-t border-white border-opacity-20">
                <p class="text-white text-opacity-80 mb-4">{{ 'lang.alreadyHaveAccount'|trans }}</p>
                <a href="{{ path('app_login') }}" class="inline-flex items-center px-6 py-2 bg-secondary hover:bg-secondary-light text-white font-semibold rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">
                    <span>{{ 'lang.Login'|trans }}</span>
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </div>

    {# Правая часть - форма регистрации #}
    <div class="w-full lg:w-1/2 flex items-start justify-center bg-white p-8 lg:p-12 overflow-y-auto h-screen">
        <div class="w-full max-w-2xl">
            {# Мобильная версия заголовка #}
            <div class="lg:hidden text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-primary rounded-full mb-4">
                    <i class="fas fa-pencil-alt text-2xl text-white"></i>
                </div>
                <h1 class="text-3xl font-bold text-primary mb-2">{{ 'lang.register'|trans }}</h1>
                <p class="text-gray-600">{{ 'lang.createNewAccount'|trans }}</p>
            </div>

                    {% for flash_error in app.flashes('verify_email_error') %}
                <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded mb-6">
                    <p class="text-red-700">{{ flash_error }}</p>
                </div>
                    {% endfor %}

            <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100">
                    {{ form_errors(registrationForm) }}

                {{ form_start(registrationForm, {'attr': {'class': 'space-y-6'}}) }}
                
                {# Основная информация #}
                <div class="space-y-6">
                    <h2 class="text-xl font-bold text-primary border-b-2 border-secondary pb-2">{{ 'lang.basicInformation'|trans }}</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            {{ form_label(registrationForm.email, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.email, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.email) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.plainPassword, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.plainPassword, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.plainPassword) }}
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            {{ form_label(registrationForm.firstName, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.firstName, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.firstName) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.lastName, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.lastName, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.lastName) }}
                        </div>
                    </div>

                    <div>
                        {{ form_label(registrationForm.myPicture, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                        {{ form_widget(registrationForm.myPicture, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                        {{ form_errors(registrationForm.myPicture) }}
                    </div>
                </div>

                {# Рабочая информация #}
                <div class="space-y-6 pt-6 border-t border-gray-200">
                    <h2 class="text-xl font-bold text-primary border-b-2 border-secondary pb-2">{{ 'lang.workInformation'|trans }}</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            {{ form_label(registrationForm.company, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.company, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.company) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.companyPosition, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.companyPosition, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.companyPosition) }}
                        </div>
                    </div>
                </div>

                {# Контактная информация #}
                <div class="space-y-6 pt-6 border-t border-gray-200">
                    <h2 class="text-xl font-bold text-primary border-b-2 border-secondary pb-2">{{ 'lang.contactInformation'|trans }}</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            {{ form_label(registrationForm.cellphone, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.cellphone, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.cellphone) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.phone, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.phone, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.phone) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.fax, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.fax, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.fax) }}
                        </div>
                    </div>
                </div>

                {# Адрес #}
                <div class="space-y-6 pt-6 border-t border-gray-200">
                    <h2 class="text-xl font-bold text-primary border-b-2 border-secondary pb-2">{{ 'lang.address'|trans }}</h2>
                    
                    <div>
                        {{ form_label(registrationForm.street, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                        {{ form_widget(registrationForm.street, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                        {{ form_errors(registrationForm.street) }}
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            {{ form_label(registrationForm.zip, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.zip, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.zip) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.city, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.city, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.city) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.country, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.country, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.country) }}
                        </div>
                    </div>
                </div>

                {# Социальные сети #}
                <div class="space-y-6 pt-6 border-t border-gray-200">
                    <h2 class="text-xl font-bold text-primary border-b-2 border-secondary pb-2">{{ 'lang.socialNetworks'|trans }}</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            {{ form_label(registrationForm.myUrl, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.myUrl, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.myUrl) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.urlLinkedin, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.urlLinkedin, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.urlLinkedin) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.urlInstagram, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.urlInstagram, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.urlInstagram) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.urlFacebook, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.urlFacebook, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.urlFacebook) }}
                        </div>
                        
                        <div>
                            {{ form_label(registrationForm.urlX, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2'}}) }}
                            {{ form_widget(registrationForm.urlX, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 text-sm'}}) }}
                            {{ form_errors(registrationForm.urlX) }}
                        </div>
                    </div>
                </div>

                {# Согласия #}
                <div class="space-y-4 pt-6 border-t border-gray-200">
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 mt-1">
                            {{ form_widget(registrationForm.agreeTerms, {'attr': {'class': 'w-5 h-5 text-secondary border-gray-300 rounded focus:ring-secondary focus:ring-2'}}) }}
                        </div>
                        <div class="flex-1 flex items-center gap-2">
                            {{ form_label(registrationForm.agreeTerms, null, {'label_attr': {'class': 'text-sm text-gray-700'}}) }}
                            <a href="" target="_blank" class="text-secondary hover:text-secondary-light font-medium text-sm">{{ 'lang.show'|trans }}</a>
                        </div>
                    </div>
                    {{ form_errors(registrationForm.agreeTerms) }}
                    
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0 mt-1">
                            {{ form_widget(registrationForm.agreeDataProtection, {'attr': {'class': 'w-5 h-5 text-secondary border-gray-300 rounded focus:ring-secondary focus:ring-2'}}) }}
                        </div>
                        <div class="flex-1 flex items-center gap-2">
                            {{ form_label(registrationForm.agreeDataProtection, null, {'label_attr': {'class': 'text-sm text-gray-700'}}) }}
                            <a href="https://cumas365.com/datenschutzerklarung/" target="_blank" class="text-secondary hover:text-secondary-light font-medium text-sm">{{ 'lang.show'|trans }}</a>
                        </div>
                    </div>
                    {{ form_errors(registrationForm.agreeDataProtection) }}
                </div>

                {# Кнопка отправки #}
                <div class="pt-6">
                    <button type="submit" 
                            id="submitBtn"
                            class="w-full py-2.5 px-4 bg-primary hover:bg-primary-light text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-[1.01] shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 text-sm">
                        {{ 'lang.registerSend'|trans }}
                    </button>
                </div>

                {# Мобильная версия ссылки на вход #}
                <div class="lg:hidden text-center pt-6 border-t border-gray-200 mt-6">
                    <p class="text-sm text-gray-600 mb-2">{{ 'lang.alreadyHaveAccount'|trans }}</p>
                    <a href="{{ path('app_login') }}" 
                       class="inline-block text-sm text-secondary hover:text-secondary-light font-semibold">
                        {{ 'lang.Login'|trans }}
                    </a>
                </div>

                    {{ form_end(registrationForm) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}