{% extends 'admin_pages/base_admin.html' %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<h2 class="mb-4">{{ title }}</h2>
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'inventory:admin_page' %}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{% url 'inventory:consumer_list' %}">Consumers</a></li>
    <li class="breadcrumb-item active" aria-current="page">Payment</li>
  </ol>
</nav>
<p><strong>Consumer:</strong> {{ consumer.name }}</p>

<div class="alert {% if balance > 0 %}alert-info{% else %}alert-danger{% endif %}">
  <strong>Current Balance for {{ consumer.name }}:</strong>
  <span id="balance-display">AFN {{ balance|floatformat:2 }}</span>
</div>


<form method="post" id="payment-form">
  {% csrf_token %}
  {{ form.as_p }}
  <div id="error-message" class="text-danger fw-bold mb-2" style="display: none;"></div>
  <button type="submit" class="btn btn-success" id="submit-button">Submit Payment</button>
  <a href="{% url 'inventory:consumer_list' %}" class="btn btn-secondary">Cancel</a>
</form>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const balance = parseFloat("{{ balance|floatformat:'2' }}");
  const form = document.getElementById("payment-form");
  const amountInput = document.getElementById("id_amount_paid");
  const errorMessage = document.getElementById("error-message");
  const submitButton = document.getElementById("submit-button");

  function validateAmount() {
    const enteredAmount = parseFloat(amountInput.value || 0);
    if (enteredAmount > balance) {
      errorMessage.textContent = `Amount paid cannot exceed current balance (AFN ${balance.toFixed(2)}).`;
      errorMessage.style.display = "block";
      amountInput.classList.add("is-invalid");
      submitButton.disabled = true;
    } else {
      errorMessage.style.display = "none";
      amountInput.classList.remove("is-invalid");
      submitButton.disabled = false;
    }
  }

  amountInput.addEventListener("input", validateAmount);

  form.addEventListener("submit", function (e) {
    if (parseFloat(amountInput.value || 0) > balance) {
      e.preventDefault();
    }
  });

  validateAmount(); // Initial validation on load
});
</script>
{% endblock %}