{% extends 'base.html' %}

{% block title %}Notificações{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-bell"></i>
                        Notificações
                    </h3>
                </div>
                <div class="card-body">
                    {% if notifications %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Tipo</th>
                                        <th>Título</th>
                                        <th>Destinatário</th>
                                        <th>Status</th>
                                        <th>Data</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for notification in notifications %}
                                    <tr class="{% if not notification.lida %}table-warning{% endif %}">
                                        <td>
                                            <span class="badge badge-{% if notification.tipo == 'tarefa_atrasada' %}danger{% elif notification.tipo == 'tarefa_concluida' %}success{% else %}info{% endif %}">
                                                {{ notification.get_tipo_display }}
                                            </span>
                                        </td>
                                        <td>{{ notification.titulo }}</td>
                                        <td>{{ notification.destinatario.nome }}</td>
                                        <td>
                                            <span class="badge badge-{% if notification.status == 'enviada' %}success{% elif notification.status == 'erro' %}danger{% else %}warning{% endif %}">
                                                {{ notification.get_status_display }}
                                            </span>
                                        </td>
                                        <td>{{ notification.created_at|date:"d/m/Y H:i" }}</td>
                                        <td>
                                            <button class="btn btn-sm btn-info" onclick="verDetalhes({{ notification.id }})">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            {% if not notification.lida %}
                                            <button class="btn btn-sm btn-success" onclick="marcarComoLida({{ notification.id }})">
                                                <i class="fas fa-check"></i>
                                            </button>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-bell-slash fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">Nenhuma notificação encontrada</h5>
                            <p class="text-muted">As notificações aparecerão aqui quando houver atualizações importantes.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para detalhes da notificação -->
<div class="modal fade" id="notificationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detalhes da Notificação</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="notificationDetails">
                <!-- Conteúdo será carregado via AJAX -->
            </div>
        </div>
    </div>
</div>

<script>
function verDetalhes(notificationId) {
    // Implementar AJAX para carregar detalhes
    $('#notificationModal').modal('show');
}

function marcarComoLida(notificationId) {
    fetch(`/notifications/${notificationId}/mark-read/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCookie('csrftoken'),
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    });
}

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
</script>
{% endblock %}