{% extends 'admin/layout.html.twig' %}
{% block title %}{{ entityType }} #{{ entityId }} History - KitscoApp{% endblock %}
{% block page_title %}{{ entityType }} History{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="flex items-center gap-2">
        <a href="{{ path('admin_audit_index') }}" class="text-kitsco-accent hover:underline">
            <i class="bi bi-arrow-left"></i> Back to Audit Log
        </a>
    </div>
    <p class="text-gray-500 text-sm mt-2">Activity history for {{ entityType }} #{{ entityId }}</p>
</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-sm">
            <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                <tr>
                    <th class="px-4 py-3 text-left font-medium">Date/Time</th>
                    <th class="px-4 py-3 text-left font-medium">User</th>
                    <th class="px-4 py-3 text-left font-medium">Action</th>
                    <th class="px-4 py-3 text-left font-medium">Description</th>
                    <th class="px-4 py-3 text-center font-medium">Details</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for log in logs %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-4 py-3 text-gray-500 whitespace-nowrap">
                        <div class="text-gray-800">{{ log.occurredAt|date('d M Y') }}</div>
                        <div class="text-xs text-gray-400">{{ log.occurredAt|date('H:i:s') }}</div>
                    </td>
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-800">{{ log.performedBy.fullName }}</div>
                        <div class="text-xs text-gray-400">{{ log.performedBy.email }}</div>
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium {{ log.actionType.badgeClass }}">
                            <i class="fas {{ log.actionType.icon }}"></i>
                            {{ log.actionType.label }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-gray-600">
                        {{ log.description|default('-') }}
                    </td>
                    <td class="px-4 py-3 text-center">
                        {% if log.oldValues or log.newValues %}
                            <button type="button"
                                    class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50 transition-colors"
                                    onclick="toggleDetails({{ log.id }})"
                                    title="View Details">
                                <i class="bi bi-chevron-down text-sm" id="icon-{{ log.id }}"></i>
                            </button>
                        {% else %}
                            <span class="text-gray-300">-</span>
                        {% endif %}
                    </td>
                </tr>
                {% if log.oldValues or log.newValues %}
                <tr id="details-{{ log.id }}" class="hidden bg-gray-50">
                    <td colspan="5" class="px-4 py-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            {% if log.oldValues %}
                            <div>
                                <h4 class="text-xs font-semibold text-gray-500 uppercase mb-2">Previous Values</h4>
                                <div class="bg-red-50 border border-red-100 rounded-lg p-3">
                                    <pre class="text-xs text-red-800 whitespace-pre-wrap">{{ log.oldValues|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
                                </div>
                            </div>
                            {% endif %}
                            {% if log.newValues %}
                            <div>
                                <h4 class="text-xs font-semibold text-gray-500 uppercase mb-2">New Values</h4>
                                <div class="bg-green-50 border border-green-100 rounded-lg p-3">
                                    <pre class="text-xs text-green-800 whitespace-pre-wrap">{{ log.newValues|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endif %}
                {% else %}
                <tr>
                    <td colspan="5" class="px-4 py-16 text-center">
                        <div class="text-gray-400">
                            <i class="bi bi-clipboard-data text-4xl"></i>
                            <p class="mt-3 font-medium text-gray-500">No history found for this {{ entityType }}</p>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
function toggleDetails(id) {
    const detailsRow = document.getElementById('details-' + id);
    const icon = document.getElementById('icon-' + id);

    if (detailsRow.classList.contains('hidden')) {
        detailsRow.classList.remove('hidden');
        icon.classList.remove('bi-chevron-down');
        icon.classList.add('bi-chevron-up');
    } else {
        detailsRow.classList.add('hidden');
        icon.classList.remove('bi-chevron-up');
        icon.classList.add('bi-chevron-down');
    }
}
</script>
{% endblock %}