{% extends 'base.html' %}

{% block title %}Funcionários - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.func-lista .page-heading { display: flex; align-items: center; gap: .7rem; }
.func-lista .page-heading > i { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .7rem; background: #e4effc; color: #245e98; font-size: 1.35rem; }
.func-lista .page-heading small { color: #59697a; }
.func-lista .list-card { border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.func-lista .avatar-mini { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #e4effc; color: #245e98; font-weight: 700; font-size: .85rem; }
.func-lista .thead th { background: #f4f7fa; color: #526174; font-size: .84rem; }
.func-lista .grupo-table thead th { background: #f4f7fa; color: #526174; font-size: .82rem; }
.func-lista .grupo-table tbody td { font-size: .88rem; }
.func-lista .grupo-table .form-check-input { cursor: pointer; }
.func-lista .grupo-table .form-check-input:checked { background-color: #1861c5; border-color: #1861c5; }
.func-lista .modulo-nome { display: flex; align-items: center; gap: .45rem; font-weight: 600; }
.func-lista .modulo-nome i { color: #7c8ea1; font-size: .95rem; }
.func-lista .badge-count { background: #eaf3fc; color: #164a7b; border-radius: 999px; font-size: .78rem; padding: .25rem .7rem; }
.func-lista .grupo-item { border-radius: 10px; }
.func-lista .btn-toggle-ativo { background: #eef1f5; border: none; color: #59697a; font-weight: 600; }
.func-lista .btn-toggle-ativo:hover { background: #e2e7ee; color: #34475a; }

/* Ações em ícones alinhados */
.func-lista .btn-acao-func {
    display: inline-grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: 8px;
    border: 1px solid transparent;
    font-size: .9rem; text-decoration: none;
    transition: all .15s;
}
.func-lista .a-azul { background: #eaf3fc; color: #1861c5; }
.func-lista .a-azul:hover { background: #1861c5; color: #fff; }
.func-lista .a-cinza { background: #eef1f5; color: #59697a; }
.func-lista .a-cinza:hover { background: #59697a; color: #fff; }
.func-lista .a-vermelho { background: #fdecee; color: #b02a37; }
.func-lista .a-vermelho:hover { background: #b02a37; color: #fff; }
</style>
{% endblock %}

{% block content %}
<div class="func-lista">
    <div class="d-flex flex-wrap gap-2 justify-content-between align-items-end mb-3">
        <div class="page-heading">
            <i class="bi bi-people-fill"></i>
            <div>
                <h2 class="m-0">Funcionários e Grupos</h2>
                <small>Gerencie os funcionários do sistema e defina os grupos de acesso e permissões.</small>
            </div>
        </div>
        {% if perms.funcionarios.add_funcionario %}
        <a href="{% url 'cadastrar_funcionario' %}" class="btn btn-primary"><i class="bi bi-plus-circle"></i> Novo Funcionário</a>
        {% endif %}
    </div>

    <div class="row g-3">
        <div class="col-12 col-xl-7">
            <div class="card list-card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-people"></i> Funcionários</span>
                    <span class="badge-count"><i class="bi bi-person"></i> {{ funcionarios|length }} funcionário{{ funcionarios|length|pluralize }}</span>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="thead">
                                <tr>
                                    <th>Nome</th>
                                    <th>Usuário</th>
                                    <th>Telefone</th>
                                    <th>CPF</th>
                                    <th>Status</th>
                                    <th class="text-end">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for funcionario in funcionarios %}
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="avatar-mini">{{ funcionario.nome|slice:":1"|upper }}</span>
                                            <strong>{{ funcionario.nome }}</strong>
                                        </div>
                                    </td>
                                    <td class="text-muted">{{ funcionario.user.username }}</td>
                                    <td>{{ funcionario.telefone|default:"-" }}</td>
                                    <td>{{ funcionario.cpf|default:"-" }}</td>
                                    <td>
                                        {% if funcionario.ativo %}
                                        <span class="badge bg-success"><i class="bi bi-check2"></i> Ativo</span>
                                        {% else %}
                                        <span class="badge bg-secondary">Inativo</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        {% if perms.funcionarios.change_funcionario or perms.funcionarios.delete_funcionario %}
                                        <div class="d-inline-flex align-items-center gap-1 justify-content-end" style="flex-wrap: nowrap;">
                                            {% if perms.funcionarios.change_funcionario %}
                                            <a href="{% url 'editar_funcionario' funcionario.id %}" class="btn-acao-func a-azul" title="Editar funcionário">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <form method="post" action="{% url 'toggle_funcionario' funcionario.id %}" class="m-0" style="display: contents;">
                                                {% csrf_token %}
                                                <button type="submit" class="btn-acao-func a-cinza" title="{% if funcionario.ativo %}Desativar{% else %}Ativar{% endif %}">
                                                    <i class="bi {% if funcionario.ativo %}bi-pause-fill{% else %}bi-play-fill{% endif %}"></i>
                                                </button>
                                            </form>
                                            {% endif %}
                                            {% if perms.funcionarios.delete_funcionario %}
                                            <form method="post" action="{% url 'excluir_funcionario' funcionario.id %}" class="m-0" style="display: contents;" onsubmit="return confirm('Confirma excluir este funcionário?');">
                                                {% csrf_token %}
                                                <button type="submit" class="btn-acao-func a-vermelho" title="Excluir">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                            {% endif %}
                                        </div>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% empty %}
                                <tr><td colspan="6" class="text-center text-muted py-4"><i class="bi bi-inbox d-block fs-3 mb-2"></i>Nenhum funcionário cadastrado.</td></tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-5">
            <div class="card list-card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-shield-lock"></i> {% if grupo_edicao %}Editar Grupo de Acesso{% else %}Criar Grupo de Acesso{% endif %}</span>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        <input type="hidden" name="acao" value="{% if grupo_edicao %}salvar_grupo{% else %}criar_grupo{% endif %}">
                        {% if grupo_edicao %}<input type="hidden" name="grupo_id" value="{{ grupo_edicao.id }}">{% endif %}
                        <div class="mb-3">
                            <label class="form-label">{{ form_grupo.nome.label }}</label>
                            {{ form_grupo.nome }}
                            {% if grupo_edicao %}
                            <a href="{% url 'lista_funcionarios' %}" class="d-block small text-decoration-none mt-1"><i class="bi bi-x-circle"></i> Cancelar edição</a>
                            {% endif %}
                        </div>

                        <div class="table-responsive">
                            <table class="table table-sm align-middle mb-0 grupo-table">
                                <thead>
                                    <tr>
                                        <th>Módulo</th>
                                        <th class="text-center">Visualizar</th>
                                        <th class="text-center">Editar</th>
                                        <th class="text-center">Excluir</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr><td><span class="modulo-nome"><i class="bi bi-house-door"></i> Dashboard</span></td><td class="text-center">{{ form_grupo.dashboard_visualizar }}</td><td class="text-center">{{ form_grupo.dashboard_editar }}</td><td class="text-center">{{ form_grupo.dashboard_excluir }}</td></tr>
                                    <tr><td><span class="modulo-nome"><i class="bi bi-cart-check"></i> PDV / Vendas</span></td><td class="text-center">{{ form_grupo.pdv_visualizar }}</td><td class="text-center">{{ form_grupo.pdv_editar }}</td><td class="text-center">{{ form_grupo.pdv_excluir }}</td></tr>
                                    <tr><td><span class="modulo-nome"><i class="bi bi-receipt"></i> Vendas</span></td><td class="text-center">{{ form_grupo.vendas_visualizar }}</td><td class="text-center">{{ form_grupo.vendas_editar }}</td><td class="text-center">{{ form_grupo.vendas_excluir }}</td></tr>
                                    <tr><td><span class="modulo-nome"><i class="bi bi-people"></i> Clientes</span></td><td class="text-center">{{ form_grupo.clientes_visualizar }}</td><td class="text-center">{{ form_grupo.clientes_editar }}</td><td class="text-center">{{ form_grupo.clientes_excluir }}</td></tr>
                                    <tr><td><span class="modulo-nome"><i class="bi bi-truck"></i> Fornecedores</span></td><td class="text-center">{{ form_grupo.fornecedores_visualizar }}</td><td class="text-center">{{ form_grupo.fornecedores_editar }}</td><td class="text-center">{{ form_grupo.fornecedores_excluir }}</td></tr>
                                    <tr><td><span class="modulo-nome"><i class="bi bi-box-seam"></i> Produtos</span></td><td class="text-center">{{ form_grupo.produtos_visualizar }}</td><td class="text-center">{{ form_grupo.produtos_editar }}</td><td class="text-center">{{ form_grupo.produtos_excluir }}</td></tr>
                                    <tr><td><span class="modulo-nome"><i class="bi bi-bag-heart"></i> Condicionais</span></td><td class="text-center">{{ form_grupo.condicionais_visualizar }}</td><td class="text-center">{{ form_grupo.condicionais_editar }}</td><td class="text-center">{{ form_grupo.condicionais_excluir }}</td></tr>
                                    <tr><td><span class="modulo-nome"><i class="bi bi-cash-stack"></i> Contas a Receber</span></td><td class="text-center">{{ form_grupo.parcelas_visualizar }}</td><td class="text-center">{{ form_grupo.parcelas_editar }}</td><td class="text-center">{{ form_grupo.parcelas_excluir }}</td></tr>
                                    <tr><td><span class="modulo-nome"><i class="bi bi-wallet2"></i> Gastos</span></td><td class="text-center">{{ form_grupo.gastos_visualizar }}</td><td class="text-center">{{ form_grupo.gastos_editar }}</td><td class="text-center">{{ form_grupo.gastos_excluir }}</td></tr>
                                    <tr><td><span class="modulo-nome"><i class="bi bi-cash-coin"></i> Caixa</span></td><td class="text-center">{{ form_grupo.caixa_visualizar }}</td><td class="text-center">{{ form_grupo.caixa_editar }}</td><td class="text-center">{{ form_grupo.caixa_excluir }}</td></tr>
                                    <tr><td><span class="modulo-nome"><i class="bi bi-bar-chart"></i> Relatórios</span></td><td class="text-center">{{ form_grupo.relatorios_visualizar }}</td><td class="text-center">{{ form_grupo.relatorios_editar }}</td><td class="text-center">{{ form_grupo.relatorios_excluir }}</td></tr>
                                    <tr><td><span class="modulo-nome"><i class="bi bi-gear"></i> Configurações</span></td><td class="text-center">{{ form_grupo.configuracoes_visualizar }}</td><td class="text-center">{{ form_grupo.configuracoes_editar }}</td><td class="text-center">{{ form_grupo.configuracoes_excluir }}</td></tr>
                                    <tr><td><span class="modulo-nome"><i class="bi bi-person-badge"></i> Funcionários</span></td><td class="text-center">{{ form_grupo.funcionarios_visualizar }}</td><td class="text-center">{{ form_grupo.funcionarios_editar }}</td><td class="text-center">{{ form_grupo.funcionarios_excluir }}</td></tr>
                                </tbody>
                            </table>
                        </div>

                        {% if form_grupo.errors %}
                        <div class="alert alert-danger mt-3 mb-0">{{ form_grupo.errors }}</div>
                        {% endif %}

                        <button type="submit" class="btn btn-primary w-100 mt-3">
                            <i class="bi bi-shield-check"></i> {% if grupo_edicao %}Atualizar Grupo{% else %}Salvar Grupo{% endif %}
                        </button>
                    </form>
                </div>
            </div>

            <div class="card list-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-list-check"></i> Grupos Criados</span>
                    <span class="badge-count">{{ grupos_custom|length }} grupo{{ grupos_custom|length|pluralize }}</span>
                </div>
                <div class="card-body p-1">
                    {% if grupos_custom %}
                    <ul class="list-group list-group-flush">
                        {% for grupo in grupos_custom %}
                        <li class="list-group-item grupo-item d-flex justify-content-between align-items-center">
                            <span class="d-flex align-items-center gap-2"><i class="bi bi-shield text-primary"></i> {{ grupo.name }}</span>
                            <div class="d-flex gap-1">
                                <a href="{% url 'lista_funcionarios' %}?grupo={{ grupo.id }}" class="btn btn-sm btn-outline-primary" title="Editar grupo">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                {% if perms.auth.delete_group %}
                                <form method="post" class="m-0">
                                    {% csrf_token %}
                                    <input type="hidden" name="acao" value="excluir_grupo">
                                    <input type="hidden" name="grupo_id" value="{{ grupo.id }}">
                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Excluir grupo">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                {% endif %}
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                    {% else %}
                    <div class="p-3 text-muted text-center"><i class="bi bi-inbox d-block fs-4"></i>Nenhum grupo criado ainda.</div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}