{% extends "base.html" %}

{% block title %}Banco de Horas RH{% endblock %}

{% block extra_css %}
<style>
.rh-tooltip-black .tooltip-inner {
    color: #000 !important;
}
.ajuda-opcao {
    color: #000;
    text-decoration: none;
    line-height: 1;
    vertical-align: middle;
}
</style>
{% endblock %}

{% block content %}
{% set competencia_exibicao = (competencia[5:7] ~ '/' ~ competencia[:4]) if competencia and competencia|length >= 7 else competencia %}
<div class="rh-page-shell">
<div class="rh-page-hero">
    <div class="rh-page-hero-main">
        <h1 class="h2 rh-page-title">
            <span class="rh-page-title-icon"><i class="bi bi-clock-history"></i></span>
            <span>Banco de horas</span>
        </h1>
        <p class="rh-page-subtitle">Consulte saldos, execute apuração e lance ajustes manuais no padrão operacional do RH.</p>
    </div>
    <div class="rh-page-actions">
        <a href="{{ url_for('rh_escalas_trabalho', empresa_id=empresa.id) }}" class="btn btn-outline-secondary"><i class="bi bi-calendar-week"></i> Abrir escalas</a>
        <a href="{{ url_for('rh_ponto_justificativas') }}" class="btn btn-outline-secondary"><i class="bi bi-journal-check"></i> Abrir justificativas</a>
    </div>
</div>

<div class="alert alert-light border">
    <strong>Empresa em consulta:</strong> {{ empresa.nome_fantasia or empresa.razao_social or empresa.nome }}
    <span class="ms-2">• <strong>Competência:</strong> {{ competencia_exibicao }}</span>
    <span class="ms-2">• <strong>Status:</strong>
        {% if fechamento %}
            <span class="badge bg-danger">Fechada</span>
        {% else %}
            <span class="badge bg-success">Aberta</span>
        {% endif %}
    </span>
</div>

<div class="card mb-3 rh-filter-card">
    <div class="card-body">
        <form method="GET" class="row g-3 align-items-end rh-filter-form">
            <div class="col-md-4">
                <label class="form-label">Empresa
                    <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-custom-class="rh-tooltip-black" data-bs-placement="top" title="Permite consultar o banco de horas de outra empresa ativa sem precisar trocar a empresa geral do sistema.">
                        <i class="bi bi-question-circle"></i>
                    </button>
                </label>
                <select class="form-select" name="empresa_id">
                    {% for emp in empresas_disponiveis %}
                        <option value="{{ emp.id }}" {% if empresa_id_selecionada == emp.id %}selected{% endif %}>{{ emp.nome_fantasia or emp.razao_social or emp.nome }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Competência
                    <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-custom-class="rh-tooltip-black" data-bs-placement="top" title="Define o mês da apuração. Quando usar: escolha a competência que deseja consultar ou ajustar.">
                        <i class="bi bi-question-circle"></i>
                    </button>
                </label>
                <input type="month" class="form-control" name="competencia" value="{{ competencia }}">
                <div class="form-text">Exibição operacional: {{ competencia_exibicao or 'MM/AAAA' }}.</div>
            </div>
            <div class="col-md-3">
                <label class="form-label">Funcionário
                    <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-custom-class="rh-tooltip-black" data-bs-placement="top" title="Filtra por colaborador específico. Quando usar: deixe em branco para ver todos os ativos.">
                        <i class="bi bi-question-circle"></i>
                    </button>
                </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-2 rh-filter-actions">
                <button class="btn btn-primary" type="submit"><i class="bi bi-search"></i> Consultar período</button>
                <a class="btn btn-outline-secondary" href="{{ url_for('rh_banco_horas', empresa_id=empresa.id) }}"><i class="bi bi-x-circle"></i> Limpar filtros</a>
            </div>
        </form>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header">
        <strong>Execução da apuração</strong>
        <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-custom-class="rh-tooltip-black" data-bs-placement="top" data-bs-html="true" title="<strong>Aberta:</strong> ainda pode ajustar.<br><strong>Fechada:</strong> competência encerrada para controle do mês.">
            <i class="bi bi-question-circle"></i>
        </button>
    </div>
    <div class="card-body">
        <div class="d-flex flex-wrap gap-2">
            <form method="POST" class="d-inline">
                <input type="hidden" name="acao" value="apurar_aberta">
                <input type="hidden" name="empresa_id" value="{{ empresa.id }}">
                <input type="hidden" name="competencia" value="{{ competencia }}">
                <input type="hidden" name="funcionario_id" value="{{ funcionario_id or '' }}">
                <button class="btn btn-outline-success" type="submit">
                    <i class="bi bi-play-circle"></i> Executar apuração aberta
                </button>
            </form>
            <form method="POST" class="d-inline" onsubmit="return confirm('Confirmar fechamento da apuração desta competência?');">
                <input type="hidden" name="acao" value="apurar_fechada">
                <input type="hidden" name="empresa_id" value="{{ empresa.id }}">
                <input type="hidden" name="competencia" value="{{ competencia }}">
                <input type="hidden" name="funcionario_id" value="{{ funcionario_id or '' }}">
                <button class="btn btn-outline-danger" type="submit">
                    <i class="bi bi-lock-fill"></i> Executar apuração fechada
                </button>
            </form>
        </div>
        <div class="small text-muted mt-2">
            A apuração lê o espelho de ponto do mês e recalcula o saldo da competência por funcionário.
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header"><strong>Lançamento manual</strong></div>
    <div class="card-body">
        <form method="POST" class="row g-2">
            <input type="hidden" name="acao" value="ajuste_manual">
            <input type="hidden" name="empresa_id" value="{{ empresa.id }}">
            <input type="hidden" name="competencia" value="{{ competencia }}">
            <div class="col-md-4">
                <label class="form-label">Funcionário</label>
                <select class="form-select" name="funcionario_id_ajuste" required>
                    <option value="">Selecione...</option>
                    {% for f in funcionarios %}
                        <option value="{{ f.id }}">{{ f.nome }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Tipo
                    <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-custom-class="rh-tooltip-black" data-bs-placement="top" title="Define o efeito do ajuste no saldo. Quando usar: Crédito soma horas, Débito abate horas.">
                        <i class="bi bi-question-circle"></i>
                    </button>
                </label>
                <select class="form-select" name="sinal_ajuste">
                    <option value="+">Crédito (+)</option>
                    <option value="-">Débito (-)</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">
                        Duração (HH:MM)
                    <i
                        class="bi bi-info-circle ms-1"
                        style="cursor: help; color: #000;"
                        aria-label="Ajuda de formato de horas"
                        data-bs-toggle="tooltip"
                        data-bs-custom-class="rh-tooltip-black"
                        data-bs-placement="top"
                        data-bs-html="true"
                            title="Use o formato <code>HH:MM</code>.<br>Digite só números se preferir:<br><code>130</code> =&gt; <code>01:30</code><br><code>00130</code> =&gt; <code>01:30</code><br>Use <code>-</code> para abatimento"
                    ></i>
                </label>
                <input
                    type="text"
                    class="form-control"
                    name="duracao_hhmm"
                        placeholder="Ex.: 01:30"
                        pattern="^[+-]?\d+:\d{2}$"
                    inputmode="numeric"
                    required
                >
                    <div class="form-text" style="color: #000;">Formato aceito: <code>HH:MM</code>. Exibição e lançamento seguem esse mesmo padrão no RH.</div>
                    <div class="form-text" style="color: #000;">Atalho: digitando só números, <code>130</code> vira <code>01:30</code> e <code>00130</code> vira <code>01:30</code>.</div>
                <label class="form-label mt-2 mb-1 small text-muted">Caixa de seleção rápida</label>
                <select class="form-select form-select-sm" id="atalhoDuracaoBancoHoras">
                    <option value="">Selecionar duração...</option>
                    <option value="__JORNADA__">Jornada do colaborador</option>
                    <option value="__MEIA__">Metade da jornada</option>
                    <option value="__UM_QUARTO__">25% da jornada</option>
                    <option value="__TRES_QUARTOS__">75% da jornada</option>
                    <option value="__INTERVALO__">Intervalo da escala</option>
                    <option value="00:15">00:15 • 15 min</option>
                    <option value="00:30">00:30 • 30 min</option>
                    <option value="01:00">01:00 • 1 hora</option>
                    <option value="01:30">01:30 • 1h30</option>
                    <option value="02:00">02:00 • 2 horas</option>
                    <option value="04:00">04:00 • 4 horas</option>
                    <option value="06:00">06:00 • 6 horas</option>
                    <option value="08:00">08:00 • 8 horas</option>
                </select>
                <div class="form-text" style="color: #000;">Ao escolher uma opção, o campo de duração é preenchido automaticamente.</div>
                <div class="form-text" style="color: #000;">Os atalhos usam a escala do funcionário selecionado; sem escala, usam a configuração padrão da empresa.</div>
            </div>
            <div class="col-md-3">
                <label class="form-label">Justificativa
                    <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-custom-class="rh-tooltip-black" data-bs-placement="top" title="Guarda o motivo do ajuste no histórico. Quando usar: selecione para facilitar conferência e auditoria.">
                        <i class="bi bi-question-circle"></i>
                    </button>
                </label>
                <select class="form-select" name="justificativa_tipo_id">
                    <option value="">(opcional)</option>
                    {% for j in justificativas %}
                        <option value="{{ j.id }}">{{ j.nome }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Data referência</label>
                <input type="date" class="form-control" name="data_referencia" value="{{ competencia }}-01">
            </div>
            <div class="col-md-3">
                <label class="form-label">Observação</label>
                <input type="text" class="form-control" name="observacao" maxlength="255" placeholder="Detalhe do ajuste (opcional)">
            </div>
            <div class="col-12">
                <div class="alert alert-light border py-2 mb-2 small">
                    <strong>Exemplos rápidos:</strong>
                    crédito de 2h = Tipo <code>Crédito (+)</code> + valor <code>02:00</code> •
                    abatimento de 1h30 = Tipo <code>Débito (-)</code> + valor <code>01:30</code> •
                    também pode informar direto no campo com sinal: <code>-01:30</code> (o sinal digitado no campo prevalece).
                </div>
                <button class="btn btn-warning" type="submit"><i class="bi bi-pencil-square"></i> Lançar ajuste</button>
            </div>
        </form>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header"><strong>Saldo por funcionário</strong></div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0">
                <thead>
                    <tr>
                        <th>Funcionário</th>
                        <th>Saldo (HH:MM)</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in resumo_funcionarios %}
                    <tr>
                        <td>{{ r.nome }}</td>
                        <td><span class="badge {% if (r.saldo_min or 0) >= 0 %}bg-success{% else %}bg-danger{% endif %}">{{ fmt_min(r.saldo_min or 0) }}</span></td>
                    </tr>
                    {% else %}
                    <tr><td colspan="2" class="text-center text-muted py-3">Sem funcionários ativos.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header"><strong>Lançamentos do período {{ competencia_exibicao }}</strong></div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0">
                <thead>
                    <tr>
                        <th>Data</th>
                        <th>Funcionário</th>
                        <th>Tipo</th>
                        <th>Status</th>
                        <th>Horas (HH:MM)</th>
                        <th>Saldo após (HH:MM)</th>
                        <th>Justificativa</th>
                        <th>Obs.</th>
                    </tr>
                </thead>
                <tbody>
                    {% for l in lancamentos %}
                    <tr>
                        <td>{{ l.data_criacao.strftime('%d/%m/%Y %H:%M') if l.data_criacao else '-' }}</td>
                        <td>{{ l.funcionario_nome }}</td>
                        <td><span class="badge bg-primary">{{ l.tipo_lancamento }}</span></td>
                        <td>
                            {% if l.status_apuracao == 'fechada' %}
                                <span class="badge bg-danger">fechada</span>
                            {% else %}
                                <span class="badge bg-success">aberta</span>
                            {% endif %}
                        </td>
                        <td>{{ fmt_min(l.minutos or 0) }}</td>
                        <td>{{ fmt_min(l.saldo_resultante_min or 0) }}</td>
                        <td>{{ l.justificativa_nome or '-' }}</td>
                        <td>{{ l.observacao or '-' }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="8" class="text-center text-muted py-3">Sem lançamentos para a competência.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="small text-muted mt-2">
    Neste módulo, toda duração é exibida no padrão <code>HH:MM</code> para evitar ambiguidade operacional.
</div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    (function () {
        if (window.bootstrap && window.bootstrap.Tooltip) {
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.forEach(function (el) {
                window.bootstrap.Tooltip.getOrCreateInstance(el);
            });
        }

        const campoDuracao = document.querySelector('input[name="duracao_hhmm"]');
        const seletorTipo = document.querySelector('select[name="sinal_ajuste"]');
        const seletorAtalhoDuracao = document.getElementById('atalhoDuracaoBancoHoras');
        const seletorFuncionarioAjuste = document.querySelector('select[name="funcionario_id_ajuste"]');
        const jornadasFuncionarios = {{ (jornadas_funcionarios or {})|tojson }};
        const intervalosFuncionarios = {{ (intervalos_funcionarios or {})|tojson }};
        const jornadaEmpresaMin = {{ jornada_empresa_min or 480 }};
        const intervaloEmpresaMin = {{ intervalo_empresa_min or 60 }};
        if (!campoDuracao) return;

        function formatarMinutosHHMM(minutos) {
            const total = Math.max(parseInt(minutos || 0, 10) || 0, 0);
            const horas = Math.floor(total / 60);
            const mins = total % 60;
            return `${String(horas).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
        }

        function obterJornadaBaseSelecionada() {
            const funcionarioId = String(seletorFuncionarioAjuste?.value || '').trim();
            const jornadaFuncionario = parseInt(jornadasFuncionarios[funcionarioId], 10);
            if (jornadaFuncionario > 0) return jornadaFuncionario;
            return parseInt(jornadaEmpresaMin, 10) || 480;
        }

        function obterIntervaloBaseSelecionado() {
            const funcionarioId = String(seletorFuncionarioAjuste?.value || '').trim();
            const intervaloFuncionario = parseInt(intervalosFuncionarios[funcionarioId], 10);
            if (intervaloFuncionario > 0) return intervaloFuncionario;
            return parseInt(intervaloEmpresaMin, 10) || 60;
        }

        function atualizarRotulosAtalhoDuracao() {
            if (!seletorAtalhoDuracao) return;
            const jornadaBase = obterJornadaBaseSelecionada();
            const meiaJornada = Math.max(Math.round(jornadaBase / 2), 1);
            const umQuarto = Math.max(Math.round(jornadaBase * 0.25), 1);
            const tresQuartos = Math.max(Math.round(jornadaBase * 0.75), 1);
            const intervaloBase = obterIntervaloBaseSelecionado();
            const opcaoJornada = seletorAtalhoDuracao.querySelector('option[value="__JORNADA__"]');
            const opcaoMeia = seletorAtalhoDuracao.querySelector('option[value="__MEIA__"]');
            const opcaoUmQuarto = seletorAtalhoDuracao.querySelector('option[value="__UM_QUARTO__"]');
            const opcaoTresQuartos = seletorAtalhoDuracao.querySelector('option[value="__TRES_QUARTOS__"]');
            const opcaoIntervalo = seletorAtalhoDuracao.querySelector('option[value="__INTERVALO__"]');
            if (opcaoJornada) {
                opcaoJornada.textContent = `Jornada do colaborador • ${formatarMinutosHHMM(jornadaBase)}`;
            }
            if (opcaoMeia) {
                opcaoMeia.textContent = `Metade da jornada • ${formatarMinutosHHMM(meiaJornada)}`;
            }
            if (opcaoUmQuarto) {
                opcaoUmQuarto.textContent = `25% da jornada • ${formatarMinutosHHMM(umQuarto)}`;
            }
            if (opcaoTresQuartos) {
                opcaoTresQuartos.textContent = `75% da jornada • ${formatarMinutosHHMM(tresQuartos)}`;
            }
            if (opcaoIntervalo) {
                opcaoIntervalo.textContent = `Intervalo da escala • ${formatarMinutosHHMM(intervaloBase)}`;
            }
        }

        function aplicarMascaraDuracao(valorRaw) {
            let raw = String(valorRaw || '').trim();
            if (!raw) return '';

            let sinal = '';
            if (raw.startsWith('+') || raw.startsWith('-')) {
                sinal = raw[0];
                raw = raw.slice(1);
            }

            const digitos = raw.replace(/\D/g, '');
            if (!digitos) return sinal;

            // Montagem da direita para a esquerda sempre em HH:MM.
            const mm = digitos.slice(-2).padStart(2, '0');
            const hh = String(parseInt(digitos.slice(0, -2) || '0', 10) || 0).padStart(2, '0');
            return `${sinal}${hh}:${mm}`;
        }

        campoDuracao.addEventListener('input', function () {
            const antes = campoDuracao.value;
            const depois = aplicarMascaraDuracao(antes);
            campoDuracao.value = depois;

            // Se usuário digitar sinal explícito, sincroniza seletor visualmente.
            if (seletorTipo && (depois.startsWith('+') || depois.startsWith('-'))) {
                seletorTipo.value = (depois.startsWith('-') ? '-' : '+');
            }
        });

        campoDuracao.addEventListener('blur', function () {
            const valor = aplicarMascaraDuracao(campoDuracao.value);
            campoDuracao.value = valor;
        });

        if (seletorAtalhoDuracao) {
            seletorAtalhoDuracao.addEventListener('change', function () {
                if (!seletorAtalhoDuracao.value) return;
                let valorSelecionado = seletorAtalhoDuracao.value;
                if (valorSelecionado === '__JORNADA__') {
                    valorSelecionado = formatarMinutosHHMM(obterJornadaBaseSelecionada());
                } else if (valorSelecionado === '__MEIA__') {
                    valorSelecionado = formatarMinutosHHMM(Math.max(Math.round(obterJornadaBaseSelecionada() / 2), 1));
                } else if (valorSelecionado === '__UM_QUARTO__') {
                    valorSelecionado = formatarMinutosHHMM(Math.max(Math.round(obterJornadaBaseSelecionada() * 0.25), 1));
                } else if (valorSelecionado === '__TRES_QUARTOS__') {
                    valorSelecionado = formatarMinutosHHMM(Math.max(Math.round(obterJornadaBaseSelecionada() * 0.75), 1));
                } else if (valorSelecionado === '__INTERVALO__') {
                    valorSelecionado = formatarMinutosHHMM(obterIntervaloBaseSelecionado());
                }
                campoDuracao.value = aplicarMascaraDuracao(valorSelecionado);
                campoDuracao.dispatchEvent(new Event('input', { bubbles: true }));
            });
        }

        if (seletorFuncionarioAjuste) {
            seletorFuncionarioAjuste.addEventListener('change', atualizarRotulosAtalhoDuracao);
        }

        atualizarRotulosAtalhoDuracao();
    })();
</script>
{% endblock %}