{# Company Assignment Modal #}
<div id="company-assignment-modal" class="hidden fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" data-controller="company-assignment-modal">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        {# Background overlay #}
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" data-action="click->company-assignment-modal#close"></div>

        {# Center modal #}
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
            <div class="sm:flex sm:items-start">
                <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
                    <i class="fas fa-building text-indigo-600 text-lg"></i>
                </div>
                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
                    <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                        Assigner à une entreprise
                    </h3>
                    <div class="mt-4">
                        <form id="company-assignment-form" method="post" action="{{ path('manager_users_assign_company', {id: user.id}) }}" data-company-assignment-modal-target="form">
                            <div class="mb-4">
                                <label for="company_id" class="block text-sm font-medium text-gray-700 mb-2">
                                    Sélectionner une entreprise
                                </label>
                                <select name="company_id" id="company_id" required
                                        class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    <option value="">-- Choisir une entreprise --</option>
                                    {% set assignedCompanyIds = [] %}
                                    {% for userCompany in user.userCompanies %}
                                        {% set assignedCompanyIds = assignedCompanyIds|merge([userCompany.company.id]) %}
                                    {% endfor %}
                                    {% for company in allCompanies|default([]) %}
                                        {% if company.id not in assignedCompanyIds %}
                                            <option value="{{ company.id }}">{{ company.name }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="mb-4">
                                <label for="company_role" class="block text-sm font-medium text-gray-700 mb-2">
                                    Rôle dans l'entreprise
                                </label>
                                <select name="company_role" id="company_role" required
                                        class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    <option value="member">Membre</option>
                                    <option value="employee">Employé</option>
                                    <option value="manager">Manager</option>
                                    <option value="admin">Administrateur</option>
                                    <option value="owner">Propriétaire</option>
                                </select>
                                <p class="mt-1 text-sm text-gray-500">
                                    Ce rôle définit les permissions de l'utilisateur au sein de l'entreprise
                                </p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {# Modal Actions #}
            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                <button type="button" data-action="click->company-assignment-modal#submit"
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
                    <i class="fas fa-check mr-2"></i>
                    Assigner
                </button>
                <button type="button" data-action="click->company-assignment-modal#close"
                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm">
                    <i class="fas fa-times mr-2"></i>
                    Annuler
                </button>
            </div>
        </div>
    </div>
</div>