{% 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 %}