{% extends "base.html" %}

{% block title %}Nova Venda{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-plus-circle"></i> Nova Venda</h2>
        <a href="{{ url_for('vendas') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Voltar
        </a>
    </div>

    <form method="POST" class="form-lockable">
        <div class="row">
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Dados da Venda</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Data da Venda *</label>
                                <input type="date" class="form-control" name="data_venda" 
                                       value="{{ datetime.now().strftime('%Y-%m-%d') }}" required>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Cliente *</label>
                                <input type="text" class="form-control mb-2" id="busca_cliente" 
                                       placeholder="Buscar por nome, CPF/CNPJ ou nome fantasia..." 
                                       onkeyup="filtrarClientes()">
                                <select class="form-select" name="cliente_id" id="select_cliente" required size="8" 
                                        style="min-height: 200px; cursor: pointer;">
                                    <option value="">-- Selecione um cliente --</option>
                                    {% for cliente in clientes %}
                                    <option value="{{ cliente['id'] }}" 
                                            data-nome="{{ cliente['nome']|lower }}"
                                            data-cpf="{{ cliente.get('cpf_cnpj', '')|lower }}"
                                            data-fantasia="{{ cliente.get('nome_fantasia', '')|lower }}">
                                        {{ cliente['nome'] }}
                                        {% if cliente.get('cpf_cnpj') %} - {{ cliente['cpf_cnpj'] }}{% endif %}
                                        {% if cliente.get('nome_fantasia') and cliente.get('nome_fantasia') != cliente['nome'] %} ({{ cliente['nome_fantasia'] }}){% endif %}
                                    </option>
                                    {% endfor %}
                                </select>
                                <small class="text-muted">
                                    <i class="bi bi-info-circle"></i> 
                                    <span id="cliente_selecionado">Nenhum cliente selecionado</span>
                                </small>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Empresa *</label>
                                {% if is_multi_empresa() %}
                                <select class="form-select" name="empresa_id" required>
                                    <option value="">Selecione...</option>
                                    {% for empresa in empresas %}
                                    <option value="{{ empresa.id }}" {% if empresa_selecionada and empresa.id == empresa_selecionada.id %}selected{% endif %}>
                                        {{ empresa.razao_social }}
                                    </option>
                                    {% endfor %}
                                </select>
                                {% else %}
                                <!-- Modo single-empresa: usar empresa padrão -->
                                <input type="hidden" name="empresa_id" value="{{ empresa_selecionada.id if empresa_selecionada else (empresas[0].id if empresas else '') }}">
                                <input type="text" class="form-control" value="{{ empresa_selecionada.razao_social if empresa_selecionada else (empresas[0].razao_social if empresas else 'N/A') }}" readonly>
                                {% endif %}
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Forma de Pagamento</label>
                                <select class="form-select" name="forma_pagamento">
                                    <option value="">Selecione...</option>
                                    <option value="dinheiro">Dinheiro</option>
                                    <option value="pix">PIX</option>
                                    <option value="boleto">Boleto</option>
                                    <option value="cartao_credito">Cartão de Crédito</option>
                                    <option value="cartao_debito">Cartão de Débito</option>
                                </select>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label">Condição de Pagamento</label>
                                <input type="text" class="form-control" name="condicao_pagamento" 
                                       placeholder="Ex: À vista, 30 dias, 3x sem juros">
                            </div>

                            <div class="col-md-12 mb-3">
                                <label class="form-label">Observações</label>
                                <textarea class="form-control" name="observacoes" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-end">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="fas fa-save"></i> Criar Venda
            </button>
        </div>
    </form>
</div>

<script>
function filtrarClientes() {
    const busca = document.getElementById('busca_cliente').value.toLowerCase();
    const select = document.getElementById('select_cliente');
    const options = select.getElementsByTagName('option');
    let visiveis = 0;
    
    for (let i = 1; i < options.length; i++) {
        const option = options[i];
        const nome = option.getAttribute('data-nome') || '';
        const cpf = option.getAttribute('data-cpf') || '';
        const fantasia = option.getAttribute('data-fantasia') || '';
        
        const texto = (nome + ' ' + cpf + ' ' + fantasia).toLowerCase();
        
        if (texto.includes(busca)) {
            option.style.display = '';
            visiveis++;
        } else {
            option.style.display = 'none';
        }
    }
    
    // Ajusta altura dinamicamente
    select.size = Math.min(Math.max(visiveis, 3), 15);
}

// Mostra cliente selecionado e melhora feedback
document.addEventListener('DOMContentLoaded', function() {
    const select = document.getElementById('select_cliente');
    const spanSelecionado = document.getElementById('cliente_selecionado');
    
    select.addEventListener('change', function() {
        const option = this.options[this.selectedIndex];
        if (this.value) {
            spanSelecionado.innerHTML = '<strong style="color: green;">✓ Selecionado:</strong> ' + option.text;
            console.log('Cliente selecionado:', this.value, option.text);
        } else {
            spanSelecionado.textContent = 'Nenhum cliente selecionado';
        }
    });
    
    // Destaca opções ao passar mouse
    select.addEventListener('mouseover', function(e) {
        if (e.target.tagName === 'OPTION' && e.target.value) {
            e.target.style.backgroundColor = '#0d6efd';
            e.target.style.color = 'white';
        }
    });
    
    select.addEventListener('mouseout', function(e) {
        if (e.target.tagName === 'OPTION' && !e.target.selected) {
            e.target.style.backgroundColor = '';
            e.target.style.color = '';
        }
    });
    
    // Marca visualmente a opção selecionada
    select.addEventListener('click', function() {
        Array.from(this.options).forEach(opt => {
            if (opt.selected && opt.value) {
                opt.style.fontWeight = 'bold';
            } else {
                opt.style.fontWeight = '';
            }
        });
    });
});
</script>
{% endblock %}