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

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

<div class="row mb-3">
  <div class="col-md-4">
    <label for="category-filter" class="form-label">Expense Category</label>
    <select id="category-filter" class="form-select">
      <option value="">All</option>
      {% for cat in categories %}
        <option value="{{ cat.title }}">{{ cat.title }}</option>
      {% endfor %}
    </select>
  </div>
</div>
<table id="expense-report" class="table table-bordered table-striped nowrap" style="width:100%">
  <thead class="table-light">
    <tr>
      <th>ID</th>
      <th>Category</th>
      <th>Paid To</th>
      <th>Amount</th>
      <th>Currency</th>
      <th>Description</th>
      <th>Remarks</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    {% for expense in expenses %}
    <tr>
      <td>{{ expense.id }}</td>
      <td>{{ expense.expense_category }}</td>
      <td>{{ expense.spent_by }}</td>
      <td>{{ expense.amount }}</td>
      <td>{{ expense.currency.code }}</td>
      <td>{{ expense.description }}</td>
      <td class="remarks-col">{{ expense.remarks }}</td>
      <td>{{ expense.date }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<!-- Summary Section -->
<div class="mt-4 w-50">
  <h5>Summary (Grouped by Currency)</h5>
  <table class="table table-bordered" id="summary-table">
    <thead>
      <tr>
        <th>Currency</th>
        <th>Total Amount</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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" />

<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>
<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>

<style>
  td.remarks-col {
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal !important;
    max-width: 300px;
  }
</style>

<script>
  function updateSummary(table) {
    const summary = {};
    table.rows({ search: 'applied' }).every(function () {
      const cells = $(this.node()).find('td');
      const currency = cells.eq(4).text().trim(); // Index shifted
      const amount = parseFloat(cells.eq(3).text()) || 0;

      if (!summary[currency]) summary[currency] = 0;
      summary[currency] += amount;
    });

    const tbody = $("#summary-table tbody").empty();
    Object.entries(summary).forEach(([currency, total]) => {
      tbody.append(`<tr><td>${currency}</td><td>${total.toFixed(2)}</td></tr>`);
    });

    return Object.entries(summary).map(([c, t]) => `${c}: ${t.toFixed(2)}`).join('\n');
  }

  $(document).ready(function () {
    const table = $('#expense-report').DataTable({
      responsive: true,
      pageLength: 10,
      dom: "<'row mb-3'<'col-md-4'l><'col-md-4 text-center'B><'col-md-4'f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row mt-2'<'col-md-6'i><'col-md-6'p>>",

      buttons: [
        {
          extend: 'copy',
          className: 'btn btn-secondary btn-sm',
          messageBottom: function () {
            return updateSummary(table);
          }
        },
        {
          extend: 'csv',
          className: 'btn btn-info btn-sm',
          messageBottom: function () {
            return updateSummary(table);
          }
        },
        {
          extend: 'excel',
          className: 'btn btn-success btn-sm',
          messageBottom: function () {
            return updateSummary(table);
          }
        },
        {
          extend: 'pdf',
          className: 'btn btn-danger btn-sm',
          customize: function (doc) {
            doc.content.push({
              text: updateSummary(table),
              margin: [0, 10, 0, 0],
              alignment: 'left'
            });
          }
        },
        {
          extend: 'print',
          className: 'btn btn-primary btn-sm',
          messageBottom: function () {
            return updateSummary(table);
          }
        }
      ],
      drawCallback: function () {
        updateSummary(this.api());
      }
    });

    table.on('search.dt page.dt order.dt', function () {
      updateSummary(table);
    });

    updateSummary(table);
    $('#category-filter').on('change', function () {
      table.column(1).search(this.value).draw();
    });
  });
</script>

{% endblock %}