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

{% block content %}
<h2 class="mb-3">Cash Collection</h2>

<div class="d-flex align-items-center mb-4" id="export-header">
  <img src="{% if company_profile.logo and company_profile.logo.url %}{{ company_profile.logo.url }}{% else %}https://via.placeholder.com/150{% endif %}"
       alt="Logo" style="max-height:60px;" class="me-3">
  <div>
    <h5 class="mb-0">{{ company_profile.title }}</h5>
    <small>{{ company_profile.address }}</small><br>
    <small>{{ company_profile.phone_number }}</small>
  </div>
</div>

<div id="print-header" class="d-none">
  {% include 'includes/print_header.html' %}
</div>

<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 active" aria-current="page">Cash Collection</li>
  </ol>
</nav>

<form method="get" class="row g-3 mb-4 align-items-end">
  <div class="col-md-4">
    <label class="form-label">Consumer</label>
    <select name="consumer" class="form-select">
      <option value="">All Consumers</option>
      {% for c in consumers %}
      <option value="{{ c.id }}" {% if c.id == selected_consumer_id %}selected{% endif %}>{{ c.name }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="col-md-3">
    <label class="form-label">Start Date</label>
    <input type="date" name="start_date" value="{{ start_date }}" class="form-control">
  </div>
  <div class="col-md-3">
    <label class="form-label">End Date</label>
    <input type="date" name="end_date" value="{{ end_date }}" class="form-control">
  </div>
  <div class="col-md-2">
    <button type="submit" class="btn btn-primary w-100">Filter</button>
  </div>
</form>

<div class="mb-3">
  <strong>Today's Collection:</strong> {{ today_total|floatformat:2 }}<br>
  <strong>Total:</strong> {{ total_amount|floatformat:2 }}
</div>

<table id="cash-collection-table" class="table table-bordered table-hover nowrap" style="width:100%">
  <thead class="table-light">
    <tr>
      <th>ID</th>
      <th>Date</th>
      <th>Consumer</th>
      <th>Received By</th>
      <th>Received In</th>
      <th>Amount Paid</th>
      <th>Receipt No</th>
    </tr>
  </thead>
  <tbody>
    {% for p in payments %}
    <tr>
      <td>{{ p.id }}</td>
      <td>{{ p.created_at|date:"Y-m-d" }}</td>
      <td>{{ p.consumer }}</td>
      <td>{{ p.received_by }}</td>
      <td>{{ p.get_received_in_display }}</td>
      <td>{{ p.amount_paid|floatformat:2 }}</td>
      <td>{{ p.receipt_no }}</td>
    </tr>
    {% empty %}
    <tr>
      <td colspan="7" class="text-center">No payments found.</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

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

<!-- DataTables CSS and Buttons -->
<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 support -->
<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>
$(document).ready(function() {
  const headerHtml = $('#print-header').prop('outerHTML');
  const headerText = $('#print-header').text().trim();

  $('#cash-collection-table').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: 'copyHtml5', className: 'btn btn-secondary btn-sm' },
      { extend: 'csvHtml5', className: 'btn btn-info btn-sm' },
      {
        extend: 'excelHtml5',
        className: 'btn btn-success btn-sm',
        customize: function (xlsx) {
          var sheet = xlsx.xl.worksheets['sheet1.xml'];
          $('row:first', sheet).before(
            '<row><c t="inlineStr" s="2"><is><t>' + headerText + '</t></is></c></row>'
          );
        }
      },
      {
        extend: 'pdfHtml5',
        className: 'btn btn-danger btn-sm',
        customize: function (doc) {
          doc.content.splice(0, 0, {
            text: headerText,
            margin: [0, 0, 0, 10],
            alignment: 'center'
          });
        }
      },
      {
        extend: 'print',
        className: 'btn btn-primary btn-sm',
        customize: function (win) {
          $(win.document.body).prepend(headerHtml);
        }
      }
    ],
    columnDefs: [
      { orderable: false, targets: [] }
    ]
  });
});
</script>
{% endblock %}