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

{% block page_title %}Catégories de dépenses{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-amber-600 to-orange-600 rounded-lg shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold"><i class="fas fa-layer-group mr-3"></i>Catégories de dépenses</h1>
                <p class="mt-2 text-amber-100">Gérez les types de dépenses et leurs règles de validation</p>
            </div>
            <a href="{{ path('manager_expense_categories_create') }}" class="inline-flex items-center px-4 py-2 bg-white text-amber-700 rounded-lg font-medium text-sm hover:bg-amber-50 transition-colors">
                <i class="fas fa-plus mr-2"></i>Nouvelle catégorie
            </a>
        </div>
    </div>

    {% if categories|length > 0 %}
    <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 text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th class="px-6 py-3">Catégorie</th>
                        <th class="px-6 py-3">Validation requise</th>
                        <th class="px-6 py-3">Seuil</th>
                        <th class="px-6 py-3">Statut</th>
                        <th class="px-6 py-3 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% for category in categories %}
                    <tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-lg {{ category.badgeColorClass }} mr-3">
                                    <i class="fas {{ category.icon }}"></i>
                                </span>
                                <div>
                                    <div class="font-medium text-gray-900 dark:text-white">{{ category.name }}</div>
                                    {% if category.description %}
                                        <div class="text-xs text-gray-500">{{ category.description|u.truncate(60) }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            {% if category.requiresValidation %}
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                                    <i class="fas fa-check mr-1"></i>Oui
                                </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 mr-1"></i>Non
                                </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4">
                            {% if category.validationThreshold %}
                                {{ category.validationThreshold|number_format(0, ',', ' ') }} XOF
                            {% else %}
                                <span class="text-gray-400">—</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4">
                            {% if category.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>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">
                                    <i class="fas fa-times-circle mr-1"></i>Inactive
                                </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex items-center justify-end space-x-2">
                                <a href="{{ path('manager_expense_categories_edit', {id: category.id}) }}" class="text-blue-600 hover:text-blue-800" title="Modifier">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form method="post" action="{{ path('manager_expense_categories_toggle', {id: category.id}) }}" class="inline">
                                    <input type="hidden" name="_token" value="{{ csrf_token('toggle-category-' ~ category.id) }}">
                                    <button type="submit" class="text-yellow-600 hover:text-yellow-800" title="{{ category.isActive ? 'Désactiver' : 'Activer' }}">
                                        <i class="fas {{ category.isActive ? 'fa-toggle-on' : 'fa-toggle-off' }}"></i>
                                    </button>
                                </form>
                                <form method="post" action="{{ path('manager_expense_categories_delete', {id: category.id}) }}" class="inline" onsubmit="return confirm('Supprimer cette catégorie ?')">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete-category-' ~ category.id) }}">
                                    <button type="submit" class="text-red-600 hover:text-red-800" title="Supprimer">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if categories.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">{{ categories.currentItemCount }}</span>
                    sur <span class="font-medium">{{ categories.totalItemCount }}</span> résultats
                </div>
                {{ knp_pagination_render(categories) }}
            </div>
        </div>
        {% endif %}
    </div>
    {% else %}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow text-center py-16">
        <i class="fas fa-layer-group text-5xl text-gray-300 dark:text-gray-600"></i>
        <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">Aucune catégorie de dépense</h3>
        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Créez des catégories pour organiser les dépenses de votre entreprise.</p>
        <a href="{{ path('manager_expense_categories_create') }}" class="mt-4 inline-flex items-center px-4 py-2 bg-amber-600 text-white rounded-lg text-sm hover:bg-amber-700">
            <i class="fas fa-plus mr-2"></i>Créer une catégorie
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}