{% extends "base.html" %}

{% block title %}Escalas de Trabalho{% endblock %}

{% block extra_css %}
<style>
    .escala-legenda {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        margin-right: 1rem;
        font-size: .85rem;
    }
    .escala-legenda .box {
        width: 14px;
        height: 14px;
        border: 1px solid #adb5bd;
        border-radius: 2px;
        display: inline-block;
    }
    .box-invalido { background: #f8d7da; }
    .box-dia-seguinte { background: #d1e7dd; }
    tr.periodo-invalido td {
        background: #f8d7da !important;
    }
    tr.horario-dia-seguinte td {
        border-top: 2px solid #198754;
    }
    #tabelaGradeEscala th,
    #tabelaGradeEscala td {
        white-space: nowrap;
        vertical-align: middle;
    }
    #tabelaGradeEscala input[type="time"] {
        min-width: 92px;
    }
    .resumo-escala {
        border: 1px dashed #adb5bd;
        border-radius: .5rem;
        padding: .5rem .75rem;
        background: #f8f9fa;
    }
    .ajuda-opcao {
        color: #000;
        text-decoration: none;
        line-height: 1;
        vertical-align: middle;
    }
</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 • Jornada e turnos</span>
        <h1 class="h2"><i class="bi bi-calendar-week"></i> Escalas de trabalho</h1>
        <p class="rh-page-hero-subtitle">Cadastre escalas, turnos e regras de hora extra em um fluxo mais claro para operação e manutenção futura.</p>
    </div>
    <div class="rh-page-hero-actions">
        <button type="button" class="btn btn-outline-dark" id="btnAbrirManualFuncional">
            <i class="bi bi-question-circle"></i> Abrir manual
        </button>
        <a href="{{ url_for('rh_configuracoes') }}" class="btn btn-outline-secondary">
            <i class="bi bi-sliders"></i> Abrir configurações
        </a>
        <a href="{{ url_for('rh_banco_horas', empresa_id=empresa.id) }}" class="btn btn-outline-primary">
            <i class="bi bi-clock"></i> Abrir banco de horas
        </a>
    </div>
</div>

<div class="card mb-3 rh-filter-card">
    <div class="card-body">
        <form method="GET" class="rh-filter-form row g-3 align-items-end">
            <div class="col-md-6 col-lg-4">
                <label class="form-label">Empresa</label>
                <select name="empresa_id" class="form-select" onchange="this.form.submit()">
                    {% 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-6 col-lg-5">
                <div class="alert alert-light border mb-0 py-2">
                    <strong>Contexto ativo:</strong> {{ empresa.nome_fantasia or empresa.razao_social or empresa.nome }}
                    <div class="small text-muted mt-1">As escalas abaixo ficam compartilhadas entre as empresas deste ERP. A empresa de origem serve só como referência de onde a escala nasceu.</div>
                </div>
            </div>
            {% if escala_atual %}
            <input type="hidden" name="escala_id" value="{{ escala_atual.id }}">
            {% endif %}
        </form>
    </div>
</div>

<div class="row g-3">
    <div class="col-12 col-xl-4">
        <div class="card h-100 rh-list-card">
            <div class="card-header rh-list-header"><strong>Lista de escalas</strong></div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Código</th>
                                <th>Descrição</th>
                                <th>Origem</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for e in escalas %}
                            <tr>
                                <td><a href="{{ url_for('rh_escalas_trabalho', escala_id=e.id, empresa_id=empresa.id) }}">{{ e.codigo }}</a></td>
                                <td>{{ e.nome }}</td>
                                <td>
                                    <span class="small">{{ e._empresa_origem_nome or ('Empresa #' ~ (e.empresa_id or '?')) }}</span>
                                    {% if e.empresa_id == empresa.id %}
                                    <span class="badge bg-light text-dark border ms-1">contexto atual</span>
                                    {% else %}
                                    <span class="badge bg-info-subtle text-info-emphasis border ms-1">compartilhada</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if (e.status or 'ativo') == 'ativo' %}
                                        <span class="badge bg-success">Ativo</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Inativo</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% else %}
                            <tr><td colspan="4" class="text-muted text-center py-3">Nenhuma escala cadastrada.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-8">
        <div class="card rh-list-card">
            <div class="card-header rh-list-header">
                <strong>{% if escala_atual %}Dados da escala{% else %}Cadastro da escala{% endif %}</strong>
            </div>
            <div class="card-body">
                <form method="POST" id="formEscalaTrabalho" class="row g-2">
                    <input type="hidden" name="acao" value="salvar">
                    <input type="hidden" name="empresa_id" value="{{ empresa.id }}">
                    <input type="hidden" name="escala_id" value="{{ escala_atual.id if escala_atual else '' }}">
                    <input type="hidden" name="dias_json" id="dias_json" value="[]">
                    <input type="hidden" name="variacoes_turno_json" id="variacoes_turno_json" value="[]">
                    <input type="hidden" name="regras_hora_extra_json" id="regras_hora_extra_json" value="{}">

                    {% if escala_atual %}
                    <div class="col-12">
                        <div class="alert alert-info py-2 mb-1">
                            <strong>Escala compartilhada no ERP:</strong>
                            esta escala foi criada em <strong>{{ escala_atual._empresa_origem_nome or ('Empresa #' ~ (escala_atual.empresa_id or '?')) }}</strong>
                            e pode ser reutilizada nas demais empresas sem novo cadastro.
                        </div>
                    </div>
                    {% endif %}

                    <div class="col-md-2">
                        <label class="form-label">Escala padrão
                            <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="Escolhe o tipo de jornada mais comum da empresa.<br><strong>Quando usar:</strong> <em>Comercial</em> no padrão normal; <em>6x1</em> ou <em>12x36</em> quando esse for o regime real da equipe.">
                                <i class="bi bi-question-circle"></i>
                            </button>
                        </label>
                        <input type="text" class="form-control" name="codigo" maxlength="20" value="{{ escala_atual.codigo if escala_atual else '' }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Nome</label>
                        <input type="text" class="form-control" name="nome" maxlength="120" required value="{{ escala_atual.nome if escala_atual else '' }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Status</label>
                        <select class="form-select" name="status">
                            <option value="ativo" {% if not escala_atual or (escala_atual.status or 'ativo') == 'ativo' %}selected{% endif %}>Ativo</option>
                            <option value="inativo" {% if escala_atual and (escala_atual.status == 'inativo') %}selected{% endif %}>Inativo</option>
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Intervalo (almoço)
                            <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="Define como o almoço vai ser lido pelo sistema.<br><strong>Quando usar:</strong> <em>Saída 1 - Entrada 2</em> na maioria dos casos; <em>Normal</em> se não houver esse padrão.">
                                <i class="bi bi-question-circle"></i>
                            </button>
                        </label>
                        <select class="form-select" name="intervalo_almoco">
                            {% set intervalo_almoco = (escala_atual.intervalo_almoco if escala_atual else 'saida_1_entrada_2') %}
                            <option value="saida_1_entrada_2" {% if intervalo_almoco == 'saida_1_entrada_2' %}selected{% endif %}>Saída 1 - Entrada 2</option>
                            <option value="normal" {% if intervalo_almoco == 'normal' %}selected{% endif %}>Normal</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Horário
                            <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="Diz se o horário é fixo ou flexível.<br><strong>Quando usar:</strong> <em>Normal</em> para horário fechado; <em>Flexível</em> para equipes com variação de entrada/saída.">
                                <i class="bi bi-question-circle"></i>
                            </button>
                        </label>
                        {% set horario_tipo = (escala_atual.horario_tipo if escala_atual else 'normal') %}
                        <select class="form-select" name="horario_tipo">
                            <option value="normal" {% if horario_tipo == 'normal' %}selected{% endif %}>Normal</option>
                            <option value="flexivel" {% if horario_tipo == 'flexivel' %}selected{% endif %}>Flexível</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tipo Banco Falta
                            <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="Define se o banco vai focar em falta ou em extra.<br><strong>Quando usar:</strong> <em>Total de Horas Falta</em> quando o controle é por débito; <em>Total de Horas Extras</em> quando o foco é crédito.">
                                <i class="bi bi-question-circle"></i>
                            </button>
                        </label>
                        {% set tipo_banco_falta = (escala_atual.tipo_banco_falta if escala_atual else 'total_horas_falta') %}
                        <select class="form-select" name="tipo_banco_falta">
                            <option value="total_horas_falta" {% if tipo_banco_falta == 'total_horas_falta' %}selected{% endif %}>Total de Horas Falta</option>
                            <option value="total_horas_extras" {% if tipo_banco_falta == 'total_horas_extras' %}selected{% endif %}>Total de Horas Extras</option>
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Tolerância por batida (min)
                            <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="Minutos de folga por batida.<br><strong>Quando usar:</strong> aumente só se houver fila, deslocamento interno ou atraso frequente no registro.">
                                <i class="bi bi-question-circle"></i>
                            </button>
                        </label>
                        <input type="number" class="form-control" name="limite_tolerancia_batida_min" min="0" max="240" value="{{ escala_atual.limite_tolerancia_batida_min if escala_atual else 5 }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tolerância por dia (min)
                            <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="Minutos de folga no total do dia.<br><strong>Quando usar:</strong> ajuda a absorver pequenas variações sem gerar alerta toda hora.">
                                <i class="bi bi-question-circle"></i>
                            </button>
                        </label>
                        <input type="number" class="form-control" name="limite_tolerancia_dia_min" min="0" max="360" value="{{ escala_atual.limite_tolerancia_dia_min if escala_atual else 10 }}">
                    </div>
                    <div class="col-md-4 d-flex align-items-end">
                        <div class="form-check me-3">
                            <input class="form-check-input" type="checkbox" name="comp_automatica" id="comp_automatica" {% if not escala_atual or escala_atual.comp_automatica %}checked{% endif %}>
                            <label class="form-check-label" for="comp_automatica">Comp. Automática</label>
                            <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-placement="top" title="Faz compensação automática de diferenças pequenas. Quando usar: marque para reduzir ajustes manuais no dia a dia.">
                                <i class="bi bi-question-circle"></i>
                            </button>
                        </div>
                        <div class="form-check me-3">
                            <input class="form-check-input" type="checkbox" name="intervalo_flutuante" id="intervalo_flutuante" {% if escala_atual and escala_atual.intervalo_flutuante %}checked{% endif %}>
                            <label class="form-check-label" for="intervalo_flutuante">Intervalo Flutuante</label>
                            <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-placement="top" title="Permite variar o horário do intervalo. Quando usar: marque para equipes sem horário de almoço sempre igual.">
                                <i class="bi bi-question-circle"></i>
                            </button>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="tolerancia_hora_almoco" id="tolerancia_hora_almoco" {% if escala_atual and escala_atual.tolerancia_hora_almoco %}checked{% endif %}>
                            <label class="form-check-label" for="tolerancia_hora_almoco">Tol. Hora Almoço</label>
                            <button type="button" class="btn btn-link btn-sm p-0 ms-1 ajuda-opcao" data-bs-toggle="tooltip" data-bs-placement="top" title="Aplica tolerância extra no almoço. Quando usar: marque quando pequenas variações nesse horário forem comuns.">
                                <i class="bi bi-question-circle"></i>
                            </button>
                        </div>
                    </div>

                    <div class="col-12">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-horarios" type="button" role="tab">Grade de horários</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-turnos" type="button" role="tab">Variações por turno</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-hora-extra" type="button" role="tab">Regras de hora extra</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-manual-funcional" type="button" role="tab">Guia rápido</button>
                            </li>
                        </ul>

                        <div class="tab-content border border-top-0 p-2">
                            <div class="tab-pane fade show active" id="tab-horarios" role="tabpanel">
                                <div class="d-flex flex-wrap justify-content-between align-items-center mb-2">
                                    <div>
                                        <span class="escala-legenda"><span class="box box-invalido"></span> Período inválido</span>
                                        <span class="escala-legenda"><span class="box box-dia-seguinte"></span> Horário no dia seguinte</span>
                                    </div>
                                    <div class="d-flex flex-wrap gap-2">
                                        <button type="button" class="btn btn-sm btn-outline-primary" id="btnCopiarSegSex">
                                            <i class="bi bi-files"></i> Copiar de Segunda à Sexta
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-info" id="btnCopiarSegTodos">
                                            <i class="bi bi-file-earmark-plus"></i> Copiar Segunda para Todos
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger" id="btnZerarSabDom">
                                            <i class="bi bi-eraser"></i> Zerar Sábado/Domingo
                                        </button>
                                    </div>
                                </div>

                                <div class="resumo-escala mb-2 d-flex flex-wrap gap-3">
                                    <span><strong>Total semanal:</strong> <span id="escalaTotalSemanal">00:00</span></span>
                                    <span><strong>Média mensal:</strong> <span id="escalaTotalMensal">00:00</span></span>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered align-middle" id="tabelaGradeEscala">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Dias</th>
                                                <th>Entrada 1</th>
                                                <th>Saída 1</th>
                                                <th>Entrada 2</th>
                                                <th>Saída 2</th>
                                                <th>Entrada 3</th>
                                                <th>Saída 3</th>
                                                <th>Dia seguinte</th>
                                                <th>Carga Horária (Hrs)</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% set nomes_dias = ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'] %}
                                            {% for idx in range(0, 7) %}
                                            {% set dia_ref = (dias_escala|selectattr('dia_semana', 'equalto', idx)|list|first) %}
                                            <tr data-dia-semana="{{ idx }}">
                                                <td>{{ nomes_dias[idx] }}</td>
                                                <td><input type="time" class="form-control form-control-sm" data-campo="entrada_1" value="{{ (dia_ref.entrada_1[:5] if dia_ref and dia_ref.entrada_1 else '') }}"></td>
                                                <td><input type="time" class="form-control form-control-sm" data-campo="saida_1" value="{{ (dia_ref.saida_1[:5] if dia_ref and dia_ref.saida_1 else '') }}"></td>
                                                <td><input type="time" class="form-control form-control-sm" data-campo="entrada_2" value="{{ (dia_ref.entrada_2[:5] if dia_ref and dia_ref.entrada_2 else '') }}"></td>
                                                <td><input type="time" class="form-control form-control-sm" data-campo="saida_2" value="{{ (dia_ref.saida_2[:5] if dia_ref and dia_ref.saida_2 else '') }}"></td>
                                                <td><input type="time" class="form-control form-control-sm" data-campo="entrada_3" value="{{ (dia_ref.entrada_3[:5] if dia_ref and dia_ref.entrada_3 else '') }}"></td>
                                                <td><input type="time" class="form-control form-control-sm" data-campo="saida_3" value="{{ (dia_ref.saida_3[:5] if dia_ref and dia_ref.saida_3 else '') }}"></td>
                                                <td class="text-center">
                                                    <input type="checkbox" class="form-check-input" data-campo="horario_dia_seguinte" {% if dia_ref and dia_ref.horario_dia_seguinte %}checked{% endif %}>
                                                </td>
                                                <td><span class="badge bg-secondary" data-campo="carga_horaria">00:00</span></td>
                                                <td><span class="badge bg-light text-dark border" data-campo="status_periodo">ok</span></td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="tab-turnos" role="tabpanel">
                                <div class="d-flex flex-wrap justify-content-between align-items-center mb-2 gap-2">
                                    <div class="alert alert-info mb-0 py-2 flex-grow-1">
                                        <strong>Turnos:</strong> cadastre exceções por setor, loja, posto ou equipe sem precisar duplicar a escala inteira. Depois, vincule a variação ao colaborador no RH.
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-primary" id="btnAdicionarTurno">
                                        <i class="bi bi-plus-circle"></i> Adicionar variação
                                    </button>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered align-middle" id="tabelaVariacoesTurno">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Referência / Local</th>
                                                <th>Descrição</th>
                                                <th>Dias</th>
                                                <th>Entrada 1</th>
                                                <th>Saída 1</th>
                                                <th>Entrada 2</th>
                                                <th>Saída 2</th>
                                                <th>Dia seguinte</th>
                                                <th>Tol. batida</th>
                                                <th>Tol. dia</th>
                                                <th>Ativo</th>
                                                <th>Ação</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>

                                <div class="resumo-escala small text-muted" id="resumoVariacoesTurno">
                                    Nenhuma variação cadastrada ainda. Se a escala muda por loja, turno ou setor, registre aqui para evitar gambiarra na mão — o famoso anti-remendo oficial.
                                </div>
                            </div>

                            <div class="tab-pane fade" id="tab-hora-extra" role="tabpanel">
                                <div class="alert alert-warning mb-2">
                                    <strong>Hora Extra:</strong> estas regras afetam a apuração aberta/fechada do banco de horas, a leitura do ponto e a coerência dos relatórios. Aqui vale capricho, porque o banco de horas tem memória de elefante.
                                </div>

                                {% set regra_extra = regras_hora_extra or {} %}
                                <div class="row g-2">
                                    <div class="col-md-3">
                                        <label class="form-label">Mínimo para gerar extra (min)</label>
                                        <input type="number" class="form-control regra-extra" data-campo="minimo_para_extra_min" min="0" max="480" value="{{ regra_extra.get('minimo_para_extra_min', 0) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Começar a contar após (min)</label>
                                        <input type="number" class="form-control regra-extra" data-campo="iniciar_contagem_apos_min" min="0" max="480" value="{{ regra_extra.get('iniciar_contagem_apos_min', 0) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Limite diário (min)</label>
                                        <input type="number" class="form-control regra-extra" data-campo="limite_diario_min" min="0" max="1440" value="{{ regra_extra.get('limite_diario_min', 120) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Limite semanal (min)</label>
                                        <input type="number" class="form-control regra-extra" data-campo="limite_semanal_min" min="0" max="10080" value="{{ regra_extra.get('limite_semanal_min', 600) }}">
                                    </div>

                                    <div class="col-md-3">
                                        <label class="form-label">Adicional dias úteis (%)</label>
                                        <input type="number" class="form-control regra-extra" data-campo="adicional_util_pct" min="0" max="500" step="0.01" value="{{ regra_extra.get('adicional_util_pct', 50) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Adicional sábado (%)</label>
                                        <input type="number" class="form-control regra-extra" data-campo="adicional_sabado_pct" min="0" max="500" step="0.01" value="{{ regra_extra.get('adicional_sabado_pct', 50) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Adicional domingo (%)</label>
                                        <input type="number" class="form-control regra-extra" data-campo="adicional_domingo_pct" min="0" max="500" step="0.01" value="{{ regra_extra.get('adicional_domingo_pct', 100) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Adicional feriado (%)</label>
                                        <input type="number" class="form-control regra-extra" data-campo="adicional_feriado_pct" min="0" max="500" step="0.01" value="{{ regra_extra.get('adicional_feriado_pct', 100) }}">
                                    </div>

                                    <div class="col-md-4 d-flex align-items-end">
                                        <div class="form-check">
                                            <input class="form-check-input regra-extra" type="checkbox" id="extra_compensar_atraso_antes_extra" data-campo="compensar_atraso_antes_extra" {% if regra_extra.get('compensar_atraso_antes_extra', True) %}checked{% endif %}>
                                            <label class="form-check-label" for="extra_compensar_atraso_antes_extra">Compensar atraso antes de gerar extra</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4 d-flex align-items-end">
                                        <div class="form-check">
                                            <input class="form-check-input regra-extra" type="checkbox" id="extra_exigir_aprovacao_previa" data-campo="exigir_aprovacao_previa" {% if regra_extra.get('exigir_aprovacao_previa') %}checked{% endif %}>
                                            <label class="form-check-label" for="extra_exigir_aprovacao_previa">Exigir aprovação prévia</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4 d-flex align-items-end">
                                        <div class="form-check">
                                            <input class="form-check-input regra-extra" type="checkbox" id="extra_considerar_intervalo_na_extra" data-campo="considerar_intervalo_na_extra" {% if regra_extra.get('considerar_intervalo_na_extra') %}checked{% endif %}>
                                            <label class="form-check-label" for="extra_considerar_intervalo_na_extra">Considerar intervalo no cálculo</label>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <label class="form-label">Observações da regra de hora extra</label>
                                        <textarea class="form-control regra-extra" data-campo="observacoes" rows="2" placeholder="Ex.: horas extras após fechamento exigem aprovação da liderança.">{{ regra_extra.get('observacoes', '') }}</textarea>
                                    </div>

                                    <div class="col-12">
                                        <div class="resumo-escala" id="resumoRegrasHoraExtra"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="tab-manual-funcional" role="tabpanel">
                                <div class="alert alert-light border mb-2">
                                    <strong>Objetivo da tela:</strong> criar e manter escalas que serão usadas na apuração de ponto e banco de horas.
                                </div>

                                <div class="row g-2">
                                    <div class="col-md-6">
                                        <div class="card h-100 border-light">
                                            <div class="card-body py-2">
                                                <h6 class="mb-2"><i class="bi bi-1-circle"></i> Como cadastrar uma escala</h6>
                                                <ol class="small mb-0 ps-3">
                                                    <li>Preencha <strong>Nome</strong> e, se desejar, <strong>Código</strong>.</li>
                                                    <li>Defina <strong>Status</strong>, tipo de <strong>Intervalo</strong> e <strong>Horário</strong>.</li>
                                                    <li>Ajuste tolerâncias por batida e por dia.</li>
                                                    <li>Na aba <strong>Horários</strong>, preencha os horários de cada dia da semana.</li>
                                                    <li>Clique em <strong>Salvar Escala</strong>.</li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="card h-100 border-light">
                                            <div class="card-body py-2">
                                                <h6 class="mb-2"><i class="bi bi-2-circle"></i> Editar ou excluir</h6>
                                                <ol class="small mb-0 ps-3">
                                                    <li>Na lista <strong>Escalas cadastradas</strong>, clique no código da escala.</li>
                                                    <li>Atualize os campos desejados e salve.</li>
                                                    <li>Para remover, use <strong>Excluir</strong> (ação irreversível).</li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="card h-100 border-light">
                                            <div class="card-body py-2">
                                                <h6 class="mb-2"><i class="bi bi-3-circle"></i> Ações rápidas da grade</h6>
                                                <ul class="small mb-0 ps-3">
                                                    <li><strong>Copiar de Segunda à Sexta:</strong> replica os horários da segunda para terça a sexta.</li>
                                                    <li><strong>Copiar Segunda para Todos:</strong> replica os horários da segunda para todos os dias.</li>
                                                    <li><strong>Zerar Sábado/Domingo:</strong> limpa horários de fim de semana.</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="card h-100 border-light">
                                            <div class="card-body py-2">
                                                <h6 class="mb-2"><i class="bi bi-4-circle"></i> Como ler os indicadores</h6>
                                                <ul class="small mb-0 ps-3">
                                                    <li><strong>Carga Horária (Hrs):</strong> soma diária calculada automaticamente.</li>
                                                    <li><strong>Período inválido:</strong> horário inconsistente (verificar entradas/saídas).</li>
                                                    <li><strong>Dia seguinte:</strong> usar quando a saída ocorre após meia-noite.</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <label class="form-label">Observações</label>
                        <textarea class="form-control" name="observacoes" rows="2">{{ escala_atual.observacoes if escala_atual else '' }}</textarea>
                    </div>

                    <div class="col-12 d-flex gap-2">
                        <button class="btn btn-primary" type="submit"><i class="bi bi-save"></i> Salvar escala</button>
                        {% if escala_atual %}
                        <button class="btn btn-outline-danger" type="submit" name="acao" value="excluir" onclick="return confirm('Excluir esta escala?');">
                            <i class="bi bi-trash"></i> Excluir escala
                        </button>
                        {% endif %}
                        <a class="btn btn-outline-secondary" href="{{ url_for('rh_escalas_trabalho', empresa_id=empresa.id) }}"><i class="bi bi-x-circle"></i> Nova escala</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
(function () {
    const variacoesTurnoIniciais = {{ (variacoes_turno or [])|tojson }};
    const regrasHoraExtraIniciais = {{ (regras_hora_extra or {})|tojson }};

    if (window.bootstrap && window.bootstrap.Tooltip) {
        const triggers = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        triggers.forEach((el) => window.bootstrap.Tooltip.getOrCreateInstance(el));
    }

    function hmToMin(hm) {
        if (!hm || !/^\d{2}:\d{2}$/.test(hm)) return null;
        const [h, m] = hm.split(':').map(Number);
        return (h * 60) + m;
    }

    function fmtMin(total) {
        const t = Math.max(0, Number(total || 0));
        const h = String(Math.floor(t / 60)).padStart(2, '0');
        const m = String(t % 60).padStart(2, '0');
        return `${h}:${m}`;
    }

    function calcularCargaLinha(row) {
        const diaSeguinte = !!row.querySelector('[data-campo="horario_dia_seguinte"]').checked;
        const pares = [
            ['entrada_1', 'saida_1'],
            ['entrada_2', 'saida_2'],
            ['entrada_3', 'saida_3'],
        ];
        let total = 0;
        let invalido = false;

        for (const [cEnt, cSai] of pares) {
            const ent = (row.querySelector(`[data-campo="${cEnt}"]`)?.value || '').trim();
            const sai = (row.querySelector(`[data-campo="${cSai}"]`)?.value || '').trim();
            if (!ent || !sai) continue;
            let entMin = hmToMin(ent);
            let saiMin = hmToMin(sai);
            if (entMin === null || saiMin === null) {
                invalido = true;
                continue;
            }
            if (saiMin < entMin && diaSeguinte) saiMin += 24 * 60;
            if (saiMin >= entMin) {
                total += (saiMin - entMin);
            } else {
                invalido = true;
            }
        }

        row.querySelector('[data-campo="carga_horaria"]').textContent = fmtMin(total);
        row.classList.toggle('horario-dia-seguinte', diaSeguinte);
        row.classList.toggle('periodo-invalido', invalido);

        const statusEl = row.querySelector('[data-campo="status_periodo"]');
        if (statusEl) {
            if (invalido) {
                statusEl.className = 'badge bg-danger';
                statusEl.textContent = 'período inválido';
            } else if (diaSeguinte) {
                statusEl.className = 'badge bg-success';
                statusEl.textContent = 'dia seguinte';
            } else {
                statusEl.className = 'badge bg-light text-dark border';
                statusEl.textContent = 'ok';
            }
        }

        return total;
    }

    function serializarDias() {
        const linhas = document.querySelectorAll('#tabelaGradeEscala tbody tr');
        const payload = [];
        let totalSemanal = 0;
        linhas.forEach((row) => {
            const carga = calcularCargaLinha(row);
            const item = {
                dia_semana: Number(row.getAttribute('data-dia-semana') || 0),
                entrada_1: row.querySelector('[data-campo="entrada_1"]').value || '',
                saida_1: row.querySelector('[data-campo="saida_1"]').value || '',
                entrada_2: row.querySelector('[data-campo="entrada_2"]').value || '',
                saida_2: row.querySelector('[data-campo="saida_2"]').value || '',
                entrada_3: row.querySelector('[data-campo="entrada_3"]').value || '',
                saida_3: row.querySelector('[data-campo="saida_3"]').value || '',
                horario_dia_seguinte: !!row.querySelector('[data-campo="horario_dia_seguinte"]').checked,
                carga_horaria_min: carga,
            };
            totalSemanal += Number(carga || 0);
            payload.push(item);
        });
        document.getElementById('dias_json').value = JSON.stringify(payload);

        const semanalEl = document.getElementById('escalaTotalSemanal');
        const mensalEl = document.getElementById('escalaTotalMensal');
        if (semanalEl) semanalEl.textContent = fmtMin(totalSemanal);
        // Média mensal aproximada de semanas por mês
        const mediaMensal = Math.round(totalSemanal * 4.33);
        if (mensalEl) mensalEl.textContent = fmtMin(mediaMensal);
    }

    function gerarIdTurno() {
        return `turno_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
    }

    function escapeHtml(value) {
        return String(value || '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }

    function normalizarTurno(turno, indice) {
        const toleranciaBatidaBase = Number(document.querySelector('input[name="limite_tolerancia_batida_min"]')?.value || 0);
        const toleranciaDiaBase = Number(document.querySelector('input[name="limite_tolerancia_dia_min"]')?.value || 0);
        return {
            id: String(turno?.id || `turno_${indice + 1}`),
            referencia_local: String(turno?.referencia_local || ''),
            descricao: String(turno?.descricao || ''),
            dias_semana: String(turno?.dias_semana || ''),
            entrada_1: String(turno?.entrada_1 || ''),
            saida_1: String(turno?.saida_1 || ''),
            entrada_2: String(turno?.entrada_2 || ''),
            saida_2: String(turno?.saida_2 || ''),
            horario_dia_seguinte: !!turno?.horario_dia_seguinte,
            limite_tolerancia_batida_min: Number(turno?.limite_tolerancia_batida_min ?? toleranciaBatidaBase ?? 0),
            limite_tolerancia_dia_min: Number(turno?.limite_tolerancia_dia_min ?? toleranciaDiaBase ?? 0),
            ativo: turno?.ativo !== false,
        };
    }

    let variacoesTurnoState = Array.isArray(variacoesTurnoIniciais)
        ? variacoesTurnoIniciais.map((item, idx) => normalizarTurno(item, idx))
        : [];

    function atualizarResumoTurnos() {
        const resumoEl = document.getElementById('resumoVariacoesTurno');
        if (!resumoEl) return;
        if (!variacoesTurnoState.length) {
            resumoEl.textContent = 'Nenhuma variação cadastrada ainda. Se a escala muda por loja, turno ou setor, registre aqui para evitar gambiarra na mão — o famoso anti-remendo oficial.';
            return;
        }
        const ativos = variacoesTurnoState.filter((item) => item.ativo).length;
        resumoEl.innerHTML = `<strong>${variacoesTurnoState.length}</strong> variação(ões) cadastrada(s), sendo <strong>${ativos}</strong> ativa(s).`;
    }

    function renderizarTurnos() {
        const tbody = document.querySelector('#tabelaVariacoesTurno tbody');
        if (!tbody) return;

        if (!variacoesTurnoState.length) {
            tbody.innerHTML = '<tr><td colspan="12" class="text-center text-muted py-3">Nenhuma variação cadastrada.</td></tr>';
            serializarTurnos();
            atualizarResumoTurnos();
            return;
        }

        tbody.innerHTML = variacoesTurnoState.map((turno, indice) => `
            <tr data-turno-id="${escapeHtml(turno.id)}">
                <td><input type="text" class="form-control form-control-sm turno-campo" data-campo="referencia_local" data-indice="${indice}" value="${escapeHtml(turno.referencia_local)}" maxlength="120" placeholder="Ex.: Loja Centro / Madrugada"></td>
                <td><input type="text" class="form-control form-control-sm turno-campo" data-campo="descricao" data-indice="${indice}" value="${escapeHtml(turno.descricao)}" maxlength="160" placeholder="Detalhe operacional"></td>
                <td><input type="text" class="form-control form-control-sm turno-campo" data-campo="dias_semana" data-indice="${indice}" value="${escapeHtml(turno.dias_semana)}" maxlength="40" placeholder="Ex.: seg-sex"></td>
                <td><input type="time" class="form-control form-control-sm turno-campo" data-campo="entrada_1" data-indice="${indice}" value="${escapeHtml(turno.entrada_1)}"></td>
                <td><input type="time" class="form-control form-control-sm turno-campo" data-campo="saida_1" data-indice="${indice}" value="${escapeHtml(turno.saida_1)}"></td>
                <td><input type="time" class="form-control form-control-sm turno-campo" data-campo="entrada_2" data-indice="${indice}" value="${escapeHtml(turno.entrada_2)}"></td>
                <td><input type="time" class="form-control form-control-sm turno-campo" data-campo="saida_2" data-indice="${indice}" value="${escapeHtml(turno.saida_2)}"></td>
                <td class="text-center"><input type="checkbox" class="form-check-input turno-campo" data-campo="horario_dia_seguinte" data-indice="${indice}" ${turno.horario_dia_seguinte ? 'checked' : ''}></td>
                <td><input type="number" class="form-control form-control-sm turno-campo" data-campo="limite_tolerancia_batida_min" data-indice="${indice}" min="0" max="240" value="${escapeHtml(turno.limite_tolerancia_batida_min)}"></td>
                <td><input type="number" class="form-control form-control-sm turno-campo" data-campo="limite_tolerancia_dia_min" data-indice="${indice}" min="0" max="480" value="${escapeHtml(turno.limite_tolerancia_dia_min)}"></td>
                <td class="text-center"><input type="checkbox" class="form-check-input turno-campo" data-campo="ativo" data-indice="${indice}" ${turno.ativo ? 'checked' : ''}></td>
                <td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger btn-remover-turno" data-indice="${indice}" title="Remover variação"><i class="bi bi-trash"></i></button></td>
            </tr>
        `).join('');

        tbody.querySelectorAll('.turno-campo').forEach((input) => {
            const evento = (input.type === 'checkbox') ? 'change' : 'input';
            input.addEventListener(evento, function () {
                const indice = Number(this.getAttribute('data-indice'));
                const campo = this.getAttribute('data-campo');
                if (!variacoesTurnoState[indice] || !campo) return;
                variacoesTurnoState[indice][campo] = this.type === 'checkbox' ? !!this.checked : this.value;
                serializarTurnos();
                atualizarResumoTurnos();
            });
            if (input.type !== 'checkbox') {
                input.addEventListener('change', function () {
                    const indice = Number(this.getAttribute('data-indice'));
                    const campo = this.getAttribute('data-campo');
                    if (!variacoesTurnoState[indice] || !campo) return;
                    variacoesTurnoState[indice][campo] = this.value;
                    serializarTurnos();
                    atualizarResumoTurnos();
                });
            }
        });

        tbody.querySelectorAll('.btn-remover-turno').forEach((btn) => {
            btn.addEventListener('click', function () {
                const indice = Number(this.getAttribute('data-indice'));
                variacoesTurnoState.splice(indice, 1);
                renderizarTurnos();
            });
        });

        serializarTurnos();
        atualizarResumoTurnos();
    }

    function serializarTurnos() {
        const hidden = document.getElementById('variacoes_turno_json');
        if (!hidden) return;
        const payload = variacoesTurnoState.map((item, idx) => normalizarTurno(item, idx));
        hidden.value = JSON.stringify(payload);
    }

    function obterRegrasHoraExtra() {
        const raiz = document.getElementById('tab-hora-extra');
        if (!raiz) return {};
        const dados = {};
        raiz.querySelectorAll('.regra-extra').forEach((campo) => {
            const chave = campo.getAttribute('data-campo');
            if (!chave) return;
            if (campo.type === 'checkbox') {
                dados[chave] = !!campo.checked;
            } else if (campo.type === 'number') {
                dados[chave] = campo.value === '' ? 0 : Number(campo.value);
            } else {
                dados[chave] = campo.value || '';
            }
        });
        return dados;
    }

    function atualizarResumoHoraExtra() {
        const resumoEl = document.getElementById('resumoRegrasHoraExtra');
        if (!resumoEl) return;
        const regras = obterRegrasHoraExtra();
        resumoEl.innerHTML = `
            <strong>Resumo rápido:</strong>
            extra após <strong>${Number(regras.iniciar_contagem_apos_min || 0)} min</strong>,
            mínimo de <strong>${Number(regras.minimo_para_extra_min || 0)} min</strong>,
            limite diário <strong>${fmtMin(Number(regras.limite_diario_min || 0))}</strong>
            e semanal <strong>${fmtMin(Number(regras.limite_semanal_min || 0))}</strong>.<br>
            Adicionais: útil <strong>${Number(regras.adicional_util_pct || 0)}%</strong>, sábado <strong>${Number(regras.adicional_sabado_pct || 0)}%</strong>, domingo <strong>${Number(regras.adicional_domingo_pct || 0)}%</strong>, feriado <strong>${Number(regras.adicional_feriado_pct || 0)}%</strong>.
        `;
    }

    function serializarRegrasHoraExtra() {
        const hidden = document.getElementById('regras_hora_extra_json');
        if (!hidden) return;
        hidden.value = JSON.stringify(obterRegrasHoraExtra());
        atualizarResumoHoraExtra();
    }

    const tabela = document.getElementById('tabelaGradeEscala');
    if (tabela) {
        tabela.querySelectorAll('input').forEach((inp) => {
            inp.addEventListener('change', serializarDias);
            inp.addEventListener('input', serializarDias);
        });
    }

    document.getElementById('btnCopiarSegSex')?.addEventListener('click', function () {
        const linhaSegunda = document.querySelector('#tabelaGradeEscala tbody tr[data-dia-semana="1"]');
        if (!linhaSegunda) return;

        const campos = ['entrada_1', 'saida_1', 'entrada_2', 'saida_2', 'entrada_3', 'saida_3'];
        const base = {};
        campos.forEach((c) => {
            base[c] = linhaSegunda.querySelector(`[data-campo="${c}"]`)?.value || '';
        });
        const baseDiaSeguinte = !!linhaSegunda.querySelector('[data-campo="horario_dia_seguinte"]')?.checked;

        [2, 3, 4, 5].forEach((dia) => {
            const row = document.querySelector(`#tabelaGradeEscala tbody tr[data-dia-semana="${dia}"]`);
            if (!row) return;
            campos.forEach((c) => {
                const inp = row.querySelector(`[data-campo="${c}"]`);
                if (inp) inp.value = base[c];
            });
            const chk = row.querySelector('[data-campo="horario_dia_seguinte"]');
            if (chk) chk.checked = baseDiaSeguinte;
        });

        serializarDias();
    });

    document.getElementById('btnCopiarSegTodos')?.addEventListener('click', function () {
        const linhaSegunda = document.querySelector('#tabelaGradeEscala tbody tr[data-dia-semana="1"]');
        if (!linhaSegunda) return;

        const campos = ['entrada_1', 'saida_1', 'entrada_2', 'saida_2', 'entrada_3', 'saida_3'];
        const base = {};
        campos.forEach((c) => {
            base[c] = linhaSegunda.querySelector(`[data-campo="${c}"]`)?.value || '';
        });
        const baseDiaSeguinte = !!linhaSegunda.querySelector('[data-campo="horario_dia_seguinte"]')?.checked;

        [0, 2, 3, 4, 5, 6].forEach((dia) => {
            const row = document.querySelector(`#tabelaGradeEscala tbody tr[data-dia-semana="${dia}"]`);
            if (!row) return;
            campos.forEach((c) => {
                const inp = row.querySelector(`[data-campo="${c}"]`);
                if (inp) inp.value = base[c];
            });
            const chk = row.querySelector('[data-campo="horario_dia_seguinte"]');
            if (chk) chk.checked = baseDiaSeguinte;
        });

        serializarDias();
    });

    document.getElementById('btnZerarSabDom')?.addEventListener('click', function () {
        [0, 6].forEach((dia) => {
            const row = document.querySelector(`#tabelaGradeEscala tbody tr[data-dia-semana="${dia}"]`);
            if (!row) return;

            ['entrada_1', 'saida_1', 'entrada_2', 'saida_2', 'entrada_3', 'saida_3'].forEach((c) => {
                const inp = row.querySelector(`[data-campo="${c}"]`);
                if (inp) inp.value = '';
            });

            const chk = row.querySelector('[data-campo="horario_dia_seguinte"]');
            if (chk) chk.checked = false;
        });

        serializarDias();
    });

    document.getElementById('btnAdicionarTurno')?.addEventListener('click', function () {
        variacoesTurnoState.push(normalizarTurno({
            id: gerarIdTurno(),
            ativo: true,
        }, variacoesTurnoState.length));
        renderizarTurnos();
    });

    document.querySelectorAll('#tab-hora-extra .regra-extra').forEach((campo) => {
        const evento = campo.type === 'checkbox' ? 'change' : 'input';
        campo.addEventListener(evento, serializarRegrasHoraExtra);
        if (campo.type !== 'checkbox') {
            campo.addEventListener('change', serializarRegrasHoraExtra);
        }
    });

    if (!Object.keys(regrasHoraExtraIniciais || {}).length) {
        const hiddenRegras = document.getElementById('regras_hora_extra_json');
        if (hiddenRegras && hiddenRegras.value === '{}') {
            serializarRegrasHoraExtra();
        }
    }

    document.getElementById('formEscalaTrabalho')?.addEventListener('submit', function () {
        serializarDias();
        serializarTurnos();
        serializarRegrasHoraExtra();
    });
    serializarDias();
    renderizarTurnos();
    serializarRegrasHoraExtra();
})();

(function () {
    const btnManual = document.getElementById('btnAbrirManualFuncional');
    if (!btnManual || !window.bootstrap || !window.bootstrap.Tab) return;

    btnManual.addEventListener('click', function () {
        const trigger = document.querySelector('button[data-bs-target="#tab-manual-funcional"]');
        if (!trigger) return;
        const tab = window.bootstrap.Tab.getOrCreateInstance(trigger);
        tab.show();
    });
})();
</script>
{% endblock %}