{% extends 'admin/base.html' %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="fas fa-envelope me-2"></i> Gestion des messages</h1>
        <button type="button" class="btn btn-primary" id="markAllAsRead" {{ 'disabled' if not contacts or contacts|selectattr('is_read', 'equalto', false)|list|length == 0 }}>
            <i class="fas fa-check-double me-2"></i> Marquer tout comme lu
        </button>
    </div>
    
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover datatable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nom</th>
                            <th>Email</th>
                            <th>Téléphone</th>
                            <th>Message</th>
                            <th>Date</th>
                            <th>Statut</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if contacts %}
                            {% for contact in contacts %}
                                <tr class="{{ 'table-warning' if not contact.is_read else '' }}" data-id="{{ contact.id }}">
                                    <td>{{ contact.id }}</td>
                                    <td>{{ contact.name }}</td>
                                    <td><a href="mailto:{{ contact.email }}">{{ contact.email }}</a></td>
                                    <td>
                                        {% if contact.phone %}
                                            <a href="tel:{{ contact.phone }}">{{ contact.phone }}</a>
                                        {% else %}
                                            <span class="text-muted">Non fourni</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ contact.message|truncate(30) }}</td>
                                    <td>{{ contact.created_at.strftime('%d/%m/%Y %H:%M') }}</td>
                                    <td>
                                        {% if contact.is_read %}
                                            <span class="badge bg-success">Lu</span>
                                        {% else %}
                                            <span class="badge bg-warning text-dark">Non lu</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <a href="{{ url_for('admin.view_contact', id=contact.id) }}" class="btn btn-sm btn-info me-1 message-link" data-id="{{ contact.id }}" data-bs-toggle="tooltip" title="Voir">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal" data-id="{{ contact.id }}" data-name="{{ contact.name }}" data-type="le message" data-action="{{ url_for('admin.delete_contact', id=contact.id) }}" data-bs-toggle="tooltip" title="Supprimer">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="8" class="text-center">Aucun message disponible</td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize DataTable
        $('.datatable').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
            },
            order: [[0, 'desc']], // Sort by ID descending by default
            responsive: true
        });
        
        // Mark all messages as read
        const markAllAsReadBtn = document.getElementById('markAllAsRead');
        if (markAllAsReadBtn) {
            markAllAsReadBtn.addEventListener('click', function() {
                if (confirm('Êtes-vous sûr de vouloir marquer tous les messages comme lus ?')) {
                    // Simulate marking all as read (would be replaced with an actual AJAX call)
                    const unreadRows = document.querySelectorAll('tr.table-warning');
                    unreadRows.forEach(row => {
                        row.classList.remove('table-warning');
                        row.querySelector('.badge').classList.remove('bg-warning', 'text-dark');
                        row.querySelector('.badge').classList.add('bg-success');
                        row.querySelector('.badge').textContent = 'Lu';
                    });
                    
                    // Update the unread badge count
                    const unreadBadge = document.getElementById('unreadMessageCount');
                    if (unreadBadge) {
                        unreadBadge.textContent = '0';
                    }
                    
                    // Disable the button
                    markAllAsReadBtn.disabled = true;
                    
                    // Show success message
                    alert('Tous les messages ont été marqués comme lus.');
                }
            });
        }
    });
</script>
{% endblock %}
