{% extends 'admin_pages/base_admin.html' %}
{% block title %}{{ title }} | Admin Panel{% endblock %}

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

<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'inventory:admin_page' %}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{% url 'inventory:supplier_list' %}">Suppliers</a></li>
    <li class="breadcrumb-item active" aria-current="page">Accounts</li>
  </ol>
</nav>

<table id="account-report" class="table table-bordered table-hover">
  <thead class="table-light">
    <tr>
      <th>No.</th>
      <th>ID</th>
      <th>Date</th>
      <th>TX Number</th>
      <th>Receipt No.</th>
      <th>Details</th>
      <th>Credit</th>
      <th>Debit</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    {% for account in accounts %}
    <tr>
      <td></td>
      <td>{{ account.id }}</td>
      <td>{{ account.tx_date }}</td>
      <td>{{ account.tx_number }}</td>
      <td>{{ account.receipt_no }}</td>
      <td>{{ account.details }}</td>
      <td>{{ account.credit }}</td>
      <td>{{ account.debit }}</td>
      <td>
        {% if perms.inventory.can_print_slip %}
        <a href="{% url 'inventory:supplier_payment_slip' account.id %}"
           class="btn btn-outline-primary btn-sm {% if account.debit == 0 %}disabled{% endif %}">
          <i class="fas fa-file-invoice-dollar me-1"></i> View Receipt
        </a>
        {% endif %}
      </td>
    </tr>
    {% empty %}
    <tr><td colspan="8" class="text-center">No account transactions found.</td></tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr>
      <th colspan="6" class="text-end">Total:</th>
      <th id="sum-credit">AFN 0.00</th>
      <th id="sum-debit">AFN 0.00</th>
      <th id="sum-current">AFN 0.00</th>
    </tr>
  </tfoot>
</table>

<a href="{% url 'inventory:supplier_list' %}" class="btn btn-secondary mt-3">← Back to Suppliers</a>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- DataTables CSS & JS -->
<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>

<script>
  function updateSummary(table) {
    let credit = 0;
    let debit = 0;

    table.rows({ search: 'applied' }).every(function () {
      const cells = $(this.node()).find('td');
      credit += parseFloat(cells.eq(6).text()) || 0;
      debit += parseFloat(cells.eq(7).text()) || 0;
    });

    const balance = credit - debit;

    $('#sum-credit').text(`AFN ${credit.toFixed(2)}`);
    $('#sum-debit').text(`AFN ${debit.toFixed(2)}`);
    $('#sum-current').text(`AFN ${balance.toFixed(2)}`);

    return `Summary:\nTotal Credit: AFN ${credit.toFixed(2)}\nTotal Debit: AFN ${debit.toFixed(2)}\nCurrent Balance: AFN ${balance.toFixed(2)}`;
  }

  $(document).ready(function () {
    const table = $('#account-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 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) {
            const summary = updateSummary(table);
            doc.content.push({ text: summary, margin: [0, 10, 0, 0], alignment: 'left' });
          }
        },
        {
          extend: 'print', className: 'btn btn-primary btn-sm', messageBottom: function () { return updateSummary(table); }
        }
      ],
      columnDefs: [
        { targets: 0, searchable: false, orderable: false }
      ],
      order: [[1, 'desc']],
      drawCallback: function (settings) {
        let api = this.api();
        updateSummary(api);
        api.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
          cell.innerHTML = i + 1;
        });
      }
    });

    updateSummary(table);
  });
</script>
{% endblock %}