{% extends "base.html" %}

{% block title %}Registros de Ponto{% endblock %}

{% block extra_css %}
<style>
.rh-gaveta-header {
    gap: .5rem;
}

.rh-gaveta-header .filtros-rapidos {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

#registrosPorDiaAccordion .accordion-button {
    font-weight: 600;
    background: #f8fafc;
}

#registrosPorDiaAccordion .accordion-button:not(.collapsed) {
    background: #eef4ff;
    color: #0d6efd;
}

@media (max-width: 768px) {
    .rh-gaveta-header {
        flex-direction: column;
        align-items: stretch !important;
    }

    .rh-gaveta-header .input-group {
        max-width: 100% !important;
    }

    .rh-gaveta-header .filtros-rapidos .form-select {
        width: 100% !important;
        max-width: 100% !important;
    }

    #registrosPorDiaAccordion .accordion-button {
        padding: .7rem .8rem;
        font-size: .92rem;
    }

    #registrosPorDiaAccordion table {
        font-size: .82rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="rh-page-shell">
<div class="rh-page-hero">
    <div class="rh-page-hero-title">
        <span class="rh-page-hero-eyebrow">RH • Batidas e ajustes</span>
        <h1 class="h2"><i class="bi bi-clock-history"></i> Registros de Ponto</h1>
        <p class="rh-page-hero-subtitle">Consulte o histórico, faça lançamentos manuais e trate importações offline mantendo a trilha operacional bem organizada.</p>
    </div>
    <div class="rh-page-hero-actions">
        <button type="button" class="btn btn-outline-dark" onclick="capeVoltarOu('{{ url_for('rh_ponto_espelho_mensal') }}')">
            <i class="bi bi-arrow-left"></i> Voltar
        </button>
        <a href="{{ url_for('rh_ponto_espelho_mensal', competencia=competencia_label, funcionario_id=funcionario_id) }}" class="btn btn-primary">
            <i class="bi bi-calendar3"></i> Resumo da competência
        </a>
        <a href="{{ url_for('rh_ponto_retificacoes') }}" class="btn btn-outline-warning">
            <i class="bi bi-clipboard-check"></i> Retificações
            {% if pendentes_retificacao and pendentes_retificacao > 0 %}
                <span class="badge bg-danger ms-1">{{ pendentes_retificacao }}</span>
            {% endif %}
        </a>
        <a href="{{ url_for('rh_configuracoes') }}" class="btn btn-outline-secondary">
            <i class="bi bi-sliders"></i> Escala / Banco de Horas
        </a>
        <a href="{{ url_for('rh_escalas_trabalho') }}" class="btn btn-outline-primary">
            <i class="bi bi-calendar-week"></i> Escalas
        </a>
        <a href="{{ url_for('rh_ponto_justificativas') }}" class="btn btn-outline-secondary">
            <i class="bi bi-journal-check"></i> Justificativas
        </a>
        <a href="{{ url_for('rh_banco_horas') }}" class="btn btn-outline-warning">
            <i class="bi bi-clock-history"></i> Banco Horas
        </a>
        <a href="{{ url_for('rh_funcionarios') }}" class="btn btn-outline-secondary">
            <i class="bi bi-people"></i> Funcionários
        </a>
    </div>
</div>

<div class="alert alert-light border rh-context-alert">
    <div><strong>Empresa:</strong> {{ empresa.nome_fantasia or empresa.razao_social or empresa.nome }}</div>
    <div class="small text-muted mt-1">URL pública atual: <a href="{{ url_publica }}" target="_blank">{{ url_publica }}</a></div>
</div>

{% if importacao_ultima %}
<div class="alert alert-info border shadow-sm">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-2">
        <div>
            <strong><i class="bi bi-cloud-arrow-down"></i> Última importação manual</strong>
            <div class="small text-muted">Arquivo: {{ importacao_ultima.arquivo or '-' }} • executada em {{ importacao_ultima.executado_em or '-' }}</div>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <span class="badge bg-success">Criados {{ importacao_ultima.criados or 0 }}</span>
            <span class="badge bg-secondary">Duplicados {{ importacao_ultima.duplicados or 0 }}</span>
            <span class="badge bg-warning text-dark">Ignorados {{ importacao_ultima.ignorados or 0 }}</span>
        </div>
    </div>
    {% if importacao_ultima.erros %}
        <ul class="small text-muted mt-2 mb-0 ps-3">
            {% for erro in importacao_ultima.erros[:8] %}
                <li>{{ erro }}</li>
            {% endfor %}
        </ul>
    {% endif %}
</div>
{% endif %}

{% if competencia_fechada %}
<div class="alert alert-warning rh-context-alert">
    <i class="bi bi-lock-fill"></i>
    Competência <strong>{{ competencia_label }}</strong> fechada: novos registros e retificações desta competência ficam bloqueados.
</div>
{% endif %}

<div class="card mb-3 rh-filter-card">
    <div class="card-body">
        <form class="rh-filter-form row g-3 align-items-end" method="GET">
            <div class="col-md-3">
                <label class="form-label">Data</label>
                <input type="date" class="form-control" name="data" value="{{ data_filtro.strftime('%Y-%m-%d') }}">
            </div>
            <div class="col-md-5">
                <label class="form-label">Funcionário</label>
                <select class="form-select" name="funcionario_id">
                    <option value="">Todos</option>
                    {% for f in funcionarios %}
                        <option value="{{ f.id }}" {% if funcionario_id == f.id %}selected{% endif %}>{{ f.nome }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4 rh-filter-actions">
                <button class="btn btn-primary" type="submit"><i class="bi bi-search"></i> Filtrar</button>
                <a class="btn btn-outline-secondary" href="{{ url_for('rh_ponto_registros') }}"><i class="bi bi-x-circle"></i> Limpar</a>
            </div>
        </form>
    </div>
</div>

<div class="card mb-3 rh-list-card">
    <div class="card-header d-flex justify-content-between align-items-center rh-list-header">
        <strong><i class="bi bi-plus-circle"></i> Lançamento manual de ponto (RH)</strong>
        <small class="text-muted">Novo registro com justificativa obrigatória</small>
    </div>
    <div class="card-body">
        <form class="row g-2" method="POST" action="{{ url_for('rh_ponto_registro_manual_novo') }}">
            <div class="col-md-3">
                <label class="form-label">Funcionário</label>
                <select class="form-select" name="funcionario_id" required>
                    <option value="">Selecione...</option>
                    {% for f in funcionarios %}
                        <option value="{{ f.id }}" {% if funcionario_id == f.id %}selected{% endif %}>{{ f.nome }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Tipo</label>
                <select class="form-select" name="tipo" required>
                    <option value="entrada">Entrada</option>
                    <option value="pausa_inicio">Início pausa</option>
                    <option value="pausa_fim">Fim pausa</option>
                    <option value="saida">Saída</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Data/Hora</label>
                <input type="datetime-local" class="form-control" name="data_hora" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">Justificativa</label>
                <input type="text" class="form-control" name="justificativa" minlength="8" maxlength="255" required placeholder="Ex.: Esquecimento de registro na portaria.">
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-save"></i> Novo lançamento manual
                </button>
            </div>
        </form>
    </div>
</div>

<div class="card mb-3 rh-list-card">
    <div class="card-header d-flex justify-content-between align-items-center rh-list-header">
        <strong><i class="bi bi-upload"></i> Importação manual do app empresa</strong>
        <small class="text-muted">Use quando o cliente ficou sem rede e precisou operar offline.</small>
    </div>
    <div class="card-body">
        <form class="row g-2" method="POST" action="{{ url_for('rh_ponto_registros_importar') }}" enctype="multipart/form-data">
            <div class="col-md-6">
                <label class="form-label">Arquivo exportado pelo app empresa</label>
                <input type="file" class="form-control" name="arquivo_importacao" accept=".json,application/json" required>
                <div class="form-text">Formato esperado: arquivo JSON gerado por “Exportar registros” no CapePonto Empresa.</div>
            </div>
            <div class="col-md-6">
                <label class="form-label">Observação da importação</label>
                <input type="text" class="form-control" name="observacao_importacao" maxlength="255" placeholder="Ex.: contingência de internet na loja.">
                <div class="form-text">Essa observação entra no histórico dos registros importados.</div>
            </div>
            <div class="col-12 d-flex gap-2 flex-wrap">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-cloud-arrow-down"></i> Importar registros offline
                </button>
                <span class="small text-muted align-self-center">A rotina ignora duplicados por protocolo/UUID e tenta inferir a sequência Entrada → Pausa → Retorno → Saída.</span>
            </div>
        </form>
    </div>
</div>

<div class="card rh-list-card">
    <div class="card-header d-flex flex-wrap gap-2 align-items-center justify-content-between rh-gaveta-header rh-list-header">
        <strong><i class="bi bi-list-ul"></i> Histórico de registros</strong>
        <div class="filtros-rapidos">
            <div class="input-group" style="max-width: 360px;">
                <span class="input-group-text"><i class="bi bi-search"></i></span>
                <input
                    type="text"
                    class="form-control"
                    id="filtroBuscaRegistros"
                    placeholder="Buscar por nome, tipo, origem, status, IP..."
                >
            </div>
            <select class="form-select" id="filtroTipoRegistros" style="max-width: 190px;">
                <option value="todos">Tipo: Todos</option>
                <option value="entrada">Entrada</option>
                <option value="pausa_inicio">Início pausa</option>
                <option value="pausa_fim">Fim pausa</option>
                <option value="saida">Saída</option>
            </select>
            <select class="form-select" id="filtroStatusRegistros" style="max-width: 170px;">
                <option value="todos">Status: Todos</option>
                <option value="ativo">Ativo</option>
                <option value="invalidado">Invalidado</option>
            </select>
            <button type="button" class="btn btn-outline-secondary" id="btnLimparFiltrosRegistros">
                <i class="bi bi-x-circle"></i> Limpar
            </button>
        </div>
    </div>
    <div class="card-body">
        <div id="registrosPorDiaAccordion" class="accordion"></div>
        <div id="registrosVazioMsg" class="text-center text-muted py-3 d-none">Nenhum registro encontrado para o filtro selecionado.</div>

        <div id="registrosFonteTabela" class="d-none">
            <div class="table-responsive">
                <table class="table table-sm table-hover mb-0" id="tabelaRegistrosPonto">
                    <thead>
                        <tr>
                            <th>Data/Hora</th>
                            <th>Funcionário</th>
                            <th>Tipo</th>
                            <th>Origem</th>
                            <th>Status</th>
                            <th>Localização</th>
                            <th>Hash</th>
                            <th>IP</th>
                            <th>Foto</th>
                            <th>Ações RH</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for r in registros %}
                        {% set funcionario_nome = (r.funcionario.nome if r.funcionario else '-') %}
                        {% set tipo_txt = (r.tipo.replace('_', ' ') if r.tipo else '-') %}
                        {% set status_txt = (r.status_registro or 'ativo') %}
                        {% set origem_txt = (r.origem or '-') %}
                        {% set data_dia_key = (r.data_hora.strftime('%Y-%m-%d') if r.data_hora else 'sem-data') %}
                        {% set data_dia_label = (r.data_hora.strftime('%d/%m/%Y') if r.data_hora else 'Sem data') %}
                        <tr
                            data-dia-key="{{ data_dia_key }}"
                            data-dia-label="{{ data_dia_label }}"
                            data-tipo="{{ (r.tipo or '')|lower }}"
                            data-status="{{ (r.status_registro or 'ativo')|lower }}"
                            data-search-text="{{ (funcionario_nome ~ ' ' ~ tipo_txt ~ ' ' ~ origem_txt ~ ' ' ~ status_txt ~ ' ' ~ (r.ip_address or '') ~ ' ' ~ (r.hash_registro or ''))|lower|e }}"
                        >
                            <td>{{ r.data_hora.strftime('%d/%m/%Y %H:%M:%S') if r.data_hora else '-' }}</td>
                            <td>{{ funcionario_nome }}</td>
                            <td><span class="badge bg-primary">{{ tipo_txt }}</span></td>
                            <td>{{ origem_txt }}</td>
                            <td>
                                {% if r.status_registro == 'invalidado' %}
                                    <span class="badge bg-danger">invalidado</span>
                                {% else %}
                                    <span class="badge bg-success">ativo</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if r.latitude is not none and r.longitude is not none %}
                                    <div class="d-flex flex-column gap-1">
                                        <span class="badge bg-success-subtle text-success-emphasis border">GPS OK</span>
                                        <small class="text-muted">{{ '%.6f'|format(r.latitude) }}, {{ '%.6f'|format(r.longitude) }}</small>
                                        <a
                                            class="btn btn-sm btn-outline-success"
                                            href="https://www.google.com/maps?q={{ r.latitude }},{{ r.longitude }}"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                        >
                                            <i class="bi bi-geo-alt"></i> Ver mapa
                                        </a>
                                        {% if r.endereco_aproximado %}
                                            <small class="text-muted">{{ r.endereco_aproximado }}</small>
                                        {% endif %}
                                    </div>
                                {% else %}
                                    <span class="badge bg-light text-dark border">sem localização</span>
                                {% endif %}
                            </td>
                            <td><small class="text-muted">{{ (r.hash_registro or '-')[:12] }}{% if r.hash_registro %}...{% endif %}</small></td>
                            <td><small>{{ r.ip_address or '-' }}</small></td>
                            <td>
                                {% if r.imagem_base64 %}
                                    <button
                                        type="button"
                                        class="btn btn-sm btn-outline-primary btn-ver-foto-batida"
                                        data-imagem-base64="{{ r.imagem_base64 | e }}"
                                    >
                                        Ver
                                    </button>
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if r.status_registro == 'invalidado' %}
                                    <span class="text-muted">Sem ações</span>
                                {% else %}
                                    <div class="d-flex flex-wrap gap-1">
                                        <button
                                            type="button"
                                            class="btn btn-sm btn-outline-warning"
                                            onclick="abrirEditarRegistro({{ r.id }}, '{{ r.data_hora.strftime('%Y-%m-%dT%H:%M') if r.data_hora else '' }}', '{{ r.tipo }}')"
                                            title="Editar registro"
                                        >
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button
                                            type="button"
                                            class="btn btn-sm btn-outline-danger"
                                            onclick="abrirExcluirRegistro({{ r.id }})"
                                            title="Excluir (invalidar)"
                                        >
                                            <i class="bi bi-trash"></i>
                                        </button>
                                        <button
                                            type="button"
                                            class="btn btn-sm btn-outline-secondary"
                                            onclick="abrirMoverRegistro({{ r.id }}, -5)"
                                            title="Mover 5 min para a esquerda"
                                        >
                                            <i class="bi bi-arrow-left"></i>
                                        </button>
                                        <button
                                            type="button"
                                            class="btn btn-sm btn-outline-secondary"
                                            onclick="abrirMoverRegistro({{ r.id }}, 5)"
                                            title="Mover 5 min para a direita"
                                        >
                                            <i class="bi bi-arrow-right"></i>
                                        </button>
                                    </div>
                                {% endif %}
                            </td>
                        </tr>
                        {% else %}
                        <tr data-sem-registros="1"><td colspan="10" class="text-center text-muted py-4">Nenhum registro encontrado para o filtro selecionado.</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</div>

<div class="modal fade cape-modal-standard cape-modal-detail" id="modalAjusteRegistro" tabindex="-1" aria-labelledby="modalAjusteRegistroLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalAjusteRegistroLabel"><i class="bi bi-sliders"></i> Ajustar registro</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="ajuste_registro_acao" value="editar">
                <input type="hidden" id="ajuste_registro_id" value="">
                <input type="hidden" id="ajuste_registro_delta" value="">

                <div id="bloco_ajuste_data_hora" class="mb-3">
                    <label class="form-label">Data/Hora</label>
                    <input type="datetime-local" class="form-control" id="ajuste_registro_data_hora">
                </div>

                <div id="bloco_ajuste_tipo" class="mb-3">
                    <label class="form-label">Tipo</label>
                    <select class="form-select" id="ajuste_registro_tipo">
                        <option value="entrada">Entrada</option>
                        <option value="pausa_inicio">Início pausa</option>
                        <option value="pausa_fim">Fim pausa</option>
                        <option value="saida">Saída</option>
                    </select>
                </div>

                <div id="bloco_ajuste_delta" class="mb-3 d-none">
                    <label class="form-label">Deslocamento</label>
                    <input type="text" class="form-control" id="ajuste_registro_delta_label" readonly>
                </div>

                <div class="mb-1">
                    <label class="form-label">Justificativa</label>
                    <input
                        type="text"
                        class="form-control"
                        id="ajuste_registro_justificativa"
                        minlength="8"
                        maxlength="255"
                        placeholder="Ex.: Ajuste manual RH"
                        required
                    >
                </div>
                <small class="text-muted">Mínimo de 8 caracteres.</small>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="btn_confirmar_ajuste_registro">Confirmar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade cape-modal-standard cape-modal-detail" id="modalFotoBatida" tabindex="-1" aria-labelledby="modalFotoBatidaLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFotoBatidaLabel"><i class="bi bi-image"></i> Foto da Batida</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body text-center bg-light">
                <img id="imgFotoBatida" src="" alt="Foto da batida" class="img-fluid rounded border" style="max-height: 70vh;">
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    (function () {
        function enviarFormPost(action, campos) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = action;

            Object.entries(campos || {}).forEach(([k, v]) => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = k;
                input.value = String(v ?? '');
                form.appendChild(input);
            });

            document.body.appendChild(form);
            form.submit();
        }

        function normalizarTipoBatida(valor) {
            const txt = String(valor || '').trim().toLowerCase();
            const mapa = {
                'entrada': 'entrada',
                'inicio pausa': 'pausa_inicio',
                'início pausa': 'pausa_inicio',
                'pausa inicio': 'pausa_inicio',
                'pausa início': 'pausa_inicio',
                'pausa_inicio': 'pausa_inicio',
                'fim pausa': 'pausa_fim',
                'pausa fim': 'pausa_fim',
                'pausa_fim': 'pausa_fim',
                'saida': 'saida',
                'saída': 'saida',
            };
            return mapa[txt] || txt || 'entrada';
        }

        function limparVestigiosModal() {
            try {
                document.querySelectorAll('.modal-backdrop').forEach((el) => el.remove());
                document.body.classList.remove('modal-open');
                document.body.style.removeProperty('padding-right');
                document.body.style.removeProperty('overflow');
            } catch (_) {
                // sem ação
            }
        }

        const modalAjusteEl = document.getElementById('modalAjusteRegistro');
        const modalAjuste = (modalAjusteEl && window.bootstrap && bootstrap.Modal)
            ? bootstrap.Modal.getOrCreateInstance(modalAjusteEl)
            : null;

        const elAcao = document.getElementById('ajuste_registro_acao');
        const elId = document.getElementById('ajuste_registro_id');
        const elDataHora = document.getElementById('ajuste_registro_data_hora');
        const elTipo = document.getElementById('ajuste_registro_tipo');
        const elDelta = document.getElementById('ajuste_registro_delta');
        const elDeltaLabel = document.getElementById('ajuste_registro_delta_label');
        const elJustificativa = document.getElementById('ajuste_registro_justificativa');
        const blocoDataHora = document.getElementById('bloco_ajuste_data_hora');
        const blocoTipo = document.getElementById('bloco_ajuste_tipo');
        const blocoDelta = document.getElementById('bloco_ajuste_delta');
        const btnConfirmarAjuste = document.getElementById('btn_confirmar_ajuste_registro');
        const tituloModalAjuste = document.getElementById('modalAjusteRegistroLabel');

        function configurarModoAjuste(modo) {
            if (!elAcao) return;
            elAcao.value = modo;

            const isEditar = modo === 'editar';
            const isMover = modo === 'mover';

            if (blocoDataHora) blocoDataHora.classList.toggle('d-none', !isEditar);
            if (blocoTipo) blocoTipo.classList.toggle('d-none', !isEditar);
            if (blocoDelta) blocoDelta.classList.toggle('d-none', !isMover);

            if (tituloModalAjuste) {
                if (modo === 'editar') tituloModalAjuste.innerHTML = '<i class="bi bi-pencil-square"></i> Editar registro';
                else if (modo === 'excluir') tituloModalAjuste.innerHTML = '<i class="bi bi-trash"></i> Invalidar registro';
                else tituloModalAjuste.innerHTML = '<i class="bi bi-arrow-left-right"></i> Mover registro';
            }

            if (btnConfirmarAjuste) {
                if (modo === 'excluir') {
                    btnConfirmarAjuste.className = 'btn btn-danger';
                    btnConfirmarAjuste.textContent = 'Invalidar registro';
                } else if (modo === 'mover') {
                    btnConfirmarAjuste.className = 'btn btn-primary';
                    btnConfirmarAjuste.textContent = 'Confirmar deslocamento';
                } else {
                    btnConfirmarAjuste.className = 'btn btn-primary';
                    btnConfirmarAjuste.textContent = 'Salvar ajuste';
                }
            }
        }

        window.abrirEditarRegistro = function (id, dataHoraAtual, tipoAtual) {
            if (!modalAjuste || !elId || !elDataHora || !elTipo || !elJustificativa) return;
            configurarModoAjuste('editar');
            elId.value = String(id || '').trim();
            elDataHora.value = String(dataHoraAtual || '').trim();
            elTipo.value = ['entrada', 'pausa_inicio', 'pausa_fim', 'saida'].includes(normalizarTipoBatida(tipoAtual))
                ? normalizarTipoBatida(tipoAtual)
                : 'entrada';
            elJustificativa.value = 'Ajuste manual RH';
            modalAjuste.show();
            setTimeout(() => elJustificativa.focus(), 120);
        };

        window.abrirExcluirRegistro = function (id) {
            if (!modalAjuste || !elId || !elJustificativa) return;
            configurarModoAjuste('excluir');
            elId.value = String(id || '').trim();
            if (elDelta) elDelta.value = '';
            elJustificativa.value = 'Registro indevido';
            modalAjuste.show();
            setTimeout(() => elJustificativa.focus(), 120);
        };

        window.abrirMoverRegistro = function (id, delta) {
            if (!modalAjuste || !elId || !elDelta || !elDeltaLabel || !elJustificativa) return;
            const deltaNum = Number(delta || 0);
            const deltaTxt = `${deltaNum > 0 ? '+' : ''}${deltaNum} min`;
            configurarModoAjuste('mover');
            elId.value = String(id || '').trim();
            elDelta.value = String(deltaNum);
            elDeltaLabel.value = deltaTxt;
            elJustificativa.value = `Ajuste de horário ${deltaTxt}`;
            modalAjuste.show();
            setTimeout(() => elJustificativa.focus(), 120);
        };

        function confirmarAjusteRegistro() {
            const acao = String(elAcao?.value || 'editar').trim();
            const id = String(elId?.value || '').trim();
            const justificativa = String(elJustificativa?.value || '').trim();

            if (!id) {
                alert('Registro inválido para ajuste.');
                return;
            }
            if (justificativa.length < 8) {
                alert('Justificativa muito curta. Informe no mínimo 8 caracteres.');
                return;
            }

            if (modalAjuste) modalAjuste.hide();

            if (acao === 'editar') {
                const dataHora = String(elDataHora?.value || '').trim();
                const tipo = normalizarTipoBatida(elTipo?.value || 'entrada');
                if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(dataHora)) {
                    alert('Data/hora inválida. Use o formato YYYY-MM-DDTHH:MM.');
                    return;
                }
                if (!['entrada', 'pausa_inicio', 'pausa_fim', 'saida'].includes(tipo)) {
                    alert('Tipo inválido.');
                    return;
                }
                enviarFormPost(`/rh/ponto/registro/${id}/editar`, {
                    data_hora: dataHora,
                    tipo: tipo,
                    justificativa: justificativa,
                });
                return;
            }

            if (acao === 'excluir') {
                enviarFormPost(`/rh/ponto/registro/${id}/excluir`, {
                    justificativa: justificativa,
                });
                return;
            }

            const delta = String(elDelta?.value || '').trim();
            if (!delta || Number(delta) === 0) {
                alert('Deslocamento inválido.');
                return;
            }
            enviarFormPost(`/rh/ponto/registro/${id}/mover`, {
                delta_minutos: delta,
                justificativa: justificativa,
            });
        }

        if (btnConfirmarAjuste) {
            btnConfirmarAjuste.addEventListener('click', confirmarAjusteRegistro);
        }

        if (elJustificativa) {
            elJustificativa.addEventListener('keydown', function (ev) {
                if (ev.key === 'Enter') {
                    ev.preventDefault();
                    confirmarAjusteRegistro();
                }
            });
        }

        if (modalAjusteEl) {
            modalAjusteEl.addEventListener('hidden.bs.modal', limparVestigiosModal);
            window.addEventListener('pageshow', limparVestigiosModal);
        }

        function montarGavetasPorDia() {
            const tabela = document.getElementById('tabelaRegistrosPonto');
            const accordion = document.getElementById('registrosPorDiaAccordion');
            const vazio = document.getElementById('registrosVazioMsg');
            if (!tabela || !accordion || !vazio) return;

            const linhas = Array.from(tabela.querySelectorAll('tbody tr')).filter((tr) => !tr.hasAttribute('data-sem-registros'));
            if (!linhas.length) {
                accordion.innerHTML = '';
                vazio.classList.remove('d-none');
                return;
            }

            const grupos = new Map();
            linhas.forEach((linha) => {
                const chave = linha.getAttribute('data-dia-key') || 'sem-data';
                const label = linha.getAttribute('data-dia-label') || 'Sem data';
                if (!grupos.has(chave)) {
                    grupos.set(chave, { label, rows: [] });
                }
                grupos.get(chave).rows.push(linha);
            });

            accordion.innerHTML = '';
            let idx = 0;
            grupos.forEach((grupo, chave) => {
                idx += 1;
                const itemId = `gavetaDia${idx}`;
                const headingId = `heading${itemId}`;
                const collapseId = `collapse${itemId}`;

                const item = document.createElement('div');
                item.className = 'accordion-item mb-2 border rounded';
                item.setAttribute('data-dia-key', chave);

                const header = document.createElement('h2');
                header.className = 'accordion-header';
                header.id = headingId;

                const botao = document.createElement('button');
                botao.className = `accordion-button ${idx === 1 ? '' : 'collapsed'}`;
                botao.type = 'button';
                botao.setAttribute('data-bs-toggle', 'collapse');
                botao.setAttribute('data-bs-target', `#${collapseId}`);
                botao.setAttribute('aria-expanded', idx === 1 ? 'true' : 'false');
                botao.setAttribute('aria-controls', collapseId);
                botao.innerHTML = `
                    <div class="d-flex w-100 align-items-center justify-content-between pe-2">
                        <span><i class="bi bi-calendar-day"></i> ${grupo.label}</span>
                        <span class="badge bg-primary" data-dia-count>${grupo.rows.length}</span>
                    </div>
                `;

                header.appendChild(botao);

                const collapse = document.createElement('div');
                collapse.id = collapseId;
                collapse.className = `accordion-collapse collapse ${idx === 1 ? 'show' : ''}`;
                collapse.setAttribute('aria-labelledby', headingId);

                const body = document.createElement('div');
                body.className = 'accordion-body p-0';

                const wrapTabela = document.createElement('div');
                wrapTabela.className = 'table-responsive';

                const tabelaDia = document.createElement('table');
                tabelaDia.className = 'table table-sm table-hover mb-0';
                tabelaDia.innerHTML = `
                    <thead>
                        <tr>
                            <th>Data/Hora</th>
                            <th>Funcionário</th>
                            <th>Tipo</th>
                            <th>Origem</th>
                            <th>Status</th>
                            <th>Localização</th>
                            <th>Hash</th>
                            <th>IP</th>
                            <th>Foto</th>
                            <th>Ações RH</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                `;

                const tbodyDia = tabelaDia.querySelector('tbody');
                grupo.rows.forEach((linha) => tbodyDia.appendChild(linha));

                wrapTabela.appendChild(tabelaDia);
                body.appendChild(wrapTabela);
                collapse.appendChild(body);

                item.appendChild(header);
                item.appendChild(collapse);
                accordion.appendChild(item);
            });

            vazio.classList.add('d-none');
        }

        function aplicarFiltroBuscaRegistros() {
            const input = document.getElementById('filtroBuscaRegistros');
            const filtroTipo = document.getElementById('filtroTipoRegistros');
            const filtroStatus = document.getElementById('filtroStatusRegistros');
            const termo = String(input?.value || '').trim().toLowerCase();
            const tipoSelecionado = String(filtroTipo?.value || 'todos').trim().toLowerCase();
            const statusSelecionado = String(filtroStatus?.value || 'todos').trim().toLowerCase();
            const accordion = document.getElementById('registrosPorDiaAccordion');
            const vazio = document.getElementById('registrosVazioMsg');
            if (!accordion || !vazio) return;

            let totalVisivel = 0;

            accordion.querySelectorAll('.accordion-item').forEach((item) => {
                let visiveisNoDia = 0;
                item.querySelectorAll('tbody tr[data-search-text]').forEach((linha) => {
                    const texto = String(linha.getAttribute('data-search-text') || '').toLowerCase();
                    const tipoLinha = String(linha.getAttribute('data-tipo') || '').toLowerCase();
                    const statusLinha = String(linha.getAttribute('data-status') || '').toLowerCase();

                    const passaBusca = !termo || texto.includes(termo);
                    const passaTipo = (tipoSelecionado === 'todos') || (tipoLinha === tipoSelecionado);
                    const passaStatus = (statusSelecionado === 'todos') || (statusLinha === statusSelecionado);
                    const mostrar = passaBusca && passaTipo && passaStatus;

                    linha.style.display = mostrar ? '' : 'none';
                    if (mostrar) visiveisNoDia += 1;
                });

                const badge = item.querySelector('[data-dia-count]');
                if (badge) badge.textContent = String(visiveisNoDia);

                item.style.display = visiveisNoDia > 0 ? '' : 'none';
                totalVisivel += visiveisNoDia;
            });

            vazio.classList.toggle('d-none', totalVisivel > 0);
        }

        montarGavetasPorDia();
        aplicarFiltroBuscaRegistros();

        const inputBusca = document.getElementById('filtroBuscaRegistros');
        const filtroTipo = document.getElementById('filtroTipoRegistros');
        const filtroStatus = document.getElementById('filtroStatusRegistros');
        const btnLimpar = document.getElementById('btnLimparFiltrosRegistros');

        if (inputBusca) {
            inputBusca.addEventListener('input', aplicarFiltroBuscaRegistros);
        }
        if (filtroTipo) {
            filtroTipo.addEventListener('change', aplicarFiltroBuscaRegistros);
        }
        if (filtroStatus) {
            filtroStatus.addEventListener('change', aplicarFiltroBuscaRegistros);
        }
        if (btnLimpar) {
            btnLimpar.addEventListener('click', function () {
                if (inputBusca) inputBusca.value = '';
                if (filtroTipo) filtroTipo.value = 'todos';
                if (filtroStatus) filtroStatus.value = 'todos';
                aplicarFiltroBuscaRegistros();
            });
        }

        function normalizarDataUrl(valor) {
            const v = String(valor || '').trim();
            if (!v) return '';
            if (v.startsWith('data:image')) return v;
            return `data:image/jpeg;base64,${v}`;
        }

        function abrirFotoBatida(rawBase64) {
            const src = normalizarDataUrl(rawBase64);
            if (!src) {
                alert('Imagem da batida indisponível.');
                return;
            }

            const img = document.getElementById('imgFotoBatida');
            if (img) img.src = src;

            const modalEl = document.getElementById('modalFotoBatida');
            if (modalEl && window.bootstrap && bootstrap.Modal) {
                bootstrap.Modal.getOrCreateInstance(modalEl).show();
            } else {
                window.open(src, '_blank');
            }
        }

        document.addEventListener('click', function (event) {
            const btn = event.target.closest('.btn-ver-foto-batida');
            if (!btn) return;
            const raw = btn.getAttribute('data-imagem-base64') || '';
            abrirFotoBatida(raw);
        });
    })();
</script>
{% endblock %}