{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {# Header #}
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">{{ page_title }}</h1>
                <p class="mt-2 text-sm text-gray-600">
                    Remplissez les informations de la nouvelle boutique
                </p>
            </div>
            <a href="{{ path('admin_companies_index') }}"
               class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-150">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour
            </a>
        </div>
    </div>

    {# Form #}
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            {{ form_start(companyForm, {'attr': {'class': 'space-y-8', 'data-controller': 'form-submit', 'enctype': 'multipart/form-data'}}) }}

            {# Section 1: General Information #}
            <div>
                <div class="mb-4 pb-2 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900 flex items-center">
                        <i class="fas fa-info-circle text-indigo-600 mr-2"></i>
                        Informations générales
                    </h3>
                    <p class="mt-1 text-sm text-gray-500">
                        Les informations de base de la boutique
                    </p>
                </div>

                <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
                    {# Company Name (Full Width) #}
                    <div class="sm:col-span-2">
                        {{ form_label(companyForm.name, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(companyForm.name, {
                            'attr': {
                                'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200'
                            }
                        }) }}
                        {{ form_errors(companyForm.name) }}
                    </div>

                    {# Logo Upload (Full Width) #}
                    <div class="sm:col-span-2">
                        {{ form_label(companyForm.logo, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        <div class="mt-1 flex items-center space-x-4">
                            <div id="logo-preview" class="hidden h-20 w-20 rounded-lg overflow-hidden border-2 border-gray-200">
                                <img src="" alt="Preview" class="h-full w-full object-cover">
                            </div>
                            {{ form_widget(companyForm.logo, {
                                'attr': {
                                    'class': 'block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 transition-all duration-200',
                                    'onchange': 'previewLogo(event)'
                                }
                            }) }}
                        </div>
                        {{ form_help(companyForm.logo) }}
                        {{ form_errors(companyForm.logo) }}
                    </div>

                    {# Description (Full Width) #}
                    <div class="sm:col-span-2">
                        {{ form_label(companyForm.description, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(companyForm.description, {
                            'attr': {
                                'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200',
                                'rows': 4
                            }
                        }) }}
                        {{ form_errors(companyForm.description) }}
                    </div>
                </div>
            </div>

            {# Section 2: Contact Information #}
            <div>
                <div class="mb-4 pb-2 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900 flex items-center">
                        <i class="fas fa-address-book text-indigo-600 mr-2"></i>
                        Coordonnées
                    </h3>
                    <p class="mt-1 text-sm text-gray-500">
                        Informations de contact de la boutique
                    </p>
                </div>

                <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
                    {# Email #}
                    <div class="sm:col-span-2">
                        {{ form_label(companyForm.email, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(companyForm.email, {
                            'attr': {
                                'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200'
                            }
                        }) }}
                        {{ form_errors(companyForm.email) }}
                    </div>

                    {# Phone #}
                    <div>
                        {{ form_label(companyForm.phone, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(companyForm.phone, {
                            'attr': {
                                'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200'
                            }
                        }) }}
                        {{ form_errors(companyForm.phone) }}
                    </div>

                    {# Website #}
                    <div>
                        {{ form_label(companyForm.website, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(companyForm.website, {
                            'attr': {
                                'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200'
                            }
                        }) }}
                        {{ form_errors(companyForm.website) }}
                    </div>
                </div>
            </div>

            {# Section 3: Address #}
            <div>
                <div class="mb-4 pb-2 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900 flex items-center">
                        <i class="fas fa-map-marker-alt text-indigo-600 mr-2"></i>
                        Adresse
                    </h3>
                    <p class="mt-1 text-sm text-gray-500">
                        Localisation de la boutique
                    </p>
                </div>

                <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
                    {# Address (Full Width) #}
                    <div class="sm:col-span-2">
                        {{ form_label(companyForm.address, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(companyForm.address, {
                            'attr': {
                                'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200'
                            }
                        }) }}
                        {{ form_errors(companyForm.address) }}
                    </div>

                    {# Postal Code #}
                    <div>
                        {{ form_label(companyForm.postalCode, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(companyForm.postalCode, {
                            'attr': {
                                'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200'
                            }
                        }) }}
                        {{ form_errors(companyForm.postalCode) }}
                    </div>

                    {# City #}
                    <div>
                        {{ form_label(companyForm.city, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(companyForm.city, {
                            'attr': {
                                'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200'
                            }
                        }) }}
                        {{ form_errors(companyForm.city) }}
                    </div>

                    {# Country #}
                    <div class="sm:col-span-2">
                        {{ form_label(companyForm.country, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(companyForm.country, {
                            'attr': {
                                'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200'
                            }
                        }) }}
                        {{ form_errors(companyForm.country) }}
                    </div>
                </div>
            </div>

            {# Section 4: Legal Information #}
            <div>
                <div class="mb-4 pb-2 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900 flex items-center">
                        <i class="fas fa-balance-scale text-indigo-600 mr-2"></i>
                        Informations légales
                    </h3>
                    <p class="mt-1 text-sm text-gray-500">
                        Numéros d'identification légaux
                    </p>
                </div>

                <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
                    {# NINEA #}
                    <div>
                        {{ form_label(companyForm.ninea, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(companyForm.ninea, {
                            'attr': {
                                'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm font-mono transition-all duration-200'
                            }
                        }) }}
                        {{ form_help(companyForm.ninea) }}
                        {{ form_errors(companyForm.ninea) }}
                    </div>

                    {# RCCM #}
                    <div>
                        {{ form_label(companyForm.rccm, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(companyForm.rccm, {
                            'attr': {
                                'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm font-mono transition-all duration-200'
                            }
                        }) }}
                        {{ form_help(companyForm.rccm) }}
                        {{ form_errors(companyForm.rccm) }}
                    </div>

                    {# Is Active Checkbox #}
                    <div class="sm:col-span-2">
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                {{ form_widget(companyForm.isActive, {
                                    'attr': {
                                        'class': 'focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded transition-transform duration-200'
                                    }
                                }) }}
                            </div>
                            <div class="ml-3 text-sm">
                                {{ form_label(companyForm.isActive, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                                <p class="text-gray-500">La boutique sera immédiatement active après création</p>
                            </div>
                        </div>
                        {{ form_errors(companyForm.isActive) }}
                    </div>
                </div>
            </div>

            {# Section: Manager Assignment (only during creation) #}
            {% if companyForm.manager is defined %}
            <div>
                <div class="mb-4 pb-2 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900 flex items-center">
                        <i class="fas fa-user-tie text-purple-600 mr-2"></i>
                        Manager responsable
                    </h3>
                    <p class="mt-1 text-sm text-gray-500">
                        Assignez un manager qui sera responsable de cette boutique (optionnel)
                    </p>
                </div>

                <div class="max-w-lg">
                    {{ form_label(companyForm.manager, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                    {{ form_widget(companyForm.manager, {
                        'attr': {
                            'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200'
                        }
                    }) }}
                    {{ form_errors(companyForm.manager) }}
                    <p class="mt-2 text-xs text-gray-500">
                        Le manager pourra consulter la boutique et gérer les employés.
                    </p>
                </div>
            </div>
            {% endif %}

            {% include 'admin/companies/_database_section.html.twig' %}

            {# Submit Buttons #}
            <div class="flex justify-end space-x-3 border-t border-gray-200 pt-6">
                <a href="{{ path('admin_companies_index') }}"
                   class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-150">
                    <i class="fas fa-times mr-2"></i>
                    Annuler
                </a>
                <button type="submit"
                        data-form-submit-target="submit"
                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-150">
                    <i class="fas fa-save mr-2"></i>
                    <span data-form-submit-target="buttonText">Créer la boutique</span>
                    <span data-form-submit-target="spinner" class="hidden ml-2">
                        <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                    </span>
                </button>
            </div>

            {{ form_end(companyForm) }}
        </div>
    </div>

</div>

{# Logo Preview Script #}
<script>
function previewLogo(event) {
    const file = event.target.files[0];
    const preview = document.getElementById('logo-preview');
    const previewImg = preview.querySelector('img');

    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            previewImg.src = e.target.result;
            preview.classList.remove('hidden');
        }
        reader.readAsDataURL(file);
    } else {
        preview.classList.add('hidden');
        previewImg.src = '';
    }
}
</script>
{% endblock %}