{% extends "base.html" %}

{% block title %}Add Fuel Purchase{% endblock %}

{% block content %}
<h2 class="uk-heading-line"><span>Add Fuel Purchase</span></h2>

<form method="post" class="uk-form-stacked">
    {% csrf_token %}

    {% for field in form %}
        <div class="uk-margin">
            <label class="uk-form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
            <div class="uk-form-controls">
                {{ field }}
                {% if field.help_text %}
                    <p class="uk-text-meta">{{ field.help_text }}</p>
                {% endif %}
                {% for error in field.errors %}
                    <p class="uk-text-danger">{{ error }}</p>
                {% endfor %}
            </div>
        </div>
    {% endfor %}

    <button type="submit" class="uk-button uk-button-primary">Save</button>
    <a href="{% url 'fuelpurchase_list_current' %}" class="uk-button uk-button-default">Cancel</a>

</form>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const totalCostInput = document.getElementById("id_total_cost");
    const pricePerLitreInput = document.getElementById("id_price_per_litre");
    const amountLitresInput = document.getElementById("id_amount_litres");

    function updateAmountLitres() {
        const total = parseFloat(totalCostInput.value);
        const price = parseFloat(pricePerLitreInput.value);
        if (!isNaN(total) && !isNaN(price) && price > 0) {
            amountLitresInput.value = (total / price).toFixed(2);
        } else {
            amountLitresInput.value = "";
        }
    }

    totalCostInput.addEventListener("input", updateAmountLitres);
    pricePerLitreInput.addEventListener("input", updateAmountLitres);
});
</script>
{% endblock %}