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

{% block page_title %}Employés - {{ company.name }}{% endblock %}

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

    {# Breadcrumb #}
    <nav class="flex mb-4" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ path('admin_companies_index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                    <i class="fas fa-building mr-2"></i>
                    Entreprises
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <a href="{{ path('admin_companies_show', {id: company.id}) }}" class="text-sm font-medium text-gray-700 hover:text-indigo-600">
                        {{ company.name }}
                    </a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <span class="text-sm font-medium text-gray-500">Employés</span>
                </div>
            </li>
        </ol>
    </nav>

    {# Tabs Navigation Component #}
    {% include 'admin/companies/_tabs_navigation.html.twig' with {
        company: company,
        active_tab: 'employees'
    } %}

{# Header avec boutons d'action #}
<div class="mb-6 flex items-center justify-between">
    <div>
        <h2 class="text-2xl font-bold text-gray-900">
            <i class="fas fa-users mr-2 text-indigo-600"></i>
            Employés
        </h2>
        <p class="mt-1 text-sm text-gray-600">
            {% if userCompanies is defined %}
                {{ userCompanies|length }} employé(s) associé(s) à cette entreprise
            {% else %}
                Gestion des employés de cette entreprise
            {% endif %}
        </p>
    </div>

    {% if not company.deletedAt and (is_granted('ROLE_ADMIN') or is_granted('ROLE_MANAGER')) %}
        <div class="flex items-center space-x-3">
            <a href="{{ path('admin_companies_employees_create', {id: company.id}) }}"
               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-plus mr-2"></i>
                Créer un employé
            </a>
            <a href="{{ path('admin_companies_employees_assign', {id: company.id}) }}"
               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-user-tag mr-2"></i>
                Attribuer un utilisateur
            </a>
        </div>
    {% endif %}
</div>

{# Alert si entreprise supprimée #}
{% if company.deletedAt %}
    <div class="rounded-md bg-yellow-50 p-4 mb-6 border border-yellow-200">
        <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">
                    Cette entreprise est supprimée. Vous ne pouvez pas créer ou attribuer de nouveaux employés.
                </p>
            </div>
        </div>
    </div>
{% endif %}

{# Table des employés #}
<div class="bg-white shadow rounded-lg overflow-hidden">
    {% if userCompanies is not defined or userCompanies is empty %}
        {# Empty State #}
        <div class="p-12 text-center text-gray-500">
            <div class="flex flex-col items-center justify-center">
                <i class="fas fa-users text-4xl text-gray-300 mb-3"></i>
                <p class="font-medium text-lg">Aucun employé associé</p>
                <p class="text-gray-400 mt-1">Commencez par créer ou attribuer un employé à cette entreprise</p>
                {% if not company.deletedAt and (is_granted('ROLE_ADMIN') or is_granted('ROLE_MANAGER')) %}
                    <div class="mt-6 flex items-center space-x-3">
                        <a href="{{ path('admin_companies_employees_create', {id: company.id}) }}"
                           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">
                            <i class="fas fa-user-plus mr-2"></i>
                            Créer un employé
                        </a>
                        <a href="{{ path('admin_companies_employees_assign', {id: company.id}) }}"
                           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">
                            <i class="fas fa-user-tag mr-2"></i>
                            Attribuer un utilisateur
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    {% else %}
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Employé
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Contact
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Rôle Symfony
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Statut
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Dates
                        </th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for userCompany in userCompanies %}
                        {% set user = userCompany.user %}
                        <tr class="hover:bg-gray-50 transition-colors duration-150 {{ userCompany.hasLeft ? 'opacity-75' : '' }}">
                            {# Employee Info #}
                            <td class="px-6 py-4">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <img src="{{ user.profilePhoto|profile_picture_url }}"
                                             alt="{{ user.firstName ~ ' ' ~ user.lastName }}"
                                             class="h-10 w-10 rounded-full object-cover border border-gray-200">
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">
                                            {{ user.firstName }} {{ user.lastName }}
                                        </div>
                                        <div class="text-xs text-gray-500">
                                            @{{ user.username }}
                                        </div>
                                    </div>
                                </div>
                            </td>

                            {# Contact #}
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">{{ user.email }}</div>
                                {% if user.phone %}
                                    <div class="text-xs text-gray-500">{{ user.phone }}</div>
                                {% endif %}
                            </td>

                            {# Symfony Role #}
                            <td class="px-6 py-4 whitespace-nowrap">
                                {% for role in user.roles %}
                                    {% if role != 'ROLE_USER' %}
                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                                            {% if role == 'ROLE_ADMIN' %}bg-red-100 text-red-800
                                            {% elseif role == 'ROLE_MANAGER' %}bg-blue-100 text-blue-800
                                            {% elseif role == 'ROLE_EMPLOYER' %}bg-purple-100 text-purple-800
                                            {% elseif role == 'ROLE_SALES' %}bg-green-100 text-green-800
                                            {% elseif role == 'ROLE_CUSTOMER' %}bg-yellow-100 text-yellow-800
                                            {% else %}bg-gray-100 text-gray-800
                                            {% endif %}">
                                            {{ role|replace({'ROLE_': ''}) }}
                                        </span>
                                    {% endif %}
                                {% endfor %}
                            </td>

                            {# Status #}
                            <td class="px-6 py-4 whitespace-nowrap">
                                {% if userCompany.hasLeft %}
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">
                                        <i class="fas fa-user-slash mr-1"></i>
                                        Révoqué
                                    </span>
                                {% elseif user.isActive %}
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                                        <i class="fas fa-check-circle mr-1"></i>
                                        Actif
                                    </span>
                                {% else %}
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                                        <i class="fas fa-times-circle mr-1"></i>
                                        Inactif
                                    </span>
                                {% endif %}
                            </td>

                            {# Dates #}
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <div class="text-xs">
                                    <div>
                                        <i class="fas fa-sign-in-alt mr-1 text-gray-400"></i>
                                        {{ userCompany.joinedAt|date('d/m/Y') }}
                                    </div>
                                    {% if userCompany.leftAt %}
                                        <div class="text-red-600 mt-1">
                                            <i class="fas fa-sign-out-alt mr-1"></i>
                                            {{ userCompany.leftAt|date('d/m/Y') }}
                                        </div>
                                    {% endif %}
                                </div>
                            </td>

                            {# Actions #}
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <div class="flex items-center justify-end space-x-2">
                                    {# View User Profile #}
                                    <a href="{{ path('admin_users_show', {id: user.id}) }}"
                                       class="text-blue-600 hover:text-blue-900 transition-colors duration-150"
                                       title="Voir le profil">
                                        <i class="fas fa-eye"></i>
                                    </a>

                                    {# Revoke / Reactivate - Hidden for ROLE_COMPANY_DOC without ROLE_MANAGER #}
                                    {% if (is_granted('ROLE_ADMIN') or is_granted('ROLE_MANAGER')) %}
                                        {% if userCompany.hasLeft %}
                                            {# Reactivate Button #}
                                            <form method="post" action="{{ path('admin_companies_employees_reactivate', {id: company.id, userId: user.id}) }}" class="inline">
                                                <input type="hidden" name="_token" value="{{ csrf_token('reactivate_employee_' ~ user.id ~ '_' ~ company.id) }}">
                                                <button type="submit"
                                                        onclick="return confirm('Êtes-vous sûr de vouloir réactiver cet employé ?');"
                                                        class="text-green-600 hover:text-green-900 transition-colors duration-150"
                                                        title="Réactiver">
                                                    <i class="fas fa-undo"></i>
                                                </button>
                                            </form>
                                        {% else %}
                                            {# Revoke Button #}
                                            <form method="post" action="{{ path('admin_companies_employees_revoke', {id: company.id, userId: user.id}) }}" class="inline">
                                                <input type="hidden" name="_token" value="{{ csrf_token('revoke_employee_' ~ user.id ~ '_' ~ company.id) }}">
                                                <button type="submit"
                                                        onclick="return confirm('Êtes-vous sûr de vouloir révoquer cet employé ?');"
                                                        class="text-red-600 hover:text-red-900 transition-colors duration-150"
                                                        title="Révoquer">
                                                    <i class="fas fa-user-slash"></i>
                                                </button>
                                            </form>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
</div>

</div>
{% endblock %}