{# templates/contributor/index.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Liste des contributeurs{% endblock %}

{% block body %}
    <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold">
                {% if app.request.get('point-relay') == 'off' %}
                    Contributeurs sans Point Relais
                {% elseif app.request.get('shipped') == 'on' %}
                    Liste des contributeurs traités
                {% else %}
                    Liste des contributeurs en attente
                {% endif %}
                {% if current_search %}
                    <span class="text-lg text-gray-600">- Recherche : "{{ current_search }}"</span>
                {% endif %}
            </h1>
            <div class="flex space-x-2">
                {% set currentParams = app.request.query.all %}
                {% set isPointRelayOff = currentParams['point-relay'] is defined and currentParams['point-relay'] == 'off' %}
                {% set isShippedOn = currentParams['shipped'] is defined and currentParams['shipped'] == 'on' %}

                <div class="flex flex-wrap gap-2">
                    {% if not isPointRelayOff %}
                        <a href="{{ path('app_contributor_index', {'point-relay': 'off'}) }}"
                           class="bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700">
                            Contributeurs sans Point Relais
                        </a>
                    {% endif %}

                    {% if not isShippedOn %}
                        <a href="{{ path('app_contributor_index', {'shipped': 'on'}) }}"
                           class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                            Contributeurs traités
                        </a>
                    {% endif %}

                    {% if isPointRelayOff or isShippedOn %}
                        <a href="{{ path('app_contributor_index') }}"
                           class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                            Contributeurs en attente d'envoi
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>

        {# Barre de recherche #}
        <div class="mb-6 bg-gray-50 p-4 rounded-lg border">
            <form method="get" class="flex items-center space-x-4">
                {# Conserver les paramètres de filtre existants #}
                {% if app.request.get('point-relay') %}
                    <input type="hidden" name="point-relay" value="{{ app.request.get('point-relay') }}">
                {% endif %}
                {% if app.request.get('shipped') %}
                    <input type="hidden" name="shipped" value="{{ app.request.get('shipped') }}">
                {% endif %}

                <div class="flex-1 relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <input type="text"
                           name="search"
                           value="{{ current_search }}"
                           placeholder="Rechercher par nom, prénom ou email..."
                           class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                </div>

                <button type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                    Rechercher
                </button>

                {% if current_search %}
                    <a href="{{ path('app_contributor_index', app.request.query.all|filter((value, key) => key != 'search' and key != 'page')) }}"
                       class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                        Effacer
                    </a>
                {% endif %}
            </form>
        </div>

        {% if app.request.get('point-relay') == 'off' %}
            <div class="mb-4 p-4 bg-orange-50 border border-orange-200 rounded">
                <p class="text-orange-700">
                    <strong>{{ contributors.getTotalItemCount }}</strong> contributeur(s) sans point relais spécifié
                    {% if current_search %} correspondant à "{{ current_search }}"{% endif %}.
                </p>
            </div>
        {% endif %}

        {% if current_search and contributors.getTotalItemCount == 0 %}
            <div class="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded">
                <p class="text-yellow-700">
                    Aucun résultat trouvé pour "<strong>{{ current_search }}</strong>".
                    <a href="{{ path('app_contributor_index', app.request.query.all|filter((value, key) => key != 'search' and key != 'page')) }}"
                       class="underline text-blue-600 hover:text-blue-800">Effacer la recherche</a>
                </p>
            </div>
        {% endif %}

        <div class="overflow-x-auto">
            <table class="min-w-full bg-white">
                <thead>
                    <tr class="bg-gray-100 text-gray-700 uppercase text-sm leading-normal">
                        <th class="py-3 px-6 text-left">Contributeur</th>
                        <th class="py-3 px-6 text-left">Livraison</th>
                        <th class="py-3 px-6 text-left">Point Relais</th>
                        <th class="py-3 px-6 text-left">Téléphone</th>
                        <th class="py-3 px-6 text-left">Contrepartie</th>
                        <th class="py-3 px-6 text-center">Poids</th>
                        <th class="py-3 px-6 text-center">Statut</th>
                        <th class="py-3 px-6 text-center">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-gray-600 text-sm">
                    {% for contributor in contributors %}
                        <tr class="border-b border-gray-200 hover:bg-gray-50 {% if not contributor.relayName %}bg-orange-50{% endif %}">
                            <td class="py-3 px-6 text-left">
                                <b>
                                    {% if current_search %}
                                        {{ (contributor.deliveryFirstName ~ ' ' ~ contributor.deliveryLastName)|replace({(current_search): '<mark class="bg-yellow-200">' ~ current_search ~ '</mark>'})|raw }}
                                    {% else %}
                                        {{ contributor.deliveryFirstName }} {{ contributor.deliveryLastName }}
                                    {% endif %}
                                </b><br>
                                <i>
                                    {% if current_search %}
                                        {{ contributor.name|replace({(current_search): '<mark class="bg-yellow-200">' ~ current_search ~ '</mark>'})|raw }}
                                    {% else %}
                                        {{ contributor.name }}
                                    {% endif %}
                                </i><br>
                                {% if current_search %}
                                    {{ contributor.email|replace({(current_search): '<mark class="bg-yellow-200">' ~ current_search ~ '</mark>'})|raw }}
                                {% else %}
                                    {{ contributor.email }}
                                {% endif %}
                            </td>
                            <td class="py-3 px-6 text-left">
                                {% if contributor.deliveryAddress %}
                                    {{ contributor.deliveryFirstName }} {{ contributor.deliveryLastName }}<br>
                                    {{ contributor.deliveryAddress }}
                                    {% if contributor.deliveryAddress2 %}<br>{{ contributor.deliveryAddress2 }}{% endif %}<br>
                                    {{ contributor.deliveryPostalCode }} {{ contributor.deliveryCity }}<br>
                                    {{ contributor.deliveryCountry }}
                                {% else %}
                                    {{ contributor.address }}<br>
                                    {{ contributor.postalCode }} {{ contributor.city }}<br>
                                    {{ contributor.country }}
                                {% endif %}
                            </td>
                            <td class="py-3 px-6 text-left">
                                {% if contributor.relayName %}
                                    <span class="text-sm font-medium">{{ contributor.relayName }}</span><br>
                                    <span class="text-xs">{{ contributor.relayAddress }}</span><br>
                                    <span class="text-xs text-gray-500">ID: {{ contributor.relayId }}</span>
                                {% else %}
                                    <span class="text-xs text-orange-600 font-medium">Non spécifié</span>
                                {% endif %}
                            </td>
                            <td class="py-3 px-6 text-left">
                                {{ contributor.deliveryPhone ?? contributor.phone }}
                            </td>
                            <td class="py-3 px-6 text-left">
                                {% for reward in contributor.rewards %}
                                    <div class="mb-1">
                                        <strong>{{ reward.title }}</strong>
                                        {% if reward.variation %}({{ reward.variation }}){% endif %}
                                        <span class="text-xs text-gray-500">x{{ reward.quantity }}</span>
                                    </div>
                                {% endfor %}
                            </td>
                            <td class="py-3 px-6 text-center">
                                <span class="font-medium text-gray-800">{{ contributor.totalWeight|number_format(0) }}g</span>
                                {% if contributor.totalWeight > 1000 %}
                                    <br><span class="text-xs text-gray-500">({{ (contributor.totalWeight / 1000)|number_format(1) }}kg)</span>
                                {% endif %}
                            </td>
                            <td class="py-3 px-6 text-center whitespace-nowrap">
                                {% if contributor.shipped %}
                                    <span class="bg-green-100 text-green-800 py-1 px-3 rounded-full text-xs">
                                        Envoi créé #{{ contributor.trackingNumber }}
                                    </span>
                                {% else %}
                                    <span class="bg-yellow-100 text-yellow-800 py-1 px-3 rounded-full text-xs">
                                        En attente
                                    </span>
                                {% endif %}
                            </td>
                            <td class="py-3 px-6 text-center whitespace-nowrap">
                                {% if not contributor.shipped %}
                                    {% if contributor.relayName %}
                                        <a href="{{ path('app_contributor_detail', {'id': contributor.id}) }}"
                                           class="inline-flex bg-green-500 text-white py-1 px-2 rounded text-xs hover:bg-green-600">
                                            Créer un envoi
                                        </a>
                                    {% else %}
                                        <a href="{{ path('app_contributor_update_relay', {'id': contributor.id}) }}"
                                           class="inline-flex bg-orange-500 text-white py-1 px-2 rounded text-xs hover:bg-orange-600 whitespace-nowrap">
                                            Mettre à jour RelayID
                                        </a>
                                    {% endif %}
                                {% else %}
                                    <div class="flex flex-col space-y-1">
                                        <a href="https://connect.mondialrelay.com/{{ mr_customer_code }}/Expedition/Afficher?numeroExpedition={{ contributor.trackingNumber }}&codeEntiteLogistique="
                                           target="_blank"
                                           class="inline-flex bg-blue-500 text-white py-1 px-2 rounded text-xs hover:bg-blue-600 whitespace-nowrap">
                                            📄 Voir dans Connect
                                        </a>

                                        <a href="https://connect.mondialrelay.com/{{ mr_customer_code }}/Etiquette/GetStickersExpedition?numeroExpedition={{ contributor.trackingNumber }}"
                                           target="_blank"
                                           class="inline-flex bg-blue-500 text-white py-1 px-2 rounded text-xs hover:bg-blue-600 whitespace-nowrap">
                                            🖨️ Voir étiquette
                                        </a>

                                        <a href="{{ path('app_contributor_detail', {'id': contributor.id}) }}"
                                           class="inline-flex bg-purple-500 text-white py-1 px-2 rounded text-xs hover:bg-purple-600 whitespace-nowrap">
                                            👁️ Voir le détail
                                        </a>
                                    </div>
                                {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="8" class="py-4 text-center">
                                {% if current_search %}
                                    Aucun contributeur trouvé pour "{{ current_search }}"
                                {% elseif app.request.get('point-relay') == 'off' %}
                                    Aucun contributeur sans point relais trouvé
                                {% else %}
                                    Aucun contributeur trouvé
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {# Contrôles de pagination #}
        <div class="mt-4 flex justify-center">
            {{ knp_pagination_render(contributors) }}
        </div>

        {# Affichage du nombre total d'éléments #}
        <div class="mt-2 text-center text-sm text-gray-500">
            {% if current_search %}
                {% if app.request.get('point-relay') == 'off' %}
                    {{ contributors.getTotalItemCount }} contributeur(s) sans point relais trouvé(s) pour "{{ current_search }}"
                {% else %}
                    {{ contributors.getTotalItemCount }} contributeur(s) trouvé(s) pour "{{ current_search }}"
                {% endif %}
            {% else %}
                {% if app.request.get('point-relay') == 'off' %}
                    Total : {{ contributors.getTotalItemCount }} contributeur(s) sans point relais
                {% else %}
                    Total : {{ contributors.getTotalItemCount }} contributeur(s)
                {% endif %}
            {% endif %}
        </div>
    </div>
{% endblock %}