{% extends "base.html" %}

{% block title %}{% if usuario %}Editar{% else %}Novo{% endif %} Usuário{% endblock %}

{% block content %}
<div class="cape-form-shell">
    <div class="cape-form-header border-bottom pb-2 mb-0">
        <div class="cape-form-header-main">
            <h1 class="h3 mb-0">
                <i class="bi bi-{% if usuario %}pencil{% else %}plus-circle{% endif %}"></i> 
                {% if usuario %}Editar{% else %}Novo{% endif %} Usuário
            </h1>
        </div>
        <div class="cape-form-header-actions">
            <a href="{{ url_for('usuarios') }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Voltar
            </a>
        </div>
    </div>

    <form method="POST" class="form-lockable">
    <ul class="nav nav-tabs mb-3" id="usuarioFormTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="tab-dados-tab" data-bs-toggle="tab" data-bs-target="#tab-dados" type="button" role="tab" aria-controls="tab-dados" aria-selected="true">
                <i class="bi bi-person-fill"></i> Dados do Usuário
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-permissoes-tab" data-bs-toggle="tab" data-bs-target="#tab-permissoes" type="button" role="tab" aria-controls="tab-permissoes" aria-selected="false">
                <i class="bi bi-shield-lock"></i> Permissões
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-limites-tab" data-bs-toggle="tab" data-bs-target="#tab-limites" type="button" role="tab" aria-controls="tab-limites" aria-selected="false">
                <i class="bi bi-cash-stack"></i> Limites e Comissão
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-guia-tab" data-bs-toggle="tab" data-bs-target="#tab-guia" type="button" role="tab" aria-controls="tab-guia" aria-selected="false">
                <i class="bi bi-lightbulb"></i> Guia
            </button>
        </li>
    </ul>

    <div class="tab-content" id="usuarioFormTabsContent">
        <div class="tab-pane fade show active" id="tab-dados" role="tabpanel" aria-labelledby="tab-dados-tab" tabindex="0">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-person-fill"></i> Dados do Usuário</h5>
                </div>
                <div class="card-body">
                    <!-- Vincular a Funcionário -->
                    <div class="mb-3">
                        <label class="form-label"><i class="bi bi-person-badge text-info"></i> Funcionário Vinculado</label>
                        <select class="form-select" name="pessoa_id" id="pessoa_id" onchange="preencherDadosFuncionario()">
                            <option value="">-- Selecionar funcionário cadastrado --</option>
                            {% for func in funcionarios %}
                            <option value="{{ func.id }}" 
                                    data-nome="{{ func.nome }}"
                                    data-email="{{ func.email or '' }}"
                                    data-tipo-perfil="{{ func.tipo_perfil or '' }}"
                                    data-eh-garcom="{{ '1' if func.eh_garcom else '0' }}"
                                    {% if usuario and usuario.pessoa_id == func.id %}selected{% endif %}>
                                {{ func.nome }}{% if func.cpf %} ({{ func.cpf }}){% endif %}
                            </option>
                            {% endfor %}
                        </select>
                        <small class="text-muted">
                            <a href="{{ url_for('nova_pessoa') }}?tipo=funcionario" target="_blank">
                                <i class="bi bi-plus-circle"></i> Cadastrar novo funcionário
                            </a>
                        </small>
                    </div>

                    {% set face_status = summarize_user_face_reference_status(usuario) if usuario else {'disponivel': False, 'quality_label': 'invalida', 'quality_score': 0, 'warnings': [], 'origem': 'sem_referencia'} %}
                    {% set app_empresa_scope = summarize_user_app_empresa_scope(usuario) if usuario else {'scope': 'nenhuma', 'company_ids': [], 'operacao_app_empresa': False, 'admin_app_empresa': False, 'admin_sistema': False} %}
                    {% set pessoa_referencia = usuario.pessoa if usuario and usuario.pessoa else None %}
                    {% set face_src = pessoa_referencia.foto_base64 if (pessoa_referencia and pessoa_referencia.foto_base64) else '' %}
                    {% set face_src = face_src if (face_src or '').startswith('data:image') else ('data:image/jpeg;base64,' ~ (face_src or '') if face_src else '') %}
                    <div class="card border-info-subtle bg-light mb-3">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
                                <div>
                                    <label class="form-label fw-semibold mb-1">
                                        <i class="bi bi-person-bounding-box text-primary"></i> Referência facial oficial
                                    </label>
                                    <div class="small text-muted">
                                        A foto facial oficial fica vinculada à <strong>Pessoa/Funcionário</strong> associado ao usuário e será usada nas autorizações críticas.
                                    </div>
                                </div>
                                <span class="badge {% if face_status.disponivel and face_status.quality_label == 'boa' %}bg-success{% elif face_status.disponivel %}bg-warning text-dark{% else %}bg-secondary{% endif %}" id="faceReferenceStatusBadge">
                                    {% if face_status.disponivel %}{{ face_status.quality_label|default('cadastrada')|capitalize }}{% else %}Sem referência{% endif %}
                                </span>
                            </div>

                            <div class="row g-3 mt-1 align-items-start">
                                <div class="col-md-4 col-lg-3">
                                    <div class="border rounded bg-white p-3 text-center h-100">
                                        <img id="faceReferencePreview"
                                             src="{{ face_src or '' }}"
                                             alt="Prévia referência facial"
                                             class="rounded border {% if not face_src %}d-none{% endif %}"
                                             style="width: 140px; height: 140px; object-fit: cover;">
                                        <div id="faceReferencePlaceholder" class="{% if face_src %}d-none{% endif %}">
                                            <div class="rounded-circle border bg-light text-muted d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 140px; height: 140px;">
                                                <i class="bi bi-person-bounding-box" style="font-size: 2.5rem;"></i>
                                            </div>
                                            <div class="small text-muted">Nenhuma referência facial vinculada.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-8 col-lg-9">
                                    <div class="mb-3">
                                        <label class="form-label">Selecionar foto de referência</label>
                                        <input type="file" class="form-control" id="face_reference_file" accept="image/png,image/jpeg,image/webp" onchange="carregarReferenciaFacial(event)">
                                        <input type="file" class="d-none" id="face_reference_camera_fallback" accept="image/*" capture="user" onchange="capturarFallbackReferenciaFacial(event)">
                                        <input type="hidden" name="face_reference_base64" id="face_reference_base64" value="">
                                        <div class="form-text">
                                            Use uma foto frontal, bem iluminada e com o rosto centralizado. A referência é validada com qualidade mínima antes de ser salva.
                                        </div>
                                    </div>
                                    <div class="d-flex flex-wrap gap-2 mb-3">
                                        <button type="button" class="btn btn-outline-primary btn-sm" id="btnAbrirCameraFace" onclick="iniciarCameraReferenciaFacial()">
                                            <i class="bi bi-camera-video"></i> Capturar pela câmera
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm d-none" id="btnCapturarCameraFace" onclick="capturarReferenciaDaCamera()">
                                            <i class="bi bi-camera"></i> Tirar foto
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm d-none" id="btnFecharCameraFace" onclick="encerrarCameraReferenciaFacial()">
                                            <i class="bi bi-x-circle"></i> Fechar câmera
                                        </button>
                                        <button type="button" class="btn btn-outline-dark btn-sm d-none" id="btnUsarCameraDispositivoFace" onclick="abrirFallbackReferenciaFacial()">
                                            <i class="bi bi-phone"></i> Usar câmera do dispositivo
                                        </button>
                                    </div>
                                    <div class="border rounded bg-dark-subtle p-2 mb-3 d-none" id="faceCameraContainer">
                                        <video id="faceCameraVideo" autoplay playsinline class="w-100 rounded"></video>
                                        <canvas id="faceCameraCanvas" class="d-none"></canvas>
                                        <div class="small text-muted mt-2" id="faceCameraStatus"></div>
                                    </div>
                                    <div class="small mb-3" id="faceReferenceQualityHint">
                                        {% if face_status.disponivel %}
                                            <div><strong>Qualidade atual:</strong> {{ face_status.quality_label|capitalize }}{% if face_status.quality_score is not none %} (score {{ '%.2f'|format(face_status.quality_score or 0) }}){% endif %}</div>
                                            <div><strong>Origem:</strong> {{ 'Pessoa vinculada' if face_status.origem == 'pessoa_foto' else face_status.origem }}</div>
                                            {% if face_status.warnings %}
                                            <div class="text-warning"><strong>Avisos:</strong> {{ face_status.warnings|join(', ') }}</div>
                                            {% else %}
                                            <div class="text-success">Referência pronta para validações críticas.</div>
                                            {% endif %}
                                        {% else %}
                                            <div class="text-muted">Nenhuma referência oficial cadastrada ainda.</div>
                                        {% endif %}
                                    </div>
                                    <div class="form-check mb-2 {% if not face_src %}d-none{% endif %}" id="faceReferenceRemoveContainer">
                                        <input class="form-check-input" type="checkbox" name="remover_face_referencia" value="1" id="remover_face_referencia" onchange="toggleRemocaoReferenciaFacial()">
                                        <label class="form-check-label" for="remover_face_referencia">Remover referência facial atual</label>
                                    </div>
                                    <div class="alert alert-info py-2 mb-0 small">
                                        <i class="bi bi-shield-check"></i>
                                        Se o usuário não tiver <strong>Funcionário Vinculado</strong>, a referência facial não será salva. Primeiro vincule a pessoa e depois envie a imagem.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Nome de Usuário *</label>
                        <input type="text" class="form-control" name="username" id="username"
                               value="{% if usuario %}{{ usuario.username }}{% endif %}" 
                               placeholder="Ex: joao.silva" required>
                        <small class="text-muted">Usado para fazer login no sistema</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">E-mail *</label>
                        <input type="email" class="form-control" name="email" id="email"
                               value="{% if usuario %}{{ usuario.email }}{% endif %}" 
                               placeholder="usuario@empresa.com.br" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Senha {% if not usuario %}*{% endif %}</label>
                        <input type="password" class="form-control" name="senha" 
                               placeholder="{% if usuario %}Deixe em branco para manter{% else %}Digite a senha{% endif %}"
                               {% if not usuario %}required{% endif %}>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Nível de Acesso *</label>
                        <select class="form-select" name="nivel_acesso" id="nivel_acesso" required onchange="aplicarPermissoesPadrao()">
                            <option value="vendedor" {% if usuario and usuario.nivel_acesso == 'vendedor' %}selected{% endif %}>
                                Vendedor - Apenas vendas
                            </option>
                            <option value="operador" {% if usuario and (usuario.nivel_acesso == 'operador' or not usuario.nivel_acesso) %}selected{% endif %}>
                                Operador - Caixa e vendas
                            </option>
                            <option value="gerente" {% if usuario and usuario.nivel_acesso == 'gerente' %}selected{% endif %}>
                                Gerente - Supervisão e autorizações
                            </option>
                            <option value="admin" {% if usuario and usuario.nivel_acesso == 'admin' %}selected{% endif %}>
                                Administrador - Acesso total
                            </option>
                        </select>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="bi bi-diagram-3 text-primary"></i> Setor de Acesso (RBAC)
                            </label>
                            <select class="form-select" name="setor_acesso_id" id="setor_acesso_id">
                                <option value="">-- Sem setor definido --</option>
                                {% for setor in setores_acesso or [] %}
                                <option value="{{ setor.id }}" data-rh-sugerido="{{ '1' if setor_rh_sugerido_id == setor.id else '0' }}" {% if usuario and usuario.setor_acesso_id == setor.id %}selected{% endif %}>
                                    {{ setor.nome }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="bi bi-shield-check text-primary"></i> Perfil Setorial (RBAC)
                            </label>
                            <select class="form-select" name="perfil_acesso_setorial_id" id="perfil_acesso_setorial_id" onchange="sincronizarSetorPorPerfil()">
                                <option value="">-- Sem perfil setorial --</option>
                                {% for perfil_setorial in perfis_setoriais or [] %}
                                <option value="{{ perfil_setorial.id }}"
                                        data-setor-id="{{ perfil_setorial.setor_id }}"
                                        data-rh-sugerido="{{ '1' if perfil_setorial_rh_sugerido_id == perfil_setorial.id else '0' }}"
                                        {% if usuario and usuario.perfil_acesso_setorial_id == perfil_setorial.id %}selected{% endif %}>
                                    {{ perfil_setorial.nome }}{% if perfil_setorial.setor %} ({{ perfil_setorial.setor.nome }}){% endif %}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <small class="text-muted d-block mt-2">
                        Se informar perfil setorial, as rotinas passam a seguir o RBAC por setor (com transição gradual).
                        Usuários com nível <strong>Administrador</strong> são vinculados automaticamente ao perfil nativo do sistema e não podem ser restringidos.
                    </small>
                    <small class="text-muted d-block mt-1" id="perfil_rh_hint">
                        Se a pessoa vinculada vier com um <strong>perfil setorial sugerido</strong> no cadastro, o sistema pode adiantar o <strong>setor</strong> e o <strong>perfil setorial</strong> automaticamente.
                    </small>

                    <!-- Perfil PDV -->
                    {% if perfis_pdv %}
                    <div class="mb-3">
                        <label class="form-label">
                            <i class="bi bi-person-badge text-warning"></i> Perfil PDV
                        </label>
                        <select class="form-select" name="perfil_pdv_id" id="perfil_pdv_id">
                            <option value="">-- Não é operador PDV --</option>
                            {% for perfil in perfis_pdv %}
                            <option value="{{ perfil.id }}" 
                                    {% if usuario and usuario.perfil_pdv_id == perfil.id %}selected{% endif %}>
                                {{ perfil.nome }}
                                {% if perfil.acesso_apenas_pdv %}(Acesso exclusivo PDV){% endif %}
                            </option>
                            {% endfor %}
                        </select>
                        <small class="text-muted">
                            Ao vincular a um perfil, as permissões PDV serão herdadas do perfil.
                        </small>
                    </div>
                    {% endif %}

                    {% if perfis_food %}
                    <div class="mb-3">
                        <label class="form-label">
                            <i class="bi bi-cup-straw text-warning"></i> Perfil Food / App do Garçom
                        </label>
                        <select class="form-select" name="perfil_food_id" id="perfil_food_id" data-default-food-id="{{ perfil_food_sugerido_id or '' }}">
                            <option value="">-- Sem perfil Food vinculado --</option>
                            {% for perfil in perfis_food %}
                            <option value="{{ perfil.id }}" {% if usuario and usuario.perfil_food_id == perfil.id %}selected{% endif %}>
                                {{ perfil.nome }}
                            </option>
                            {% endfor %}
                        </select>
                        <small class="text-muted d-block" id="perfil_food_hint">
                            Para funcionários com perfil sugerido <strong>Food</strong>, o sistema sugere automaticamente o primeiro perfil Food ativo. Revise antes de salvar.
                        </small>
                    </div>
                    {% endif %}

                    <!-- PIN de Acesso PDV Desktop -->
                    <div class="mb-3">
                        <label class="form-label">
                            <i class="bi bi-key-fill text-success"></i> PIN de Acesso PDV
                        </label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="pin_acesso_pdv" id="pin_acesso_pdv"
                                   value="{% if usuario and usuario.pin_acesso_pdv %}{{ usuario.pin_acesso_pdv }}{% endif %}"
                                   placeholder="4 a 6 dígitos numéricos"
                                   maxlength="6" pattern="[0-9]{4,6}"
                                   inputmode="numeric">
                            {% if usuario and usuario.pin_acesso_pdv %}
                            <div class="input-group-text">
                                <input type="checkbox" class="form-check-input me-2" name="limpar_pin" id="limpar_pin">
                                <label class="form-check-label small" for="limpar_pin">Limpar PIN</label>
                            </div>
                            {% endif %}
                        </div>
                        <small class="text-muted">
                            <i class="bi bi-info-circle"></i> 
                            PIN numérico para acesso rápido ao <strong>CapePDV Desktop</strong> e para servir como
                            <strong>segunda camada</strong> nas autorizações críticas de gerente/admin.
                            Deixe em branco para usar apenas a senha normal, mas o ideal é configurar o PIN para endurecer cancelamentos e estornos.
                        </small>
                    </div>

                    {% if usuario %}
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" name="ativo" id="ativo"
                               {% if usuario.ativo %}checked{% endif %}>
                        <label class="form-check-label" for="ativo">
                            <strong>Usuário ativo</strong>
                        </label>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-permissoes" role="tabpanel" aria-labelledby="tab-permissoes-tab" tabindex="0">
            <div class="card mb-4">
                <div class="card-header bg-warning">
                    <h5 class="mb-0"><i class="bi bi-shield-lock"></i> Permissões Especiais</h5>
                </div>
                <div class="card-body">
                    {% set controle_guardar_usuario = usuario.controle_guardar_venda_pdv if usuario else 'bloqueado' %}
                    {% set controle_cancelar_item_usuario = usuario.controle_cancelar_item_pdv if usuario else 'liberado' %}
                    {% set controle_cancelar_venda_usuario = usuario.controle_cancelar_venda_pdv if usuario else 'gerente' %}
                    {% set controle_alterar_preco_usuario = usuario.controle_alterar_preco_pdv if usuario else 'gerente' %}
                    {% set controle_desconto_usuario = usuario.controle_desconto_pdv if usuario else 'gerente' %}

                    <div class="alert alert-light border small">
                        <i class="bi bi-display text-primary"></i>
                        Estes controles valem para o <strong>CapePDV Desktop</strong>. Se o usuário estiver vinculado a um
                        <strong>Perfil PDV</strong>, o perfil continua prevalecendo.
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label" for="controle_guardar_venda_pdv">Guardar venda</label>
                            <select class="form-select" name="controle_guardar_venda_pdv" id="controle_guardar_venda_pdv">
                                <option value="liberado" {% if controle_guardar_usuario == 'liberado' %}selected{% endif %}>Liberado</option>
                                <option value="gerente" {% if controle_guardar_usuario == 'gerente' %}selected{% endif %}>Só com gerente/admin</option>
                                <option value="bloqueado" {% if controle_guardar_usuario == 'bloqueado' %}selected{% endif %}>Bloqueado</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="controle_cancelar_item_pdv">Cancelar item</label>
                            <select class="form-select" name="controle_cancelar_item_pdv" id="controle_cancelar_item_pdv">
                                <option value="liberado" {% if controle_cancelar_item_usuario == 'liberado' %}selected{% endif %}>Liberado</option>
                                <option value="gerente" {% if controle_cancelar_item_usuario == 'gerente' %}selected{% endif %}>Só com gerente/admin</option>
                                <option value="bloqueado" {% if controle_cancelar_item_usuario == 'bloqueado' %}selected{% endif %}>Bloqueado</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="controle_cancelar_venda_pdv">Cancelar venda</label>
                            <select class="form-select" name="controle_cancelar_venda_pdv" id="controle_cancelar_venda_pdv">
                                <option value="liberado" {% if controle_cancelar_venda_usuario == 'liberado' %}selected{% endif %}>Liberado</option>
                                <option value="gerente" {% if controle_cancelar_venda_usuario == 'gerente' %}selected{% endif %}>Só com gerente/admin</option>
                                <option value="bloqueado" {% if controle_cancelar_venda_usuario == 'bloqueado' %}selected{% endif %}>Bloqueado</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="controle_alterar_preco_pdv">Alterar preço</label>
                            <select class="form-select" name="controle_alterar_preco_pdv" id="controle_alterar_preco_pdv">
                                <option value="liberado" {% if controle_alterar_preco_usuario == 'liberado' %}selected{% endif %}>Liberado</option>
                                <option value="gerente" {% if controle_alterar_preco_usuario == 'gerente' %}selected{% endif %}>Só com gerente/admin</option>
                                <option value="bloqueado" {% if controle_alterar_preco_usuario == 'bloqueado' %}selected{% endif %}>Bloqueado</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="controle_desconto_pdv">Aplicar desconto</label>
                            <select class="form-select" name="controle_desconto_pdv" id="controle_desconto_pdv">
                                <option value="liberado" {% if controle_desconto_usuario == 'liberado' %}selected{% endif %}>Liberado</option>
                                <option value="gerente" {% if controle_desconto_usuario == 'gerente' %}selected{% endif %}>Só com gerente/admin</option>
                                <option value="bloqueado" {% if controle_desconto_usuario == 'bloqueado' %}selected{% endif %}>Bloqueado</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-check mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_estornar_pagamento" id="pode_estornar_pagamento"
                               {% if usuario and usuario.pode_estornar_pagamento %}checked{% endif %}>
                        <label class="form-check-label" for="pode_estornar_pagamento">
                            Pode estornar pagamentos
                        </label>
                    </div>

                    <div class="form-check mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_excluir_movimento" id="pode_excluir_movimento"
                               {% if usuario and usuario.pode_excluir_movimento %}checked{% endif %}>
                        <label class="form-check-label" for="pode_excluir_movimento">
                            Pode excluir movimentos de caixa
                        </label>
                    </div>

                    <div class="form-check mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_fechar_caixa_outros" id="pode_fechar_caixa_outros"
                               {% if usuario and usuario.pode_fechar_caixa_outros %}checked{% endif %}>
                        <label class="form-check-label" for="pode_fechar_caixa_outros">
                            Pode fechar caixa de outros operadores
                        </label>
                    </div>

                    <hr>

                    <h6 class="text-primary mb-2">
                        <i class="bi bi-phone"></i> CapePonto Empresa
                    </h6>

                    <div class="form-check mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_operar_app_empresa" id="pode_operar_app_empresa"
                               {% if usuario and usuario.pode_operar_app_empresa %}checked{% endif %}>
                        <label class="form-check-label" for="pode_operar_app_empresa">
                            Pode operar o CapePonto Empresa
                        </label>
                    </div>

                    <div class="form-check mb-2">
                        <input type="checkbox" class="form-check-input" name="pode_admin_app_empresa" id="pode_admin_app_empresa"
                               {% if usuario and usuario.pode_admin_app_empresa %}checked{% endif %}>
                        <label class="form-check-label" for="pode_admin_app_empresa">
                            Pode administrar cadastros no CapePonto Empresa
                        </label>
                    </div>

                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="acesso_apenas_app_empresa" id="acesso_apenas_app_empresa"
                               onchange="sincronizarModoAppEmpresaExclusivo()"
                               {% if usuario and usuario.acesso_apenas_app_empresa %}checked{% endif %}>
                        <label class="form-check-label" for="acesso_apenas_app_empresa">
                            Usuário exclusivo do CapePonto Empresa
                        </label>
                    </div>

                    <div class="alert alert-primary small">
                        <i class="bi bi-shield-lock"></i>
                        O modo <strong>exclusivo</strong> isola este usuário para o módulo CapePonto Empresa e remove permissões operacionais do ERP, evitando conflitos como cancelamento de venda, estorno e acesso aos módulos gerais.
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label">
                                <i class="bi bi-buildings text-primary"></i> Escopo por empresa
                            </label>
                            <select class="form-select" name="app_empresa_escopo_empresas" id="app_empresa_escopo_empresas" onchange="toggleAppEmpresaScopeFields()">
                                <option value="todas" {% if app_empresa_scope.scope == 'todas' %}selected{% endif %}>Todas as empresas</option>
                                <option value="selecionadas" {% if app_empresa_scope.scope == 'selecionadas' %}selected{% endif %}>Empresas selecionadas</option>
                                <option value="nenhuma" {% if app_empresa_scope.scope == 'nenhuma' %}selected{% endif %}>Nenhuma empresa</option>
                            </select>
                            <small class="text-muted">Define onde este usuário pode operar/administrar o CapePonto Empresa e os fluxos ligados ao Face ID.</small>
                        </div>
                        <div class="col-md-8" id="appEmpresaEmpresasContainer">
                            <label class="form-label">
                                <i class="bi bi-diagram-3 text-primary"></i> Empresas permitidas
                            </label>
                            <select class="form-select" name="app_empresa_empresas_ids" id="app_empresa_empresas_ids" multiple size="6">
                                {% for empresa in app_empresa_empresas_disponiveis or [] %}
                                <option value="{{ empresa.id }}" {% if empresa.id in (app_empresa_scope.company_ids or []) %}selected{% endif %}>
                                    {{ empresa.nome }}{% if empresa.nome_fantasia and empresa.nome_fantasia != empresa.nome %} - {{ empresa.nome_fantasia }}{% endif %}
                                </option>
                                {% endfor %}
                            </select>
                            <small class="text-muted">Use Ctrl/Command para marcar várias empresas quando o escopo for seletivo.</small>
                        </div>
                    </div>

                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="requer_autorizacao_sangria" id="requer_autorizacao_sangria"
                               {% if usuario and usuario.requer_autorizacao_sangria %}checked{% endif %}>
                        <label class="form-check-label" for="requer_autorizacao_sangria">
                            Requer autorização para sangrias
                        </label>
                    </div>

                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i>
                        <small>Reabrir caixa fechado está <strong>BLOQUEADO</strong> para todos os usuários por questão de auditoria.</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-limites" role="tabpanel" aria-labelledby="tab-limites-tab" tabindex="0">
            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="bi bi-cash-stack"></i> Limites Financeiros</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Limite de Sangria (R$)</label>
                        <input type="number" class="form-control" name="limite_sangria" id="limite_sangria"
                               value="{% if usuario %}{{ usuario.limite_sangria }}{% else %}500.00{% endif %}" 
                               step="0.01" min="0">
                        <small class="text-muted">Valor máximo que pode retirar sem autorização</small>
                    </div>

                    <div class="card border-warning-subtle bg-light mb-3">
                        <div class="card-body">
                            <h6 class="text-warning-emphasis mb-3">
                                <i class="bi bi-percent"></i> Regra de desconto na venda
                            </h6>

                            <div class="form-check mb-2">
                                <input type="checkbox" class="form-check-input" name="pode_dar_desconto_percentual" id="pode_dar_desconto_percentual"
                                       {% if usuario and usuario.pode_dar_desconto_percentual %}checked{% elif not usuario %}checked{% endif %}>
                                <label class="form-check-label" for="pode_dar_desconto_percentual">
                                    Permitir desconto em percentual (%)
                                </label>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Limite percentual (%)</label>
                                <input type="number" class="form-control" name="limite_desconto_percentual" id="limite_desconto_percentual"
                                       value="{% if usuario %}{{ usuario.limite_desconto_percentual or usuario.pode_dar_desconto_maximo or 0 }}{% else %}10.0{% endif %}"
                                       step="0.1" min="0" max="100">
                                <small class="text-muted">0 = não concede desconto percentual | 100 = desconto total em %.</small>
                            </div>

                            <div class="form-check mb-2">
                                <input type="checkbox" class="form-check-input" name="pode_dar_desconto_valor" id="pode_dar_desconto_valor"
                                       {% if usuario and usuario.pode_dar_desconto_valor %}checked{% endif %}>
                                <label class="form-check-label" for="pode_dar_desconto_valor">
                                    Permitir desconto em valor (R$)
                                </label>
                            </div>
                            <div class="mb-2">
                                <label class="form-label">Limite em valor (R$)</label>
                                <input type="number" class="form-control" name="limite_desconto_valor" id="limite_desconto_valor"
                                       value="{% if usuario %}{{ usuario.limite_desconto_valor or 0 }}{% else %}0.00{% endif %}"
                                       step="0.01" min="0">
                                <small class="text-muted">Se deixar 0,00, o desconto em valor pode ir até o total da venda.</small>
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <h6 class="text-success"><i class="bi bi-percent"></i> Comissão de Vendas</h6>
                    <div class="mb-3">
                        <label class="form-label">Comissão Percentual (%)</label>
                        <input type="number" class="form-control" name="comissao_percentual" id="comissao_percentual"
                               value="{% if usuario %}{{ usuario.comissao_percentual or 0 }}{% else %}0{% endif %}" 
                               step="0.01" min="0" max="100">
                        <small class="text-muted">Percentual sobre valor das vendas (ex: 5.0 = 5%)</small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Comissão Fixa (R$)</label>
                        <input type="number" class="form-control" name="comissao_fixa" id="comissao_fixa"
                               value="{% if usuario %}{{ usuario.comissao_fixa or 0 }}{% else %}0{% endif %}" 
                               step="0.01" min="0">
                        <small class="text-muted">Valor fixo por venda finalizada</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-guia" role="tabpanel" aria-labelledby="tab-guia-tab" tabindex="0">
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="bi bi-lightbulb"></i> Guia de Permissões</h5>
                </div>
                <div class="card-body">
                    <h6><i class="bi bi-person-badge"></i> Níveis de Acesso:</h6>
                    <p class="small mb-2">
                        <strong class="text-primary">Vendedor:</strong> Apenas criar vendas<br>
                        <strong class="text-primary">Operador:</strong> Caixa e vendas (padrão)<br>
                        <strong class="text-warning">Gerente:</strong> Supervisão e autorizações<br>
                        <strong class="text-danger">Admin:</strong> Controle total
                    </p>

                    <h6 class="mt-3"><i class="bi bi-shield-check"></i> Ações Críticas:</h6>
                    <ul class="small">
                        <li>Cancelamento de vendas requer permissão</li>
                        <li>Estorno de pagamentos requer autorização</li>
                        <li>Sangrias acima do limite exigem senha de superior</li>
                    </ul>

                    <div class="alert alert-warning small mb-0">
                        <i class="bi bi-exclamation-triangle"></i>
                        Alterações entram em vigor no próximo login
                    </div>
                </div>
            </div>
        </div>
    </div>

        <div class="cape-form-actions">
            <div class="cape-form-actions-left"></div>
            <div class="cape-form-actions-right">
                <a href="{{ url_for('usuarios') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Cancelar
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle"></i> Salvar
                </button>
            </div>
        </div>
    </form>

<script>
let faceCameraStream = null;

function aplicarPermissoesPadrao() {
    const nivel = document.getElementById('nivel_acesso').value;
    
    // Desmarcar todas primeiro
    document.querySelectorAll('input[type="checkbox"][name^="pode_"]').forEach(cb => cb.checked = false);

    const controlesPdv = {
        guardar: document.getElementById('controle_guardar_venda_pdv'),
        cancelarItem: document.getElementById('controle_cancelar_item_pdv'),
        cancelarVenda: document.getElementById('controle_cancelar_venda_pdv'),
        alterarPreco: document.getElementById('controle_alterar_preco_pdv'),
        desconto: document.getElementById('controle_desconto_pdv')
    };
    
    if (nivel === 'admin') {
        document.getElementById('pode_estornar_pagamento').checked = true;
        document.getElementById('pode_excluir_movimento').checked = true;
        document.getElementById('pode_fechar_caixa_outros').checked = true;
        if (controlesPdv.guardar) controlesPdv.guardar.value = 'liberado';
        if (controlesPdv.cancelarItem) controlesPdv.cancelarItem.value = 'liberado';
        if (controlesPdv.cancelarVenda) controlesPdv.cancelarVenda.value = 'liberado';
        if (controlesPdv.alterarPreco) controlesPdv.alterarPreco.value = 'liberado';
        if (controlesPdv.desconto) controlesPdv.desconto.value = 'liberado';
        document.getElementById('requer_autorizacao_sangria').checked = false;
        document.getElementById('limite_sangria').value = '999999.00';
        document.getElementById('pode_dar_desconto_percentual').checked = true;
        document.getElementById('limite_desconto_percentual').value = '100.0';
        document.getElementById('pode_dar_desconto_valor').checked = true;
        document.getElementById('limite_desconto_valor').value = '0.00';
    } else if (nivel === 'gerente') {
        document.getElementById('pode_estornar_pagamento').checked = true;
        document.getElementById('pode_fechar_caixa_outros').checked = true;
        if (controlesPdv.guardar) controlesPdv.guardar.value = 'liberado';
        if (controlesPdv.cancelarItem) controlesPdv.cancelarItem.value = 'liberado';
        if (controlesPdv.cancelarVenda) controlesPdv.cancelarVenda.value = 'liberado';
        if (controlesPdv.alterarPreco) controlesPdv.alterarPreco.value = 'liberado';
        if (controlesPdv.desconto) controlesPdv.desconto.value = 'liberado';
        document.getElementById('requer_autorizacao_sangria').checked = false;
        document.getElementById('limite_sangria').value = '5000.00';
        document.getElementById('pode_dar_desconto_percentual').checked = true;
        document.getElementById('limite_desconto_percentual').value = '30.0';
        document.getElementById('pode_dar_desconto_valor').checked = false;
        document.getElementById('limite_desconto_valor').value = '0.00';
    } else if (nivel === 'vendedor') {
        if (controlesPdv.guardar) controlesPdv.guardar.value = 'bloqueado';
        if (controlesPdv.cancelarItem) controlesPdv.cancelarItem.value = 'gerente';
        if (controlesPdv.cancelarVenda) controlesPdv.cancelarVenda.value = 'gerente';
        if (controlesPdv.alterarPreco) controlesPdv.alterarPreco.value = 'bloqueado';
        if (controlesPdv.desconto) controlesPdv.desconto.value = 'gerente';
        document.getElementById('requer_autorizacao_sangria').checked = true;
        document.getElementById('limite_sangria').value = '0.00';
        document.getElementById('pode_dar_desconto_percentual').checked = true;
        document.getElementById('limite_desconto_percentual').value = '5.0';
        document.getElementById('pode_dar_desconto_valor').checked = false;
        document.getElementById('limite_desconto_valor').value = '0.00';
    } else { // operador
        if (controlesPdv.guardar) controlesPdv.guardar.value = 'bloqueado';
        if (controlesPdv.cancelarItem) controlesPdv.cancelarItem.value = 'gerente';
        if (controlesPdv.cancelarVenda) controlesPdv.cancelarVenda.value = 'gerente';
        if (controlesPdv.alterarPreco) controlesPdv.alterarPreco.value = 'gerente';
        if (controlesPdv.desconto) controlesPdv.desconto.value = 'gerente';
        document.getElementById('requer_autorizacao_sangria').checked = true;
        document.getElementById('limite_sangria').value = '500.00';
        document.getElementById('pode_dar_desconto_percentual').checked = true;
        document.getElementById('limite_desconto_percentual').value = '10.0';
        document.getElementById('pode_dar_desconto_valor').checked = false;
        document.getElementById('limite_desconto_valor').value = '0.00';
    }
}

function atualizarStatusCameraFace(msg) {
    const status = document.getElementById('faceCameraStatus');
    if (status) status.textContent = msg || '';
}

function atualizarPreviewReferenciaFacial(result, statusHtml, badgeText, badgeClass) {
    const hiddenInput = document.getElementById('face_reference_base64');
    const preview = document.getElementById('faceReferencePreview');
    const placeholder = document.getElementById('faceReferencePlaceholder');
    const badge = document.getElementById('faceReferenceStatusBadge');
    const remover = document.getElementById('remover_face_referencia');
    const removerContainer = document.getElementById('faceReferenceRemoveContainer');
    const qualityHint = document.getElementById('faceReferenceQualityHint');

    if (hiddenInput) hiddenInput.value = result || '';
    if (preview && result) {
        preview.src = result;
        preview.classList.remove('d-none');
    }
    if (placeholder && result) placeholder.classList.add('d-none');
    if (badge) {
        badge.textContent = badgeText || 'Nova referência pronta';
        badge.classList.remove('bg-secondary', 'bg-warning', 'bg-success', 'bg-primary', 'text-dark');
        (badgeClass || 'bg-primary').split(' ').forEach((cls) => cls && badge.classList.add(cls));
    }
    if (qualityHint && statusHtml) {
        qualityHint.innerHTML = statusHtml;
    }
    if (remover) remover.checked = false;
    if (removerContainer) removerContainer.classList.remove('d-none');
}

function preencherDadosFuncionario() {
    const select = document.getElementById('pessoa_id');
    const option = select.options[select.selectedIndex];
    
    if (option.value) {
        const nome = option.getAttribute('data-nome');
        const email = option.getAttribute('data-email');
        const tipoPerfilRaw = String(option.getAttribute('data-tipo-perfil') || '').trim();
        const ehGarcom = option.getAttribute('data-eh-garcom') === '1';
        const tipoPerfil = tipoPerfilRaw.toLowerCase();
        const tipoPerfilEfetivo = tipoPerfil || (ehGarcom ? 'food' : '');
        
        // Gerar username a partir do nome (primeiro.ultimo)
        const usernameInput = document.getElementById('username');
        if (!usernameInput.value) {
            const partes = nome.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').split(' ');
            if (partes.length >= 2) {
                usernameInput.value = partes[0] + '.' + partes[partes.length - 1];
            } else {
                usernameInput.value = partes[0];
            }
        }
        
        // Preencher email se disponível
        const emailInput = document.getElementById('email');
        if (!emailInput.value && email) {
            emailInput.value = email;
        }
        
        // Aplicar nível de acesso conforme tipo_perfil do funcionário
        if (tipoPerfilRaw || ehGarcom) {
            const nivelSelect = document.getElementById('nivel_acesso');
            const perfilSetorialSelect = document.getElementById('perfil_acesso_setorial_id');
            if (/^\d+$/.test(tipoPerfilRaw)) {
                nivelSelect.value = 'operador';
                if (perfilSetorialSelect) {
                    const perfilExiste = Array.from(perfilSetorialSelect.options || []).some((opt) => opt.value === tipoPerfilRaw);
                    if (!perfilSetorialSelect.value && perfilExiste) {
                        perfilSetorialSelect.value = tipoPerfilRaw;
                        perfilSetorialSelect.dataset.autoSuggested = '1';
                        sincronizarSetorPorPerfil();
                    }
                }
            } else if (tipoPerfilEfetivo === 'operador_pdv') {
                nivelSelect.value = 'operador';
                // Marcar como operador PDV se houver perfis PDV disponíveis
                const perfilPdvSelect = document.getElementById('perfil_pdv_id');
                if (perfilPdvSelect && perfilPdvSelect.options.length > 1) {
                    perfilPdvSelect.selectedIndex = 1; // Seleciona primeiro perfil PDV
                }
            } else if (tipoPerfilEfetivo === 'food' || tipoPerfilEfetivo === 'rh' || tipoPerfilEfetivo === 'operador_sistema') {
                nivelSelect.value = 'operador';
            } else if (tipoPerfilEfetivo === 'admin' || tipoPerfilEfetivo === 'gerente' || tipoPerfilEfetivo === 'operador') {
                nivelSelect.value = tipoPerfilEfetivo;
            }
            aplicarPermissoesPadrao();
        }

        sincronizarPerfilFoodSugestao(tipoPerfilEfetivo);
        sincronizarSugestaoRhSetorial(tipoPerfilRaw);
    }
}

function sincronizarPerfilFoodSugestao(tipoPerfil) {
    const perfilFoodSelect = document.getElementById('perfil_food_id');
    const hint = document.getElementById('perfil_food_hint');
    if (!perfilFoodSelect) return;

    tipoPerfil = String(tipoPerfil || '').trim().toLowerCase();

    const defaultFoodId = perfilFoodSelect.getAttribute('data-default-food-id') || '';
    const tinhaSugestaoAutomatica = perfilFoodSelect.dataset.autoSuggested === '1';

    if (tipoPerfil === 'food') {
        if (!perfilFoodSelect.value && defaultFoodId) {
            perfilFoodSelect.value = defaultFoodId;
            perfilFoodSelect.dataset.autoSuggested = '1';
        }
        const option = perfilFoodSelect.options[perfilFoodSelect.selectedIndex];
        if (hint) {
            if (option && option.value) {
                hint.innerHTML = `Funcionário marcado como <strong>Food</strong>. Perfil sugerido automaticamente: <strong>${option.text}</strong>.`;
            } else {
                hint.innerHTML = 'Funcionário marcado como <strong>Food</strong>, mas não há perfil Food ativo disponível para sugestão automática.';
            }
        }
        return;
    }

    if (tinhaSugestaoAutomatica && perfilFoodSelect.value === defaultFoodId) {
        perfilFoodSelect.value = '';
    }
    perfilFoodSelect.dataset.autoSuggested = '0';
    if (hint) {
        hint.innerHTML = 'Vincule um perfil Food apenas para usuários que vão operar o <strong>App do Garçom</strong> ou rotinas do módulo Food.';
    }
}

function sincronizarSugestaoRhSetorial(tipoPerfil) {
    const setorSelect = document.getElementById('setor_acesso_id');
    const perfilSelect = document.getElementById('perfil_acesso_setorial_id');
    const hint = document.getElementById('perfil_rh_hint');
    if (!setorSelect || !perfilSelect) return;

    const tipoPerfilRaw = String(tipoPerfil || '').trim();
    const tipoPerfilNormalizado = tipoPerfilRaw.toLowerCase();

    const perfilAuto = perfilSelect.dataset.autoSuggested === '1';
    const setorAuto = setorSelect.dataset.autoSuggested === '1';

    if (/^\d+$/.test(tipoPerfilRaw)) {
        const perfilConfigurado = Array.from(perfilSelect.options || []).find((opt) => opt.value === tipoPerfilRaw);
        if (perfilConfigurado) {
            if (!perfilSelect.value) {
                perfilSelect.value = perfilConfigurado.value;
                perfilSelect.dataset.autoSuggested = '1';
            }
            sincronizarSetorPorPerfil();
            if (hint) {
                hint.innerHTML = `Pessoa vinculada com perfil setorial sugerido: <strong>${perfilConfigurado.text}</strong>.`;
            }
            return;
        }
    }

    if (tipoPerfilNormalizado === 'rh') {
        const perfilRhOption = Array.from(perfilSelect.options || []).find(opt => opt.getAttribute('data-rh-sugerido') === '1');
        const setorRhOption = Array.from(setorSelect.options || []).find(opt => opt.getAttribute('data-rh-sugerido') === '1');

        if (!perfilSelect.value && perfilRhOption) {
            perfilSelect.value = perfilRhOption.value;
            perfilSelect.dataset.autoSuggested = '1';
            sincronizarSetorPorPerfil();
        } else if (!setorSelect.value && setorRhOption) {
            setorSelect.value = setorRhOption.value;
            setorSelect.dataset.autoSuggested = '1';
        }

        const perfilAtual = perfilSelect.options[perfilSelect.selectedIndex];
        const setorAtual = setorSelect.options[setorSelect.selectedIndex];
        if (hint) {
            if (perfilAtual && perfilAtual.value) {
                hint.innerHTML = `Funcionário marcado como <strong>RH</strong>. Perfil setorial sugerido: <strong>${perfilAtual.text}</strong>.`;
            } else if (setorAtual && setorAtual.value) {
                hint.innerHTML = `Funcionário marcado como <strong>RH</strong>. Setor sugerido: <strong>${setorAtual.text}</strong>.`;
            } else {
                hint.innerHTML = 'Funcionário marcado como <strong>RH</strong>, mas não foi encontrada uma combinação ativa de setor/perfil setorial de RH para sugerir automaticamente.';
            }
        }
        return;
    }

    if (perfilAuto) {
        perfilSelect.value = '';
    }
    if (setorAuto) {
        setorSelect.value = '';
    }
    perfilSelect.dataset.autoSuggested = '0';
    setorSelect.dataset.autoSuggested = '0';
    if (hint) {
        hint.innerHTML = 'Se a pessoa vinculada vier com um <strong>perfil setorial sugerido</strong> no cadastro, o sistema pode adiantar o <strong>setor</strong> e o <strong>perfil setorial</strong> automaticamente.';
    }
}

function carregarReferenciaFacial(event) {
    const input = event.target;
    const file = input && input.files ? input.files[0] : null;
    const hiddenInput = document.getElementById('face_reference_base64');

    if (!file) {
        if (hiddenInput) hiddenInput.value = '';
        return;
    }

    const allowedTypes = ['image/png', 'image/jpeg', 'image/webp'];
    if (allowedTypes.indexOf(file.type) === -1) {
        alert('Selecione uma imagem PNG, JPG ou WEBP.');
        input.value = '';
        if (hiddenInput) hiddenInput.value = '';
        return;
    }

    const maxSize = 2 * 1024 * 1024;
    if (file.size > maxSize) {
        alert('A imagem deve ter no máximo 2MB.');
        input.value = '';
        if (hiddenInput) hiddenInput.value = '';
        return;
    }

    const reader = new FileReader();
    reader.onload = function(loadEvent) {
        const result = String((loadEvent && loadEvent.target && loadEvent.target.result) || '');
        if (!result) {
            alert('Não foi possível ler a imagem selecionada.');
            return;
        }
        atualizarPreviewReferenciaFacial(
            result,
            '<div class="text-primary"><strong>Nova captura carregada.</strong> A qualidade final será validada ao salvar.</div>',
            'Nova referência pronta',
            'bg-primary'
        );
    };
    reader.readAsDataURL(file);
}

function abrirFallbackReferenciaFacial() {
    const input = document.getElementById('face_reference_camera_fallback');
    if (input) input.click();
}

function capturarFallbackReferenciaFacial(event) {
    const arquivo = event && event.target && event.target.files ? event.target.files[0] : null;
    if (!arquivo) return;

    const reader = new FileReader();
    reader.onload = function(loadEvent) {
        const result = String((loadEvent && loadEvent.target && loadEvent.target.result) || '');
        if (!result) {
            alert('Não foi possível ler a imagem capturada pelo dispositivo.');
            return;
        }
        atualizarPreviewReferenciaFacial(
            result,
            '<div class="text-primary"><strong>Imagem capturada pelo dispositivo.</strong> A qualidade final será validada ao salvar.</div>',
            'Captura pronta',
            'bg-primary'
        );
        atualizarStatusCameraFace('Imagem capturada pelo dispositivo com sucesso.');
    };
    reader.readAsDataURL(arquivo);
}

async function iniciarCameraReferenciaFacial() {
    const container = document.getElementById('faceCameraContainer');
    const video = document.getElementById('faceCameraVideo');
    const btnAbrir = document.getElementById('btnAbrirCameraFace');
    const btnCapturar = document.getElementById('btnCapturarCameraFace');
    const btnFechar = document.getElementById('btnFecharCameraFace');
    const btnFallback = document.getElementById('btnUsarCameraDispositivoFace');

    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        if (btnFallback) btnFallback.classList.remove('d-none');
        atualizarStatusCameraFace('Este navegador não suporta webcam embutida. Use a câmera do dispositivo.');
        return;
    }

    try {
        encerrarCameraReferenciaFacial(false);
        faceCameraStream = await navigator.mediaDevices.getUserMedia({
            video: { facingMode: 'user', width: { ideal: 720 }, height: { ideal: 720 } },
            audio: false,
        });
        if (video) {
            video.srcObject = faceCameraStream;
            await video.play();
        }
        if (container) container.classList.remove('d-none');
        if (btnAbrir) btnAbrir.classList.add('d-none');
        if (btnCapturar) btnCapturar.classList.remove('d-none');
        if (btnFechar) btnFechar.classList.remove('d-none');
        if (btnFallback) btnFallback.classList.add('d-none');
        atualizarStatusCameraFace('Câmera pronta. Centralize o rosto e clique em Tirar foto.');
    } catch (error) {
        console.error('Falha ao abrir câmera facial', error);
        if (btnFallback) btnFallback.classList.remove('d-none');
        atualizarStatusCameraFace('Não foi possível abrir a webcam. Você pode usar a câmera do dispositivo como alternativa.');
    }
}

function encerrarCameraReferenciaFacial(limparStatus = true) {
    const container = document.getElementById('faceCameraContainer');
    const video = document.getElementById('faceCameraVideo');
    const btnAbrir = document.getElementById('btnAbrirCameraFace');
    const btnCapturar = document.getElementById('btnCapturarCameraFace');
    const btnFechar = document.getElementById('btnFecharCameraFace');

    try {
        if (faceCameraStream) {
            faceCameraStream.getTracks().forEach((track) => track.stop());
        }
    } catch (_) {}

    faceCameraStream = null;
    if (video) video.srcObject = null;
    if (container) container.classList.add('d-none');
    if (btnAbrir) btnAbrir.classList.remove('d-none');
    if (btnCapturar) btnCapturar.classList.add('d-none');
    if (btnFechar) btnFechar.classList.add('d-none');
    if (limparStatus) atualizarStatusCameraFace('');
}

function capturarReferenciaDaCamera() {
    const video = document.getElementById('faceCameraVideo');
    const canvas = document.getElementById('faceCameraCanvas');
    if (!video || !canvas || !faceCameraStream) {
        atualizarStatusCameraFace('Abra a câmera antes de capturar a foto.');
        return;
    }

    const largura = video.videoWidth || 720;
    const altura = video.videoHeight || 720;
    canvas.width = largura;
    canvas.height = altura;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, largura, altura);

    const result = canvas.toDataURL('image/jpeg', 0.92);
    atualizarPreviewReferenciaFacial(
        result,
        '<div class="text-primary"><strong>Foto capturada pela webcam.</strong> Revise a prévia e salve para validar a qualidade final.</div>',
        'Captura pronta',
        'bg-primary'
    );
    atualizarStatusCameraFace('Foto capturada com sucesso.');
    encerrarCameraReferenciaFacial(false);
}

function toggleRemocaoReferenciaFacial() {
    const checkbox = document.getElementById('remover_face_referencia');
    const hiddenInput = document.getElementById('face_reference_base64');
    const preview = document.getElementById('faceReferencePreview');
    const placeholder = document.getElementById('faceReferencePlaceholder');
    const badge = document.getElementById('faceReferenceStatusBadge');
    const fileInput = document.getElementById('face_reference_file');
    const qualityHint = document.getElementById('faceReferenceQualityHint');

    if (!checkbox || !checkbox.checked) {
        return;
    }

    if (hiddenInput) hiddenInput.value = '';
    if (fileInput) fileInput.value = '';
    if (preview) {
        preview.src = '';
        preview.classList.add('d-none');
    }
    if (placeholder) placeholder.classList.remove('d-none');
    if (badge) {
        badge.textContent = 'Remoção pendente';
        badge.classList.remove('bg-success', 'bg-primary');
        badge.classList.add('bg-warning', 'text-dark');
    }
    if (qualityHint) {
        qualityHint.innerHTML = '<div class="text-warning"><strong>Remoção pendente.</strong> Salve o usuário para excluir a referência oficial.</div>';
    }
}

function sincronizarSetorPorPerfil() {
    const perfilSelect = document.getElementById('perfil_acesso_setorial_id');
    const setorSelect = document.getElementById('setor_acesso_id');
    if (!perfilSelect || !setorSelect) return;

    const selected = perfilSelect.options[perfilSelect.selectedIndex];
    const setorId = selected ? selected.getAttribute('data-setor-id') : null;
    if (setorId) {
        setorSelect.value = setorId;
        setorSelect.dataset.autoSuggested = '1';
    }
}

function sincronizarModoAppEmpresaExclusivo() {
    const exclusivo = document.getElementById('acesso_apenas_app_empresa');
    if (!exclusivo || !exclusivo.checked) return;

    const nivelSelect = document.getElementById('nivel_acesso');
    const perfilPdvSelect = document.getElementById('perfil_pdv_id');
    const setorSelect = document.getElementById('setor_acesso_id');
    const perfilSetorialSelect = document.getElementById('perfil_acesso_setorial_id');

    if (nivelSelect) nivelSelect.value = 'operador';
    if (perfilPdvSelect) perfilPdvSelect.value = '';
    if (setorSelect) setorSelect.value = '';
    if (perfilSetorialSelect) perfilSetorialSelect.value = '';

    ['pode_estornar_pagamento', 'pode_excluir_movimento', 'pode_fechar_caixa_outros'].forEach((id) => {
        const el = document.getElementById(id);
        if (el) el.checked = false;
    });

    const controles = {
        guardar: document.getElementById('controle_guardar_venda_pdv'),
        cancelarItem: document.getElementById('controle_cancelar_item_pdv'),
        cancelarVenda: document.getElementById('controle_cancelar_venda_pdv'),
        alterarPreco: document.getElementById('controle_alterar_preco_pdv'),
        desconto: document.getElementById('controle_desconto_pdv')
    };
    if (controles.guardar) controles.guardar.value = 'bloqueado';
    if (controles.cancelarItem) controles.cancelarItem.value = 'bloqueado';
    if (controles.cancelarVenda) controles.cancelarVenda.value = 'bloqueado';
    if (controles.alterarPreco) controles.alterarPreco.value = 'bloqueado';
    if (controles.desconto) controles.desconto.value = 'bloqueado';

    const operar = document.getElementById('pode_operar_app_empresa');
    const admin = document.getElementById('pode_admin_app_empresa');
    const scopeSelect = document.getElementById('app_empresa_escopo_empresas');
    const sangria = document.getElementById('requer_autorizacao_sangria');
    if (operar) operar.checked = true;
    if (admin && admin.checked && operar) operar.checked = true;
    if (scopeSelect && scopeSelect.value === 'nenhuma') scopeSelect.value = 'todas';
    if (sangria) sangria.checked = true;
    toggleAppEmpresaScopeFields();
}

function toggleAppEmpresaScopeFields() {
    const scopeSelect = document.getElementById('app_empresa_escopo_empresas');
    const container = document.getElementById('appEmpresaEmpresasContainer');
    const empresasSelect = document.getElementById('app_empresa_empresas_ids');
    const operar = document.getElementById('pode_operar_app_empresa');
    const admin = document.getElementById('pode_admin_app_empresa');
    const exclusivo = document.getElementById('acesso_apenas_app_empresa');

    if (!scopeSelect || !container) return;

    const scope = scopeSelect.value || 'nenhuma';
    const appHabilitado = Boolean((operar && operar.checked) || (admin && admin.checked) || (exclusivo && exclusivo.checked));
    container.classList.toggle('d-none', scope !== 'selecionadas');

    if (!appHabilitado && scope === 'todas') {
        scopeSelect.value = 'nenhuma';
    }

    if (scope !== 'selecionadas' && empresasSelect) {
        Array.from(empresasSelect.options || []).forEach((opt) => {
            opt.selected = false;
        });
    }
}

function sincronizarPermissoesAppEmpresa() {
    const operar = document.getElementById('pode_operar_app_empresa');
    const admin = document.getElementById('pode_admin_app_empresa');
    const exclusivo = document.getElementById('acesso_apenas_app_empresa');
    const scopeSelect = document.getElementById('app_empresa_escopo_empresas');
    const appHabilitado = Boolean((operar && operar.checked) || (admin && admin.checked) || (exclusivo && exclusivo.checked));

    if (scopeSelect && appHabilitado && scopeSelect.value === 'nenhuma') {
        scopeSelect.value = 'todas';
    }

    if (admin && admin.checked && operar) {
        operar.checked = true;
    }

    toggleAppEmpresaScopeFields();
}

document.addEventListener('DOMContentLoaded', function() {
    ['pode_operar_app_empresa', 'pode_admin_app_empresa', 'acesso_apenas_app_empresa'].forEach((id) => {
        const el = document.getElementById(id);
        if (el) {
            el.addEventListener('change', sincronizarPermissoesAppEmpresa);
        }
    });
    const perfilFoodSelect = document.getElementById('perfil_food_id');
    if (perfilFoodSelect) {
        perfilFoodSelect.addEventListener('change', function() {
            perfilFoodSelect.dataset.autoSuggested = '0';
        });
    }
    const setorSelect = document.getElementById('setor_acesso_id');
    if (setorSelect) {
        setorSelect.addEventListener('change', function() {
            setorSelect.dataset.autoSuggested = '0';
        });
    }
    const perfilSetorialSelect = document.getElementById('perfil_acesso_setorial_id');
    if (perfilSetorialSelect) {
        perfilSetorialSelect.addEventListener('change', function() {
            perfilSetorialSelect.dataset.autoSuggested = '0';
        });
    }
    toggleAppEmpresaScopeFields();
    sincronizarModoAppEmpresaExclusivo();
    preencherDadosFuncionario();
    window.addEventListener('beforeunload', function() {
        encerrarCameraReferenciaFacial(false);
    });
});
</script>
</div>
{% endblock %}