{% extends 'shared/base.html' %}
{% load custom_filters %}
{% load static %}
{% block content %}
<style>
    .notification-message {
        word-wrap: break-word;
        white-space: normal;
    }
    .notification-info {
        background-color: #d1ecf1; /* Azul claro para informativo */
    }
    .notification-alert {
        background-color: #fff3cd; /* Amarelo claro para alerta */
    }
    .notification-error {
        background-color: #f8d7da; /* Vermelho claro para erro */
    }
    .notification-read.notification-info,
    .notification-read.notification-alert,
    .notification-read.notification-error {
        background-color: #d4edda !important; /* Verde claro para notificações lidas */
    }
</style>

<div class="content">
    <div class="card my-2">
      <div class="card-body bg-success bg-gradient text-white rounded-2">
        <div class="row flex-between-center">
          <div class="col-md d-flex align-items-center">
            <h5 class="mb-2 mb-md-0">Lista de Notificações</h5>
          </div>
        </div>
      </div>
    </div>

    <div id="messages" class="col-md-12">
        {% for message in messages %}
        <div
          class="alert alert-dismissible fade show {% if message.tags == 'success' %}alert-success {% elif message.tags == 'error' %}alert-danger {% endif %}">
          {{ message }}
        </div>
        {% endfor %}
      </div>
      <div class="card py-3">
        <div class="content-fluid">


<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <a class="nav-link active" id="received-tab" data-bs-toggle="tab" href="#received" role="tab" aria-controls="received" aria-selected="true">Recebidas</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link" id="sent-tab" data-bs-toggle="tab" href="#sent" role="tab" aria-controls="sent" aria-selected="false">Enviadas</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="received" role="tabpanel" aria-labelledby="received-tab">


                <form method="get" class="mb-3">
                    <div class="row g-2">
                        <div class="col-md-4">
                            <input type="text" name="q" value="{{ query }}" class="form-control" placeholder="Pesquisar notificações">
                        </div>
                        <div class="col-md-4">
                            <select name="type" class="form-select">
                                <option value="">Todos os Tipos</option>
                                <option value="info" {% if filter_type == 'info' %}selected{% endif %}>Informativo</option>
                                <option value="alert" {% if filter_type == 'alert' %}selected{% endif %}>Alerta</option>
                                <option value="error" {% if filter_type == 'error' %}selected{% endif %}>Erro</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-primary w-100">Filtrar</button>
                        </div>
                    </div>
                </form>

                <ul class="list-group">
                    {% for notification in page_obj_received %}
                    <li class="list-group-item d-flex justify-content-between align-items-center 
                        {% if notification.is_read %}notification-read{% endif %} 
                        {% if notification.notification_type == 'info' %}notification-info{% elif notification.notification_type == 'alert' %}notification-alert{% elif notification.notification_type == 'error' %}notification-error{% endif %}" 
                        id="notification-item-{{ notification.id }}">
                        <div class="me-2">
                            <div class="d-flex align-items-center mb-2">
                                <i class="fa {{ notification.icon }} me-2"></i>
                                <span class="notification-message text-break">{{ notification.message }}</span>
                            </div>
                            <small class="text-muted">
                                {{ notification.created_at }} 
                                <span class="read-status" id="read-status-{{ notification.id }}">
                                    {% if notification.is_read %}(Lido){% else %}(Não Lido){% endif %}
                                </span>
                            </small>
                            <br>
                            <small class="text-muted">Enviado por: {{ notification.sender.usuarios.nome }}</small>
                            {% if notification.send_to_all %}
                                <small class="text-muted"> (Enviado para todos)</small>
                            {% endif %}
                        </div>
                        <div class="mx-5">
                            <button type="button" class="btn btn-success btn-sm mark-as-read-btn" data-notification-id="{{ notification.id }}">
                                <i class="fa fa-check"></i> Marcar como lida
                            </button>
                            <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal" data-notification-id="{{ notification.id }}" data-notification-message="{{ notification.message }}">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </li>
                {% endfor %}
                
                
                
                </ul>

                <nav aria-label="Page navigation example" class="mt-3">
                    <ul class="pagination justify-content-center">
                        {% if page_obj_received.has_previous %}
                            <li class="page-item"><a class="page-link" href="?page_received={{ page_obj_received.previous_page_number }}">Anterior</a></li>
                        {% endif %}
                        {% for num in page_obj_received.paginator.page_range %}
                            <li class="page-item {% if page_obj_received.number == num %}active{% endif %}"><a class="page-link" href="?page_received={{ num }}">{{ num }}</a></li>
                        {% endfor %}
                        {% if page_obj_received.has_next %}
                            <li class="page-item"><a class="page-link" href="?page_received={{ page_obj_received.next_page_number }}">Próxima</a></li>
                        {% endif %}
                    </ul>
                </nav>

    </div>
    <div class="tab-pane fade" id="sent" role="tabpanel" aria-labelledby="sent-tab">

                <form method="get" class="mb-3">
                    <div class="row g-2">
                        <div class="col-md-4">
                            <input type="text" name="q" value="{{ query }}" class="form-control" placeholder="Pesquisar notificações">
                        </div>
                        <div class="col-md-4">
                            <select name="type" class="form-select">
                                <option value="">Todos os Tipos</option>
                                <option value="info" {% if filter_type == 'info' %}selected{% endif %}>Informativo</option>
                                <option value="alert" {% if filter_type == 'alert' %}selected{% endif %}>Alerta</option>
                                <option value="error" {% if filter_type == 'error' %}selected{% endif %}>Erro</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-primary w-100">Filtrar</button>
                        </div>
                    </div>
                </form>

                <ul class="list-group">
                    {% for notification in page_obj_sent %}
                    {% if not notification.send_to_all %}
                    <li class="list-group-item d-flex justify-content-between align-items-center 
                        {% if notification.notification_type == 'info' %}notification-info{% elif notification.notification_type == 'alert' %}notification-alert{% elif notification.notification_type == 'error' %}notification-error{% endif %}">
                        <div class="me-2">
                            <div class="d-flex align-items-center mb-2">
                                <i class="fa {{ notification.icon }} me-2"></i>
                                <span class="notification-message text-break">{{ notification.message }}</span>
                            </div>
                            <small class="text-muted">
                                {{ notification.created_at }}
                                <span class="read-status">
                                    {% if notification.is_read %}(Lido){% else %}(Não Lido){% endif %}
                                </span>
                            </small>
                            <br>
                            <small class="text-muted">Enviado para: {{ notification.user.usuarios.nome }}</small>
                        </div>
                        <div class="mx-5">
                            <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal" data-notification-id="{{ notification.id }}" data-notification-message="{{ notification.message }}">
                                <i class="fa fa-trash"></i> Excluir
                            </button>
                        </div>
                    </li>
                    {% else %}
                    <li class="list-group-item d-flex justify-content-between align-items-center 
                        {% if notification.notification_type == 'info' %}notification-info{% elif notification.notification_type == 'alert' %}notification-alert{% elif notification.notification_type == 'error' %}notification-error{% endif %}">
                        <div class="me-2">
                            <div class="d-flex align-items-center mb-2">
                                <i class="fa {{ notification.icon }} me-2"></i>
                                <span class="notification-message text-break">{{ notification.message }}</span>
                            </div>
                            <small class="text-muted">
                                {{ notification.created_at }}
                                <span class="read-status">
                                    {% if notification.is_read %}(Lido){% else %}(Não Lido){% endif %}
                                </span>
                            </small>
                            <br>
                            <small class="text-muted">Enviado para todos os usuários</small>
                        </div>
                        <div class="mx-5">
                            <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal" data-notification-id="{{ notification.id }}" data-notification-message="{{ notification.message }}">
                                <i class="fa fa-trash"></i> Excluir
                            </button>
                        </div>
                    </li>
                    {% endif %}
                {% endfor %}
                
                </ul>

                <nav aria-label="Page navigation example" class="mt-3">
                    <ul class="pagination justify-content-center">
                        {% if page_obj_sent.has_previous %}
                            <li class="page-item"><a class="page-link" href="?page_sent={{ page_obj_sent.previous_page_number }}">Anterior</a></li>
                        {% endif %}
                        {% for num in page_obj_sent.paginator.page_range %}
                            <li class="page-item {% if page_obj_sent.number == num %}active{% endif %}"><a class="page-link" href="?page_sent={{ num }}">{{ num }}</a></li>
                        {% endfor %}
                        {% if page_obj_sent.has_next %}
                            <li class="page-item"><a class="page-link" href="?page_sent={{ page_obj_sent.next_page_number }}">Próxima</a></li>
                        {% endif %}
                    </ul>
                </nav>

    </div>
</div>
</div>
</div>


<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirmar Exclusão</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Tem certeza que deseja excluir a notificação abaixo?
                <p id="modal-notification-message"></p>
            </div>
            <div class="modal-footer">
                <form id="delete-form" method="post">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">Excluir</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $('#deleteModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var notificationId = button.data('notification-id');
        var notificationMessage = button.data('notification-message');

        var modal = $(this);
        modal.find('#modal-notification-message').text(notificationMessage);
        modal.find('#delete-form').attr('action', '/delete/' + notificationId + '/');
    });
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.mark-as-read-btn').forEach(function(button) {
        button.addEventListener('click', function () {
            var notificationId = this.dataset.notificationId;
            fetch(`/read/${notificationId}/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/json',
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Marcar a notificação como lida
                    var notificationItem = document.getElementById(`notification-item-${notificationId}`);
                    notificationItem.classList.add('notification-read');
                    
                    // Atualizar o texto de status de leitura
                    var readStatus = document.getElementById(`read-status-${notificationId}`);
                    readStatus.textContent = "(Lido)";
                    
                    // Atualizar a contagem de notificações no ícone de navegação
                    var notificationCount = document.getElementById('notification-count');
                    var count = parseInt(notificationCount.textContent) - 1;
                    if (count > 0) {
                        notificationCount.textContent = count;
                    } else {
                        notificationCount.remove();
                    }
                }
            })
            .catch(error => console.error('Error:', error));
        });
    });
});

</script>

{% endblock %}