{% extends 'admin_pages/base_admin.html' %}
{% block title %}Invoice Report{% endblock %}

{% block content %}
<h2 class="mb-4">Invoice Report</h2>

<div class="d-flex justify-content-between align-items-center mb-3 d-print-block">
  <div class="d-print-none">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'admin_page' %}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{% url 'cargo:invoice_report' %}">Reports</a></li>
        <li class="breadcrumb-item active" aria-current="page">Sales</li>
      </ol>
    </nav>
  </div>
</div>

<!-- Invoice Table -->
<table id="invoice-report" class="table table-bordered table-striped nowrap" style="width:100%">
  <thead class="table-light">
    <tr>
      <th>ID</th>
      <th>Sender</th>
      <th>Receiver</th>
      <th>Total Amount ($)</th>
      <th>Paid</th>
      <th>Remain</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    {% for invoice in invoices %}
    <tr>
      <td>{{ invoice.id }}</td>
      <td>{{ invoice.sender }}</td>
      <td>{{ invoice.receiver }}</td>
      <td>{{ invoice.total_amount|floatformat:2 }}</td>
      <td>{{ invoice.amount_paid|floatformat:2 }}</td>
      <td>{{ invoice.remain_amount|floatformat:2 }}</td>
      <td>{{ invoice.created_at|date:"Y-m-d" }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<!-- Summary Totals -->
<div class="mt-4 w-50">
  <h5>Summary (Filtered)</h5>
  <table class="table table-bordered">
    <tr><th>Total Amount</th><td id="sum-total-amount">$0.00</td></tr>
    <tr><th>Total Paid</th><td id="sum-amount-paid">$0.00</td></tr>
    <tr><th>Total Remain</th><td id="sum-remain-amount">$0.00</td></tr>
  </table>
</div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css" />

<!-- DataTables + Buttons JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>

<!-- PDF & Excel Dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<script>
  function calculateSummary(table) {
    let total = 0, paid = 0, remain = 0;

    table.rows({ search: 'applied' }).every(function () {
      const cells = $(this.node()).find('td');
      total += parseFloat(cells.eq(3).text()) || 0;
      paid += parseFloat(cells.eq(4).text()) || 0;
      remain += parseFloat(cells.eq(5).text()) || 0;
    });

    const summary = `Summary:\nTotal Amount: $${total.toFixed(2)}\nPaid: $${paid.toFixed(2)}\nRemain: $${remain.toFixed(2)}`;

    document.getElementById('sum-total-amount').textContent = `$${total.toFixed(2)}`;
    document.getElementById('sum-amount-paid').textContent = `$${paid.toFixed(2)}`;
    document.getElementById('sum-remain-amount').textContent = `$${remain.toFixed(2)}`;

    return summary;
  }

  $(document).ready(function () {
    const table = $('#invoice-report').DataTable({
      pageLength: 10,
      responsive: true,
      dom: "<'row mb-3'<'col-md-3'l><'col-md-6 text-center'B><'col-md-3'f>>" +
           "<'row'<'col-sm-12'tr>>" +
           "<'row mt-2'<'col-sm-5'i><'col-sm-7'p>>",
      buttons: [
        {
          extend: 'copy',
          className: 'btn btn-secondary btn-sm',
          messageBottom: function () {
            return calculateSummary(table);
          }
        },
        {
          extend: 'csv',
          className: 'btn btn-info btn-sm',
          messageBottom: function () {
            return calculateSummary(table);
          }
        },
        {
          extend: 'excel',
          className: 'btn btn-success btn-sm',
          messageBottom: function () {
            return calculateSummary(table);
          }
        },
        {
          extend: 'pdf',
          className: 'btn btn-danger btn-sm',
          customize: function (doc) {
            const summary = calculateSummary(table);
            doc.content.push({
              text: summary,
              margin: [0, 10, 0, 0],
              alignment: 'left'
            });
          }
        },
        {
          extend: 'print',
          className: 'btn btn-primary btn-sm',
          messageBottom: function () {
            return calculateSummary(table);
          }
        }
      ],
      drawCallback: function () {
        calculateSummary(this.api());
      }
    });

    // Live update summary
    table.on('search.dt page.dt order.dt', function () {
      calculateSummary(table);
    });

    // Initial update
    calculateSummary(table);
  });
</script>

{% endblock %}