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

{% block page_title %}POS — Journal d'audit{% endblock %}

{% block content %}
<div class="px-4 py-6 max-w-7xl mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Audit POS — Toutes companies</h1>
        <a href="{{ path('admin_pos_dashboard') }}" class="text-sm text-blue-600 hover:text-blue-700">&larr; Dashboard POS</a>
    </div>

    {# Filtres #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
        <form method="GET" class="flex flex-wrap gap-3 items-end">
            <div class="flex-1 min-w-[200px]">
                <input type="text" name="search" value="{{ filters.search }}" placeholder="Rechercher..." class="w-full border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 text-sm dark:bg-gray-700 dark:text-white">
            </div>
            <div>
                <input type="date" name="dateFrom" value="{{ filters.dateFrom }}" class="border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 text-sm dark:bg-gray-700 dark:text-white">
            </div>
            <div>
                <input type="date" name="dateTo" value="{{ filters.dateTo }}" class="border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-3 text-sm dark:bg-gray-700 dark:text-white">
            </div>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700">Filtrer</button>
        </form>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th class="px-4 py-3">Date</th>
                        <th class="px-4 py-3">Entreprise</th>
                        <th class="px-4 py-3">Utilisateur</th>
                        <th class="px-4 py-3">Action</th>
                        <th class="px-4 py-3">Description</th>
                    </tr>
                </thead>
                <tbody>
                    {% for log in logs %}
                        {% set actionColors = { 'created': 'green', 'updated': 'blue', 'deleted': 'red' } %}
                        <tr class="border-b dark:border-gray-700">
                            <td class="px-4 py-3 text-gray-500 whitespace-nowrap">{{ log.createdAt|date('d/m/Y H:i') }}</td>
                            <td class="px-4 py-3 text-gray-600">{{ log.company.name|default('—') }}</td>
                            <td class="px-4 py-3 text-gray-600">{{ log.user.fullName|default(log.user.email|default('—')) }}</td>
                            <td class="px-4 py-3">
                                <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                                    {{ log.actionLabel|default(log.action) }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-gray-500 truncate max-w-[300px]">{{ log.description|default('') }}</td>
                        </tr>
                    {% else %}
                        <tr><td colspan="5" class="px-4 py-8 text-center text-gray-500">Aucun log trouvé</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if logs.getTotalItemCount > logs.getItemNumberPerPage %}
            <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700">
                {{ knp_pagination_render(logs) }}
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}