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

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

<!-- Breadcrumbs -->
<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:doctor_list' %}">Doctors</a></li>
    <li class="breadcrumb-item active" aria-current="page">Commissions</li>
  </ol>
</nav>

<!-- Date Filters -->
<div class="row mb-3">
  <div class="col-md-3">
    <label for="min-date">From Date</label>
    <input type="date" id="min-date" class="form-control">
  </div>
  <div class="col-md-3">
    <label for="max-date">To Date</label>
    <input type="date" id="max-date" class="form-control">
  </div>
</div>

<!-- Table -->
<table id="commission-report" class="table table-bordered table-striped nowrap" style="width:100%">
  <thead class="table-light">
    <tr>
      <th>ID</th>
      <th>Date</th>
      <th>Details</th>
      <th>Debit</th>
      <th>Credit</th>
      <th>Remarks</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    {% for commission in commissions %}
    <tr>
      <td>{{ commission.id }}</td>
      <td>{{ commission.placed_at }}</td>
      <td>{{ commission.details }}</td>
      <td>{{ commission.debit|floatformat:2 }}</td>
      <td>{{ commission.credit|floatformat:2 }}</td>
      <td style="white-space: pre-wrap; word-wrap: break-word;">{{ commission.remarks }}</td>
      <td>
        {% if commission.debit > 0 %}
        <a href="{% url 'finance:doctor_commission_payment_slip' commission.id %}" class="btn btn-outline-primary btn-sm">
          <i class="fas fa-file-invoice-dollar me-1"></i> Print Slip
        </a>
        {% endif %}
      </td>
    </tr>
    {% empty %}
    <tr><td colspan="7" class="text-center">No commission records found.</td></tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" class="text-end">Total:</th>
      <th id="total-debit">AFN 0.00</th>
      <th id="total-credit">AFN 0.00</th>
      <th id="total-balance">AFN 0.00</th>
      <th></th>
    </tr>   
  </tfoot>
</table>

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

<!-- 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 and 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 export libraries -->
<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>

<!-- Full DataTable Initialization with Summary -->
<!-- Custom Script -->
<script>
// Update the Summary
function updateSummary(table) {
  let total_credit = 0;
  let total_debit = 0;

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

  const balance = total_credit - total_debit;

  $('#total-debit').text(`AFN ${total_debit.toFixed(2)}`);
  $('#total-credit').text(`AFN ${total_credit.toFixed(2)}`);
  $('#total-balance').text(`AFN ${balance.toFixed(2)}`);

  if (balance < 0) {
    $('#total-balance').css('color', 'red');
  } else {
    $('#total-balance').css('color', 'black');
  }

  return `Summary:\nTotal Debit: AFN ${total_debit.toFixed(2)}\nTotal Credit: AFN ${total_credit.toFixed(2)}\nNet Balance: AFN ${balance.toFixed(2)}`;
}

// Date Range Filter (Fix for "April 17, 2025" Format)
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
  const min = $('#min-date').val();
  const max = $('#max-date').val();
  const tableDateText = data[1]; // now shifted to 2nd column

  if (!tableDateText) {
    return false;
  }

  const tableDate = new Date(tableDateText);
  const minDate = min ? new Date(min) : null;
  const maxDate = max ? new Date(max) : null;

  if ((minDate && tableDate < minDate) || (maxDate && tableDate > maxDate)) {
    return false;
  }
  return true;
});

$(document).ready(function () {
  const table = $('#commission-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',
        footer: true,
        messageBottom: () => updateSummary(table)
      },
      {
        extend: 'csv',
        className: 'btn btn-info btn-sm',
        footer: true,
        messageBottom: () => updateSummary(table)
      },
      {
        extend: 'excel',
        className: 'btn btn-success btn-sm',
        footer: true,
        messageBottom: () => updateSummary(table)
      },
      {
        extend: 'pdf',
        className: 'btn btn-danger btn-sm',
        footer: true,
        customize: function (doc) {
          const summary = updateSummary(table);
          doc.content.push({
            text: summary,
            margin: [0, 10, 0, 0],
            alignment: 'left',
            bold: true
          });
        }
      },
      {
        extend: 'print',
        className: 'btn btn-primary btn-sm',
        footer: true,
        messageBottom: () => updateSummary(table)
      }
    ],
    drawCallback: function () {
      updateSummary(this.api());
    }
  });

  // Redraw the table when From/To Date changes
  $('#min-date, #max-date').on('change', function () {
    table.draw();
  });

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

  updateSummary(table); // Initial
});
</script>

{% endblock %}