{% extends "base.html" %}

{% block title %}{% if credito %}Editar{% else %}Novo{% endif %} Crédito Loja - CapeSystem{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-wallet2"></i> 
                        {% if credito %}Editar Crédito Loja{% else %}Cadastrar Crédito Loja{% endif %}
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ url_for('credito_loja_novo') }}">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label"><strong>Cliente *</strong></label>
                                <select name="pessoa_id" class="form-select" required id="selectCliente">
                                    <option value="">Selecione o cliente...</option>
                                    {% for pessoa in pessoas %}
                                    <option value="{{ pessoa.id }}" 
                                            data-saldo="{{ pessoa.saldo_credito_loja or 0 }}"
                                            {% if credito and credito.pessoa_id == pessoa.id %}selected{% endif %}>
                                        {{ pessoa.nome }} 
                                        {% if pessoa.cpf_cnpj %} - {{ pessoa.cpf_cnpj }}{% endif %}
                                    </option>
                                    {% endfor %}
                                </select>
                                <div id="infoSaldoAtual" class="form-text text-info" style="display: none;">
                                    <i class="bi bi-info-circle"></i> Saldo atual: <strong id="saldoAtualValor">R$ 0,00</strong>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label"><strong>Valor do Crédito (R$) *</strong></label>
                                <div class="input-group">
                                    <span class="input-group-text">R$</span>
                                    <input type="number" name="valor" class="form-control form-control-lg" 
                                           step="0.01" min="0.01" required 
                                           placeholder="0,00"
                                           value="{{ credito.valor_original if credito else '' }}">
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label class="form-label"><strong>Tipo de Origem</strong></label>
                                <select name="tipo_origem" class="form-select">
                                    <option value="bonificacao" {% if credito and credito.tipo_origem == 'bonificacao' %}selected{% endif %}>
                                        Bonificação
                                    </option>
                                    <option value="cortesia" {% if credito and credito.tipo_origem == 'cortesia' %}selected{% endif %}>
                                        Cortesia
                                    </option>
                                    <option value="devolucao" {% if credito and credito.tipo_origem == 'devolucao' %}selected{% endif %}>
                                        Devolução
                                    </option>
                                    <option value="troca" {% if credito and credito.tipo_origem == 'troca' %}selected{% endif %}>
                                        Troca
                                    </option>
                                    <option value="promocao" {% if credito and credito.tipo_origem == 'promocao' %}selected{% endif %}>
                                        Promoção
                                    </option>
                                    <option value="manual" {% if credito and credito.tipo_origem == 'manual' %}selected{% endif %}>
                                        Cadastro Manual
                                    </option>
                                    <option value="outro" {% if credito and credito.tipo_origem == 'outro' %}selected{% endif %}>
                                        Outro
                                    </option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label"><strong>Data de Validade</strong></label>
                                <input type="date" name="data_validade" class="form-control"
                                       value="{{ credito.data_validade.strftime('%Y-%m-%d') if credito and credito.data_validade else '' }}">
                                <div class="form-text">Deixe em branco para crédito sem validade</div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label"><strong>Observações</strong></label>
                            <textarea name="observacoes" class="form-control" rows="3" 
                                      placeholder="Motivo do crédito, referência, etc...">{{ credito.observacoes if credito else '' }}</textarea>
                        </div>
                        
                        <hr>
                        
                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('credito_loja_lista') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> Voltar
                            </a>
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="bi bi-check-lg"></i> Salvar Crédito
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('selectCliente').addEventListener('change', function() {
    const option = this.options[this.selectedIndex];
    const saldo = parseFloat(option.dataset.saldo || 0);
    const infoDiv = document.getElementById('infoSaldoAtual');
    const valorSpan = document.getElementById('saldoAtualValor');
    
    if (this.value) {
        valorSpan.textContent = 'R$ ' + saldo.toFixed(2).replace('.', ',');
        infoDiv.style.display = 'block';
    } else {
        infoDiv.style.display = 'none';
    }
});
</script>
{% endblock %}