{% 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">

    {# Header Section #}
    <div class="mb-8">
        <div class="sm:flex sm:items-center sm:justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">{{ page_title }}</h1>
                <p class="mt-2 text-sm text-gray-700">
                    Gérez les entreprises de votre plateforme
                </p>
            </div>
            <div class="mt-4 sm:mt-0">
                <a href="{{ path('admin_companies_create') }}"
                   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-plus mr-2"></i>
                    Créer une entreprise
                </a>
            </div>
        </div>
    </div>

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

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                {# Search Field #}
                <div class="sm:col-span-2">
                    <label for="{{ filterForm.search.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ form_label(filterForm.search) }}
                    </label>
                    {{ form_widget(filterForm.search, {
                        'attr': {
                            'class': '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',
                            'placeholder': 'Nom, email, ville...'
                        }
                    }) }}
                </div>

                {# Status Filter #}
                <div>
                    <label for="{{ filterForm.status.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ form_label(filterForm.status) }}
                    </label>
                    {{ form_widget(filterForm.status, {
                        'attr': {
                            'class': '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'
                        }
                    }) }}
                </div>

                {# Date From #}
                <div>
                    <label for="{{ filterForm.dateFrom.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ form_label(filterForm.dateFrom) }}
                    </label>
                    {{ form_widget(filterForm.dateFrom, {
                        'attr': {
                            'class': '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'
                        }
                    }) }}
                </div>

                {# Date To #}
                <div>
                    <label for="{{ filterForm.dateTo.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ form_label(filterForm.dateTo) }}
                    </label>
                    {{ form_widget(filterForm.dateTo, {
                        'attr': {
                            'class': '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'
                        }
                    }) }}
                </div>
            </div>

            {# Filter Actions #}
            <div class="flex justify-end space-x-3 pt-2">
                <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>
                    Réinitialiser
                </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">
                    <span data-form-submit-target="buttonText">
                        <i class="fas fa-filter mr-2"></i>
                        Filtrer
                    </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(filterForm) }}
        </div>
    </div>

    {# View Mode Toggle + Stats - Desktop Only #}
    <div class="hidden lg:flex items-center justify-between mb-6">
        <div class="text-sm text-gray-600">
            <span class="font-medium">{{ companies.getTotalItemCount }}</span> entreprise(s) trouvée(s)
        </div>

        <div class="flex items-center space-x-2">
            <span class="text-sm font-medium text-gray-700 mr-2">Affichage:</span>
            <a href="{{ path('admin_companies_index', app.request.query.all|merge({'view': 'table'})) }}"
               class="inline-flex items-center px-3 py-2 border {{ viewMode == 'table' ? 'border-indigo-600 text-indigo-600 bg-indigo-50' : 'border-gray-300 text-gray-700 bg-white hover:bg-gray-50' }} text-sm font-medium rounded-l-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-150">
                <i class="fas fa-table mr-1.5"></i>
                Tableau
            </a>
            <a href="{{ path('admin_companies_index', app.request.query.all|merge({'view': 'grid'})) }}"
               class="inline-flex items-center px-3 py-2 border {{ viewMode == 'grid' ? 'border-indigo-600 text-indigo-600 bg-indigo-50' : 'border-gray-300 text-gray-700 bg-white hover:bg-gray-50' }} text-sm font-medium rounded-r-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-150">
                <i class="fas fa-th-large mr-1.5"></i>
                Grille
            </a>
        </div>
    </div>

    {# Desktop Table View #}
    {% if viewMode == 'table' %}
        <div class="hidden lg:block bg-white shadow rounded-lg overflow-hidden">
            <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">
                                Entreprise
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Localisation
                            </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">
                                Statut
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Créée le
                            </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">
                        {% if companies is empty %}
                            <tr>
                                <td colspan="6" class="px-6 py-12 text-center text-sm text-gray-500">
                                    <div class="flex flex-col items-center justify-center">
                                        <i class="fas fa-building text-4xl text-gray-300 mb-3"></i>
                                        <p class="font-medium">Aucune entreprise trouvée</p>
                                        <p class="text-gray-400 mt-1">Commencez par créer votre première entreprise</p>
                                    </div>
                                </td>
                            </tr>
                        {% else %}
                            {% for company in companies %}
                                <tr class="hover:bg-gray-50 transition-colors duration-150">
                                    {# Company Name + Logo #}
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-16 w-16">
                                                <a href="{{ path('admin_companies_show', {id: company.id}) }}" class="block group">
                                                    <img src="{{ company.logo|company_logo_url }}"
                                                         alt="{{ company.name }}"
                                                         class="h-16 w-16 rounded-lg object-contain border-2 border-gray-200 shadow-sm group-hover:shadow-md group-hover:border-indigo-300 transition-all duration-200 group-hover:scale-105">
                                                </a>
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">
                                                    <a href="{{ path('admin_companies_show', {id: company.id}) }}"
                                                       class="hover:text-indigo-600 transition-colors duration-150">
                                                        {{ company.name }}
                                                    </a>
                                                </div>
                                                {% if company.ninea %}
                                                    <div class="text-xs text-gray-500">
                                                        NINEA: {{ company.ninea }}
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </td>

                                    {# Location #}
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">
                                            {% if company.city %}
                                                <i class="fas fa-map-marker-alt text-gray-400 mr-1"></i>
                                                {{ company.city }}
                                            {% else %}
                                                <span class="text-gray-400">-</span>
                                            {% endif %}
                                        </div>
                                        {% if company.country %}
                                            <div class="text-xs text-gray-500">{{ company.country }}</div>
                                        {% endif %}
                                    </td>

                                    {# Contact #}
                                    <td class="px-6 py-4">
                                        {% if company.email %}
                                            <div class="text-sm text-gray-900 truncate max-w-xs">
                                                <i class="fas fa-envelope text-gray-400 mr-1"></i>
                                                {{ company.email }}
                                            </div>
                                        {% endif %}
                                        {% if company.phone %}
                                            <div class="text-xs text-gray-500">
                                                <i class="fas fa-phone text-gray-400 mr-1"></i>
                                                {{ company.phone }}
                                            </div>
                                        {% endif %}
                                        {% if not company.email and not company.phone %}
                                            <span class="text-sm text-gray-400">-</span>
                                        {% endif %}
                                    </td>

                                    {# Status #}
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex flex-col space-y-1">
                                            {% if company.isActive %}
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 w-fit">
                                                    <i class="fas fa-check-circle mr-1"></i>
                                                    Active
                                                </span>
                                            {% else %}
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 w-fit">
                                                    <i class="fas fa-times-circle mr-1"></i>
                                                    Inactive
                                                </span>
                                            {% endif %}

                                            {% if company.deletedAt %}
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 w-fit">
                                                    <i class="fas fa-trash mr-1"></i>
                                                    Supprimée
                                                </span>
                                            {% endif %}
                                        </div>
                                    </td>

                                    {# Created Date #}
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ company.createdAt|date('d/m/Y') }}
                                    </td>

                                    {# Actions #}
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <a href="{{ path('admin_companies_show', {id: company.id}) }}"
                                           class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-indigo-600 hover:text-white hover:bg-indigo-600 border border-indigo-600 rounded-lg transition-colors">
                                            <svg class="w-4 h-4 mr-1.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                            </svg>
                                            Détails
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}

    {# Desktop Grid View #}
    {% if viewMode == 'grid' %}
        <div class="hidden lg:block">
            {% if companies is empty %}
                <div class="bg-white shadow rounded-lg p-12 text-center text-gray-500">
                    <div class="flex flex-col items-center justify-center">
                        <i class="fas fa-building text-4xl text-gray-300 mb-3"></i>
                        <p class="font-medium">Aucune entreprise trouvée</p>
                        <p class="text-gray-400 mt-1">Commencez par créer votre première entreprise</p>
                    </div>
                </div>
            {% else %}
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    {% for company in companies %}
                        {% include 'admin/companies/components/_company_grid_card.html.twig' with {company: company} %}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    {% endif %}

    {# Mobile Card View (Always visible on mobile) #}
    <div class="lg:hidden">
        {% if companies is empty %}
            <div class="bg-white shadow rounded-lg p-12 text-center text-gray-500">
                <div class="flex flex-col items-center justify-center">
                    <i class="fas fa-building text-4xl text-gray-300 mb-3"></i>
                    <p class="font-medium">Aucune entreprise trouvée</p>
                    <p class="text-gray-400 mt-1">Commencez par créer votre première entreprise</p>
                </div>
            </div>
        {% else %}
            <div class="space-y-4">
                {% for company in companies %}
                    {% include 'admin/components/cards/companies_card.html.twig' with {company: company} %}
                {% endfor %}
            </div>
        {% endif %}
    </div>

    {# Pagination #}
    {% if companies.getTotalItemCount > 0 %}
        <div class="mt-6 flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6 rounded-lg shadow">
            <div class="flex flex-1 justify-between sm:hidden">
                {% if companies.currentPageNumber > 1 %}
                    <a href="{{ path('admin_companies_index', app.request.query.all|merge({'page': companies.currentPageNumber - 1})) }}"
                       class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
                        Précédent
                    </a>
                {% endif %}
                {% if companies.currentPageNumber < companies.pageCount %}
                    <a href="{{ path('admin_companies_index', app.request.query.all|merge({'page': companies.currentPageNumber + 1})) }}"
                       class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
                        Suivant
                    </a>
                {% endif %}
            </div>
            <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700">
                        Affichage de
                        <span class="font-medium">{{ (companies.currentPageNumber - 1) * companies.itemNumberPerPage + 1 }}</span>
                        à
                        <span class="font-medium">{{ min(companies.currentPageNumber * companies.itemNumberPerPage, companies.getTotalItemCount) }}</span>
                        sur
                        <span class="font-medium">{{ companies.getTotalItemCount }}</span>
                        résultat(s)
                    </p>
                </div>
                <div>
                    {{ knp_pagination_render(companies) }}
                </div>
            </div>
        </div>
    {% endif %}

</div>
{% endblock %}