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

{% block page_title %}{{ page_title }}{% 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-blue-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-blue-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">Secteurs d'activité</span>
                </div>
            </li>
        </ol>
    </nav>

    {# Header #}
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">
                <i class="fas fa-briefcase mr-2 text-blue-600"></i>
                Secteurs d'activité
            </h2>
            <p class="mt-1 text-sm text-gray-600">
                Gérez les secteurs d'activité de {{ company.name }}
            </p>
        </div>
        <div>
            <a href="{{ path('admin_companies_show', {id: company.id}) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour à l'entreprise
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {# Liste des secteurs (2/3) #}
        <div class="lg:col-span-2">
            <div class="bg-white shadow-sm rounded-lg overflow-hidden">
                <div class="p-4 bg-gray-50 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Secteurs existants</h3>
                </div>

                {% if sectors is empty or sectors|length == 0 %}
                    <div class="p-8 text-center">
                        <i class="fas fa-briefcase text-6xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">Aucun secteur d'activité créé pour le moment.</p>
                        <p class="text-sm text-gray-400 mt-1">Utilisez le formulaire pour créer votre premier secteur.</p>
                    </div>
                {% else %}
                    <ul class="divide-y divide-gray-200">
                        {% for sector in sectors %}
                            <li class="p-4 hover:bg-gray-50 {% if not sector.isActive %}bg-gray-50 opacity-60{% endif %}">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center flex-1">
                                        <i class="fas {{ sector.icon }} text-2xl text-gray-400 mr-4"></i>
                                        <div class="flex-1">
                                            <div class="flex items-center gap-2">
                                                <h4 class="text-base font-medium text-gray-900">
                                                    {{ sector.name }}
                                                    {% if sector.code %}
                                                        <span class="text-xs text-gray-500 font-mono ml-2">[{{ sector.code }}]</span>
                                                    {% endif %}
                                                </h4>
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ sector.badgeColorClass }}">
                                                    {{ sector.color|capitalize }}
                                                </span>
                                                {% if not sector.isActive %}
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                        Inactif
                                                    </span>
                                                {% endif %}
                                            </div>
                                            {% if sector.description %}
                                                <p class="text-sm text-gray-500 mt-1">{{ sector.description }}</p>
                                            {% endif %}
                                            <p class="text-xs text-gray-400 mt-1">
                                                Position: {{ sector.position }} · Créé le {{ sector.createdAt|date('d/m/Y') }}
                                            </p>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-2 ml-4">
                                        {# Toggle Active Button #}
                                        <form method="post" action="{{ path('admin_activity_sectors_toggle_active', {companyId: company.id, id: sector.id}) }}" class="inline">
                                            <input type="hidden" name="_token" value="{{ csrf_token('toggle_active_' ~ sector.id) }}">
                                            <button type="submit" class="inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
                                                    title="{{ sector.isActive ? 'Désactiver' : 'Activer' }}">
                                                <i class="fas fa-{{ sector.isActive ? 'toggle-on' : 'toggle-off' }} mr-1"></i>
                                                {{ sector.isActive ? 'Actif' : 'Inactif' }}
                                            </button>
                                        </form>

                                        {# Edit Button #}
                                        <a href="{{ path('admin_activity_sectors_edit', {companyId: company.id, id: sector.id}) }}"
                                           class="inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                                            <i class="fas fa-edit mr-1"></i>
                                            Modifier
                                        </a>

                                        {# Delete Button (Admin only) #}
                                        {% if is_granted('ROLE_ADMIN') %}
                                            <form method="post" action="{{ path('admin_activity_sectors_delete', {companyId: company.id, id: sector.id}) }}"
                                                  onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce secteur d\'activité ?');">
                                                <input type="hidden" name="_token" value="{{ csrf_token('delete_sector_' ~ sector.id) }}">
                                                <button type="submit" class="inline-flex items-center px-3 py-1.5 border border-red-300 rounded-md text-sm font-medium text-red-700 bg-white hover:bg-red-50">
                                                    <i class="fas fa-trash mr-1"></i>
                                                    Supprimer
                                                </button>
                                            </form>
                                        {% endif %}
                                    </div>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}

                {# Pagination #}
                {% if sectors.pageCount > 1 %}
                    <div class="p-4 bg-gray-50 border-t border-gray-200">
                        <div class="flex items-center justify-between">
                            <div class="text-sm text-gray-700">
                                Affichage de <span class="font-medium">{{ sectors.currentItemCount }}</span> sur <span class="font-medium">{{ sectors.totalItemCount }}</span> résultats
                            </div>
                            {{ knp_pagination_render(sectors) }}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>

        {# Formulaire de création (1/3) #}
        <div class="lg:col-span-1">
            <div class="bg-white shadow-sm rounded-lg overflow-hidden sticky top-4">
                <div class="p-4 bg-blue-600">
                    <h3 class="text-lg font-medium text-white">
                        <i class="fas fa-plus-circle mr-2"></i>
                        Nouveau secteur
                    </h3>
                </div>

                {{ form_start(createForm) }}
                <div class="p-4 space-y-4">
                    {{ form_row(createForm.name) }}
                    {{ form_row(createForm.code) }}
                    {{ form_row(createForm.description) }}
                    {{ form_row(createForm.color) }}
                    {{ form_row(createForm.icon) }}

                    <div class="flex items-center gap-4">
                        <div class="flex-1">
                            {{ form_row(createForm.position) }}
                        </div>
                        <div class="pt-6">
                            {{ form_row(createForm.isActive) }}
                        </div>
                    </div>

                    {{ form_row(createForm.submit) }}
                </div>
                {{ form_end(createForm) }}
            </div>
        </div>
    </div>
</div>
{% endblock %}