{% load static %}
<style>
    .user-avatar {
        width: 55px;
        height: 55px;
    }

    #sidebarCollapse {
        transition: all 0.3s ease;
        /* Suaviza a transição entre estados */
        box-shadow: none;
        /* Estado padrão sem sombra */
        border: 2px solid transparent;
        /* Prepara o botão para o efeito de clique */
    }

    #sidebarCollapse:hover {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        /* Sombra ao passar o mouse */
        transform: translateY(-2px);
        /* Levanta ligeiramente o botão */
    }

    #sidebarCollapse:active {
        transform: translateY(1px);
        /* Efeito de pressionado */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        /* Sombra mais suave */
    }

    .navbar {
        background: #fff;
        border: none;
        border-radius: 0;
        margin-bottom: 30px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }

    .navbar-btn {
        box-shadow: none;
        outline: none !important;
        border: none;
    }

    .line {
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #ddd;
        margin: 40px 0;
    }

    /* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

    .wrapper {
        display: flex;
        width: 100%;
        align-items: stretch;
    }

    #sidebar {
        min-width: 250px;
        max-width: 250px;
        background: #fff;
        color: #000;
        transition: all 0.3s;
    }

    #sidebar.active {
        margin-left: -250px;
    }

    #sidebar .sidebar-header {
        padding: 1rem 1rem;
        border-bottom: 1px solid rgba(101, 109, 119, .16);
        max-height: 120px;
    }

    #sidebar ul.components {
        padding: 20px 0;
    }

    #sidebar ul {
        list-style: none;
        /* Remove os marcadores de lista */
        padding-left: 0;
        /* Remove o padding padrão */
    }

    #sidebar ul p {
        color: #fff !important;
        padding: 10px;
    }

    #sidebar ul li a {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        color: #6c757d;
        /* Cor padrão do texto */
        transition: background-color 0.3s ease, color 0.3s ease;
        /* Otimiza a transição para propriedades específicas */
        display: block;
        /* Faz o link preencher todo o espaço do li */
        text-decoration: none;
        /* Remove o sublinhado dos links */
    }

    .icon-size {
        width: 16px;
        /* Exemplo de tamanho do ícone */
        height: 16px;
        /* Exemplo de tamanho do ícone */
        vertical-align: middle;
        /* Alinha verticalmente o ícone com o texto */
        margin-right: 8px;
        /* Espaço entre o ícone e o texto */
    }

    #sidebar ul li a:hover {
        color: #fff !important;
        /* Cor do texto no hover */
        background: #198754;
        /* Cor de fundo no hover */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Sombra para um efeito sutil de elevação */
        transform: scale(1.05);
        /* Aumenta ligeiramente o tamanho para dar uma sensação de elevação */
    }

    a[data-toggle="collapse"] {
        position: relative;
    }

    .dropdown-toggle::after {
        display: block;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }

    ul ul a {
        font-size: 0.9em !important;
        padding-left: 30px !important;
        background: #6d7fcc;
    }

    ul.CTAs {
        padding: 20px;
    }

    ul.CTAs a {
        text-align: center;
        font-size: 0.9em !important;
        display: block;
        border-radius: 5px;
        margin-bottom: 5px;
    }

    a.download {
        background: #fff;
        color: #7386D5;
    }

    a.article,
    a.article:hover {
        background: #6d7fcc !important;
        color: #fff !important;
    }

    /* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

    #content {
        width: 100%;
        padding: 0px 10px;
        min-height: 100vh;
        transition: all 0.3s;
    }


    /* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

    @media (max-width: 768px) {
        #sidebar {
            margin-left: -250px;
        }

        #sidebar.active {
            margin-left: 0;
        }

        #sidebarCollapse span {
            display: none;
        }
    }

    .app-logo {
        max-width: 200px;
    }

    .text-break {
        word-wrap: break-word;
        white-space: normal;
    }

    .custom-dropdown {
        min-width: 300px;
        /* Ajuste a largura mínima conforme necessário */
        max-width: 400px;
        /* Ajuste a largura máxima conforme necessário */
    }

    .custom-dropdown .dropdown-item {
        white-space: normal;
        /* Permite que o texto quebre linhas */
        word-wrap: break-word;
    }

    .custom-dropdown .dropdown-item .notification-content {
        display: flex;
        flex-direction: column;
    }

    .custom-dropdown .dropdown-item .notification-date {
        align-self: flex-end;
        white-space: nowrap;
        /* Garante que o badge não quebre linhas */
        margin-top: 5px;
        /* Espaçamento entre a mensagem e a data */
    }
</style>
<div class="wrapper">
    <!-- Sidebar  -->
    <nav id="sidebar">
        <div class="sidebar-header text-center">
            <!-- Logotipo do sistema -->
            <img src="{% static 'assets/img/verdesoft-hlogo.png' %}" alt="logo" class="app-logo">
            <!-- Título do sistema -->
        </div>

        <ul class="list-unstyled components">
            {% if 'dashboard' in request.user.usuariofuncionario.menu_permissions %}
            <li><a href="{% url 'dashboard_one' user_info.id %}"><i class="fa-solid fa-house icon-size"></i> Dashboard</a></li>
            {% endif %}
        
            {% if 'calendario' in request.user.usuariofuncionario.menu_permissions %}
            <li><a href="{% url 'apps.calendarapp:calendar' %}"><i class="fa-solid fa-calendar icon-size"></i> Calendário</a></li>
            {% endif %}
        
            {% if 'especies' in request.user.usuariofuncionario.menu_permissions %}
            <!-- <li><a href="{% url 'lista_especies' %}"><i class="fa-solid fa-tree icon-size"></i> Espécies</a></li> -->

            <li class="nav-item">
                <a class="nav-link collapsed d-flex align-items-center" href="#submenuEspecies" data-bs-toggle="collapse" aria-expanded="false">
                    <i class="fa-solid fa-tree icon-size me-2"></i>
                    <span>Espécies</span>
                    <i class="fa-solid fa-angle-down ms-auto"></i>
                </a>
                <div class="collapse" id="submenuEspecies">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'lista_especies' %}">
                                <i class="fa-solid fa-tree icon-size me-2"></i>
                                <span>Lista de Espécies</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'cadastro_de_especies' %}">
                                <i class="fa-solid fa-square-plus icon-size me-2"></i>
                                <span>Cadastro de Espécies</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'relatorio_especies' %}">
                                <i class="fa-solid fa-chart-bar icon-size me-2"></i>
                                <span>Relatorios de Espécies</span></a>
                        </li>
                    </ul>
                </div>
            </li>
            
            {% endif %}
        
            {% if 'sementes' in request.user.usuariofuncionario.menu_permissions %}
            <li class="nav-item">
                <a class="nav-link collapsed d-flex align-items-center" href="#submenuSementes" data-bs-toggle="collapse" aria-expanded="false">
                    <i class="fa-solid fa-spa icon-size me-2"></i>
                    <span>Sementes</span>
                    <i class="fa-solid fa-angle-down ms-auto"></i>
                </a>
                <div class="collapse" id="submenuSementes">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'lista_estoque' %}">
                                <i class="fa-solid fa-spa icon-size me-2"></i>
                                <span>Lista de Sementes</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'relatorio_lotes' %}">
                                <i class="fa-solid fa-chart-bar icon-size me-2"></i>
                                <span>Relatorios de Lotes</span></a>
                        </li>
                    </ul>
                </div>
            </li>
            {% endif %}
        
            {% if 'repique' in request.user.usuariofuncionario.menu_permissions %}
            <li><a href="{% url 'lista_repique' %}"><i class="fas fa-seedling icon-size"></i> Repique</a></li>
            {% endif %}
        
            {% if 'estufa' in request.user.usuariofuncionario.menu_permissions %}
            <li><a href="{% url 'lista_estufa' %}"><i class="fa-solid fa-store icon-size"></i> Estufa</a></li>
            {% endif %}
        
            {% if 'aclimatacao' in request.user.usuariofuncionario.menu_permissions %}
            <li><a href="{% url 'lista_saidas' %}"><i class="fa-solid fa-door-open icon-size"></i> Aclimatação</a></li>
            {% endif %}
        
            {% if 'protocolos' in request.user.usuariofuncionario.menu_permissions %}
            <li class="nav-item">
                <a class="nav-link collapsed d-flex align-items-center" href="#submenuProtocolos" data-bs-toggle="collapse" aria-expanded="false">
                    <i class="fa-solid fa-rectangle-list icon-size me-2"></i>
                    <span>Protocolos</span>
                    <i class="fa-solid fa-angle-down ms-auto"></i>
                </a>
                <div class="collapse" id="submenuProtocolos">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'lista_de_protocolos' %}">
                                <i class="fa-solid fa-rectangle-list icon-size me-2"></i>
                                <span>Lista de Protocolos</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'relatorio_protocolos' %}">
                                <i class="fa-solid fa-square-plus icon-size me-2"></i>
                                <span>Relatorio de Protocolos</span></a>
                        </li>
                    </ul>
                </div>
            </li>
            {% endif %}

            {% if 'funcionarios' in request.user.usuariofuncionario.menu_permissions %}
            <li><a href="{% url 'funcionario_list' %}"><i class="fa-solid fa-user icon-size"></i> Funcionários</a></li>
            {% endif %}
        
            {% if 'clientes' in request.user.usuariofuncionario.menu_permissions %}
            <li><a href="{% url 'lista_clientes' %}"><i class="fa-solid fa-building-columns icon-size"></i> Clientes</a></li>
            {% endif %}
        
            {% if 'fornecedores' in request.user.usuariofuncionario.menu_permissions %}
            <li><a href="{% url 'lista_fornecedores' %}"><i class="fa-solid fa-truck icon-size"></i> Fornecedores</a></li>
            {% endif %}
        
            {% if 'estoque' in request.user.usuariofuncionario.menu_permissions %}
            <li class="nav-item">
                <a class="nav-link collapsed d-flex align-items-center" href="#submenuEstoque" data-bs-toggle="collapse" aria-expanded="false">
                    <i class="fa-solid fa-boxes-stacked icon-size me-2"></i>
                    <span>Estoque</span>
                    <i class="fa-solid fa-angle-down ms-auto"></i>
                </a>
                <div class="collapse" id="submenuEstoque">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'lista_itens_estoque' %}">
                                <i class="fa-solid fa-list icon-size me-2"></i>
                                <span>Lista de Estoque</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'lista_movimentacoes' %}">
                                <i class="fa-solid fa-list icon-size me-2"></i>
                                <span>Lista de Movimentação</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'criar_item_estoque' %}">
                                <i class="fa-solid fa-square-plus icon-size me-2"></i>
                                <span>Adicionar novo item</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'criar_categoria_insumo' %}">
                                <i class="fa-solid fa-square-plus icon-size me-2"></i>
                                <span>Criar Categoria</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link collapsed d-flex align-items-center" href="#submenuRelatorios" data-bs-toggle="collapse" aria-expanded="false">
                                <i class="fa-solid fa-chart-bar icon-size me-2"></i>
                                <span>Relatórios</span>
                                <i class="fa-solid fa-angle-down ms-auto"></i>
                            </a>
                            <div class="collapse" id="submenuRelatorios">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'relatorio_insumos_por_categoria' %}">
                                            <i class="fa-solid fa-list icon-size me-2"></i>
                                            <span>Insumos por Categoria</span></a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'itens_proximos_vencimento' %}">
                                            <i class="fa-solid fa-list icon-size me-2"></i>
                                            <span>Itens Próximos do Vencimento</span></a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'relatorio_custos_insumos' %}">
                                            <i class="fa-solid fa-list icon-size me-2"></i>
                                            <span>Gastos com Insumos</span></a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            {% endif %}
        
            {% if 'relatorios' in request.user.usuariofuncionario.menu_permissions %}
            <li class="nav-item">
                <a class="nav-link collapsed d-flex align-items-center" href="#submenuRelatorio" data-bs-toggle="collapse" aria-expanded="false">
                    <i class="fa-solid fa-box-archive icon-size me-2"></i>
                    <span>Relatórios</span>
                    <i class="fa-solid fa-angle-down ms-auto"></i>
                </a>
                <div class="collapse" id="submenuRelatorio">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'relatorio_semanal_semeadura' %}">
                                <i class="fa-solid fa-list icon-size me-2"></i>
                                <span>Relatórios de semeadura</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'relatorio_semanal_repique' %}">
                                <i class="fa-solid fa-list icon-size me-2"></i>
                                <span>Relatórios de repiques</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'relatorio_semanal_estufa' %}">
                                <i class="fa-solid fa-list icon-size me-2"></i>
                                <span>Relatórios de estufa</span></a>
                        </li>
                    </ul>
                </div>
            </li>
            {% endif %}
            <li class="nav-item">
                <a class="nav-link collapsed d-flex align-items-center" href="#submenuMetas" data-bs-toggle="collapse" aria-expanded="false">
                    <i class="fa-solid fa-list-check icon-size me-2"></i>
                    <span>Metas</span>
                    <i class="fa-solid fa-angle-down ms-auto"></i>
                </a>
                <div class="collapse" id="submenuMetas">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'metas_list' %}">
                                <i class="fa-solid fa-list icon-size me-2"></i>
                                <span>Metas em andamento</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'metas_finalized_list' %}">
                                <i class="fa-solid fa-list-check icon-size me-2"></i>
                                <span>Metas Finalizadas</span></a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        
    </nav>

<script>
    document.addEventListener('DOMContentLoaded', function() {
    var navLinks = document.querySelectorAll('.nav-link[data-bs-toggle="collapse"]');

    navLinks.forEach(function(navLink) {
        navLink.addEventListener('click', function() {
            var icon = this.querySelector('.fa-angle-down');
            var expanded = this.getAttribute('aria-expanded') === 'true';
            icon.style.transform = expanded ? 'rotate(180deg)' : 'rotate(0deg)';
        });
    });
});
</script>
<style>
    .nav-link .fa-angle-down, .nav-link .fa-angle-up {
    font-size: 0.8em;
    transition: transform 0.2s;
}

.nav-link.collapsed .fa-angle-down {
    transform: rotate(0deg);
}

.nav-link[aria-expanded="true"] .fa-angle-down {
    transform: rotate(180deg);
}
.nav-link .fa-angle-down {
    transition: transform 0.2s;
}

.nav-link.collapsed .fa-angle-down {
    transform: rotate(0deg);
}

.nav-link[aria-expanded="true"] .fa-angle-down {
    transform: rotate(180deg);
}
</style>
<style>
    /* Estilização para ajustar o contador */
#notification-count {
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
    border-radius: 50%;
}
.no-chevron::after {
    display: none !important;
}
/* Estilos personalizados para o dropdown de notificações */
.no-chevron::after {
    display: none !important;
}

#notificationDropdown .fa-envelope {
    font-size: 24px; /* Ajuste o tamanho do ícone conforme necessário */
}

.badge {
    font-size: 0.75rem;
    padding: 0.5em 0.75em;
    border-radius: 50%;
}

.dropdown-menu.custom-dropdown {
    width: 300px;
    padding: 10px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-create-notification {
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
}

.notification-item {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease;
}

.notification-item.unread {
    background-color: #f8f9fa;
}

.notification-content {
    display: flex;
    justify-content: space-between;
}

.notification-message {
    flex: 1;
    font-size: 0.9rem;
    color: #343a40;
    margin-right: 10px;
}

.view-all-link {
    color: #007bff;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}

.view-all-link:hover {
    color: #0056b3;
}

.no-notifications {
    text-align: center;
    color: #6c757d;
    padding: 10px;
    font-size: 0.9rem;
}

</style>
    <!-- Page Content  -->
    <div id="content">
        
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <div class="d-flex align-items-center">
                    <button type="button" id="sidebarCollapse" class="btn btn-success">
                        <i class="fas fa-align-left"></i>
                    </button>
                </div>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-align-justify"></i>
                </button>
        
                <div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto align-items-center">
                        <li class="nav-item dropdown">
                            <!-- Ícone de notificação -->
                            <a href="#" class="nav-link dropdown-toggle text-secondary position-relative me-3 no-chevron" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fa-solid fa-envelope icon-size fa-2xl py-3"></i>
                                {% if notifications.count > 0 %}
                                <span id="notification-count" class="badge bg-danger position-absolute top-0 start-100 translate-middle my-3">{{ notifications.count }}</span>
                                {% endif %}
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end custom-dropdown" aria-labelledby="notificationDropdown" style="width: 500px;">
                                <li class="dropdown-item">
                                    <button type="button" class="btn btn-primary btn-create-notification" data-bs-toggle="modal" data-bs-target="#createNotificationModal">
                                        Criar Notificação
                                    </button>
                                </li>
                                {% if notifications %}
                                {% for notification in notifications|slice:":3" %}
                                <li id="notification-{{ notification.id }}" class="dropdown-item notification-item {% if not notification.is_read %}unread{% endif %}">
                                    <div class="notification-content list-group-item">
                                        <i class="fa {{ notification.icon }} me-2"></i>
                                        <span class="notification-message text-break">{{ notification.message }}</span>
                                        <span class="badge text-secondary notification-date">{{ notification.created_at }}</span>
                                    </div>
                                </li>
                                {% endfor %}
                                {% endif %}
                                <li class="dropdown-item text-center">
                                    <a href="{% url 'notification_list' %}" class="btn btn-link view-all-link">Ver todos</a>
                                </li>
                            </ul>
                        </li>
                        
                        
                        
        
                        <li class="nav-item dropdown">
                            <a href="#" class="nav-item nav-link dropdown-toggle text-secondary py-0" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <img class="theme-item user-avatar rounded-circle" src="{% if user_info.foto %}{{ user_info.foto }}{% else %}{% static 'assets/img/fotoperfil.png' %}{% endif %}" alt="User image" />
                                <span class="theme-item">{{ user_info.nome }}</span>
                                <i class="fa-solid fa-chevron-down icon-size"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                                <!-- <li>
                                    <a href="#" class="dropdown-item mt-2 trocar_senha" data-bs-toggle="modal" data-bs-target="#senhaModal" data-user-id="{{ user_info.id }}" data-username="{{ user_info.nome }}">
                                        <i class="fa-solid fa-lock icon-size"></i>
                                        Alterar Senha
                                    </a>
                                </li> -->
                                <li>
                                    <a href="{% url 'lista_notas' %}" class="dropdown-item mt-2">
                                        <i class="fa-solid fa-clipboard icon-size"></i>
                                        Notas
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'logout' %}" class="dropdown-item mt-2">
                                        <i class="fa-solid fa-right-from-bracket icon-size"></i>
                                        Logout
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="modal fade" id="senhaModal" tabindex="-1" aria-labelledby="senhaModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-delete">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="senhaModalLabel">Trocar Senha</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <div id="error-messages"></div> <!-- Espaço para mensagens de erro -->
          
                  <!-- Formulário de troca de senha -->
                  <form method="post" action="" id="senha-form">
                    {% csrf_token %}
                    <input type="hidden" id="user-id-input" name="user_id" value="">
                          
                    <div class="mb-3">
                      <label for="nova_senha" class="form-label">Nova Senha</label>
                      <input type="password" class="form-control" id="nova_senha" name="senha_1" required>
                    </div>
                    <div class="mb-3">
                      <label for="confirma_senha" class="form-label">Confirme a Nova Senha</label>
                      <input type="password" class="form-control" id="confirma_senha" name="senha_2" required>
                    </div>
          
                    <!-- Botões do formulário -->
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                      
                      <button type="submit" class="btn btn-primary" id="salvarSenhaBtn" data-user-id="{{ user_id }}">Salvar</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
     


<!-- Modal para adicionar notificação -->
<div class="modal fade" id="createNotificationModal" tabindex="-1" aria-labelledby="createNotificationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-delete">
        <div class="modal-content">
            <div class="modal-header flex-column">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="icon-box-blue">
                    <i class="fa-solid fa-envelope text-primary"></i>
                </div>
                <h4 class="modal-title w-100">Criar Notificação</h4>
            </div>
            <div class="modal-body">
                <form id="createNotificationForm" method="post" action="{% url 'create_notification' %}">
                    {% csrf_token %}
                    <div class="mb-3">
                        {{ notification_form.message.label_tag }}
                        {{ notification_form.message }}
                    </div>
                    <div class="mb-3">
                        {{ notification_form.notification_type.label_tag }}
                        {{ notification_form.notification_type }}
                    </div>
                    <div class="form-check mb-3 text-start">
                        {{ notification_form.send_to_all }}
                        <label class="form-check-label ms-2" for="sendToAll">Enviar para todos</label>
                    </div>
                    <div class="form-check mb-3 text-start">
                        {{ notification_form.choose_user }}
                        <label class="form-check-label ms-2" for="chooseUser">Escolher Usuário</label>
                    </div>
                    <div id="recipientSelectContainer" class="mb-3" style="display: none;">
                        {{ notification_form.recipient.label_tag }}
                        {{ notification_form.recipient }}
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">Enviar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
        


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const sendToAllCheckbox = document.getElementById('sendToAll');
        const chooseUserCheckbox = document.getElementById('chooseUser');
        const recipientSelectContainer = document.getElementById('recipientSelectContainer');
    
        sendToAllCheckbox.addEventListener('change', function () {
            if (this.checked) {
                chooseUserCheckbox.checked = false;
                recipientSelectContainer.style.display = 'none';
            }
        });
    
        chooseUserCheckbox.addEventListener('change', function () {
            if (this.checked) {
                sendToAllCheckbox.checked = false;
                recipientSelectContainer.style.display = 'block';
            } else {
                recipientSelectContainer.style.display = 'none';
            }
        });
    });
</script>
        <script>
            function markAsRead(notificationId) {
                fetch(`/notifications/read/${notificationId}/`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                }).then(response => {
                    if (response.ok) {
                        document.getElementById(`notification-${notificationId}`).classList.remove('bg-warning');
                        // Opcional: atualizar contagem de notificações
                        const notificationCountElem = document.getElementById('notification-count');
                        if (notificationCountElem) {
                            let count = parseInt(notificationCountElem.textContent, 10);
                            count = count > 0 ? count - 1 : 0;
                            notificationCountElem.textContent = count;
                        }
                    }
                });
            }

            document.addEventListener('DOMContentLoaded', function () {
                const createNotificationForm = document.getElementById('createNotificationForm');
                createNotificationForm.addEventListener('submit', function (event) {
                    event.preventDefault();

                    const formData = new FormData(createNotificationForm);
                    fetch(createNotificationForm.action, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    }).then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Feche o modal
                                const modal = bootstrap.Modal.getInstance(document.getElementById('createNotificationModal'));
                                modal.hide();
                                // Redirecione para a lista de notificações
                                window.location.href = data.redirect_url;
                            } else {
                                // Mostre erros no formulário se houver
                                // Implementação necessária para exibir os erros
                            }
                        });
                });
            });
        </script>



        <script type="text/javascript">
            $(document).ready(function () {
                $('#sidebarCollapse').on('click', function () {
                    $('#sidebar').toggleClass('active');
                });
            });
        </script>