{% extends "base.html" %}

{% block title %}Cadastro de Entregadores - CapeFood{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <a href="{{ url_for('food.dashboard_food') }}" class="btn btn-outline-secondary mb-2">
                        <i class="bi bi-arrow-left"></i> Voltar
                    </a>
                    <h2><i class="bi bi-bicycle text-primary"></i> Cadastro de Entregadores</h2>
                    <p class="text-muted">Gerencie os entregadores do delivery</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ url_for('nova_pessoa') }}?tipo=entregador" class="btn btn-outline-primary">
                        <i class="bi bi-person-plus"></i> Nova Pessoa
                    </a>
                    <button class="btn btn-success" onclick="novoEntregador()">
                        <i class="bi bi-plus-lg"></i> Novo Entregador
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Dica -->
    <div class="alert alert-info mb-4">
        <i class="bi bi-info-circle"></i> 
        <strong>Dica:</strong> Você pode vincular entregadores a pessoas cadastradas no sistema. 
        Basta marcar o tipo <span class="badge bg-success"><i class="bi bi-bicycle"></i> Entregador</span> 
        no <a href="{{ url_for('pessoas') }}" class="alert-link">cadastro de pessoas</a>.
    </div>
    
    <!-- Entregadores Cadastrados -->
    <div class="row" id="entregadoresGrid">
        {% if entregadores %}
            {% for e in entregadores %}
            <div class="col-md-6 col-lg-4 mb-4" id="card-{{ e.id }}">
                <div class="card h-100 {{ 'border-success' if e.ativo and e.disponivel else 'border-warning' if e.ativo else 'border-secondary' }}">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            {% if e.tipo_veiculo == 'moto' %}
                                <i class="bi bi-bicycle text-dark"></i>
                            {% elif e.tipo_veiculo == 'bicicleta' %}
                                <i class="bi bi-bicycle text-success"></i>
                            {% elif e.tipo_veiculo == 'carro' %}
                                <i class="bi bi-car-front text-primary"></i>
                            {% else %}
                                <i class="bi bi-person-walking text-secondary"></i>
                            {% endif %}
                            {{ e.nome }}
                        </h5>
                        <div>
                            {% if e.ativo %}
                                <span class="badge bg-{{ 'success' if e.disponivel else 'warning' }}">
                                    {{ 'Disponível' if e.disponivel else 'Ocupado' }}
                                </span>
                            {% else %}
                                <span class="badge bg-secondary">Inativo</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="card-body">
                        {% if e.telefone %}
                        <p class="mb-1">
                            <i class="bi bi-telephone"></i> {{ e.telefone }}
                            <a href="https://wa.me/55{{ e.telefone | replace('(', '') | replace(')', '') | replace('-', '') | replace(' ', '') }}" 
                               target="_blank" class="text-success ms-2" title="WhatsApp">
                                <i class="bi bi-whatsapp"></i>
                            </a>
                        </p>
                        {% endif %}
                        
                        {% if e.cpf %}
                        <p class="mb-1"><i class="bi bi-person-vcard"></i> CPF: {{ e.cpf }}</p>
                        {% endif %}
                        
                        {% if e.tipo_veiculo %}
                        <p class="mb-1">
                            <i class="bi bi-tag"></i> Veículo: 
                            {% if e.tipo_veiculo == 'moto' %}Moto
                            {% elif e.tipo_veiculo == 'bicicleta' %}Bicicleta
                            {% elif e.tipo_veiculo == 'carro' %}Carro
                            {% elif e.tipo_veiculo == 'a_pe' %}A pé
                            {% else %}{{ e.tipo_veiculo }}
                            {% endif %}
                            {% if e.placa_veiculo %} - {{ e.placa_veiculo }}{% endif %}
                        </p>
                        {% endif %}
                        
                        {% if e.pessoa_id %}
                        <p class="mb-1 text-info">
                            <i class="bi bi-link-45deg"></i> Vinculado a cadastro de pessoa
                        </p>
                        {% endif %}
                        
                        {% if e.comissao_percentual or e.comissao_fixa %}
                        <p class="mb-1 text-success">
                            <i class="bi bi-currency-dollar"></i> Comissão: 
                            {% if e.comissao_percentual %}{{ e.comissao_percentual }}%{% endif %}
                            {% if e.comissao_percentual and e.comissao_fixa %} + {% endif %}
                            {% if e.comissao_fixa %}R$ {{ "%.2f"|format(e.comissao_fixa) }}{% endif %}
                        </p>
                        {% endif %}

                        {% set resumo = resumo_financeiro_entregadores.get(e.id, {}) %}
                        <p class="mb-1 small text-primary-emphasis">
                            <i class="bi bi-cash-stack"></i> Repasse estimado hoje ({{ competencia_resumo }}):
                            <strong>R$ {{ "%.2f"|format(resumo.get('comissao_total_estimada', 0) or 0) }}</strong>
                        </p>
                        <p class="mb-1 small text-muted">
                            <i class="bi bi-box-seam"></i> {{ resumo.get('qtd_entregas', 0) or 0 }} entrega(s)
                            · Taxas R$ {{ "%.2f"|format(resumo.get('total_taxa_entrega', 0) or 0) }}
                        </p>
                        {% if resumo.get('tem_pix') %}
                        <p class="mb-1 small text-info">
                            <i class="bi bi-qr-code"></i> PIX cadastrado
                        </p>
                        {% elif resumo.get('tem_dados_bancarios') %}
                        <p class="mb-1 small text-info">
                            <i class="bi bi-bank"></i> Dados bancários cadastrados
                        </p>
                        {% else %}
                        <p class="mb-1 small text-warning">
                            <i class="bi bi-exclamation-triangle"></i> Sem dados de pagamento cadastrados
                        </p>
                        {% endif %}
                    </div>
                    <div class="card-footer d-flex justify-content-between">
                        <div>
                            <button class="btn btn-sm btn-primary" onclick="editarEntregador({{ e.id }})">
                                <i class="bi bi-pencil"></i> Editar
                            </button>
                            <button class="btn btn-sm btn-danger" onclick="excluirEntregador({{ e.id }}, '{{ e.nome }}')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                        {% if e.ativo %}
                        <button class="btn btn-sm btn-{{ 'warning' if e.disponivel else 'success' }}" 
                                onclick="toggleDisponibilidade({{ e.id }})"
                                title="{{ 'Marcar como ocupado' if e.disponivel else 'Marcar como disponível' }}">
                            <i class="bi bi-{{ 'pause-circle' if e.disponivel else 'play-circle' }}"></i>
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <div class="col-12">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> Nenhum entregador cadastrado.
                    <a href="javascript:void(0)" onclick="novoEntregador()">Adicionar entregador</a>
                </div>
            </div>
        {% endif %}
    </div>
</div>

<!-- Modal de Cadastro/Edição -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalEntregador" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-bicycle"></i> <span id="modalTitulo">Novo Entregador</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formEntregador" onsubmit="salvarEntregador(event)">
                <div class="modal-body">
                    <input type="hidden" id="entregador_id">
                    
                    <!-- Vínculo com Pessoa -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <label class="form-label">Vincular a Cadastro de Pessoa (opcional)</label>
                            <select class="form-select" id="pessoa_id" onchange="preencherDadosPessoa()">
                                <option value="">-- Não vincular --</option>
                                {% for p in pessoas %}
                                <option value="{{ p.id }}" 
                                        data-nome="{{ p.razao_social or p.nome_fantasia }}"
                                        data-telefone="{{ p.telefone or '' }}"
                                        data-cpf="{{ p.cpf_cnpj or '' }}">
                                    {{ p.razao_social or p.nome_fantasia }} 
                                    {% if p.cpf_cnpj %}({{ p.cpf_cnpj }}){% endif %}
                                </option>
                                {% endfor %}
                            </select>
                            <small class="text-muted">Vincule a um funcionário/técnico cadastrado</small>
                        </div>
                    </div>
                    
                    <!-- Dados Básicos -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Nome *</label>
                            <input type="text" class="form-control" id="nome" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Telefone</label>
                            <input type="text" class="form-control" id="telefone" placeholder="(00) 00000-0000">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">CPF</label>
                            <input type="text" class="form-control" id="cpf" placeholder="000.000.000-00">
                        </div>
                    </div>
                    
                    <!-- Veículo -->
                    <h6 class="border-bottom pb-2 mb-3"><i class="bi bi-car-front"></i> Veículo</h6>
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label class="form-label">Tipo</label>
                            <select class="form-select" id="tipo_veiculo">
                                <option value="">Selecione</option>
                                <option value="moto">Moto</option>
                                <option value="bicicleta">Bicicleta</option>
                                <option value="carro">Carro</option>
                                <option value="a_pe">A pé</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Placa</label>
                            <input type="text" class="form-control" id="placa_veiculo" placeholder="ABC1D23">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Modelo</label>
                            <input type="text" class="form-control" id="modelo_veiculo" placeholder="Honda CG 160">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Cor</label>
                            <input type="text" class="form-control" id="cor_veiculo" placeholder="Vermelha">
                        </div>
                    </div>
                    
                    <!-- Dados Bancários -->
                    <h6 class="border-bottom pb-2 mb-3"><i class="bi bi-bank"></i> Dados para Pagamento</h6>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Chave PIX</label>
                            <input type="text" class="form-control" id="pix_chave" placeholder="CPF, celular, e-mail ou chave aleatória">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Banco</label>
                            <input type="text" class="form-control" id="banco" placeholder="Nubank, Itaú, etc.">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Agência</label>
                            <input type="text" class="form-control" id="agencia">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Conta</label>
                            <input type="text" class="form-control" id="conta">
                        </div>
                    </div>
                    
                    <!-- Comissão -->
                    <h6 class="border-bottom pb-2 mb-3"><i class="bi bi-percent"></i> Comissão</h6>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Percentual (%)</label>
                            <input type="number" class="form-control" id="comissao_percentual" 
                                   min="0" max="100" step="0.1" value="0">
                            <small class="text-muted">% sobre valor da entrega</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Valor Fixo (R$)</label>
                            <input type="number" class="form-control" id="comissao_fixa" 
                                   min="0" step="0.50" value="0">
                            <small class="text-muted">Valor fixo por entrega</small>
                        </div>
                    </div>
                    
                    <!-- Status -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="ativo" checked>
                                <label class="form-check-label" for="ativo">Ativo</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="disponivel" checked>
                                <label class="form-check-label" for="disponivel">Disponível para entregas</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-check-lg"></i> Salvar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let modal;

document.addEventListener('DOMContentLoaded', function() {
    modal = new bootstrap.Modal(document.getElementById('modalEntregador'));
});

function novoEntregador() {
    document.getElementById('formEntregador').reset();
    document.getElementById('entregador_id').value = '';
    document.getElementById('modalTitulo').textContent = 'Novo Entregador';
    document.getElementById('ativo').checked = true;
    document.getElementById('disponivel').checked = true;
    modal.show();
}

function editarEntregador(id) {
    fetch(`/food/api/entregadores/${id}`)
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const e = data.entregador;
                document.getElementById('entregador_id').value = e.id;
                document.getElementById('pessoa_id').value = e.pessoa_id || '';
                document.getElementById('nome').value = e.nome || '';
                document.getElementById('telefone').value = e.telefone || '';
                document.getElementById('cpf').value = e.cpf || '';
                document.getElementById('tipo_veiculo').value = e.tipo_veiculo || '';
                document.getElementById('placa_veiculo').value = e.placa_veiculo || '';
                document.getElementById('modelo_veiculo').value = e.modelo_veiculo || '';
                document.getElementById('cor_veiculo').value = e.cor_veiculo || '';
                document.getElementById('pix_chave').value = e.pix_chave || '';
                document.getElementById('banco').value = e.banco || '';
                document.getElementById('agencia').value = e.agencia || '';
                document.getElementById('conta').value = e.conta || '';
                document.getElementById('comissao_percentual').value = e.comissao_percentual || 0;
                document.getElementById('comissao_fixa').value = e.comissao_fixa || 0;
                document.getElementById('ativo').checked = e.ativo;
                document.getElementById('disponivel').checked = e.disponivel;
                
                document.getElementById('modalTitulo').textContent = 'Editar Entregador';
                modal.show();
            }
        });
}

function preencherDadosPessoa() {
    const select = document.getElementById('pessoa_id');
    const option = select.options[select.selectedIndex];
    
    if (option.value) {
        const nome = option.dataset.nome;
        const telefone = option.dataset.telefone;
        const cpf = option.dataset.cpf;
        
        if (nome && !document.getElementById('nome').value) {
            document.getElementById('nome').value = nome;
        }
        if (telefone && !document.getElementById('telefone').value) {
            document.getElementById('telefone').value = telefone;
        }
        if (cpf && !document.getElementById('cpf').value) {
            document.getElementById('cpf').value = cpf;
        }
    }
}

function salvarEntregador(event) {
    event.preventDefault();
    
    const data = {
        id: document.getElementById('entregador_id').value || null,
        pessoa_id: document.getElementById('pessoa_id').value || null,
        nome: document.getElementById('nome').value,
        telefone: document.getElementById('telefone').value,
        cpf: document.getElementById('cpf').value,
        tipo_veiculo: document.getElementById('tipo_veiculo').value,
        placa_veiculo: document.getElementById('placa_veiculo').value,
        modelo_veiculo: document.getElementById('modelo_veiculo').value,
        cor_veiculo: document.getElementById('cor_veiculo').value,
        pix_chave: document.getElementById('pix_chave').value,
        banco: document.getElementById('banco').value,
        agencia: document.getElementById('agencia').value,
        conta: document.getElementById('conta').value,
        comissao_percentual: parseFloat(document.getElementById('comissao_percentual').value) || 0,
        comissao_fixa: parseFloat(document.getElementById('comissao_fixa').value) || 0,
        ativo: document.getElementById('ativo').checked,
        disponivel: document.getElementById('disponivel').checked
    };
    
    fetch('/food/api/entregadores/salvar', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(result => {
        if (result.success) {
            modal.hide();
            location.reload();
        } else {
            alert(result.message || 'Erro ao salvar');
        }
    })
    .catch(err => alert('Erro: ' + err.message));
}

function excluirEntregador(id, nome) {
    if (!confirm(`Deseja excluir o entregador "${nome}"?`)) return;
    
    fetch(`/food/api/entregadores/${id}/excluir`, { method: 'POST' })
        .then(r => r.json())
        .then(result => {
            if (result.success) {
                document.getElementById(`card-${id}`).remove();
            } else {
                alert(result.message || 'Erro ao excluir');
            }
        });
}

function toggleDisponibilidade(id) {
    fetch(`/food/api/entregadores/${id}/disponibilidade`, { method: 'POST' })
        .then(r => r.json())
        .then(result => {
            if (result.success) {
                location.reload();
            }
        });
}
</script>
{% endblock %}