{% extends 'base.html' %}

{% block title %}Nova Movimentação de Estoque - Sistema de Comandas{% endblock %}

{% block content %}
<h2>Nova Movimentação de Estoque</h2>

<form method="post">
    {% csrf_token %}
    
    <div class="form-group">
        <label for="id_produto">Produto:</label>
        <select name="produto" id="id_produto" required>
            <option value="">Selecione um produto</option>
            {% for produto in form.produto.field.queryset %}
            <option value="{{ produto.pk }}" {% if form.produto.value == produto.pk %}selected{% endif %}>
                {{ produto.nome }} (Estoque atual: {{ produto.estoque_atual }})
            </option>
            {% endfor %}
        </select>
        {% if form.produto.errors %}
            <div class="alert alert-error">{{ form.produto.errors }}</div>
        {% endif %}
    </div>
    
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
        <div class="form-group">
            <label for="id_tipo">Tipo de Movimentação:</label>
            <select name="tipo" id="id_tipo" required>
                <option value="">Selecione o tipo</option>
                <option value="entrada" {% if form.tipo.value == "entrada" %}selected{% endif %}>Entrada</option>
                <option value="saida" {% if form.tipo.value == "saida" %}selected{% endif %}>Saída</option>
                <option value="ajuste" {% if form.tipo.value == "ajuste" %}selected{% endif %}>Ajuste</option>
            </select>
            {% if form.tipo.errors %}
                <div class="alert alert-error">{{ form.tipo.errors }}</div>
            {% endif %}
        </div>
        
        <div class="form-group">
            <label for="id_quantidade">Quantidade:</label>
            <input type="number" name="quantidade" id="id_quantidade" min="1" 
                   value="{{ form.quantidade.value|default:"" }}" required>
            {% if form.quantidade.errors %}
                <div class="alert alert-error">{{ form.quantidade.errors }}</div>
            {% endif %}
        </div>
    </div>
    
    <div class="form-group">
        <label for="id_motivo">Motivo:</label>
        <input type="text" name="motivo" id="id_motivo" maxlength="200" 
               value="{{ form.motivo.value|default:"" }}" required 
               placeholder="Ex: Compra, Venda, Perda, Correção de inventário">
        {% if form.motivo.errors %}
            <div class="alert alert-error">{{ form.motivo.errors }}</div>
        {% endif %}
    </div>
    
    <div class="form-group">
        <label for="id_observacoes">Observações (opcional):</label>
        <textarea name="observacoes" id="id_observacoes" rows="3" 
                  placeholder="Informações adicionais sobre a movimentação">{{ form.observacoes.value|default:"" }}</textarea>
        {% if form.observacoes.errors %}
            <div class="alert alert-error">{{ form.observacoes.errors }}</div>
        {% endif %}
    </div>
    
    <div class="form-group">
        <button type="submit" class="btn btn-success">Registrar Movimentação</button>
        <a href="{% url 'estoque:movimentacoes' %}" class="btn btn-danger">Cancelar</a>
    </div>
</form>

<script>
// Adicionar funcionalidade para mostrar informações do produto selecionado
document.getElementById('id_produto').addEventListener('change', function() {
    var select = this;
    var selectedOption = select.options[select.selectedIndex];
    
    if (selectedOption.value) {
        // Extrair estoque atual do texto da opção
        var text = selectedOption.text;
        var match = text.match(/Estoque atual: (\d+)/);
        
        if (match) {
            var estoqueAtual = parseInt(match[1]);
            var tipoSelect = document.getElementById('id_tipo');
            var quantidadeInput = document.getElementById('id_quantidade');
            
            // Adicionar validação para saída não exceder estoque
            quantidadeInput.addEventListener('input', function() {
                if (tipoSelect.value === 'saida') {
                    var quantidade = parseInt(this.value);
                    if (quantidade > estoqueAtual) {
                        this.setCustomValidity('Quantidade não pode ser maior que o estoque atual (' + estoqueAtual + ')');
                    } else {
                        this.setCustomValidity('');
                    }
                }
            });
            
            tipoSelect.addEventListener('change', function() {
                if (this.value === 'saida') {
                    quantidadeInput.max = estoqueAtual;
                } else {
                    quantidadeInput.removeAttribute('max');
                }
                quantidadeInput.setCustomValidity('');
            });
        }
    }
});

// Adicionar descrições dos tipos de movimentação
document.getElementById('id_tipo').addEventListener('change', function() {
    var tipo = this.value;
    var descricoes = {
        'entrada': 'Adiciona produtos ao estoque',
        'saida': 'Remove produtos do estoque',
        'ajuste': 'Define uma nova quantidade exata no estoque'
    };
    
    // Remover descrição anterior se existir
    var descricaoAnterior = document.querySelector('.tipo-descricao');
    if (descricaoAnterior) {
        descricaoAnterior.remove();
    }
    
    if (tipo && descricoes[tipo]) {
        var descricao = document.createElement('small');
        descricao.className = 'tipo-descricao';
        descricao.style.color = '#666';
        descricao.style.fontStyle = 'italic';
        descricao.textContent = descricoes[tipo];
        this.parentNode.appendChild(descricao);
    }
});
</script>
{% endblock %}