{% extends "base.html" %}

{% block title %}Funcionários RH{% endblock %}

{% block extra_css %}
<style>
    .rh-colaborador-cell {
        min-width: 280px;
    }
    .rh-colaborador-meta,
    .rh-identificacao-grid,
    .rh-lotacao-meta {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
    }
    .rh-funcionarios-table td {
        vertical-align: middle;
    }
    .rh-lista-status-card {
        display: block;
        text-decoration: none;
        color: inherit;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .rh-lista-status-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    }
    .rh-dashboard-periodo-help {
        font-size: .82rem;
        color: #64748b;
    }

    body.rh-module .cape-page-container .rh-lista-filtros .rh-filter-actions {
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
    }

    body.rh-module .cape-page-container .rh-lista-filtros .rh-filter-actions .btn {
        flex: 0 0 auto;
        min-width: 140px;
    }

    body.rh-module .cape-page-container .rh-lista-filtros .rh-filter-actions .btn.btn-primary {
        min-width: 170px;
    }

    @media (max-width: 767.98px) {
        body.rh-module .cape-page-container .rh-lista-filtros .rh-filter-actions .btn {
            flex: 1 1 160px;
            min-width: 0;
        }
    }
</style>
{% endblock %}

{% block content %}
{% set data_inicial_filtro = data_inicial_filtro | default('', true) %}
{% set data_final_filtro = data_final_filtro | default('', true) %}
{% set periodo_dashboard_exibicao = periodo_dashboard_exibicao | default('', true) %}
<div class="rh-page-shell">
    <div class="rh-page-hero">
        <div class="rh-page-hero-main">
            <div class="rh-page-title">
                <span class="rh-page-title-icon"><i class="bi bi-people"></i></span>
                <div>
                    <h1 class="h2 mb-0">Funcionários RH</h1>
                    <p class="rh-page-subtitle mb-0">Lista operacional separada do dashboard, com filtros por empresa, local de trabalho, período, status do dia e busca rápida.</p>
                </div>
            </div>
        </div>
        <div class="rh-page-actions">
            <a href="{{ url_for('rh_funcionarios', empresa_id=empresa.id, local_trabalho=local_trabalho_filtro or None, data_inicial=data_inicial_filtro or None, data_final=data_final_filtro or None) }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Dashboard RH
            </a>
            <a href="{{ url_for('rh_funcionario_novo', empresa_id=empresa.id) }}" class="btn btn-primary">
                <i class="bi bi-person-plus"></i> Novo funcionário
            </a>
        </div>
    </div>

    <div class="card rh-filter-card rh-lista-filtros">
        <div class="card-body">
            <form method="GET" class="row g-3 rh-filter-form">
                <div class="col-xl-2 col-md-4">
                    <label class="form-label">Empresa</label>
                    <select name="empresa_id" class="form-select">
                        {% for emp in empresas_disponiveis or [] %}
                        <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-xl-2 col-md-4">
                    <label class="form-label">Local de trabalho</label>
                    <select name="local_trabalho" class="form-select">
                        <option value="">Todos os locais</option>
                        {% for item in locais_trabalho_disponiveis or [] %}
                        <option value="{{ item }}" {% if local_trabalho_filtro == item %}selected{% endif %}>{{ item }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-xl-2 col-md-4">
                    <label class="form-label">Período inicial</label>
                    <input type="date" name="data_inicial" class="form-control" value="{{ data_inicial_filtro }}">
                </div>
                <div class="col-xl-2 col-md-4">
                    <label class="form-label">Período final</label>
                    <input type="date" name="data_final" class="form-control" value="{{ data_final_filtro }}">
                </div>
                <div class="col-xl-2 col-md-4">
                    <label class="form-label">Status do dia</label>
                    <select name="status_dashboard" class="form-select">
                        <option value="todos" {% if status_dashboard == 'todos' %}selected{% endif %}>Todos</option>
                        <option value="trabalhando" {% if status_dashboard == 'trabalhando' %}selected{% endif %}>Trabalhando</option>
                        <option value="em_descanso" {% if status_dashboard == 'em_descanso' %}selected{% endif %}>Em descanso</option>
                        <option value="faltou" {% if status_dashboard == 'faltou' %}selected{% endif %}>Faltou</option>
                        <option value="atestado" {% if status_dashboard == 'atestado' %}selected{% endif %}>Atestado</option>
                        <option value="suspenso" {% if status_dashboard == 'suspenso' %}selected{% endif %}>Suspenso</option>
                    </select>
                </div>
                <div class="col-xl-2 col-md-4">
                    <label class="form-label">Mostrar</label>
                    <select name="ativos_apenas" class="form-select">
                        <option value="1" {% if ativos_apenas == '1' %}selected{% endif %}>Somente ativos</option>
                        <option value="0" {% if ativos_apenas == '0' %}selected{% endif %}>Todos</option>
                    </select>
                </div>
                <div class="col-lg-4 col-md-4">
                    <label class="form-label">Nome</label>
                    <input type="text" name="busca_nome" class="form-control" value="{{ busca_nome or '' }}" placeholder="Digite o nome do colaborador">
                </div>
                <div class="col-lg-4 col-md-4">
                    <label class="form-label">CPF</label>
                    <input type="text" name="busca_cpf" class="form-control" value="{{ busca_cpf or '' }}" placeholder="000.000.000-00">
                </div>
                <div class="col-lg-4 col-md-4">
                    <label class="form-label">Telefone</label>
                    <input type="text" name="busca_telefone" class="form-control" value="{{ busca_telefone or '' }}" placeholder="(99) 99999-9999">
                </div>
                <div class="col-12">
                    <div class="rh-dashboard-periodo-help mb-2">
                        Período selecionado: <strong>{{ periodo_dashboard_exibicao or 'Hoje' }}</strong>. O status do dia considera a data final do período.
                    </div>
                    <div class="rh-filter-actions">
                        <button type="submit" class="btn btn-primary"><i class="bi bi-funnel"></i> Aplicar filtros</button>
                        <a href="{{ safe_url_for('rh_funcionarios_lista', empresa_id=empresa.id, fallback=safe_url_for('rh_funcionarios', empresa_id=empresa.id)) }}" class="btn btn-outline-secondary">Limpar</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="row g-3">
        {% for status_key in ['trabalhando', 'em_descanso', 'faltou', 'atestado', 'suspenso'] %}
        {% set total_card = resumo_status_dashboard.get(status_key, 0) %}
        <div class="col-6 col-xl">
            <a href="{{ safe_url_for('rh_funcionarios_lista', empresa_id=empresa.id, local_trabalho=local_trabalho_filtro or None, busca_nome=busca_nome or None, busca_cpf=busca_cpf or None, busca_telefone=busca_telefone or None, ativos_apenas=ativos_apenas, data_inicial=data_inicial_filtro or None, data_final=data_final_filtro or None, status_dashboard=status_key, fallback=safe_url_for('rh_funcionarios', empresa_id=empresa.id, local_trabalho=local_trabalho_filtro or None, busca_nome=busca_nome or None, busca_cpf=busca_cpf or None, busca_telefone=busca_telefone or None, ativos_apenas=ativos_apenas, data_inicial=data_inicial_filtro or None, data_final=data_final_filtro or None, status_dashboard=status_key)) }}" class="card rh-summary-card rh-lista-status-card {% if status_dashboard == status_key %}border-primary{% else %}border-light{% endif %}">
                <div class="card-body">
                    <span class="rh-summary-label">{{ status_key.replace('_', ' ')|title }}</span>
                    <span class="rh-summary-value">{{ total_card }}</span>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>

    <div class="card rh-section-card">
        <div class="rh-section-header">
            <div class="rh-section-header-main">
                <h2 class="rh-section-title">Colaboradores filtrados</h2>
                <p class="rh-section-subtitle">Clique no olho para abrir a ficha independente do colaborador. O lápis segue para edição direta.</p>
            </div>
            <div class="small text-muted">{{ funcionarios|length }} resultado(s)</div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm table-hover mb-0 rh-funcionarios-table">
                    <thead>
                        <tr>
                            <th>Colaborador</th>
                            <th>Identificação</th>
                            <th>Lotação / Escala</th>
                            <th>Acessos</th>
                            <th>Status do dia</th>
                            <th class="text-end">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for f in funcionarios %}
                        <tr>
                            <td class="rh-colaborador-cell">
                                <div class="d-flex align-items-center gap-2">
                                    {% if f.foto_base64 %}
                                        {% set foto_funcionario_lista = f.foto_base64 if (f.foto_base64 or '').startswith('data:image') else 'data:image/jpeg;base64,' ~ (f.foto_base64 or '') %}
                                        <img src="{{ foto_funcionario_lista }}" alt="Foto de {{ f.nome }}" class="rounded-circle border" style="width: 40px; height: 40px; object-fit: cover;">
                                    {% else %}
                                        <div class="rounded-circle border bg-light text-muted d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                            <i class="bi bi-person-badge"></i>
                                        </div>
                                    {% endif %}
                                    <div>
                                        <strong>{{ f.nome }}</strong>
                                        <div class="small text-muted">CPF: {{ f.cpf or '-' }}</div>
                                        <div class="rh-colaborador-meta mt-1">
                                            <span class="badge text-bg-light border">Cargo: {{ f.cargo or '-' }}</span>
                                            <span class="badge text-bg-light border">Depto: {{ f.departamento or '-' }}</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                {% set identificador_rapido = f.id_funcional or f.matricula or f.codigo_batida or '-' %}
                                {% set identificador_rapido_label = 'ID funcional' if f.id_funcional else ('Matrícula' if f.matricula else 'Código de batida') %}
                                <div class="rh-identificacao-grid">
                                    <span class="badge bg-success">Identificador rápido ({{ identificador_rapido_label }}): {{ identificador_rapido }}</span>
                                    <span class="badge bg-primary">ID funcional: {{ f.id_funcional or '-' }}</span>
                                    <span class="badge bg-dark">Cód. batida: {{ f.codigo_batida or '-' }}</span>
                                    <span class="badge text-bg-light border">Matrícula: {{ f.matricula or '-' }}</span>
                                </div>
                            </td>
                            <td>
                                <div class="fw-semibold">{{ f._dashboard_local_trabalho or 'Local não informado' }}</div>
                                <div class="small text-muted">{{ f.endereco_trabalho_formatado or 'Endereço de trabalho não informado.' }}</div>
                                <div class="rh-lotacao-meta mt-1">
                                    {% set escala_nome = escala_por_funcionario_id.get(f.id) %}
                                    {% if escala_nome %}
                                        <span class="badge bg-primary-subtle text-primary-emphasis">Escala: {{ escala_nome }}</span>
                                    {% else %}
                                        <span class="badge text-bg-light border">Escala não vinculada</span>
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                {% if f.acesso_sistema_ativo %}
                                    <span class="badge bg-success">Sistema</span>
                                {% else %}
                                    <span class="badge bg-secondary">Sistema off</span>
                                {% endif %}
                                <div class="mt-1">
                                    {% if f.app_funcionario_ativo %}
                                        <span class="badge bg-info text-dark">App funcionário</span>
                                    {% endif %}
                                    {% if f.app_empresa_ativo %}
                                        <span class="badge bg-warning text-dark">App empresa</span>
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                <span class="badge {{ f._dashboard_status_badge_class }}"><i class="bi {{ f._dashboard_status_icon }}"></i> {{ f._dashboard_status_label }}</span>
                                <div class="small text-muted mt-1">{{ f._dashboard_status_motivo }}</div>
                                {% if f._dashboard_ultima_batida_hora %}
                                <div class="small text-muted">Última batida: {{ f._dashboard_ultima_batida_hora }}</div>
                                {% endif %}
                            </td>
                            <td class="text-end">
                                <div class="d-flex gap-1 justify-content-end">
                                    <a href="{{ url_for('rh_funcionario_detalhe', id=f.id, empresa_id=empresa.id) }}" class="btn btn-sm btn-outline-secondary" title="Abrir ficha do funcionário">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ url_for('rh_funcionario_editar', id=f.id, empresa_id=empresa.id) }}" class="btn btn-sm btn-outline-primary" title="Editar cadastro">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form method="POST" action="{{ url_for('rh_funcionario_toggle', id=f.id) }}" class="d-inline">
                                        <input type="hidden" name="empresa_id" value="{{ empresa.id }}">
                                        <button type="submit" class="btn btn-sm btn-outline-warning" title="Alternar ativo/inativo">
                                            <i class="bi bi-arrow-left-right"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="6" class="text-center text-muted py-4">Nenhum funcionário encontrado com os filtros atuais.</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}