{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block title %}Add Expense - POS System{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Add New Expense</h4>
            </div>
            <div class="card-body">
                <form method="post" id="expenseForm">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-md-6">
                            {{ form.amount|as_crispy_field }}
                        </div>
                        <div class="col-md-6">
                            {{ form.category|as_crispy_field }}
                            <div id="new-category" class="mt-2" style="display: none;">
                                {{ form.new_category|as_crispy_field }}
                            </div>
                        </div>
                    </div>
                    {{ form.description|as_crispy_field }}
                    <div class="row">
                        <div class="col-md-6">
                            {{ form.expense_date|as_crispy_field }}
                        </div>
                        <div class="col-md-6">
                            {{ form.payment_method|as_crispy_field }}
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Save Expense</button>
                        <a href="{% url 'dashboard' %}" class="btn btn-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const categorySelect = document.getElementById('id_category');
    const newCategoryDiv = document.getElementById('new-category');
    
    if (categorySelect) {
        categorySelect.addEventListener('change', function() {
            if (this.value === 'new') {
                newCategoryDiv.style.display = 'block';
            } else {
                newCategoryDiv.style.display = 'none';
            }
        });
    }
});
</script>
{% endblock %}