{% extends "base.html" %}

{% block title %}{% if tabela %}Editar{% else %}Nova{% endif %} Tabela de Preço - CapeServer{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url_for('tabelas_preco') }}">Tabelas de Preço</a></li>
                    <li class="breadcrumb-item active">{% if tabela %}Editar{% else %}Nova{% endif %}</li>
                </ol>
            </nav>
            <h2 class="mt-2">
                <i class="bi bi-tags-fill text-primary"></i>
                {% if tabela %}Editar Tabela de Preço{% else %}Nova Tabela de Preço{% endif %}
            </h2>
        </div>
        <a href="{{ url_for('tabelas_preco') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Voltar
        </a>
    </div>

    <form method="POST" id="formTabela" class="form-lockable">
        {% if not tabela %}
        <div class="card mb-3 border-info">
            <div class="card-header bg-info text-white py-2">
                <h6 class="mb-0"><i class="bi bi-copy"></i> Cópia Rápida entre Empresas</h6>
            </div>
            <div class="card-body py-3">
                <div class="row g-3 align-items-end">
                    <div class="col-md-7">
                        <label class="form-label fw-bold">Copiar da Tabela</label>
                        <select name="copiar_tabela_origem_id" id="copiarTabelaOrigem" class="form-select">
                            <option value="">-- Criar do zero --</option>
                            {% for tb in tabelas_disponiveis %}
                            <option value="{{ tb.id }}"
                                    data-empresa="{{ tb.empresa_id }}"
                                    data-codigo="{{ tb.codigo or '' }}"
                                    data-nome="{{ tb.nome or '' }}"
                                    data-descricao="{{ tb.descricao or '' }}"
                                    data-tipo="{{ tb.tipo or 'padrao' }}"
                                    data-tipo-calculo="{{ tb.tipo_calculo or 'fixo' }}"
                                    data-percentual="{{ tb.percentual_ajuste or 0 }}"
                                    data-quantidade-minima="{{ tb.quantidade_minima or 1 }}"
                                    data-prioridade="{{ tb.prioridade or 0 }}"
                                    data-data-inicio="{{ tb.data_inicio.strftime('%Y-%m-%d') if tb.data_inicio else '' }}"
                                    data-data-fim="{{ tb.data_fim.strftime('%Y-%m-%d') if tb.data_fim else '' }}"
                                    data-ativo="{{ '1' if tb.ativo else '0' }}"
                                    {% if copiar_de_id and copiar_de_id == tb.id %}selected{% endif %}>
                                {{ tb.nome }} — {{ tb.empresa.nome_fantasia or tb.empresa.nome or tb.empresa.razao_social or ('Empresa ' ~ tb.empresa_id) }}
                            </option>
                            {% endfor %}
                        </select>
                        <small class="text-muted">Use uma tabela existente como base para outra empresa.</small>
                    </div>
                    <div class="col-md-3">
                        <div class="form-check mt-4 pt-2">
                            <input class="form-check-input" type="checkbox" name="copiar_itens_origem" id="copiarItensOrigem" checked>
                            <label class="form-check-label" for="copiarItensOrigem">
                                Copiar preços dos produtos
                            </label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-outline-info w-100" id="btnAplicarOrigem">
                            <i class="bi bi-magic"></i> Preencher
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Identificação -->
        <div class="card mb-3">
            <div class="card-header bg-primary text-white py-2">
                <h6 class="mb-0"><i class="bi bi-tag"></i> Identificação</h6>
            </div>
            <div class="card-body py-3">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label fw-bold">Empresa <span class="text-danger">*</span></label>
                        <select name="empresa_id" id="empresaId" class="form-select" required {% if tabela %}disabled{% endif %}>
                            {% for empresa in empresas %}
                            <option value="{{ empresa.id }}" {% if (tabela and tabela.empresa_id == empresa.id) or (not tabela and empresa_padrao_id and empresa_padrao_id == empresa.id) %}selected{% endif %}>
                                {{ empresa.razao_social }}
                            </option>
                            {% endfor %}
                        </select>
                        {% if tabela %}
                        <input type="hidden" name="empresa_id" value="{{ tabela.empresa_id }}">
                        {% endif %}
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label fw-bold">Código</label>
                        <input type="text" name="codigo" class="form-control text-center" value="{{ tabela.codigo if tabela else '' }}" placeholder="1">
                    </div>
                    
                    <div class="col-md-4">
                        <label class="form-label fw-bold">Nome <span class="text-danger">*</span></label>
                        <input type="text" name="nome" class="form-control" value="{{ tabela.nome if tabela else '' }}" required placeholder="Ex: À Vista, Cartão, Atacado">
                    </div>
                    
                    <div class="col-md-2 d-flex align-items-end">
                        <div class="form-check form-switch">
                            <input type="checkbox" name="ativo" class="form-check-input" id="ativo" {% if not tabela or tabela.ativo %}checked{% endif %}>
                            <label class="form-check-label fw-bold" for="ativo">Tabela Ativa</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Formação de Preço -->
        <div class="card mb-3">
            <div class="card-header bg-success text-white py-2">
                <h6 class="mb-0"><i class="bi bi-calculator"></i> Formação de Preço</h6>
            </div>
            <div class="card-body py-3">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Tipo de Cálculo</label>
                        <select name="tipo_calculo" class="form-select" id="tipoCalculo" onchange="togglePercentual()">
                            <option value="fixo" {% if tabela and tabela.tipo_calculo == 'fixo' %}selected{% endif %}>💰 Preço Fixo (cadastrado no produto)</option>
                            <option value="percentual_desconto" {% if tabela and tabela.tipo_calculo == 'percentual_desconto' %}selected{% endif %}>📉 Desconto % sobre outra tabela</option>
                            <option value="percentual_aumento" {% if tabela and tabela.tipo_calculo == 'percentual_aumento' %}selected{% endif %}>📈 Aumento % sobre outra tabela</option>
                        </select>
                    </div>
                    
                    <div class="col-md-4" id="divTabelaBase" style="{% if not tabela or tabela.tipo_calculo == 'fixo' %}display:none{% endif %}">
                        <label class="form-label fw-bold">Tabela Base (Referência)</label>
                        <select name="tabela_base_id" class="form-select" id="tabelaBase">
                            <option value="">📦 Usar preço base do produto</option>
                            {% for tb in tabelas_disponiveis %}
                            {% if not tabela or tb.id != tabela.id %}
                            <option value="{{ tb.id }}" data-empresa="{{ tb.empresa_id }}" data-codigo="{{ tb.codigo or '' }}" data-nome="{{ tb.nome or '' }}" {% if tabela and tabela.tabela_base_id == tb.id %}selected{% endif %}>
                                📋 {{ tb.nome }} (Código: {{ tb.codigo }})
                            </option>
                            {% endif %}
                            {% endfor %}
                        </select>
                        <small class="text-muted">O preço será calculado com base nesta tabela</small>
                    </div>
                    
                    <div class="col-md-2" id="divPercentual" style="{% if not tabela or tabela.tipo_calculo == 'fixo' %}display:none{% endif %}">
                        <label class="form-label fw-bold">Percentual (%)</label>
                        <div class="input-group">
                            <input type="number" name="percentual_ajuste" class="form-control text-center fs-5" step="0.01" min="0" max="100" value="{{ tabela.percentual_ajuste if tabela else '0' }}">
                            <span class="input-group-text fw-bold">%</span>
                        </div>
                    </div>
                    
                    <div class="col-md-3" id="divExemplo" style="{% if not tabela or tabela.tipo_calculo == 'fixo' %}display:none{% endif %}">
                        <label class="form-label fw-bold">Exemplo</label>
                        <div class="alert alert-info py-2 mb-0" id="exemploCalculo">
                            <small>Se o preço base for <strong>R$ 100,00</strong>:</small><br>
                            <span id="resultadoExemplo" class="fw-bold">R$ 100,00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Configurações Adicionais -->
        <div class="card mb-3">
            <div class="card-header bg-secondary text-white py-2">
                <h6 class="mb-0"><i class="bi bi-gear"></i> Configurações Adicionais</h6>
            </div>
            <div class="card-body py-3">
                <div class="row g-3">
                    <div class="col-md-2">
                        <label class="form-label">Tipo</label>
                        <select name="tipo" class="form-select">
                            <option value="padrao" {% if tabela and tabela.tipo == 'padrao' %}selected{% endif %}>Padrão</option>
                            <option value="promocao" {% if tabela and tabela.tipo == 'promocao' %}selected{% endif %}>Promoção</option>
                            <option value="atacado" {% if tabela and tabela.tipo == 'atacado' %}selected{% endif %}>Atacado</option>
                            <option value="especial" {% if tabela and tabela.tipo == 'especial' %}selected{% endif %}>Especial</option>
                        </select>
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label">Qtd Mínima</label>
                        <input type="number" name="quantidade_minima" class="form-control" step="0.001" min="0" value="{{ tabela.quantidade_minima if tabela else '1' }}">
                        <small class="text-muted">Para aplicar esta tabela</small>
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label">Data Início</label>
                        <input type="date" name="data_inicio" class="form-control" value="{{ tabela.data_inicio.strftime('%Y-%m-%d') if tabela and tabela.data_inicio else '' }}">
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label">Data Fim</label>
                        <input type="date" name="data_fim" class="form-control" value="{{ tabela.data_fim.strftime('%Y-%m-%d') if tabela and tabela.data_fim else '' }}">
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label">Prioridade</label>
                        <input type="number" name="prioridade" class="form-control" min="0" max="100" value="{{ tabela.prioridade if tabela else '0' }}">
                        <small class="text-muted">Maior = primeiro</small>
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label">Descrição</label>
                        <input type="text" name="descricao" class="form-control" value="{{ tabela.descricao if tabela else '' }}" placeholder="Opcional">
                    </div>
                </div>
            </div>
        </div>

        <!-- Botões -->
        <div class="d-flex justify-content-end gap-2">
            <a href="{{ url_for('tabelas_preco') }}" class="btn btn-outline-secondary">
                <i class="bi bi-x-lg"></i> Cancelar
            </a>
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="bi bi-check-lg"></i> Salvar Tabela
            </button>
        </div>
    </form>
</div>

<script>
function togglePercentual() {
    const tipo = document.getElementById('tipoCalculo').value;
    const divPercentual = document.getElementById('divPercentual');
    const divTabelaBase = document.getElementById('divTabelaBase');
    const divExemplo = document.getElementById('divExemplo');
    
    if (tipo === 'fixo') {
        divPercentual.style.display = 'none';
        divTabelaBase.style.display = 'none';
        divExemplo.style.display = 'none';
    } else {
        divPercentual.style.display = '';
        divTabelaBase.style.display = '';
        divExemplo.style.display = '';
        atualizarExemplo();
    }
}

function filtrarTabelaBasePorEmpresa() {
    const empresaId = document.getElementById('empresaId')?.value || '';
    const select = document.getElementById('tabelaBase');
    if (!select) return;

    Array.from(select.options).forEach((opt, idx) => {
        if (idx === 0) {
            opt.hidden = false;
            return;
        }
        const empresaOpt = opt.dataset.empresa || '';
        opt.hidden = !!empresaId && empresaOpt !== empresaId;
    });

    const selecionada = select.selectedOptions[0];
    if (selecionada && selecionada.hidden) {
        select.value = '';
    }
}

function aplicarDadosTabelaOrigem() {
    const origem = document.getElementById('copiarTabelaOrigem');
    if (!origem || !origem.value) return;

    const opt = origem.selectedOptions[0];
    const empresaId = document.getElementById('empresaId');
    const codigo = document.querySelector('input[name="codigo"]');
    const nome = document.querySelector('input[name="nome"]');
    const descricao = document.querySelector('input[name="descricao"]');
    const tipo = document.querySelector('select[name="tipo"]');
    const tipoCalculo = document.getElementById('tipoCalculo');
    const percentual = document.querySelector('input[name="percentual_ajuste"]');
    const qtdMin = document.querySelector('input[name="quantidade_minima"]');
    const prioridade = document.querySelector('input[name="prioridade"]');
    const dataInicio = document.querySelector('input[name="data_inicio"]');
    const dataFim = document.querySelector('input[name="data_fim"]');
    const ativo = document.getElementById('ativo');

    if (codigo && !codigo.value.trim()) codigo.value = opt.dataset.codigo || '';
    if (nome && !nome.value.trim()) nome.value = opt.dataset.nome || '';
    if (descricao && !descricao.value.trim()) descricao.value = opt.dataset.descricao || '';
    if (tipo) tipo.value = opt.dataset.tipo || 'padrao';
    if (tipoCalculo) tipoCalculo.value = opt.dataset.tipoCalculo || 'fixo';
    if (percentual) percentual.value = opt.dataset.percentual || '0';
    if (qtdMin) qtdMin.value = opt.dataset.quantidadeMinima || '1';
    if (prioridade) prioridade.value = opt.dataset.prioridade || '0';
    if (dataInicio) dataInicio.value = opt.dataset.dataInicio || '';
    if (dataFim) dataFim.value = opt.dataset.dataFim || '';
    if (ativo) ativo.checked = (opt.dataset.ativo || '1') === '1';

    if (empresaId && !empresaId.value) {
        empresaId.value = opt.dataset.empresa || '';
    }

    filtrarTabelaBasePorEmpresa();
    togglePercentual();
    atualizarExemplo();
}

function atualizarExemplo() {
    const tipo = document.getElementById('tipoCalculo').value;
    const percentual = parseFloat(document.querySelector('input[name="percentual_ajuste"]').value) || 0;
    const precoBase = 100;
    let resultado;
    
    if (tipo === 'percentual_desconto') {
        resultado = precoBase * (1 - percentual / 100);
    } else if (tipo === 'percentual_aumento') {
        resultado = precoBase * (1 + percentual / 100);
    } else {
        resultado = precoBase;
    }
    
    document.getElementById('resultadoExemplo').textContent = 'R$ ' + resultado.toFixed(2).replace('.', ',');
}

// Atualizar exemplo quando mudar percentual
document.querySelector('input[name="percentual_ajuste"]').addEventListener('input', atualizarExemplo);

// Inicializar
document.addEventListener('DOMContentLoaded', function() {
    filtrarTabelaBasePorEmpresa();
    togglePercentual();
    document.getElementById('empresaId')?.addEventListener('change', filtrarTabelaBasePorEmpresa);
    document.getElementById('btnAplicarOrigem')?.addEventListener('click', aplicarDadosTabelaOrigem);
    if (document.getElementById('copiarTabelaOrigem')?.value) {
        aplicarDadosTabelaOrigem();
    }
});
</script>
{% endblock %}