{% extends "base.html" %}

{% block title %}Devolução - Selecionar Itens - CapeSystem{% endblock %}

{% block content %}
<style>
    .item-devolvido { background-color: #fff3cd !important; }
    .item-total-devolvido { background-color: #f8d7da !important; }
    .valor-credito-display { font-size: 2rem; }
</style>

<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="bi bi-arrow-return-left text-warning"></i> Devolução - Selecionar Itens</h2>
        <a href="{{ url_for('devolucao_buscar_venda') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Voltar à Busca
        </a>
    </div>

    <div class="row">
        <!-- Coluna Esquerda: Dados da Venda e Configurações -->
        <div class="col-md-4">
            <!-- Dados da Venda -->
            <div class="card mb-3">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0"><i class="bi bi-receipt"></i> Dados da Venda</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm mb-0">
                        <tr>
                            <th width="40%">Pedido:</th>
                            <td><strong class="text-primary">{{ venda.numero_pedido }}</strong></td>
                        </tr>
                        <tr>
                            <th>Data:</th>
                            <td>{{ venda.data_venda.strftime('%d/%m/%Y %H:%M') if venda.data_venda else '-' }}</td>
                        </tr>
                        <tr>
                            <th>Subtotal:</th>
                            <td>R$ {{ "%.2f"|format(venda.subtotal or 0) }}</td>
                        </tr>
                        {% if venda.desconto and venda.desconto > 0 %}
                        <tr>
                            <th>Desconto:</th>
                            <td class="text-danger">
                                - R$ {{ "%.2f"|format(venda.desconto) }} 
                                <small>({{ "%.2f"|format(desconto_percentual) }}%)</small>
                            </td>
                        </tr>
                        {% endif %}
                        {% if venda.acrescimo and venda.acrescimo > 0 %}
                        <tr>
                            <th>Acréscimo:</th>
                            <td class="text-info">
                                + R$ {{ "%.2f"|format(venda.acrescimo) }}
                                <small>({{ "%.2f"|format(acrescimo_percentual) }}%)</small>
                            </td>
                        </tr>
                        {% endif %}
                        <tr class="table-success">
                            <th>Total Pago:</th>
                            <td><strong>R$ {{ "%.2f"|format(venda.valor_total or 0) }}</strong></td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Cliente para Crédito -->
            <div class="card mb-3">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="bi bi-person-check"></i> Cliente para Receber Crédito</h6>
                </div>
                <div class="card-body">
                    {% if venda.pessoa %}
                    <div class="alert alert-success mb-2">
                        <strong>{{ venda.pessoa.nome }}</strong>
                        {% if venda.pessoa.cpf_cnpj %}
                        <br><small>{{ venda.pessoa.cpf_cnpj }}</small>
                        {% endif %}
                    </div>
                    <input type="hidden" id="pessoa_id_original" value="{{ venda.pessoa.id }}">
                    {% endif %}
                    
                    <div class="mb-2">
                        <label class="form-label small">Alterar cliente ou cadastrar novo:</label>
                        <select class="form-select" id="pessoa_id">
                            <option value="">-- Selecione --</option>
                            {% if venda.pessoa %}
                            <option value="{{ venda.pessoa.id }}" selected>
                                {{ venda.pessoa.nome }} (da venda)
                            </option>
                            {% endif %}
                            {% for pessoa in pessoas %}
                                {% if not venda.pessoa or pessoa.id != venda.pessoa.id %}
                                <option value="{{ pessoa.id }}">{{ pessoa.nome }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div id="saldo-credito-info" class="{% if not venda.pessoa %}d-none{% endif %}">
                        <small class="text-muted">Saldo atual de crédito:</small>
                        <strong id="saldo-atual" class="text-success">
                            R$ {{ "%.2f"|format(venda.pessoa.saldo_credito_loja or 0) if venda.pessoa else '0,00' }}
                        </strong>
                    </div>
                    
                    <hr>
                    <a href="{{ url_for('pessoa_nova') }}?tipo=cliente&redirect=devolucao" 
                       class="btn btn-outline-primary btn-sm w-100" target="_blank">
                        <i class="bi bi-person-plus"></i> Cadastrar Novo Cliente
                    </a>
                </div>
            </div>

            <!-- Motivo da Devolução -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-chat-text"></i> Motivo da Devolução</h6>
                </div>
                <div class="card-body">
                    <select class="form-select mb-2" id="motivo-select">
                        <option value="">Selecione o motivo...</option>
                        <option value="Arrependimento do cliente">Arrependimento do cliente</option>
                        <option value="Produto com defeito">Produto com defeito</option>
                        <option value="Produto diferente do pedido">Produto diferente do pedido</option>
                        <option value="Tamanho/Medida incorreta">Tamanho/Medida incorreta</option>
                        <option value="Troca por outro produto">Troca por outro produto</option>
                        <option value="Desistência da compra">Desistência da compra</option>
                        <option value="Garantia">Garantia</option>
                        <option value="Outro">Outro</option>
                    </select>
                    <textarea class="form-control" id="motivo-obs" rows="2" 
                              placeholder="Observações adicionais..."></textarea>
                </div>
            </div>

            <!-- Resumo e Botão de Processar -->
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <h6 class="mb-1">CRÉDITO A GERAR</h6>
                    <div class="valor-credito-display" id="total-devolucao">R$ 0,00</div>
                    <small id="info-calculo" class="opacity-75">
                        (Proporcional ao valor pago)
                    </small>
                    <hr class="bg-white">
                    <button class="btn btn-light btn-lg w-100" onclick="processarDevolucao()" id="btn-processar">
                        <i class="bi bi-check-circle"></i> Processar Devolução
                    </button>
                </div>
            </div>
        </div>

        <!-- Coluna Direita: Itens da Venda -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-box-seam"></i> Itens da Venda</h5>
                    <div>
                        <button class="btn btn-light btn-sm" onclick="selecionarTodos(true)">
                            <i class="bi bi-check-all"></i> Selecionar Todos
                        </button>
                        <button class="btn btn-outline-light btn-sm" onclick="selecionarTodos(false)">
                            <i class="bi bi-x"></i> Limpar
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-dark">
                                <tr>
                                    <th width="5%" class="text-center">
                                        <input type="checkbox" id="selecionar-todos" onchange="selecionarTodos(this.checked)">
                                    </th>
                                    <th>Produto</th>
                                    <th class="text-center" width="10%">Qtd Orig.</th>
                                    <th class="text-center" width="10%">Já Devol.</th>
                                    <th class="text-center" width="12%">Qtd Devolver</th>
                                    <th class="text-end" width="12%">Valor Unit.</th>
                                    <th class="text-end" width="12%">Valor Proporcional</th>
                                    <th class="text-end" width="12%">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in itens %}
                                {% set qtd_ja_devolvida = itens_devolvidos.get(item.id, 0) %}
                                {% set qtd_disponivel = item.quantidade - qtd_ja_devolvida %}
                                {% set valor_proporcional = item.valor_unitario * (1 - desconto_percentual/100 + acrescimo_percentual/100) %}
                                
                                <tr id="item-{{ item.id }}" 
                                    class="{% if qtd_disponivel <= 0 %}item-total-devolvido{% elif qtd_ja_devolvida > 0 %}item-devolvido{% endif %}">
                                    <td class="text-center">
                                        {% if qtd_disponivel > 0 %}
                                        <input type="checkbox" class="item-check form-check-input" 
                                               data-item-id="{{ item.id }}"
                                               data-produto-id="{{ item.produto_id }}"
                                               data-quantidade="{{ item.quantidade }}"
                                               data-qtd-disponivel="{{ qtd_disponivel }}"
                                               data-valor-unitario="{{ item.valor_unitario }}"
                                               data-valor-proporcional="{{ valor_proporcional }}"
                                               onchange="atualizarTotal()">
                                        {% else %}
                                        <i class="bi bi-check-circle-fill text-secondary" title="Totalmente devolvido"></i>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <strong>{{ item.produto.nome if item.produto else 'Produto #' ~ item.produto_id }}</strong>
                                        {% if item.produto and item.produto.codigo_barras %}
                                        <br><small class="text-muted"><i class="bi bi-upc"></i> {{ item.produto.codigo_barras }}</small>
                                        {% endif %}
                                    </td>
                                    <td class="text-center">{{ "%.2f"|format(item.quantidade) }}</td>
                                    <td class="text-center">
                                        {% if qtd_ja_devolvida > 0 %}
                                        <span class="badge bg-warning text-dark">{{ "%.2f"|format(qtd_ja_devolvida) }}</span>
                                        {% else %}
                                        <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-center">
                                        {% if qtd_disponivel > 0 %}
                                        <input type="number" class="form-control form-control-sm text-center qtd-devolver" 
                                               style="width: 80px; display: inline-block;"
                                               min="0" max="{{ qtd_disponivel }}" step="0.01"
                                               value="{{ qtd_disponivel }}"
                                               data-item-id="{{ item.id }}"
                                               onchange="atualizarTotal()">
                                        {% else %}
                                        <span class="text-muted">0</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">R$ {{ "%.2f"|format(item.valor_unitario) }}</td>
                                    <td class="text-end">
                                        <span class="text-success">R$ {{ "%.2f"|format(valor_proporcional) }}</span>
                                        {% if desconto_percentual > 0 %}
                                        <br><small class="text-danger">(-{{ "%.1f"|format(desconto_percentual) }}%)</small>
                                        {% endif %}
                                        {% if acrescimo_percentual > 0 %}
                                        <br><small class="text-info">(+{{ "%.1f"|format(acrescimo_percentual) }}%)</small>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <strong class="item-total">R$ 0,00</strong>
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="8" class="text-center py-4 text-muted">
                                        <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                                        Nenhum item encontrado nesta venda.
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Legenda -->
            <div class="mt-3">
                <small class="text-muted">
                    <span class="badge bg-warning text-dark">Amarelo</span> = Item parcialmente devolvido
                    <span class="badge bg-danger ms-2">Vermelho</span> = Item totalmente devolvido
                </small>
            </div>
        </div>
    </div>
</div>

<script>
const vendaId = {{ venda.id }};
const descontoPercentual = {{ desconto_percentual }};
const acrescimoPercentual = {{ acrescimo_percentual }};

function selecionarTodos(selecionar) {
    document.querySelectorAll('.item-check').forEach(cb => {
        cb.checked = selecionar;
    });
    document.getElementById('selecionar-todos').checked = selecionar;
    atualizarTotal();
}

function atualizarTotal() {
    let total = 0;
    let itensCount = 0;
    
    document.querySelectorAll('.item-check:checked').forEach(checkbox => {
        const itemId = checkbox.dataset.itemId;
        const valorProporcional = parseFloat(checkbox.dataset.valorProporcional);
        const qtdInput = document.querySelector(`.qtd-devolver[data-item-id="${itemId}"]`);
        const qtd = parseFloat(qtdInput.value) || 0;
        
        if (qtd > 0) {
            const totalItem = qtd * valorProporcional;
            total += totalItem;
            itensCount++;
            
            // Atualizar coluna de total do item
            const row = document.getElementById(`item-${itemId}`);
            if (row) {
                row.querySelector('.item-total').textContent = `R$ ${totalItem.toFixed(2)}`;
            }
        }
    });
    
    // Zerar itens não selecionados
    document.querySelectorAll('.item-check:not(:checked)').forEach(checkbox => {
        const itemId = checkbox.dataset.itemId;
        const row = document.getElementById(`item-${itemId}`);
        if (row) {
            row.querySelector('.item-total').textContent = 'R$ 0,00';
        }
    });
    
    document.getElementById('total-devolucao').textContent = `R$ ${total.toFixed(2)}`;
    
    // Info de cálculo
    let infoCalculo = '(Proporcional ao valor pago)';
    if (descontoPercentual > 0) {
        infoCalculo = `(Desconto de ${descontoPercentual.toFixed(1)}% aplicado)`;
    }
    if (acrescimoPercentual > 0) {
        infoCalculo = `(Acréscimo de ${acrescimoPercentual.toFixed(1)}% aplicado)`;
    }
    document.getElementById('info-calculo').textContent = infoCalculo;
}

function processarDevolucao() {
    const itens = [];
    let total = 0;
    
    document.querySelectorAll('.item-check:checked').forEach(checkbox => {
        const itemId = checkbox.dataset.itemId;
        const produtoId = checkbox.dataset.produtoId;
        const valorUnitario = parseFloat(checkbox.dataset.valorUnitario);
        const valorProporcional = parseFloat(checkbox.dataset.valorProporcional);
        const quantidadeOriginal = parseFloat(checkbox.dataset.quantidade);
        const qtdInput = document.querySelector(`.qtd-devolver[data-item-id="${itemId}"]`);
        const qtd = parseFloat(qtdInput.value) || 0;
        
        if (qtd <= 0) return;
        
        itens.push({
            item_venda_id: parseInt(itemId),
            produto_id: parseInt(produtoId),
            quantidade: qtd,
            quantidade_original: quantidadeOriginal,
            valor_unitario: valorUnitario,
            valor_ajustado: valorProporcional
        });
        
        total += qtd * valorProporcional;
    });
    
    if (itens.length === 0) {
        alert('Selecione pelo menos um item para devolução.');
        return;
    }
    
    const pessoaId = document.getElementById('pessoa_id').value;
    if (!pessoaId) {
        if (!confirm('Nenhum cliente selecionado. O crédito NÃO será gerado. Deseja continuar mesmo assim?')) {
            return;
        }
    }
    
    const motivoSelect = document.getElementById('motivo-select').value;
    const motivoObs = document.getElementById('motivo-obs').value;
    
    if (!motivoSelect) {
        alert('Selecione o motivo da devolução.');
        return;
    }
    
    const motivo = motivoSelect + (motivoObs ? ': ' + motivoObs : '');
    
    // Desabilitar botão durante processamento
    const btn = document.getElementById('btn-processar');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Processando...';
    
    const formData = new FormData();
    formData.append('tipo', 'sem_nota');
    formData.append('venda_id', vendaId);
    formData.append('pessoa_id', pessoaId);
    formData.append('motivo', motivo);
    formData.append('itens', JSON.stringify(itens));
    
    fetch('{{ url_for("devolucao_processar") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            let msg = data.message;
            if (data.valor_credito > 0) {
                msg += `\n\nCrédito gerado: R$ ${data.valor_credito.toFixed(2)}`;
            }
            alert(msg);
            window.location.href = '{{ url_for("devolucoes") }}';
        } else {
            alert('Erro: ' + data.message);
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-check-circle"></i> Processar Devolução';
        }
    })
    .catch(error => {
        alert('Erro ao processar: ' + error);
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-check-circle"></i> Processar Devolução';
    });
}

// Buscar saldo de crédito ao selecionar cliente
document.getElementById('pessoa_id').addEventListener('change', function() {
    const pessoaId = this.value;
    const infoDiv = document.getElementById('saldo-credito-info');
    const saldoSpan = document.getElementById('saldo-atual');
    
    if (pessoaId) {
        fetch(`/api/cliente/${pessoaId}/credito`)
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    saldoSpan.textContent = `R$ ${data.saldo_credito.toFixed(2)}`;
                    infoDiv.classList.remove('d-none');
                }
            });
    } else {
        infoDiv.classList.add('d-none');
    }
});

// Inicializar - selecionar todos por padrão
document.addEventListener('DOMContentLoaded', function() {
    selecionarTodos(true);
});
</script>
{% endblock %}