haikal/templates/inventory/car_finance_form.html
2024-12-08 14:07:50 +03:00

111 lines
4.9 KiB
HTML

{% extends 'base.html' %}
{% load i18n %}
{% load custom_filters %}
{% block title %}{% trans "Car Finance Details" %}{% endblock %}
{% block content %}
<div class="container p-4">
<p class="mb-4">{% trans "Finance Details for" %}
{{ car.id_car_make.get_local_name }} - {{ car.id_car_model.get_local_name }}
</p>
<!-- Display Validation Errors -->
{% if form.errors %}
<div class="alert alert-danger">
<ul>
{% for field in form %}
{% for error in field.errors %}
<li>{{ field.label }}: {{ error }}</li>
{% endfor %}
{% endfor %}
{% for error in form.non_field_errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<form method="post" class="needs-validation" novalidate>
{% csrf_token %}
<div class="row g-1">
<div class="col-lg-4 col-xl-2">
<label for="id_cost_price" class="form-label">{% trans 'Cost Price' %}</label>
{{ form.cost_price|add_class:"form-control form-control-sm" }}
<div class="invalid-feedback">
{% trans 'Please provide a valid cost price.' %}
</div>
</div>
<div class="col-lg-4 col-xl-2">
<label for="id_profit_margin_percentage" class="form-label">{% trans 'Profit Margin' %} (%)</label>
<input type="number" name="profit_margin_percentage" id="id_profit_margin_percentage" class="form-control form-control-sm" min="0" max="100" step="1" required>
<div class="invalid-feedback">
{% trans 'Please provide a profit margin between 0 and 100.' %}
</div>
</div>
<div class="col-lg-4 col-xl-2">
<label for="id_vat_rate_percentage" class="form-label">{% trans 'VAT Rate' %} (%)</label>
<input type="number" name="vat_rate_percentage" id="id_vat_rate_percentage" class="form-control form-control-sm" min="0" max="100" step="1" required>
<div class="invalid-feedback">
{% trans 'Please provide a valid VAT rate.' %}
</div>
</div>
<div class="col-lg-2 col-xl-12">
<label class="form-label">{% trans 'Selling Price' %}</label>
<input type="text" class="form-control" id="selling_price_display" readonly>
</div>
<div class="col-lg-2 col-xl-12">
<label class="form-label">{% trans 'VAT Amount' %}</label>
<input type="text" class="form-control" id="vat_amount_display" readonly>
</div>
<div class="col-lg-2 col-xl-12">
<label class="form-label">{% trans 'Total Amount' %}</label>
<input type="text" class="form-control" id="total_display" readonly>
</div>
</div>
<div class="d-flex justify-content-end mt-4">
<button type="submit" class="btn btn-sm btn-primary me-1">{% trans "Save Finance Details" %}</button>
<a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-danger">{% trans "Cancel" %}</a>
</div>
</form>
</div>
<!-- JavaScript Section -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const costPriceInput = document.getElementById('id_cost_price');
const profitMarginInput = document.getElementById('id_profit_margin_percentage');
const vatRateInput = document.getElementById('id_vat_rate_percentage');
const sellingPriceDisplay = document.getElementById('selling_price_display');
const vatAmountDisplay = document.getElementById('vat_amount_display');
const totalDisplay = document.getElementById('total_display');
function calculateFinanceDetails() {
const costPrice = parseFloat(costPriceInput.value) || 0;
const profitMarginPercentage = parseFloat(profitMarginInput.value) || 0;
const vatRatePercentage = parseFloat(vatRateInput.value) || 0;
const profitMarginDecimal = profitMarginPercentage / 100;
const vatRateDecimal = vatRatePercentage / 100;
const sellingPrice = costPrice * (1 + profitMarginDecimal);
const vatAmount = sellingPrice * vatRateDecimal;
const totalAmount = sellingPrice + vatAmount;
sellingPriceDisplay.value = sellingPrice.toFixed(2);
vatAmountDisplay.value = vatAmount.toFixed(2);
totalDisplay.value = totalAmount.toFixed(2);
}
// Initial calculation
calculateFinanceDetails();
// Event listeners
costPriceInput.addEventListener('input', calculateFinanceDetails);
profitMarginInput.addEventListener('input', calculateFinanceDetails);
vatRateInput.addEventListener('input', calculateFinanceDetails);
});
</script>
{% endblock %}