{% 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"
           id="facture_{{ invoice.text }}"
           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">
  (function(){
    const widgetVar = document.getElementById("var_facture");
    if (!widgetVar) return;

    const checkboxes_id = widgetVar.getAttribute("data-widget-name");
    const dom_invoices = document.querySelectorAll('.imio_aes_invoice');
    // let dom_invoices = document.querySelectorAll('.imio_aes_invoice');
    // let checkboxes_id = document.getElementById("var_factures").getAttribute("data-widget-name")
    console.log("checkbox_id :",checkboxes_id,"dom_invoices :", dom_invoices)

    function check_uncheck(id, checkboxes_id){
      console.log("checkboxes_id : ", checkboxes_id, "id : ", id)
      const checkbox = document.querySelector(`input[value="${id}"][name="${checkboxes_id}"]`);
      checkbox.checked = !checkbox.checked
      console.log("checkbox:", checkbox)
    }

    for(let i = 0; i < dom_invoices.length; i++){
      const div = dom_invoices[i];
      const id = div.getAttribute("data-invoice-id");
      const checkbox = document.querySelector(`input[value="${id}"][name="${checkboxes_id}"]`);
      console.log("checkbox : ",checkbox, "div :",div, "checkbox?.checked : ", checkbox?.checked)

      if (checkbox?.checked) {
        div.classList.add('selected');
        console.log("Checking", div)
      }
      dom_invoices[i].addEventListener('click', function(e){
        let selected = this.parentNode.querySelector('.selected')
        console.log("selected:",selected, "this.id :", this.id)
        if (this.isSameNode(selected)) {
          this.classList.remove('selected');
        } else if (selected != null) {
          selected.classList.remove('selected');
          this.classList.add('selected');
          check_uncheck(selected.getAttribute("data-invoice-id"), checkboxes_id)
        } else {
          this.classList.add('selected');
        }
        check_uncheck(this.getAttribute("data-invoice-id"), checkboxes_id);
      })      
      // div.addEventListener("click", function(){
      //   const alreadySelected = this.classList.contains("selected");

      //   dom_invoices.forEach(d => {
      //     d.classList.remove("selected");
      //     check_uncheck(d.getAttribute("data-invoice-id"), false);
      //   });

      //   if (!alreadySelected) {
      //     this.classList.add("selected");
      //     check_uncheck(id, true);

      //     const inputHidden = document.querySelector('input[name="id_facture"]');
      //     if (inputHidden) {
      //       inputHidden.value = id;
      //     }
      //   } else {
      //     const inputHidden = document.querySelector('input[name="id_facture"]');
      //     if (inputHidden) {
      //       inputHidden.value = "";
      //     }
      //   }
      // });
    }
  })();
</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 %}