{% extends "base.html" %}

{% block title %}
{% if tipo_filtro == 'cliente' %}Clientes
{% elif tipo_filtro == 'fornecedor' %}Fornecedores
{% elif tipo_filtro == 'tecnico' %}Técnicos
{% elif tipo_filtro == 'funcionario' %}Funcionários
{% elif tipo_filtro == 'vendedor' %}Vendedores
{% elif tipo_filtro == 'garcom' %}Garçons
{% elif tipo_filtro == 'motoboy' %}Motoboys
{% elif tipo_filtro == 'transportadora' %}Transportadoras
{% else %}Todas as Pessoas
{% endif %} - Cape System
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            {% if tipo_filtro == 'cliente' %}
            <i class="bi bi-person"></i> Clientes
            {% elif tipo_filtro == 'fornecedor' %}
            <i class="bi bi-truck"></i> Fornecedores
            {% elif tipo_filtro == 'tecnico' %}
            <i class="bi bi-tools"></i> Técnicos
            {% elif tipo_filtro == 'funcionario' %}
            <i class="bi bi-briefcase"></i> Funcionários
            {% elif tipo_filtro == 'vendedor' %}
            <i class="bi bi-person-check"></i> Vendedores
            {% elif tipo_filtro == 'garcom' %}
            <i class="bi bi-cup-hot"></i> Garçons
            {% elif tipo_filtro == 'motoboy' %}
            <i class="bi bi-bicycle"></i> Motoboys
            {% elif tipo_filtro == 'transportadora' %}
            <i class="bi bi-truck-flatbed"></i> Transportadoras
            {% else %}
            <i class="bi bi-people-fill"></i> Todas as Pessoas
            {% endif %}
        </h2>
        <div class="d-flex gap-2">
            <a href="{{ url_for('nova_pessoa', tipo=tipo_filtro if tipo_filtro and tipo_filtro != 'todos' else None) }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Nova Pessoa
            </a>
            <a href="{{ url_for('pessoas_cadastros_auxiliares') }}" class="btn btn-outline-secondary" title="Cargos e Departamentos">
                <i class="bi bi-diagram-3"></i> Cargos / Depto.
            </a>
        </div>
    </div>

    {% if tipo_filtro == 'funcionario' and empresa_contexto_funcionario %}
    <div class="alert alert-light border d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-2 mb-3">
        <div>
            <div class="fw-semibold"><i class="bi bi-building"></i> Contexto multiempresa ativo</div>
            <div class="small text-muted">
                Mostrando apenas pessoas marcadas como funcionário disponíveis para a empresa
                <strong>{{ empresa_contexto_funcionario.nome_fantasia or empresa_contexto_funcionario.razao_social or empresa_contexto_funcionario.nome }}</strong>.
                A associação operacional acontece depois na ficha RH, junto com a empresa de trabalho e o endereço/local de trabalho.
            </div>
        </div>
    </div>
    {% endif %}

    {# Busca e Filtros com Paginação no Servidor #}
    <div class="card mb-3">
        <div class="card-body">
            <form method="GET" action="{{ url_for('pessoas') }}" class="row mb-3">
                <input type="hidden" name="tipo" value="{{ tipo_filtro }}">
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control" name="busca" 
                               value="{{ busca or '' }}" 
                               placeholder="Buscar por nome, CPF/CNPJ, telefone...">
                    </div>
                </div>
                <div class="col-md-3">
                    <select class="form-select" name="per_page" onchange="this.form.submit()">
                        <option value="25" {% if pagination.per_page == 25 %}selected{% endif %}>25 por página</option>
                        <option value="50" {% if pagination.per_page == 50 %}selected{% endif %}>50 por página</option>
                        <option value="100" {% if pagination.per_page == 100 %}selected{% endif %}>100 por página</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-search"></i> Buscar
                    </button>
                </div>
                <div class="col-md-3 mt-2">
                    <select class="form-select" name="classificar" onchange="this.form.submit()">
                        <option value="codigo" {% if classificar == 'codigo' %}selected{% endif %}>Classificar: Código</option>
                        <option value="nome" {% if classificar == 'nome' %}selected{% endif %}>Classificar: Nome</option>
                        <option value="descricao" {% if classificar == 'descricao' %}selected{% endif %}>Classificar: Descrição</option>
                    </select>
                </div>
                <div class="col-md-3 mt-2">
                    <select class="form-select" name="ordem" onchange="this.form.submit()">
                        <option value="asc" {% if ordem == 'asc' %}selected{% endif %}>Ordem: Crescente</option>
                        <option value="desc" {% if ordem == 'desc' %}selected{% endif %}>Ordem: Decrescente</option>
                    </select>
                </div>
            </form>
            
            {# Info de paginação #}
            <div class="d-flex justify-content-between align-items-center mb-3">
                <small class="text-muted">
                    Mostrando {{ ((pagination.page - 1) * pagination.per_page) + 1 }} 
                    a {{ [pagination.page * pagination.per_page, pagination.total]|min }} 
                    de <strong>{{ pagination.total }}</strong> registros
                </small>
                {% if busca %}
                <a href="{{ url_for('pessoas', tipo=tipo_filtro) }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-x-circle"></i> Limpar busca
                </a>
                {% endif %}
            </div>
            
            <div class="btn-group flex-wrap" role="group" aria-label="Filtros de pessoas">
                <a href="{{ url_for('pessoas', tipo='todos') }}" 
                   class="btn btn-sm {% if tipo_filtro == 'todos' %}btn-primary{% else %}btn-outline-primary{% endif %}">
                    <i class="bi bi-people"></i> Todos
                </a>
                <a href="{{ url_for('pessoas', tipo='cliente') }}" 
                   class="btn btn-sm {% if tipo_filtro == 'cliente' %}btn-success{% else %}btn-outline-success{% endif %}">
                    <i class="bi bi-person"></i> Clientes
                </a>
                <a href="{{ url_for('pessoas', tipo='fornecedor') }}" 
                   class="btn btn-sm {% if tipo_filtro == 'fornecedor' %}btn-warning{% else %}btn-outline-warning{% endif %}">
                    <i class="bi bi-truck"></i> Fornecedores
                </a>
                <a href="{{ url_for('pessoas', tipo='tecnico') }}" 
                   class="btn btn-sm {% if tipo_filtro == 'tecnico' %}btn-info{% else %}btn-outline-info{% endif %}">
                    <i class="bi bi-tools"></i> Técnicos
                </a>
                <a href="{{ url_for('pessoas', tipo='funcionario') }}" 
                   class="btn btn-sm {% if tipo_filtro == 'funcionario' %}btn-secondary{% else %}btn-outline-secondary{% endif %}">
                    <i class="bi bi-person-badge"></i> Funcionários
                </a>
                <a href="{{ url_for('pessoas', tipo='vendedor') }}" 
                   class="btn btn-sm {% if tipo_filtro == 'vendedor' %}btn-success{% else %}btn-outline-success{% endif %}">
                    <i class="bi bi-person-check"></i> Vendedores
                </a>
                <a href="{{ url_for('pessoas', tipo='garcom') }}" 
                   class="btn btn-sm {% if tipo_filtro == 'garcom' %}btn-dark{% else %}btn-outline-dark{% endif %}">
                    <i class="bi bi-cup-hot"></i> Garçom
                </a>
                <a href="{{ url_for('pessoas', tipo='motoboy') }}" 
                   class="btn btn-sm {% if tipo_filtro == 'motoboy' %}btn-danger{% else %}btn-outline-danger{% endif %}">
                    <i class="bi bi-bicycle"></i> MotoBoy
                </a>
                <a href="{{ url_for('pessoas', tipo='transportadora') }}" 
                   class="btn btn-sm {% if tipo_filtro == 'transportadora' %}btn-secondary{% else %}btn-outline-secondary{% endif %}">
                    <i class="bi bi-truck-flatbed"></i> Transportadora
                </a>
            </div>
        </div>
    </div>

    <!-- Lista de Pessoas -->
    <div class="card">
        <div class="card-body">
            {% if pessoas %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th width="60">Código</th>
                            <th>Nome</th>
                            <th>Tipo(s)</th>
                            <th>CPF/CNPJ</th>
                            <th>Telefone</th>
                            <th>Cidade/UF</th>
                            <th>Email</th>
                            <th width="150">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for pessoa in pessoas %}
                        <tr data-href="{{ url_for('editar_pessoa', id=pessoa.id) }}"
                            title="Duplo clique para editar">
                            <td><small class="text-muted">{{ pessoa.codigo_exibicao or pessoa.codigo or '-' }}</small></td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    {% if pessoa.foto_base64 %}
                                        {% set foto_pessoa_lista = pessoa.foto_base64 if (pessoa.foto_base64 or '').startswith('data:image') else 'data:image/jpeg;base64,' ~ (pessoa.foto_base64 or '') %}
                                        <img src="{{ foto_pessoa_lista }}" alt="Foto de {{ pessoa.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"></i>
                                        </div>
                                    {% endif %}
                                    <div>
                                        <strong>{{ pessoa.nome }}</strong>
                                        {% if pessoa.nome_fantasia %}
                                        <br><small class="text-muted">{{ pessoa.nome_fantasia }}</small>
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td>
                                {% if pessoa.eh_cliente %}
                                <span class="badge bg-success">Cliente</span>
                                {% endif %}
                                {% if pessoa.eh_fornecedor %}
                                <span class="badge bg-warning">Fornecedor</span>
                                {% endif %}
                                {% if pessoa.eh_tecnico %}
                                <span class="badge bg-info">Técnico</span>
                                {% endif %}
                                {% if pessoa.eh_funcionario %}
                                <span class="badge bg-secondary">Funcionário</span>
                                {% endif %}
                                {% if pessoa.eh_vendedor %}
                                <span class="badge bg-success">Vendedor</span>
                                {% endif %}
                                {% if pessoa.eh_garcom %}
                                <span class="badge bg-dark">Garçom</span>
                                {% endif %}
                                {% if pessoa.eh_operador_balanca %}
                                <span class="badge bg-secondary"><i class="bi bi-upc-scan"></i> Op. Balança</span>
                                {% endif %}
                                {% if pessoa.eh_entregador %}
                                <span class="badge bg-danger">MotoBoy</span>
                                {% endif %}
                                {% if pessoa.eh_transportadora %}
                                <span class="badge bg-secondary">Transportadora</span>
                                {% endif %}
                            </td>
                            <td>
                                {{ pessoa.cpf or pessoa.cnpj or '-' }}
                            </td>
                            <td>
                                {{ pessoa.telefone or pessoa.celular or '-' }}
                            </td>
                            <td>
                                {% if pessoa.cidade %}
                                {{ pessoa.cidade }}{% if pessoa.estado %}/{{ pessoa.estado }}{% endif %}
                                {% else %}
                                -
                                {% endif %}
                            </td>
                            <td>
                                {{ pessoa.email or '-' }}
                            </td>
                            <td>
                                <div class="dropdown action-menu">
                                    <button class="action-menu-btn" type="button" data-bs-toggle="dropdown">
                                        <i class="bi bi-three-dots-vertical"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li><a class="dropdown-item" href="{{ url_for('ver_pessoa', id=pessoa.id) }}"><i class="bi bi-eye-fill text-primary"></i> Visualizar</a></li>
                                        <li><a class="dropdown-item" href="{{ url_for('editar_pessoa', id=pessoa.id) }}"><i class="bi bi-pencil-fill text-warning"></i> Editar</a></li>
                                        {% if pessoa.whatsapp or pessoa.celular %}
                                        <li><hr class="dropdown-divider"></li>
                                        <li><a class="dropdown-item" href="https://wa.me/55{{ (pessoa.whatsapp or pessoa.celular)|replace('(', '')|replace(')', '')|replace(' ', '')|replace('-', '') }}" target="_blank"><i class="bi bi-whatsapp text-success"></i> WhatsApp</a></li>
                                        {% endif %}
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <form method="POST" action="{{ url_for('excluir_pessoa', id=pessoa.id) }}" onsubmit="return confirm('Deseja realmente inativar esta pessoa?');">
                                                <button type="submit" class="dropdown-item text-danger">
                                                    <i class="bi bi-trash-fill"></i> Excluir
                                                </button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i> Nenhuma pessoa encontrada.
                {% if busca %}
                    <a href="{{ url_for('pessoas', tipo=tipo_filtro) }}">Limpar busca</a>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
    
    {# Controles de Paginação #}
    {% if pagination.pages > 1 %}
    <nav aria-label="Paginação de pessoas" class="mt-3">
        <ul class="pagination justify-content-center">
            {# Botão Anterior #}
            {% if pagination.has_prev %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('pessoas', page=pagination.prev_num, per_page=pagination.per_page, busca=busca, tipo=tipo_filtro, classificar=classificar, ordem=ordem) }}">
                    <i class="bi bi-chevron-left"></i> Anterior
                </a>
            </li>
            {% else %}
            <li class="page-item disabled">
                <span class="page-link"><i class="bi bi-chevron-left"></i> Anterior</span>
            </li>
            {% endif %}
            
            {# Números das Páginas #}
            {% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
                {% if page_num %}
                    {% if page_num == pagination.page %}
                    <li class="page-item active">
                        <span class="page-link">{{ page_num }}</span>
                    </li>
                    {% else %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('pessoas', page=page_num, per_page=pagination.per_page, busca=busca, tipo=tipo_filtro, classificar=classificar, ordem=ordem) }}">{{ page_num }}</a>
                    </li>
                    {% endif %}
                {% else %}
                    <li class="page-item disabled"><span class="page-link">...</span></li>
                {% endif %}
            {% endfor %}
            
            {# Botão Próximo #}
            {% if pagination.has_next %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('pessoas', page=pagination.next_num, per_page=pagination.per_page, busca=busca, tipo=tipo_filtro, classificar=classificar, ordem=ordem) }}">
                    Próximo <i class="bi bi-chevron-right"></i>
                </a>
            </li>
            {% else %}
            <li class="page-item disabled">
                <span class="page-link">Próximo <i class="bi bi-chevron-right"></i></span>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock %}