{% extends "base.html" %}

{% block title %}RBAC Setorial{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="bi bi-diagram-3"></i> RBAC Setorial</h1>
    <a href="{{ url_for('usuarios') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> Voltar para Usuários
    </a>
</div>

<div class="alert alert-info">
    <i class="bi bi-info-circle"></i>
    Defina <strong>setores</strong>, monte <strong>perfis setoriais</strong> com rotinas e depois vincule os perfis aos usuários.
    <br>
    <strong>Perfil nativo do sistema:</strong> <code>Administrador</code> sempre fica com todas as rotinas liberadas, ativo e bloqueado contra edição/exclusão.
    <hr class="my-2">
    <form method="POST" action="{{ url_for('admin_acesso_setorial_restaurar_setores_nativos') }}" class="d-inline" onsubmit="return confirm('Restaurar setores nativos faltantes? Os setores atuais não serão alterados.');">
        <button type="submit" class="btn btn-sm btn-outline-primary">
            <i class="bi bi-arrow-clockwise"></i> Restaurar setores nativos
        </button>
    </form>
    <form method="POST" action="{{ url_for('admin_acesso_setorial_restaurar_rotinas_nativas') }}" class="d-inline ms-2" onsubmit="return confirm('Restaurar rotinas nativas faltantes? As rotinas atuais não serão alteradas.');">
        <button type="submit" class="btn btn-sm btn-outline-primary">
            <i class="bi bi-arrow-repeat"></i> Restaurar rotinas nativas
        </button>
    </form>
    <form method="POST" action="{{ url_for('admin_acesso_setorial_restaurar_tudo_nativo') }}" class="d-inline ms-2" onsubmit="return confirm('Restaurar tudo (setores + rotinas) em transação única? Itens existentes não serão alterados.');">
        <button type="submit" class="btn btn-sm btn-primary">
            <i class="bi bi-database-check"></i> Restaurar tudo (nativo)
        </button>
    </form>
</div>

<div class="row g-4">
    <div class="col-lg-5">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <strong><i class="bi bi-building"></i> {% if setor_em_edicao %}Editar Setor{% else %}Novo Setor{% endif %}</strong>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('admin_acesso_setorial_salvar_setor') }}">
                    {% if setor_em_edicao %}
                    <input type="hidden" name="setor_id" value="{{ setor_em_edicao.id }}">
                    {% endif %}
                    <div class="mb-3">
                        <label class="form-label">Nome do setor</label>
                        <input type="text" class="form-control" name="nome" value="{{ setor_em_edicao.nome if setor_em_edicao else '' }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Descrição</label>
                        <textarea class="form-control" name="descricao" rows="2">{{ setor_em_edicao.descricao if setor_em_edicao else '' }}</textarea>
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" name="ativo" id="setor_ativo" {% if not setor_em_edicao or setor_em_edicao.ativo %}checked{% endif %}>
                        <label class="form-check-label" for="setor_ativo">Ativo</label>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-save"></i> {% if setor_em_edicao %}Atualizar Setor{% else %}Salvar Setor{% endif %}
                    </button>
                    {% if setor_em_edicao %}
                    <a href="{{ url_for('admin_acesso_setorial') }}" class="btn btn-outline-secondary w-100 mt-2">
                        <i class="bi bi-x-circle"></i> Cancelar edição
                    </a>
                    {% endif %}
                </form>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header bg-light">
                <strong>Setores Cadastrados</strong>
            </div>
            <div class="card-body">
                {% if setores %}
                    <ul class="list-group list-group-flush">
                        {% for setor in setores %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <div><strong>{{ setor.nome }}</strong></div>
                                <small class="text-muted">{{ setor.descricao or 'Sem descrição' }}</small>
                            </div>
                            <div class="d-flex align-items-center gap-2">
                                {% if setor.ativo %}
                                    <span class="badge bg-success">Ativo</span>
                                {% else %}
                                    <span class="badge bg-secondary">Inativo</span>
                                {% endif %}
                                <a class="btn btn-sm btn-outline-primary" href="{{ url_for('admin_acesso_setorial', editar_setor_id=setor.id) }}" title="Editar setor">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <form method="POST" action="{{ url_for('admin_acesso_setorial_excluir_setor', id=setor.id) }}" class="d-inline" onsubmit="return confirm('Excluir setor? Esta ação não pode ser desfeita.');">
                                    <button class="btn btn-sm btn-outline-danger" type="submit" title="Excluir setor">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <p class="text-muted mb-0">Nenhum setor cadastrado.</p>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="card">
            <div class="card-header bg-warning">
                <strong><i class="bi bi-shield-lock"></i> {% if perfil_em_edicao %}Editar Perfil Setorial{% else %}Novo Perfil Setorial{% endif %}</strong>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('admin_acesso_setorial_salvar_perfil') }}">
                    {% if perfil_em_edicao %}
                    <input type="hidden" name="perfil_id" value="{{ perfil_em_edicao.id }}">
                    {% endif %}
                    {% set perfil_bloqueado = perfil_em_edicao and perfil_em_edicao.bloqueado_sistema %}
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Nome do perfil</label>
                            <input type="text" class="form-control" name="nome" value="{{ perfil_em_edicao.nome if perfil_em_edicao else '' }}" {% if perfil_bloqueado %}readonly{% else %}required{% endif %}>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Setor</label>
                            <select class="form-select" name="setor_id" {% if perfil_bloqueado %}disabled{% else %}required{% endif %}>
                                <option value="">-- selecione --</option>
                                {% for setor in setores %}
                                <option value="{{ setor.id }}" {% if perfil_em_edicao and perfil_em_edicao.setor_id == setor.id %}selected{% endif %}>{{ setor.nome }}</option>
                                {% endfor %}
                            </select>
                            {% if perfil_bloqueado %}<input type="hidden" name="setor_id" value="{{ perfil_em_edicao.setor_id }}">{% endif %}
                        </div>
                    </div>
                    <div class="mt-3">
                        <label class="form-label">Descrição</label>
                        <textarea class="form-control" name="descricao" rows="2" {% if perfil_bloqueado %}readonly{% endif %}>{{ perfil_em_edicao.descricao if perfil_em_edicao else '' }}</textarea>
                    </div>
                    <div class="mt-3">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                            <label class="form-label mb-0">Rotinas permitidas</label>
                            <div class="btn-group btn-group-sm" role="group" aria-label="Controles dos cards de rotinas">
                                <button type="button" class="btn btn-outline-secondary" onclick="expandirCardsRotinas(true)">
                                    <i class="bi bi-arrows-expand"></i> Expandir tudo
                                </button>
                                <button type="button" class="btn btn-outline-secondary" onclick="expandirCardsRotinas(false)">
                                    <i class="bi bi-arrows-collapse"></i> Encolher tudo
                                </button>
                            </div>
                        </div>
                        {% if rotinas_agrupadas %}
                            {% for grupo in rotinas_agrupadas %}
                            <div class="border rounded p-3 mb-3 rotina-card-grupo">
                                <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
                                    <strong>{{ grupo.label }}</strong>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="badge bg-light text-dark border">{{ grupo.rotinas|length }} rotina(s)</span>
                                        <button type="button"
                                                class="btn btn-sm btn-outline-secondary rotina-card-toggle"
                                                data-target="rotina_grupo_{{ loop.index }}"
                                                data-expanded="true"
                                                aria-expanded="true"
                                                title="Encolher/expandir {{ grupo.label }}">
                                            <i class="bi bi-chevron-up"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="row" id="rotina_grupo_{{ loop.index }}">
                                    {% for rotina in grupo.rotinas %}
                                    <div class="col-md-6 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="rotina_ids" value="{{ rotina.id }}" id="rotina_{{ rotina.id }}" {% if perfil_em_edicao and rotina in perfil_em_edicao.rotinas %}checked{% endif %} {% if perfil_bloqueado %}disabled{% endif %}>
                                            <label class="form-check-label" for="rotina_{{ rotina.id }}" title="{{ rotina.descricao or '' }}">
                                                <strong>{{ rotina.nome }}</strong>
                                                <small class="text-muted d-block">{{ rotina.codigo }}</small>
                                                {% if rotina.descricao %}
                                                <small class="text-muted d-block">{{ rotina.descricao }}</small>
                                                {% endif %}
                                            </label>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            {% endfor %}
                        {% else %}
                        <div class="alert alert-light border mb-0">
                            Nenhuma rotina cadastrada para seleção.
                        </div>
                        {% endif %}
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" name="ativo" id="perfil_ativo" {% if not perfil_em_edicao or perfil_em_edicao.ativo %}checked{% endif %} {% if perfil_bloqueado %}disabled{% endif %}>
                        <label class="form-check-label" for="perfil_ativo">Ativo</label>
                    </div>
                    {% if perfil_bloqueado %}
                    <div class="alert alert-warning small">
                        <i class="bi bi-lock-fill"></i> Este perfil é nativo do sistema e não pode ser alterado.
                    </div>
                    {% else %}
                    <button type="submit" class="btn btn-warning w-100">
                        <i class="bi bi-save"></i> {% if perfil_em_edicao %}Atualizar Perfil Setorial{% else %}Salvar Perfil Setorial{% endif %}
                    </button>
                    {% endif %}
                    {% if perfil_em_edicao %}
                    <a href="{{ url_for('admin_acesso_setorial') }}" class="btn btn-outline-secondary w-100 mt-2">
                        <i class="bi bi-x-circle"></i> Cancelar edição
                    </a>
                    {% endif %}
                </form>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header bg-light">
                <strong>Perfis Setoriais</strong>
            </div>
            <div class="card-body p-0">
                {% if perfis %}
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Perfil</th>
                                <th>Setor</th>
                                <th>Rotinas</th>
                                <th>Status</th>
                                <th class="text-end">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for perfil in perfis %}
                            <tr>
                                <td>
                                    <strong>{{ perfil.nome }}</strong>
                                    {% if perfil.bloqueado_sistema %}<span class="badge bg-dark ms-1">Nativo</span>{% endif %}
                                    <div class="small text-muted">{{ perfil.descricao or '-' }}</div>
                                </td>
                                <td>{{ perfil.setor.nome if perfil.setor else '-' }}</td>
                                <td>
                                    {% if perfil.rotinas %}
                                        {% for rotina in perfil.rotinas %}
                                            <span class="badge bg-light text-dark border">{{ rotina.codigo }}</span>
                                        {% endfor %}
                                    {% else %}
                                        <span class="text-muted small">Sem rotinas</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if perfil.ativo %}
                                        <span class="badge bg-success">Ativo</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Inativo</span>
                                    {% endif %}
                                    {% if perfil.bloqueado_sistema %}
                                        <div class="small text-muted mt-1">Protegido pelo sistema</div>
                                    {% endif %}
                                </td>
                                <td class="text-end">
                                    <a class="btn btn-sm btn-outline-primary" href="{{ url_for('admin_acesso_setorial', editar_perfil_id=perfil.id) }}" title="Editar perfil">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    {% if not perfil.bloqueado_sistema %}
                                    <form method="POST" action="{{ url_for('admin_acesso_setorial_excluir_perfil', id=perfil.id) }}" class="d-inline" onsubmit="return confirm('Excluir perfil setorial?');">
                                        <button class="btn btn-sm btn-outline-danger" type="submit">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="p-3 text-muted">Nenhum perfil setorial cadastrado.</div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
function atualizarBotaoCardRotina(botao, expandido) {
    if (!botao) return;
    botao.setAttribute('data-expanded', expandido ? 'true' : 'false');
    botao.setAttribute('aria-expanded', expandido ? 'true' : 'false');
    botao.innerHTML = expandido
        ? '<i class="bi bi-chevron-up"></i>'
        : '<i class="bi bi-chevron-down"></i>';
}

function alternarCardRotina(botao, expandido) {
    if (!botao) return;
    const targetId = botao.getAttribute('data-target');
    if (!targetId) return;

    const alvo = document.getElementById(targetId);
    if (!alvo) return;

    const estadoAtual = botao.getAttribute('data-expanded') !== 'false';
    const proximoEstado = typeof expandido === 'boolean' ? expandido : !estadoAtual;

    alvo.classList.toggle('d-none', !proximoEstado);
    atualizarBotaoCardRotina(botao, proximoEstado);
}

function expandirCardsRotinas(expandir) {
    document.querySelectorAll('.rotina-card-toggle').forEach(function(botao) {
        alternarCardRotina(botao, expandir);
    });
}

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.rotina-card-toggle').forEach(function(botao) {
        botao.addEventListener('click', function() {
            alternarCardRotina(botao);
        });
    });
});
</script>
{% endblock %}