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

{% block title %}{% trans "Edit Company" %} - {{ company.name }} | {{ block.super }}{% 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">
    <div class="max-w-3xl mx-auto">
        
        <!-- Header -->
        <div class="mb-8">
            <a href="{% url 'companies:detail' company.pk %}" class="inline-flex items-center text-teal-600 hover:text-teal-700 font-semibold mb-4">
                <i class="fas fa-arrow-left mr-2"></i>
                {% trans "Back to Company" %}
            </a>
            <h1 class="text-4xl font-bold bg-gradient-to-r from-teal-600 via-cyan-600 to-amber-600 bg-clip-text text-transparent">
                {% trans "Edit" %} {{ company.name }}
            </h1>
            <p class="text-gray-600 mt-2">{% trans "Update your company information" %}</p>
        </div>

        <!-- Form Container -->
        <div class="bg-white rounded-2xl shadow-xl border border-teal-100/50 overflow-hidden">
            
            <!-- Company Header Preview -->
            <div class="bg-gradient-to-r from-teal-400/20 via-cyan-400/20 to-amber-400/20 p-6 border-b border-teal-100">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        {% if company.logo %}
                            <img src="{{ company.logo.url }}" alt="{{ company.name }}" class="w-16 h-16 rounded-lg object-cover">
                        {% else %}
                            <div class="w-16 h-16 bg-gradient-to-br from-teal-300 to-cyan-300 rounded-lg flex items-center justify-center text-white text-2xl">
                                <i class="fas fa-building"></i>
                            </div>
                        {% endif %}
                        <div>
                            <h2 class="text-xl font-bold text-gray-900">{{ company.name }}</h2>
                            <p class="text-sm text-gray-600">{{ company.legal_name }}</p>
                        </div>
                    </div>
                    <div class="text-right">
                        {% if company.status == 'active' %}
                            <span class="px-3 py-1 bg-green-500/20 text-green-700 rounded-full text-sm font-semibold">
                                <i class="fas fa-check-circle mr-1"></i>{% trans "Active" %}
                            </span>
                        {% elif company.status == 'pending' %}
                            <span class="px-3 py-1 bg-amber-500/20 text-amber-700 rounded-full text-sm font-semibold">
                                <i class="fas fa-hourglass-half mr-1"></i>{% trans "Pending" %}
                            </span>
                        {% else %}
                            <span class="px-3 py-1 bg-gray-500/20 text-gray-700 rounded-full text-sm font-semibold">
                                {{ company.get_status_display }}
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Form -->
            <form method="post" enctype="multipart/form-data" class="p-8 space-y-8">
                {% csrf_token %}

                <!-- Non-field Errors -->
                {% if form.non_field_errors %}
                    <div class="p-4 bg-red-50 border border-red-200 rounded-lg">
                        <p class="text-red-700 font-semibold mb-2">
                            <i class="fas fa-exclamation-circle mr-2"></i>{% trans "Please fix the errors below:" %}
                        </p>
                        {% for error in form.non_field_errors %}
                            <p class="text-red-600 text-sm">• {{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}

                <!-- Basic Information Section -->
                <div>
                    <h3 class="text-lg font-bold text-gray-900 mb-6 pb-3 border-b-2 border-teal-200">
                        <i class="fas fa-info-circle text-teal-600 mr-2"></i>{% trans "Basic Information" %}
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Company Name -->
                        <div>
                            <label for="{{ form.name.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.name.label }} <span class="text-red-500">*</span>
                            </label>
                            {{ form.name }}
                            {% if form.name.help_text %}
                                <p class="text-xs text-gray-500 mt-1">{{ form.name.help_text|safe }}</p>
                            {% endif %}
                            {% if form.name.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.name.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Legal Name -->
                        <div>
                            <label for="{{ form.legal_name.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.legal_name.label }} <span class="text-red-500">*</span>
                            </label>
                            {{ form.legal_name }}
                            {% if form.legal_name.help_text %}
                                <p class="text-xs text-gray-500 mt-1">{{ form.legal_name.help_text|safe }}</p>
                            {% endif %}
                            {% if form.legal_name.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.legal_name.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Company Type -->
                        <div>
                            <label for="{{ form.company_type.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.company_type.label }}
                            </label>
                            {{ form.company_type }}
                            {% if form.company_type.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.company_type.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Registration Number -->
                        <div>
                            <label for="{{ form.registration_number.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.registration_number.label }} <span class="text-red-500">*</span>
                            </label>
                            {{ form.registration_number }}
                            {% if form.registration_number.help_text %}
                                <p class="text-xs text-gray-500 mt-1">{{ form.registration_number.help_text|safe }}</p>
                            {% endif %}
                            {% if form.registration_number.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.registration_number.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Tax ID -->
                        <div>
                            <label for="{{ form.tax_id.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.tax_id.label }} <span class="text-red-500">*</span>
                            </label>
                            {{ form.tax_id }}
                            {% if form.tax_id.help_text %}
                                <p class="text-xs text-gray-500 mt-1">{{ form.tax_id.help_text|safe }}</p>
                            {% endif %}
                            {% if form.tax_id.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.tax_id.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Contact Information Section -->
                <div>
                    <h3 class="text-lg font-bold text-gray-900 mb-6 pb-3 border-b-2 border-cyan-200">
                        <i class="fas fa-phone text-cyan-600 mr-2"></i>{% trans "Contact Information" %}
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Email -->
                        <div>
                            <label for="{{ form.email.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.email.label }}
                            </label>
                            {{ form.email }}
                            {% if form.email.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.email.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Phone -->
                        <div>
                            <label for="{{ form.phone.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.phone.label }}
                            </label>
                            {{ form.phone }}
                            {% if form.phone.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.phone.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- City -->
                        <div>
                            <label for="{{ form.city.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.city.label }}
                            </label>
                            {{ form.city }}
                            {% if form.city.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.city.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Country -->
                        <div>
                            <label for="{{ form.country.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.country.label }}
                            </label>
                            {{ form.country }}
                            {% if form.country.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.country.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Postal Code -->
                        <div>
                            <label for="{{ form.postal_code.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.postal_code.label }}
                            </label>
                            {{ form.postal_code }}
                            {% if form.postal_code.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.postal_code.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Website -->
                        <div>
                            <label for="{{ form.website.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.website.label }}
                            </label>
                            {{ form.website }}
                            {% if form.website.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.website.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Address -->
                        <div class="md:col-span-2">
                            <label for="{{ form.address.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.address.label }}
                            </label>
                            {{ form.address }}
                            {% if form.address.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.address.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Additional Information Section -->
                <div>
                    <h3 class="text-lg font-bold text-gray-900 mb-6 pb-3 border-b-2 border-amber-200">
                        <i class="fas fa-file-alt text-amber-600 mr-2"></i>{% trans "Additional Information" %}
                    </h3>
                    
                    <div class="space-y-6">
                        <!-- Description -->
                        <div>
                            <label for="{{ form.description.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.description.label }}
                            </label>
                            {{ form.description }}
                            {% if form.description.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.description.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Logo (if exists) -->
                        {% if form.logo %}
                        <div>
                            <label for="{{ form.logo.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.logo.label }}
                            </label>
                            {% if company.logo %}
                                <div class="mb-4 p-4 bg-gray-50 rounded-lg">
                                    <p class="text-sm text-gray-600 mb-2">{% trans "Current logo:" %}</p>
                                    <img src="{{ company.logo.url }}" alt="{{ company.name }}" class="h-20 rounded-lg mb-2">
                                    <p class="text-xs text-gray-500">
                                        <a href="{{ company.logo.url }}" target="_blank" class="text-teal-600 hover:text-teal-700">
                                            {% trans "View full size" %}
                                        </a>
                                    </p>
                                </div>
                            {% endif %}
                            {{ form.logo }}
                            <p class="text-xs text-gray-500 mt-2">{% trans "Supported formats: JPG, PNG, GIF (Max 5MB)" %}</p>
                            {% if form.logo.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.logo.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        {% endif %}

                        <!-- Domain Extension -->
                        {% if form.domain_extension %}
                        <div>
                            <label for="{{ form.domain_extension.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                                {{ form.domain_extension.label }}
                            </label>
                            {{ form.domain_extension }}
                            {% if form.domain_extension.errors %}
                                <div class="text-red-500 text-sm mt-2 bg-red-50 p-2 rounded">
                                    {% for error in form.domain_extension.errors %}
                                        <p>• {{ error }}</p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex justify-between items-center pt-8 border-t border-gray-200">
                    <a href="{% url 'companies:detail' company.pk %}" class="inline-flex items-center px-6 py-3 bg-gray-100 text-gray-700 font-semibold rounded-xl hover:bg-gray-200 transition-all duration-300">
                        <i class="fas fa-times mr-2"></i>
                        {% trans "Cancel" %}
                    </a>
                    
                    <button type="submit" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-teal-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
                        <i class="fas fa-save mr-2"></i>
                        {% trans "Save Changes" %}
                    </button>
                </div>
            </form>
        </div>

        <!-- Additional Actions -->
        <div class="mt-8 p-4 bg-white rounded-xl border border-red-200/50">
            <p class="text-sm text-gray-600 mb-3">{% trans "Danger Zone:" %}</p>
            <a href="{% url 'companies:delete' company.pk %}" class="inline-flex items-center px-4 py-2 bg-red-500/20 text-red-700 font-semibold rounded-lg hover:bg-red-500/30 transition-all duration-300">
                <i class="fas fa-trash-alt mr-2"></i>
                {% trans "Delete Company" %}
            </a>
        </div>
    </div>
</div>

<style>
    /* Form Field Styling */
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        width: 100%;
        padding: 0.625rem 0.875rem;
        border: 2px solid #e0f2fe;
        border-radius: 0.5rem;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        background-color: #f9fafb;
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="url"]:focus,
    input[type="number"]:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: #0891b2;
        background-color: #fff;
        box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
    }

    textarea {
        resize: vertical;
        min-height: 120px;
    }

    input[type="file"] {
        border: 2px dashed #e0f2fe;
        padding: 1rem;
        border-radius: 0.5rem;
    }
</style>
{% endblock %}