{% extends 'index.html' %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}Edit Invoice{% endblock %}

{% block content %}
<br>

<div class="container d-flex justify-content-center align-items-center" style="margin-top: 80px;">
  <div class="bg-light p-4 shadow-lg rounded col-12 col-md-8 col-lg-6">
    <h2 class="text-center mb-4">
      {% if form.instance.id %}Edit{% else %}Create An{% endif %} Invoice
    </h2>

    <form method="POST">
      {% csrf_token %}
      {{ form|crispy }}

      <div class="d-grid gap-2 mt-3">
        <button type="submit" class="btn btn-primary btn-lg w-100">Submit</button>
      </div>
    </form>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    let invoiceDateInput = document.getElementById("id_date");
    let dueDateInput = document.getElementById("id_due");

    function updateDueDate() {
      if (invoiceDateInput.value) {
        let date = new Date(invoiceDateInput.value);
        date.setDate(date.getDate() + 30);
        let dueDate = date.toISOString().split("T")[0];
        dueDateInput.value = dueDate;
      }
    }

    invoiceDateInput.addEventListener("change", updateDueDate);
  });
</script>

<style>
  @media (max-width: 768px) {
    .container {
      padding: 0 15px; /* Adds padding on small screens */
    }
  }
</style>

{% endblock %}
