{% extends 'admin/layout.html.twig' %}
{% block title %}Contact Submissions - KitscoApp{% endblock %}
{% block page_title %}Contact Submissions{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
    <p class="text-sm text-gray-500">
        {{ submissions|length }} submission(s)
        {% if unread_count > 0 %}
            <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                {{ unread_count }} unread
            </span>
        {% endif %}
    </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 w-8"></th>
                    <th class="px-4 py-3 text-left font-medium">From</th>
                    <th class="px-4 py-3 text-left font-medium hidden md:table-cell">Organization</th>
                    <th class="px-4 py-3 text-left font-medium hidden lg:table-cell">Message</th>
                    <th class="px-4 py-3 text-left font-medium">Date</th>
                    <th class="px-4 py-3 text-right font-medium">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for submission in submissions %}
                <tr class="hover:bg-gray-50 transition-colors {{ not submission.isRead ? 'bg-blue-50/50' : '' }}">
                    <td class="px-4 py-3">
                        {% if not submission.isRead %}
                            <span class="inline-block w-2 h-2 bg-blue-500 rounded-full" title="Unread"></span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3">
                        <a href="{{ path('admin_contact_submission_show', {id: submission.id}) }}" class="hover:text-kitsco-accent">
                            <p class="font-semibold text-gray-800 {{ not submission.isRead ? 'font-bold' : '' }}">{{ submission.name }}</p>
                            <p class="text-xs text-gray-400">{{ submission.email }}</p>
                            {% if submission.phone %}
                                <p class="text-xs text-gray-400">{{ submission.phone }}</p>
                            {% endif %}
                        </a>
                    </td>
                    <td class="px-4 py-3 hidden md:table-cell text-gray-600">{{ submission.organization ?? '-' }}</td>
                    <td class="px-4 py-3 hidden lg:table-cell text-gray-600">
                        <p class="truncate max-w-xs">{{ submission.message|slice(0, 80) }}{% if submission.message|length > 80 %}...{% endif %}</p>
                    </td>
                    <td class="px-4 py-3 text-gray-600 whitespace-nowrap">
                        <p class="text-sm">{{ submission.createdAt|date('M j, Y') }}</p>
                        <p class="text-xs text-gray-400">{{ submission.createdAt|date('g:i A') }}</p>
                    </td>
                    <td class="px-4 py-3 text-right whitespace-nowrap">
                        <a href="{{ path('admin_contact_submission_show', {id: submission.id}) }}" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50" title="View">
                            <i class="bi bi-eye text-sm"></i>
                        </a>
                        <form method="post" action="{{ path('admin_contact_submission_toggle_read', {id: submission.id}) }}" class="inline">
                            <input type="hidden" name="_token" value="{{ csrf_token('toggle' ~ submission.id) }}">
                            <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50" title="{{ submission.isRead ? 'Mark as unread' : 'Mark as read' }}">
                                <i class="bi bi-{{ submission.isRead ? 'envelope' : 'envelope-open' }} text-sm"></i>
                            </button>
                        </form>
                        <form method="post" action="{{ path('admin_contact_submission_delete', {id: submission.id}) }}" class="inline">
                            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ submission.id) }}">
                            <button type="button"
                                    onclick="window.confirmDialog?.confirmForm(this.closest('form'), 'Delete Submission', 'Are you sure you want to delete this submission?', 'Delete', 'danger')"
                                    class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-red-300 text-red-500 hover:bg-red-50" title="Delete">
                                <i class="bi bi-trash text-sm"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="px-4 py-16 text-center">
                        <div class="text-gray-400">
                            <i class="bi bi-inbox text-4xl"></i>
                            <p class="mt-3 font-medium text-gray-500">No contact submissions yet</p>
                            <p class="text-sm text-gray-400 mt-1">Submissions from your website contact form will appear here.</p>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}