{% extends 'base.html' %}
{% load static %}
{% 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 () {
    $('#TblRichieste').DataTable({
      paging: true,
      pageLength: 10,
      language: {
        decimal: ",", thousands: ".",
        url: "https://cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"
      }
    });
  });
  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-box-open" style="color: var(--accent); font-size: 20px;"></i>
    Libri Consegnati — {{ libreria }}
    <span class="badge-anno">A.S. {{ annoscol }}/{{ annoscol|add:1 }}</span>
  </h2>
</div>

<!-- Riepilogo per classe -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 24px;">
  {% for label, val in forloop.parentloop|default_if_none:"" %}{% endfor %}
  <div class="card" style="text-align: center; padding: 16px;">
    <div style="font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;">Prima</div>
    <div style="font-size: 24px; font-weight: 700; color: var(--primary);">{{ tot1 }}</div>
  </div>
  <div class="card" style="text-align: center; padding: 16px;">
    <div style="font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;">Seconda</div>
    <div style="font-size: 24px; font-weight: 700; color: var(--primary);">{{ tot2 }}</div>
  </div>
  <div class="card" style="text-align: center; padding: 16px;">
    <div style="font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;">Terza</div>
    <div style="font-size: 24px; font-weight: 700; color: var(--primary);">{{ tot3 }}</div>
  </div>
  <div class="card" style="text-align: center; padding: 16px;">
    <div style="font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;">Quarta</div>
    <div style="font-size: 24px; font-weight: 700; color: var(--primary);">{{ tot4 }}</div>
  </div>
  <div class="card" style="text-align: center; padding: 16px;">
    <div style="font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;">Quinta</div>
    <div style="font-size: 24px; font-weight: 700; color: var(--primary);">{{ tot5 }}</div>
  </div>
  <div class="card" style="text-align: center; padding: 16px; background: var(--primary-light); border-color: var(--primary);">
    <div style="font-size: 11px; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .05em;">Tot. consegnato</div>
    <div style="font-size: 24px; font-weight: 700; color: var(--primary);">{{ totale_gen }}</div>
  </div>
  <div class="card" style="text-align: center; padding: 16px;">
    <div style="font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;">Tot. fatturato</div>
    <div style="font-size: 24px; font-weight: 700; color: var(--success);">{{ tot_fatturato }}</div>
  </div>
  <div class="card" style="text-align: center; padding: 16px; background: var(--accent-light); border-color: #e8c97a;">
    <div style="font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .05em;">Da fatturare</div>
    <div style="font-size: 24px; font-weight: 700; color: var(--accent);">{{ da_fatturare }}</div>
  </div>
</div>

<div class="toolbar">
  <a href="/app/prenota" class="btn btn-primary"><i class="fa-solid fa-plus"></i> Inserisci prenotazione</a>
  <a href="/app/listapren_libreria/{{ annoscol }}" class="btn btn-outline-primary"><i class="fa-solid fa-list"></i> Lista completa</a>
  <a href="/app/fatturainsert" class="btn btn-outline-primary"><i class="fa-solid fa-file-invoice"></i> Fatture</a>
</div>

<div class="table-wrapper">
  <table id="TblRichieste" class="table table-striped table-bordered" style="width:100%">
    <thead>
      <tr>
        <th>ID</th>
        <th>Cod. fiscale</th>
        <th>Cod. scuola</th>
        <th>Scuola</th>
        <th>Classe</th>
        <th>Spesa</th>
        <th>Stato</th>
        <th>Azioni</th>
      </tr>
    </thead>
    <tbody>
      {% for ris in risultati %}
        <tr>
          <td><span style="font-weight:600; color: var(--text-muted);">#{{ ris.pk }}</span></td>
          <td style="font-family: monospace; font-size: 12.5px;">{{ ris.pr_codfiscale }}</td>
          <td>{{ ris.pr_scuola.id }}</td>
          <td>{{ ris.pr_scuola.nome }}</td>
          <td style="text-align: center;">{{ ris.pr_classe }}</td>
          <td style="text-align: right; font-weight: 600;">€ {{ ris.pr_spesa }}</td>
          <td style="text-align: center;">
            {% if not ris.pr_consegnato %}
              <a href="/app/move_to_consegnato/{{ ris.pk }}"
                 onclick="return confirm('Passare su consegnati la pren. con Id {{ ris.id }}?')"
                 class="btn btn-sm btn-outline-primary">
                <i class="fa-solid fa-box-archive"></i> Consegna
              </a>
            {% else %}
              <span class="badge" style="background: #d1fae5; color: var(--success); border: 1px solid #6ee7b7;">
                <i class="fa-solid fa-check"></i> Consegnato
              </span>
            {% endif %}
          </td>
          <td style="text-align: center;">
            <a href="/app/reset_no_consegnato/{{ ris.pk }}"
               onclick="return confirm('Rimettere tra i NON CONSEGNATI la prenotazione con Id {{ ris.id }}?')"
               class="btn btn-sm btn-danger" title="Annulla consegna">
              <i class="fa-solid fa-rotate-left"></i>
            </a>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}