{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block title %}
    {% if step == 1 %}
        {% trans "Create Company - Step 1" %}
    {% elif step == 2 %}
        {% trans "Create Company - Step 2" %}
    {% else %}
        {% trans "Create Company - Review" %}
    {% endif %}
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-teal-50 via-cyan-50 to-amber-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-teal-900 mb-2">
                {{ title }}
            </h1>
            <p class="text-lg text-teal-700">
                {% blocktrans %}Step {{ step }} of 3{% endblocktrans %}
            </p>
        </div>

        <!-- Progress Bar -->
        <div class="mb-8 bg-white rounded-lg p-4 shadow">
            <div class="flex justify-between mb-2">
                {% for i in "123" %}
                    <div class="flex-1">
                        <div class="flex items-center justify-center">
                            <div class="w-10 h-10 rounded-full {% if i|add:0 <= step|add:0 %}bg-teal-600 text-white{% else %}bg-gray-200 text-gray-600{% endif %} flex items-center justify-center font-bold">
                                {{ i }}
                            </div>
                            {% if not forloop.last %}
                                <div class="flex-1 h-1 mx-2 {% if i|add:0 < step|add:0 %}bg-teal-600{% else %}bg-gray-200{% endif %}"></div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div class="flex justify-between text-sm text-gray-600">
                <span>{% trans "Company Info" %}</span>
                <span>{% trans "Modules" %}</span>
                <span>{% trans "Review" %}</span>
            </div>
        </div>

        <!-- Form Card -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-teal-200">
            <div class="px-8 py-12">
                {% if is_review %}
                    <!-- Review Step -->
                    <form method="post" class="space-y-8">
                        {% csrf_token %}
                        
                        <div>
                            <h2 class="text-2xl font-bold text-teal-900 mb-6">{% trans "Company Information" %}</h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 bg-gray-50 p-6 rounded-lg">
                                <div>
                                    <p class="text-sm text-gray-600 font-semibold">{% trans "Company Name" %}</p>
                                    <p class="text-lg text-teal-900">{{ company_data.name }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600 font-semibold">{% trans "Legal Name" %}</p>
                                    <p class="text-lg text-teal-900">{{ company_data.legal_name }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600 font-semibold">{% trans "Company Type" %}</p>
                                    <p class="text-lg text-teal-900">{{ company_data.company_type }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600 font-semibold">{% trans "Registration Number" %}</p>
                                    <p class="text-lg text-teal-900">{{ company_data.registration_number }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600 font-semibold">{% trans "Tax ID" %}</p>
                                    <p class="text-lg text-teal-900">{{ company_data.tax_id }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600 font-semibold">{% trans "City" %}</p>
                                    <p class="text-lg text-teal-900">{{ company_data.city }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600 font-semibold">{% trans "Email" %}</p>
                                    <p class="text-lg text-teal-900">{{ company_data.email }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600 font-semibold">{% trans "Phone" %}</p>
                                    <p class="text-lg text-teal-900">{{ company_data.phone }}</p>
                                </div>
                            </div>
                        </div>

                        <div>
                            <h2 class="text-2xl font-bold text-teal-900 mb-6">{% trans "Enabled Modules" %}</h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50 p-6 rounded-lg">
                                {% if modules_data.hr_enabled %}
                                    <div class="flex items-center">
                                        <span class="inline-block w-3 h-3 bg-green-500 rounded-full mr-2"></span>
                                        <span>{% trans "Human Resources" %}</span>
                                    </div>
                                {% endif %}
                                {% if modules_data.accounting_enabled %}
                                    <div class="flex items-center">
                                        <span class="inline-block w-3 h-3 bg-green-500 rounded-full mr-2"></span>
                                        <span>{% trans "Accounting & Finance" %}</span>
                                    </div>
                                {% endif %}
                                {% if modules_data.projects_enabled %}
                                    <div class="flex items-center">
                                        <span class="inline-block w-3 h-3 bg-green-500 rounded-full mr-2"></span>
                                        <span>{% trans "Project Management" %}</span>
                                    </div>
                                {% endif %}
                                {% if modules_data.inventory_enabled %}
                                    <div class="flex items-center">
                                        <span class="inline-block w-3 h-3 bg-green-500 rounded-full mr-2"></span>
                                        <span>{% trans "Inventory Management" %}</span>
                                    </div>
                                {% endif %}
                                {% if modules_data.payroll_enabled %}
                                    <div class="flex items-center">
                                        <span class="inline-block w-3 h-3 bg-green-500 rounded-full mr-2"></span>
                                        <span>{% trans "Payroll" %}</span>
                                    </div>
                                {% endif %}
                                {% if modules_data.messaging_enabled %}
                                    <div class="flex items-center">
                                        <span class="inline-block w-3 h-3 bg-green-500 rounded-full mr-2"></span>
                                        <span>{% trans "Internal Messaging" %}</span>
                                    </div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Buttons -->
                        <div class="flex justify-between items-center pt-8 border-t-2 border-teal-200">
                            <a href="?step=2" class="px-6 py-3 text-teal-700 font-semibold hover:text-teal-900 transition-colors">
                                ← {% trans "Back" %}
                            </a>
                            <button type="submit" class="px-8 py-3 bg-gradient-to-r from-teal-600 to-cyan-600 text-white font-bold rounded-lg hover:from-teal-700 hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 transition-all shadow-lg">
                                {% trans "Create Company" %}
                            </button>
                        </div>
                    </form>

                {% else %}
                    <!-- Form Steps -->
                    <form method="post" class="space-y-8">
                        {% csrf_token %}
                        
                        {% if step == 1 %}
                            <!-- Step 1: Basic Information -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="{{ form.name.id_for_label }}" class="block text-sm font-semibold text-teal-900 mb-2">
                                        {{ form.name.label }} <span class="text-red-500">*</span>
                                    </label>
                                    {{ form.name }}
                                    {% if form.name.errors %}
                                        <div class="text-red-500 text-sm mt-1">{{ form.name.errors }}</div>
                                    {% endif %}
                                </div>

                                <div>
                                    <label for="{{ form.legal_name.id_for_label }}" class="block text-sm font-semibold text-teal-900 mb-2">
                                        {{ form.legal_name.label }} <span class="text-red-500">*</span>
                                    </label>
                                    {{ form.legal_name }}
                                    {% if form.legal_name.errors %}
                                        <div class="text-red-500 text-sm mt-1">{{ form.legal_name.errors }}</div>
                                    {% endif %}
                                </div>

                                <div>
                                    <label for="{{ form.company_type.id_for_label }}" class="block text-sm font-semibold text-teal-900 mb-2">
                                        {{ form.company_type.label }} <span class="text-red-500">*</span>
                                    </label>
                                    {{ form.company_type }}
                                    {% if form.company_type.errors %}
                                        <div class="text-red-500 text-sm mt-1">{{ form.company_type.errors }}</div>
                                    {% endif %}
                                </div>

                                <div>
                                    <label for="{{ form.registration_number.id_for_label }}" class="block text-sm font-semibold text-teal-900 mb-2">
                                        {{ form.registration_number.label }} <span class="text-red-500">*</span>
                                    </label>
                                    {{ form.registration_number }}
                                    {% if form.registration_number.errors %}
                                        <div class="text-red-500 text-sm mt-1">{{ form.registration_number.errors }}</div>
                                    {% endif %}
                                </div>

                                <div>
                                    <label for="{{ form.tax_id.id_for_label }}" class="block text-sm font-semibold text-teal-900 mb-2">
                                        {{ form.tax_id.label }} <span class="text-red-500">*</span>
                                    </label>
                                    {{ form.tax_id }}
                                    {% if form.tax_id.errors %}
                                        <div class="text-red-500 text-sm mt-1">{{ form.tax_id.errors }}</div>
                                    {% endif %}
                                </div>

                                <div>
                                    <label for="{{ form.domain_extension.id_for_label }}" class="block text-sm font-semibold text-teal-900 mb-2">
                                        {{ form.domain_extension.label }}
                                    </label>
                                    {{ form.domain_extension }}
                                    {% if form.domain_extension.errors %}
                                        <div class="text-red-500 text-sm mt-1">{{ form.domain_extension.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>

                            <div>
                                <label for="{{ form.description.id_for_label }}" class="block text-sm font-semibold text-teal-900 mb-2">
                                    {{ form.description.label }}
                                </label>
                                {{ form.description }}
                                {% if form.description.errors %}
                                    <div class="text-red-500 text-sm mt-1">{{ form.description.errors }}</div>
                                {% endif %}
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="{{ form.email.id_for_label }}" class="block text-sm font-semibold text-teal-900 mb-2">
                                        {{ form.email.label }}
                                    </label>
                                    {{ form.email }}
                                </div>
                                <div>
                                    <label for="{{ form.phone.id_for_label }}" class="block text-sm font-semibold text-teal-900 mb-2">
                                        {{ form.phone.label }}
                                    </label>
                                    {{ form.phone }}
                                </div>
                                <div>
                                    <label for="{{ form.city.id_for_label }}" class="block text-sm font-semibold text-teal-900 mb-2">
                                        {{ form.city.label }}
                                    </label>
                                    {{ form.city }}
                                </div>
                                <div>
                                    <label for="{{ form.country.id_for_label }}" class="block text-sm font-semibold text-teal-900 mb-2">
                                        {{ form.country.label }}
                                    </label>
                                    {{ form.country }}
                                </div>
                            </div>

                        {% elif step == 2 %}
                            <!-- Step 2: Modules Configuration -->
                            <div class="space-y-6">
                                <p class="text-gray-700 mb-6">
                                    {% trans "Select which features and modules you'd like to enable for your company." %}
                                </p>
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    {% for field in form %}
                                        <div class="flex items-center p-4 border-2 border-teal-200 rounded-lg hover:bg-teal-50 transition-colors cursor-pointer">
                                            {{ field }}
                                            <label for="{{ field.id_for_label }}" class="ml-3 cursor-pointer">
                                                <span class="font-semibold text-teal-900">{{ field.label }}</span>
                                            </label>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}

                        {% if form.non_field_errors %}
                            <div class="bg-red-50 border-l-4 border-red-500 p-4">
                                <p class="text-red-800 font-semibold">{% trans "Please correct the following errors:" %}</p>
                                {% for error in form.non_field_errors %}
                                    <p class="text-red-700 text-sm">• {{ error }}</p>
                                {% endfor %}
                            </div>
                        {% endif %}

                        <!-- Buttons -->
                        <div class="flex justify-between items-center pt-8 border-t-2 border-teal-200">
                            {% if step > 1 %}
                                <a href="?step={{ step|add:'-1' }}" class="px-6 py-3 text-teal-700 font-semibold hover:text-teal-900 transition-colors">
                                    ← {% trans "Back" %}
                                </a>
                            {% else %}
                                <a href="{% url 'companies:list' %}" class="px-6 py-3 text-teal-700 font-semibold hover:text-teal-900 transition-colors">
                                    {% trans "Cancel" %}
                                </a>
                            {% endif %}

                            <button type="submit" class="px-8 py-3 bg-gradient-to-r from-teal-600 to-cyan-600 text-white font-bold rounded-lg hover:from-teal-700 hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 transition-all shadow-lg">
                                {% if step < 3 %}
                                    {% trans "Next" %} →
                                {% else %}
                                    {% trans "Create Company" %}
                                {% endif %}
                            </button>
                        </div>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}