<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Logs Paiements - AS Talange</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>
<body class="bg-gray-50 text-gray-900 flex h-screen overflow-hidden">

    <!-- Sidebar -->
    <div th:replace="~{fragments/sidebar :: sidebar}"></div>

    <!-- Main Content -->
    <main class="flex-1 flex flex-col h-screen overflow-hidden">
        <!-- Header -->
        <header class="h-16 bg-white border-b border-gray-200 flex items-center px-6">
            <h2 class="text-lg font-semibold text-gray-800">Audit Logs des Paiements</h2>
        </header>

        <!-- Main section -->
        <div class="flex-1 overflow-auto p-6">

            <!-- Filtres -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5 mb-6">
                <form th:action="@{/admin/logs/paiements}" method="get" class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Action</label>
                        <select name="action" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                            <option value="">Toutes</option>
                            <option value="CREATE" th:selected="${paramAction == 'CREATE'}">Création</option>
                            <option value="UPDATE" th:selected="${paramAction == 'UPDATE'}">Modification</option>
                            <option value="DELETE" th:selected="${paramAction == 'DELETE'}">Suppression</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Agent / Utilisateur</label>
                        <input type="text" name="utilisateur" th:value="${paramUtilisateur}" placeholder="Ex: admin" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Adhérent concerné</label>
                        <input type="text" name="adherent" th:value="${paramAdherent}" placeholder="Nom ou prénom" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                    </div>
                    <div class="flex space-x-2">
                        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors w-full">
                            Filtrer
                        </button>
                        <a href="/admin/logs/paiements" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors flex items-center justify-center px-3">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
                        </a>
                    </div>
                </form>
            </div>

            <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse min-w-[800px]">
                        <thead>
                            <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider border-b border-gray-200">
                                <th class="py-3 px-6 font-medium">Date</th>
                                <th class="py-3 px-6 font-medium">Action</th>
                                <th class="py-3 px-6 font-medium">Utilisateur</th>
                                <th class="py-3 px-6 font-medium">Adhérent</th>
                                <th class="py-3 px-6 font-medium">Détails</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 text-sm">
                            <tr th:if="${#lists.isEmpty(logs)}">
                                <td colspan="5" class="py-4 px-6 text-center text-gray-500">Aucun log enregistré.</td>
                            </tr>
                            <tr th:each="log : ${logs}" class="hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-6 text-gray-600 whitespace-nowrap" th:text="${#temporals.format(log.dateAction, 'dd/MM/yyyy HH:mm:ss')}">01/01/2026 10:00:00</td>
                                <td class="py-3 px-6">
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full"
                                          th:classappend="${log.action == 'CREATE' ? 'bg-green-100 text-green-800' : (log.action == 'UPDATE' ? 'bg-blue-100 text-blue-800' : 'bg-red-100 text-red-800')}"
                                          th:text="${log.action}">CREATE</span>
                                </td>
                                <td class="py-3 px-6 font-medium text-gray-900" th:text="${log.utilisateur}">Jean Dupont</td>
                                <td class="py-3 px-6 text-gray-600" th:text="${log.adherentNomComplet}">John Doe</td>
                                <td class="py-3 px-6 text-gray-500 text-xs" th:text="${log.details}">Détails du changement</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>

</body>
</html>
