{% extends "qommon/forms/widget.html" %}
{% block widget-content %}

{% with data_source.pp_factures_impayees as unpaid_invoices %}
  <h2>Factures impayées</h2>
  <div id="imio_aes_invoices">
    {% for invoice in unpaid_invoices %}
      <div class="activity imio_aes_invoice"
           data-invoice-id="{{ invoice.text }}"
           data-invoice-amount="{{ invoice.total_amount|decimal:2 }}">
        <p class="label">{{ invoice.name }}</p>
        <p class="montant"><strong>{{ invoice.total_amount|floatformat:2 }} €</strong></p>
      </div>
    {% endfor %}
  </div>
{% endwith %}

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    const dom_invoices = document.querySelectorAll('.imio_aes_invoice');

    dom_invoices.forEach(div => {
      const invoiceId = div.getAttribute("data-invoice-id");

      const checkbox = document.querySelector(`input[type="checkbox"][name$="element${invoiceId}"]`);
      if (!checkbox) {
        return;
      }

      checkbox.checked = true;
      checkbox.dispatchEvent(new Event('change', { bubbles: true }));
      div.classList.add("selected");

      div.addEventListener("click", () => {
        const isSelected = div.classList.contains("selected");
        div.classList.toggle("selected");

        checkbox.checked = !isSelected;
        checkbox.dispatchEvent(new Event('change', { bubbles: true }));
      });
    });
  });
</script>

<style>
#imio_aes_invoices {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1em;
}

.imio_aes_invoice {
  border: #d3d3d3 solid 1px;
  padding: 1em;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px,
              rgb(0 0 0 / 6%) 0px 2px 4px -1px;
  flex: 1 1 300px;
  max-width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: box-shadow 0.3s ease-in-out;
  position: relative;
  background-color: white;
}

.imio_aes_invoice:hover {
  box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px,
              rgb(0 0 0 / 5%) 0px 4px 6px -2px;
  filter: brightness(1.03);
  border: #212121 solid 1px;
}

.imio_aes_invoice.selected {
  background-color: #386ede;
  color: white;
  border: 2px solid #386ede;
}

.imio_aes_invoice.selected::after {
  content: "✔";
  font-size: 1.2em;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 10px;
  right: 15px;
}

.imio_aes_invoice p {
  margin: 0.2em 0;
}

.imio_aes_invoice .label {
  font-weight: bold;
  font-size: 1em;
}

.imio_aes_invoice .montant {
  font-size: 1.1em;
}

@media all and (max-device-width: 450px) {
  .imio_aes_invoice {
    max-width: 100%;
    flex-basis: 100%;
  }
}
</style>

{% endblock %}