{# templates/transactions/staff_payment_bulk_list.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Staff Bulk Payments{% endblock %}
{% block heading %}Staff Bulk Payments{% endblock %}

{% block stylesheets %}
<style>
  .filter-card {
    background: #f8f9fc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 18px;
  }
  .filter-card label {
    font-size: .78rem;
    font-weight: 600;
    color: #4a5568;
  }
  .btn-search {
    background: #1170c6;
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: .82rem;
    padding: 6px 20px;
    border-radius: 6px;
    transition: .2s;
  }
  .btn-search:hover { background: #0d5aa7; color: #fff; }

  .table-list th {
    background: #eef4fb;
    color: #1f2937;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 10px;
  }
  .table-list td {
    font-size: 13px;
    padding: 7px 10px;
    vertical-align: middle;
  }
  .badge-bulk {
    background: #e0edff;
    color: #1a56db;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 6px;
  }
  .action-btn {
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 5px;
    font-weight: 600;
  }
  .total-row {
    background: #f0fdf4 !important;
    font-weight: 700;
  }
</style>
{% endblock %}

{% block content %}

<!-- Filter -->
<div class="filter-card">
  <form method="get" class="row align-items-end">
    <div class="col-md-3 col-sm-6 mb-2">
      <label class="mb-1">Date From</label>
      <input type="date" name="date_from" class="form-control form-control-sm"
             value="{{ date_from_q }}">
    </div>
    <div class="col-md-3 col-sm-6 mb-2">
      <label class="mb-1">Date To</label>
      <input type="date" name="date_to" class="form-control form-control-sm"
             value="{{ date_to_q }}">
    </div>
    <div class="col-md-2 col-sm-6 mb-2">
      <label class="mb-1">Bulk No</label>
      <input type="text" name="bulk_no" class="form-control form-control-sm"
             value="{{ bulk_no_q }}" placeholder="e.g. 5">
    </div>
    <div class="col-md-2 col-sm-6 mb-2">
      <button type="submit" class="btn btn-search">
        <i class="fas fa-search mr-1"></i>Search
      </button>
    </div>
    <div class="col-md-2 col-sm-6 mb-2 text-right">
      <a href="{% url 'transactions:staff_bulk_payment_add' %}" class="btn btn-success btn-sm">
        <i class="fas fa-plus mr-1"></i>New Bulk Payment
      </a>
    </div>
  </form>
</div>

<!-- Table -->
<div class="table-responsive">
  <table class="table table-bordered table-list">
    <thead>
      <tr>
        <th style="width:50px;">#</th>
        <th style="width:100px;">Bulk No</th>
        <th>Date</th>
        <th>Remarks</th>
        <th class="text-center">Lines</th>
        <th class="text-right">Total Amount</th>
        <th style="width:200px;" class="text-center">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for b in bulks %}
      <tr>
        <td class="text-center">{{ forloop.counter }}</td>
        <td class="text-center">
          <span class="badge-bulk">{{ b.bulk_no }}</span>
        </td>
        <td>{{ b.transaction_date|date:"Y-m-d" }}</td>
        <td>{{ b.remarks|default:"-" }}</td>
        <td class="text-center">{{ b.line_count }}</td>
        <td class="text-right">{{ b.total_amount }}</td>
        <td class="text-center">
          <a href="{% url 'transactions:staff_bulk_payment_view' b.bulk_no %}"
             class="btn btn-info action-btn" title="View">
            <i class="fas fa-eye"></i>
          </a>
          <a href="{% url 'transactions:staff_bulk_payment_edit' b.bulk_no %}"
             class="btn btn-primary action-btn" title="Edit">
            <i class="fas fa-edit"></i>
          </a>
          <a href="{% url 'transactions:staff_bulk_payment_delete' b.bulk_no %}"
             class="btn btn-danger action-btn"
             title="Delete"
             onclick="return confirm('Delete Bulk #{{ b.bulk_no }}? This will reverse all payments.');">
            <i class="fas fa-trash-alt"></i>
          </a>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="7" class="text-center text-muted py-4">
          No bulk payments found for the selected date range.
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% endblock %}