{% extends 'base.html' %}
{% load static %}
{% load humanize %}
{% block content %}
{% block extra_js %}
<script src="https://cdn.datatables.net/plug-ins/1.10.20/sorting/datetime-moment.js"></script>
<script>
  $(document).ready(function () {
    $('#TblFatture').DataTable({
      paging: true,
      pageLength: 25,
      language: {
        decimal: ",", thousands: ".",
        url: "https://cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"
      }
    });
    $('*[data-confirm="true"]').on('click', function() {
      return confirm("Conferma l'operazione?");
    });
  });
  function getConfirmation(id) {
    return confirm("Confermi l'operazione su Id." + id + "?");
  }
</script>
{% endblock extra_js %}

<div class="page-header">
  <h2>
    <i class="fa-solid fa-file-invoice-dollar" style="color: var(--accent); font-size: 20px;"></i>
    Fatture — Amministrazione
    <span class="badge-anno">A.S. {{ annoscol }}/{{ annoscol|add:1 }}</span>
  </h2>
</div>

<div class="toolbar" style="margin-bottom: 24px;">
  <a href="/app/listapren_admin/{{ annoscol }}/" class="btn btn-outline-primary">
    <i class="fa-solid fa-list-check"></i> Prenotazioni
  </a>
</div>

<div class="card" style="margin-bottom: 20px;">
  <div class="card-body" style="padding: 20px 24px;">
    <form action="/app/listafatture_admin/{{ annoscol }}/" method="POST" enctype="multipart/form-data" style="display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;">
      {% csrf_token %}
      <div>
        <label class="form-label">Filtra per libreria</label>
        {{ libreriaform }}
      </div>
      <button type="submit" class="btn btn-primary"><i class="fa-solid fa-filter"></i> Filtra</button>
      {% if modo == "filtra" %}
        <a href="/app/listafatture_admin/{{ annoscol }}/" class="btn btn-outline-primary">
          <i class="fa-solid fa-list"></i> Lista completa
        </a>
      {% endif %}
    </form>
  </div>
</div>

<div style="display: flex; justify-content: flex-end; margin-bottom: 12px;">
  <div style="background: var(--primary-light); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 20px; font-size: 14px; color: var(--primary);">
    <i class="fa-solid fa-sigma" style="margin-right: 6px; color: var(--accent);"></i>
    Totale fatture: <strong>€ {{ totale_fatture|intcomma }}</strong>
  </div>
</div>

<div class="table-wrapper">
  <table id="TblFatture" class="table table-striped table-bordered" style="width:100%">
    <thead>
      <tr>
        <th>ID</th>
        <th>Data</th>
        <th>Libreria</th>
        <th>Classe</th>
        <th>Importo</th>
        <th>Note</th>
      </tr>
    </thead>
    <tbody>
      {% for ris in risultati %}
        <tr>
          <td><span style="font-weight:600; color: var(--text-muted);">#{{ ris.pk }}</span></td>
          <td>{{ ris.fa_data|date:"d/m/Y" }}</td>
          <td>{{ ris.fa_libreria.denominazione }}</td>
          <td style="text-align: center;">{% if ris.fa_classe %}{{ ris.fa_classe }}{% endif %}</td>
          <td style="text-align: right; font-weight: 600;">€ {{ ris.fa_importo|intcomma }}</td>
          <td>{{ ris.fa_note }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}