{% extends 'base.html' %}

{% block title %}{{ titulo }} - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.func-wrap { max-width: 1150px; margin: 0 auto; }
.func-page-title { display: flex; align-items: center; gap: .8rem; }
.func-page-title > i { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: .8rem; background: #e4effc; color: #245e98; font-size: 1.5rem; }
.func-page-title h2 { margin: 0; font-weight: 700; }
.func-page-title small { color: #59697a; }

.func-card { border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.func-section-head { display: flex; align-items: flex-start; gap: .7rem; }
.func-section-icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .65rem; font-size: 1.15rem; flex-shrink: 0; }
.func-section-icon.blue  { background: #e3f2fd; color: #1565c0; }
.func-section-icon.green { background: #dcf2e3; color: #1e7e34; }

.func-required::after { content: " *"; color: #b02a37; }
.func-campo { margin-bottom: 0; }
.func-ajuda { color: #8a97a8; font-size: .78rem; margin-top: .25rem; }

.func-input { background: #f8fafc; border: 1px solid #dde5ee; border-radius: 9px; padding: .55rem .85rem .55rem 2.6rem; color: #212529; width: 100%; }
.func-input:focus { background: #fff; border-color: #4a90e2; box-shadow: 0 0 0 .15rem rgba(74,144,226,.18); outline: none; }
.campo-icone { position: relative; }
.campo-icone > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: #8a97a8; pointer-events: none; font-size: .95rem; }
.input-erro { border-color: #b02a37 !important; background: #fdf3f4 !important; }

.func-ativo-card { display: flex; align-items: center; gap: .7rem; background: #f8fafc; border: 1px solid #dde5ee; border-radius: 10px; padding: .7rem .95rem; height: 100%; }
.func-ativo-card .form-check-input { width: 2.4em; height: 1.25em; margin-right: .25rem; flex-shrink: 0; }
.func-ativo-card .form-check-input:checked { background-color: #1e7e34; border-color: #1e7e34; }
.func-ativo-titulo { font-weight: 700; }
.func-ativo-sub { color: #8a97a8; font-size: .78rem; }

.senha-toggle { cursor: pointer; }
.senha-wrap { position: relative; }
.senha-wrap > button { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: #8a97a8; padding: 0; }

.grupos-box { border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; padding: .85rem; max-height: 300px; overflow: auto; display: flex; flex-wrap: wrap; gap: .6rem; }
#grupos-box-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.grupo-card {
    position: relative; display: flex; align-items: center; gap: .55rem;
    background: #fff; border: 1.5px solid #dbe5f0; border-radius: 12px;
    padding: .6rem .7rem; cursor: pointer; transition: all .15s;
}
.grupo-card input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.grupo-card .grupo-card-icone {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 2rem; height: 2rem; border-radius: .55rem;
    background: #e8effa; color: #526174; font-size: .95rem;
}
.grupo-card .grupo-card-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.grupo-card .grupo-card-nome { font-weight: 700; color: #34475a; font-size: .88rem; }
.grupo-card .grupo-card-sub { font-size: .66rem; color: #9aa7b5; }
.grupo-card .grupo-card-check {
    position: absolute; top: .45rem; right: .5rem;
    color: #1e7e34; font-size: .95rem; opacity: 0; transform: scale(.6);
    transition: all .15s;
}
.grupo-card:hover { border-color: #9cc3f0; box-shadow: 0 3px 10px rgba(24, 97, 197, .12); }
.grupo-card:has(input:checked) { border-color: #1861c5; background: #eff6ff; box-shadow: 0 0 0 2px rgba(24, 97, 197, .18); }
.grupo-card:has(input:checked) .grupo-card-icone { background: #1861c5; color: #fff; }
.grupo-card:has(input:checked) .grupo-card-check { opacity: 1; transform: scale(1); }
.grupos-box ul { margin: 0; padding: 0; list-style: none; display: none; }
.grupos-box li { margin: 0; }
.grupo-chip { display: inline-flex; align-items: center; gap: .45rem; border: 1.5px solid #b8d6f5; background: #eaf3fc; color: #164a7b; border-radius: 999px; padding: .38rem .85rem; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .15s; margin: 0; }
.grupo-chip:hover { filter: brightness(.96); }
.grupos-box li label { display: flex; gap: .45rem; align-items: center; margin: 0; }
.campo-icone .form-control {
    padding-left: 2.4rem;
    background: #f8fafc;
    border: 1px solid #dde5ee;
    border-radius: 9px;
}
.campo-icone .form-control:focus { background: #fff; box-shadow: 0 0 0 .15rem rgba(74,144,226,.18); }
.input-erro { border-color: #b02a37 !important; background: #fdf3f4 !important; }
.grupo-chip input { display: none; }
.grupo-chip input:checked ~ span:first-of-type + i { display: inline; }
.grupo-chip:has(input:checked) { background: #1565c0; color: #fff; border-color: #1565c0; }

.func-actions { background: #f8fafc; border: 1px solid #e8edf3; border-radius: 12px; padding: .75rem .95rem; display: flex; gap: .6rem; align-items: center; }
.func-actions .btn-primary { background: linear-gradient(135deg, #1861c5, #2b7ae6); border: none; font-weight: 600; padding: .55rem 1.35rem; }
.func-actions .btn-secondary { background: #eef1f5; border: none; color: #59697a; font-weight: 600; padding: .55rem 1.1rem; }
.func-actions small { color: #8a97a8; }
</style>
{% endblock %}

{% block content %}
<div class="func-wrap">
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
        <div class="func-page-title">
            <i class="bi bi-person-plus-fill"></i>
            <div>
                <h2>{{ titulo }}</h2>
                <small>
                    {% if 'Editar' in titulo %}
                    Atualize os dados do funcionário e os grupos de acesso.
                    {% else %}
                    Cadastre o funcionário e vincule os grupos de acesso.
                    {% endif %}
                </small>
            </div>
        </div>
        <a href="{% url 'lista_funcionarios' %}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left"></i> Voltar</a>
    </div>

    <form method="post" novalidate>
        {% csrf_token %}

        {% if form.errors %}
        <div class="alert alert-danger mb-3"><i class="bi bi-exclamation-octagon-fill"></i> Revise os campos destacados e tente novamente.</div>
        {% endif %}

        <section class="card func-card mb-3">
            <div class="card-header bg-white">
                <div class="func-section-head">
                    <span class="func-section-icon blue"><i class="bi bi-people-fill"></i></span>
                    <div>
                        <h5 class="mb-0">Dados do Funcionário</h5>
                        <small class="text-muted">Informe os dados pessoais e de contato do funcionário.</small>
                    </div>
                </div>
            </div>
            <div class="card-body pt-3 pb-2 row g-3">
                <div class="col-12 col-md-6">
                    <label class="form-label func-required" for="{{ form.nome.id_for_label }}">{{ form.nome.label }}</label>
                    <div class="campo-icone">
                        <i class="bi bi-person"></i>
                        {{ form.nome }}
                    </div>
                    <small class="func-ajuda">Nome completo do funcionário.</small>
                </div>
                <div class="col-12 col-md-6">
                    <label class="form-label" for="{{ form.endereco.id_for_label }}">{{ form.endereco.label }}</label>
                    <div class="campo-icone">
                        <i class="bi bi-geo-alt"></i>
                        {{ form.endereco }}
                    </div>
                    <small class="func-ajuda">Endereço de contato (opcional).</small>
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                    <label class="form-label" for="{{ form.telefone.id_for_label }}">{{ form.telefone.label }}</label>
                    <div class="campo-icone">
                        <i class="bi bi-telephone"></i>
                        {{ form.telefone }}
                    </div>
                    <small class="func-ajuda">Telefone ou WhatsApp.</small>
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                    <label class="form-label" for="{{ form.cpf.id_for_label }}">{{ form.cpf.label }}</label>
                    <div class="campo-icone">
                        <i class="bi bi-credit-card-2-front"></i>
                        {{ form.cpf }}
                    </div>
                    <small class="func-ajuda">Somente números.</small>
                </div>
                <div class="col-12 col-md-4">
                    <span class="form-label">Situação</span>
                    <div class="func-ativo-card">
                        {{ form.ativo }}
                        <div>
                            <div class="func-ativo-titulo">{{ form.ativo.label }}</div>
                            <div class="func-ativo-sub">Funcionário poderá acessar o sistema.</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="card func-card mb-3">
            <div class="card-header bg-white">
                <div class="func-section-head">
                    <span class="func-section-icon green"><i class="bi bi-shield-fill-check"></i></span>
                    <div>
                        <h5 class="mb-0">Acesso ao Sistema</h5>
                        <small class="text-muted">Defina as credenciais de acesso e os grupos de permissão.</small>
                    </div>
                </div>
            </div>
            <div class="card-body pt-3 pb-2 row g-3">
                <div class="col-12 col-md-4">
                    <label class="form-label func-required" for="{{ form.username.id_for_label }}">{{ form.username.label }}</label>
                    <div class="campo-icone">
                        <i class="bi bi-person-badge"></i>
                        {{ form.username }}
                    </div>
                    <small class="func-ajuda">Nome de usuário único para login.</small>
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label {% if form.require_password %}func-required{% endif %}" for="{{ form.password.id_for_label }}">{{ form.password.label }}</label>
                    <div class="senha-wrap">
                        <div class="campo-icone">
                            <i class="bi bi-lock"></i>
                            {{ form.password }}
                        </div>
                        <button type="button" class="senha-toggle" data-alvo-icone title="Mostrar senha"><i class="bi bi-eye"></i></button>
                    </div>
                    <small class="func-ajuda">{{ form.password.help_text|default:"A senha do acesso ao sistema." }}</small>
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label">{% if form.require_password %}Confirmar Senha {% else %}Confirmar Senha{% endif %}</label>
                    <div class="senha-wrap">
                        <div class="campo-icone">
                            <i class="bi bi-lock"></i>
                            {{ form.password_confirm }}
                        </div>
                        <button type="button" class="senha-toggle" data-alvo-icone title="Mostrar senha"><i class="bi bi-eye"></i></button>
                    </div>
                    <small class="func-ajuda">Repita a senha para confirmar.</small>
                </div>
                <div class="col-12">
                    <span class="form-label">Grupos de acesso</span>
                    <div class="grupos-box" id="grupos-box-cards">
                        {% for choice in form.grupos %}
                        <label class="grupo-card" title="Grupo de acesso: {{ choice.choice_label }}">
                            {{ choice.tag }}
                            <span class="grupo-card-icone"><i class="bi bi-shield-lock"></i></span>
                            <span class="grupo-card-texto">
                                <span class="grupo-card-nome">{{ choice.choice_label }}</span>
                                <span class="grupo-card-sub">Permissões por módulo</span>
                            </span>
                            <span class="grupo-card-check"><i class="bi bi-check-circle-fill"></i></span>
                        </label>
                        {% endfor %}
                    </div>
                    <small class="func-ajuda">Clique nos grupos que o funcionário terá. É o grupo que define as permissões de acesso aos módulos.</small>
                </div>
            </div>
        </section>

        <div class="func-actions mb-3">
            <button type="submit" class="btn btn-primary"><i class="bi bi-check2-circle"></i> Salvar</button>
            <a href="{% url 'lista_funcionarios' %}" class="btn btn-secondary"><i class="bi bi-x-circle"></i> Cancelar</a>
            <small class="ms-auto"><i class="bi bi-info-circle"></i> Campos com * são obrigatórios.</small>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
function padronizarNomeAoDigitar(valor) {
    valor = valor.replace(/\s+/g, ' ');
    return valor.split(' ').map(function (palavra, i) {
        if (!palavra) return palavra;
        return palavra.split('-').map(function (parte, j) {
            var inicio = (i === 0 && j === 0);
            if (parte.length <= 2 && !inicio) return parte.toLowerCase();
            var p = parte.toLowerCase();
            return p.charAt(0).toUpperCase() + p.slice(1);
        }).join('-');
    }).join(' ');
}
(function () {
    var campoNome = document.getElementById('id_nome');
    if (!campoNome) return;
    function aplicar() {
        var novo = padronizarNomeAoDigitar(campoNome.value);
        if (novo !== campoNome.value) {
            campoNome.value = novo;
            var fim = campoNome.value.length;
            campoNome.setSelectionRange(fim, fim);
        }
    }
    campoNome.addEventListener('input', function () {
        if (campoNome.selectionStart >= campoNome.value.length) aplicar();
    });
    campoNome.addEventListener('blur', aplicar);
    campoNome.form && campoNome.form.addEventListener('submit', aplicar);
})();
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // limpa qualquer preenchimento automático do navegador (credenciais salvas)
    var campoUsuario = document.getElementById('id_username');
    var eNovo = {% if not form.instance.pk %}true{% else %}false{% endif %};
    setTimeout(function () {
        if (eNovo && campoUsuario && campoUsuario.value) campoUsuario.value = '';
        ['id_password', 'id_password_confirm'].forEach(function (id) {
            var campo = document.getElementById(id);
            if (campo && campo.value) campo.value = '';
        });
    }, 250);
    setTimeout(function () {
        if (eNovo && campoUsuario && campoUsuario.value) campoUsuario.value = '';
        ['id_password', 'id_password_confirm'].forEach(function (id) {
            var campo = document.getElementById(id);
            if (campo && campo.value) campo.value = '';
        });
    }, 1000);
});
document.querySelectorAll('.senha-toggle').forEach(function (botao) {
    botao.addEventListener('click', function () {
        var campo = botao.parentElement.querySelector('input[type="password"], input[type="text"]');
        if (!campo) return;
        var mostrar = campo.type === 'password';
        campo.type = mostrar ? 'text' : 'password';
        botao.innerHTML = mostrar ? '<i class="bi bi-eye-slash"></i>' : '<i class="bi bi-eye"></i>';
    });
});
</script>
{% endblock %}