{% extends 'base.html' %}

{% block title %}Adicionar Item - Sistema de Comandas{% endblock %}

{% block content %}
<h2>Adicionar Item à Comanda</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 }}" data-preco="{{ produto.preco }}">
                {{ produto.nome }} - R$ {{ produto.preco|floatformat:2 }} (Estoque: {{ produto.estoque_atual }})
            </option>
            {% endfor %}
        </select>
    </div>
    
    <div class="form-group">
        <label for="id_quantidade">Quantidade:</label>
        <input type="number" name="quantidade" id="id_quantidade" value="1" min="1" required>
    </div>
    
    <div class="form-group">
        <label for="id_observacoes">Observações:</label>
        <textarea name="observacoes" id="id_observacoes" rows="2"></textarea>
    </div>
    
    <div class="form-group">
        <button type="submit" class="btn">Adicionar Item</button>
        <a href="{% url 'comandas:detail' request.resolver_match.kwargs.pk %}" class="btn btn-danger">Cancelar</a>
    </div>
</form>

<script>
document.getElementById('id_produto').addEventListener('change', function() {
    var select = this;
    var selectedOption = select.options[select.selectedIndex];
    var preco = selectedOption.getAttribute('data-preco');
    
    if (preco) {
        var quantidade = document.getElementById('id_quantidade').value || 1;
        var subtotal = (parseFloat(preco) * parseInt(quantidade)).toFixed(2);
        
        // Mostrar preview do subtotal
        var preview = document.getElementById('subtotal-preview');
        if (!preview) {
            preview = document.createElement('p');
            preview.id = 'subtotal-preview';
            preview.style.fontWeight = 'bold';
            preview.style.color = '#28a745';
            document.querySelector('form').appendChild(preview);
        }
        preview.textContent = 'Subtotal: R$ ' + subtotal;
    }
});

document.getElementById('id_quantidade').addEventListener('input', function() {
    // Trigger change event on product select to update subtotal
    document.getElementById('id_produto').dispatchEvent(new Event('change'));
});
</script>
{% endblock %}