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

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

{% block content %}
<div class="max-w-6xl 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">
                    Attribuer un utilisateur existant à l'entreprise <strong>{{ company.name }}</strong>
                </p>
            </div>
            <a href="{{ path('admin_companies_show', {id: company.id}) ~ '#employees' }}"
               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>

    {# Info Box #}
    <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-blue-400"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm text-blue-700">
                    Sélectionnez un utilisateur existant dans le système pour l'associer à cette entreprise.
                    L'utilisateur recevra une notification par email (si l'option est cochée).
                </p>
            </div>
        </div>
    </div>

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

            {# User Selection #}
            <div>
                {{ form_label(form.user, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}}) }}
                {{ form_widget(form.user) }}
                {{ form_errors(form.user) }}
                <p class="mt-2 text-xs text-gray-500">
                    <i class="fas fa-lightbulb mr-1"></i>
                    Seuls les utilisateurs actifs et non supprimés sont affichés dans cette liste.
                </p>
            </div>

            {# Send Email Checkbox #}
            <div class="border-t border-gray-200 pt-6">
                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        {{ form_widget(form.sendEmail) }}
                    </div>
                    <div class="ml-3 text-sm">
                        {{ form_label(form.sendEmail, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                        {{ form_help(form.sendEmail) }}
                    </div>
                </div>
                {{ form_errors(form.sendEmail) }}
            </div>

            {# Help Section #}
            <div class="bg-gray-50 border border-gray-200 rounded-md p-4">
                <h4 class="text-sm font-medium text-gray-900 mb-2">
                    <i class="fas fa-question-circle text-gray-500 mr-1"></i>
                    Comment ça fonctionne ?
                </h4>
                <ul class="text-sm text-gray-600 space-y-2 list-disc list-inside">
                    <li>Sélectionnez l'utilisateur que vous souhaitez associer à l'entreprise</li>
                    <li>Une association (UserCompany) sera créée entre l'utilisateur et l'entreprise</li>
                    <li>L'utilisateur pourra accéder aux données de l'entreprise selon ses permissions</li>
                    <li>Si un email est envoyé, il recevra une notification avec les détails de l'entreprise</li>
                </ul>
            </div>

            {# Warning if user already exists #}
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-yellow-700">
                            <strong>Note :</strong> Si l'utilisateur sélectionné est déjà associé à cette entreprise,
                            vous recevrez une erreur. Vérifiez la liste des employés actuels avant d'attribuer.
                        </p>
                    </div>
                </div>
            </div>

            {# Submit Buttons #}
            <div class="flex justify-end space-x-3 border-t border-gray-200 pt-6">
                <a href="{{ path('admin_companies_show', {id: company.id}) ~ '#employees' }}"
                   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-user-tag mr-2"></i>
                    <span data-form-submit-target="buttonText">Attribuer l'utilisateur</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(form) }}
        </div>
    </div>

    {# Quick Link to Create New Employee #}
    <div class="mt-6 text-center">
        <p class="text-sm text-gray-600">
            L'utilisateur n'existe pas encore ?
            <a href="{{ path('admin_companies_employees_create', {id: company.id}) }}"
               class="font-medium text-indigo-600 hover:text-indigo-500">
                Créer un nouvel employé
                <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </p>
    </div>

</div>
{% endblock %}