{% extends "base.html" %}

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

{% block content %}
<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"></i> Devolução - Selecionar Itens</h2>
        <a href="{{ url_for('devolucao_sem_nota') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Voltar
        </a>
    </div>

    <div class="row">
        <!-- Dados da Venda -->
        <div class="col-md-4">
            <div class="card mb-4">
                <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">
                        <tr>
                            <th>Pedido:</th>
                            <td><strong>{{ venda.numero_pedido }}</strong></td>
                        </tr>
                        <tr>
                            <th>Data:</th>
                            <td>{{ venda.data_venda.strftime('%d/%m/%Y') 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) }} ({{ "%.1f"|format(desconto_percentual) }}%)</td>
                        </tr>
                        {% endif %}
                        <tr>
                            <th>Total:</th>
                            <td><strong class="text-success">R$ {{ "%.2f"|format(venda.valor_total or 0) }}</strong></td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Cliente -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-person"></i> Cliente para Crédito</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <select class="form-select" id="pessoa_id" name="pessoa_id">
                            <option value="">Selecione o cliente...</option>
                            {% if venda.pessoa %}
                            <option value="{{ venda.pessoa.id }}" selected>{{ venda.pessoa.nome }}</option>
                            {% endif %}
                        </select>
                        <div class="form-text">
                            O crédito será lançado para este cliente.
                        </div>
                    </div>
                    <div id="saldo-credito-info" class="alert alert-info d-none">
                        <small>Saldo atual: <strong id="saldo-atual">R$ 0,00</strong></small>
                    </div>
                </div>
            </div>

            <!-- Motivo -->
            <div class="card mb-4">
                <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...</option>
                        <option value="Arrependimento">Arrependimento</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="Outro">Outro</option>
                    </select>
                    <textarea class="form-control" id="motivo" rows="2" placeholder="Detalhes..."></textarea>
                </div>
            </div>

            <!-- Resumo -->
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <h6>CRÉDITO A GERAR</h6>
                    <h2 id="total-devolucao">R$ 0,00</h2>
                    <button class="btn btn-light btn-lg w-100 mt-2" onclick="processarDevolucao()">
                        <i class="bi bi-check-circle"></i> Processar Devolução
                    </button>
                </div>
            </div>
        </div>

        <!-- Itens -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-box-seam"></i> Itens da Venda</h5>
                </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%">
                                        <input type="checkbox" id="selecionar-todos" onchange="selecionarTodos(this)">
                                    </th>
                                    <th>Produto</th>
                                    <th class="text-center">Qtd Original</th>
                                    <th class="text-center">Qtd Devolver</th>
                                    <th class="text-end">Preço Unit.</th>
                                    <th class="text-end">Preço Ajust.</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in itens %}
                                <tr id="item-{{ item.id }}">
                                    <td>
                                        <input type="checkbox" class="item-check" 
                                               data-item-id="{{ item.id }}"
                                               data-produto-id="{{ item.produto_id }}"
                                               data-quantidade="{{ item.quantidade }}"
                                               data-valor-unitario="{{ item.valor_unitario }}"
                                               onchange="atualizarTotal()">
                                    </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">{{ item.produto.codigo_barras }}</small>
                                        {% endif %}
                                    </td>
                                    <td class="text-center">{{ item.quantidade }}</td>
                                    <td class="text-center">
                                        <input type="number" class="form-control form-control-sm text-center qtd-devolver" 
                                               style="width: 80px; display: inline-block;"
                                               min="0" max="{{ item.quantidade }}" step="0.01"
                                               value="{{ item.quantidade }}"
                                               data-item-id="{{ item.id }}"
                                               onchange="atualizarTotal()">
                                    </td>
                                    <td class="text-end">R$ {{ "%.2f"|format(item.valor_unitario) }}</td>
                                    <td class="text-end">
                                        {% set valor_ajustado = item.valor_unitario * (1 - desconto_percentual/100) %}
                                        <span class="valor-ajustado" data-valor="{{ valor_ajustado }}">
                                            R$ {{ "%.2f"|format(valor_ajustado) }}
                                        </span>
                                        {% if desconto_percentual > 0 %}
                                        <br><small class="text-danger">(-{{ "%.1f"|format(desconto_percentual) }}%)</small>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <strong class="item-total">R$ 0,00</strong>
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="7" class="text-center py-4 text-muted">
                                        Nenhum item encontrado nesta venda.
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

function atualizarTotal() {
    let total = 0;
    
    document.querySelectorAll('.item-check:checked').forEach(checkbox => {
        const itemId = checkbox.dataset.itemId;
        const valorUnitario = parseFloat(checkbox.dataset.valorUnitario);
        const qtdInput = document.querySelector(`.qtd-devolver[data-item-id="${itemId}"]`);
        const qtd = parseFloat(qtdInput.value) || 0;
        
        // Aplicar desconto proporcional
        const valorAjustado = valorUnitario * (1 - descontoPercentual/100);
        const totalItem = qtd * valorAjustado;
        
        total += totalItem;
        
        // 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)}`;
}

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 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;
        
        const valorAjustado = valorUnitario * (1 - descontoPercentual/100);
        
        itens.push({
            item_venda_id: parseInt(itemId),
            produto_id: parseInt(produtoId),
            quantidade: qtd,
            quantidade_original: quantidadeOriginal,
            valor_unitario: valorUnitario,
            valor_ajustado: valorAjustado
        });
        
        total += qtd * valorAjustado;
    });
    
    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?')) {
            return;
        }
    }
    
    const motivoSelect = document.getElementById('motivo-select').value;
    const motivoTexto = document.getElementById('motivo').value;
    const motivo = motivoSelect + (motivoTexto ? ': ' + motivoTexto : '');
    
    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) {
            alert(data.message + '\n\nCrédito gerado: R$ ' + data.valor_credito.toFixed(2));
            window.location.href = '{{ url_for("devolucoes") }}';
        } else {
            alert('Erro: ' + data.message);
        }
    })
    .catch(error => {
        alert('Erro ao processar: ' + error);
    });
}

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

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