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

{% block title %}Staff Bulk Payment #{{ bulk.bulk_no }}{% endblock %}
{% block heading %}Staff Bulk Payment #{{ bulk.bulk_no }}{% endblock %}

{% block stylesheets %}
<style>
  .invoice-wrap {
    background: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    padding: 20px;
  }
  .invoice-title {
    font-size: 22px;
    font-weight: 700;
    color: #0d5aa7;
    margin-bottom: 6px;
  }
  .meta-table td {
    padding: 4px 8px;
    vertical-align: top;
    font-size: 13px;
  }
  .meta-label {
    width: 140px;
    font-weight: 600;
    color: #4a5568;
  }
  .summary-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 15px;
    margin-bottom: 18px;
  }
  .summary-line {
    margin-bottom: 6px;
    font-size: 13px;
  }
  .summary-line strong {
    color: #2d3748;
  }
  .table-invoice th,
  .table-invoice td {
    font-size: 13px;
    padding: 6px 8px;
    vertical-align: middle;
  }
  .table-invoice thead th {
    background: #eef4fb;
    color: #1f2937;
    font-weight: 700;
  }
  .invoice-total {
    font-size: 16px;
    font-weight: 700;
    color: #0d5aa7;
  }
  .badge-cash {
    background: #dcfce7;
    color: #166534;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
  }
  .badge-bank {
    background: #dbeafe;
    color: #1e40af;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
  }
  @media print {
    .no-print { display: none !important; }
    .card, .invoice-wrap {
      border: none !important;
      box-shadow: none !important;
    }
    body {
      background: #fff !important;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="mb-3 no-print d-flex justify-content-between align-items-center">
  <a href="{% url 'transactions:staff_bulk_payment_list' %}" class="btn btn-sm btn-secondary">
    <i class="fas fa-arrow-left mr-1"></i>Back
  </a>
  <div>
    <a href="{% url 'transactions:staff_bulk_payment_edit' bulk.bulk_no %}" class="btn btn-sm btn-primary">
      <i class="fas fa-edit mr-1"></i>Edit
    </a>
    <button type="button" class="btn btn-sm btn-info" onclick="window.print()">
      <i class="fas fa-print mr-1"></i>Print
    </button>
  </div>
</div>

<div class="invoice-wrap">
  <div class="invoice-title">Bulk Staff Payment</div>
  <div class="text-muted mb-3">Bulk No #{{ bulk.bulk_no }}</div>

  <table class="meta-table">
    <tr>
      <td class="meta-label">Bulk No</td>
      <td>{{ bulk.bulk_no }}</td>
      <td class="meta-label">Date</td>
      <td>{{ bulk.transaction_date|date:"Y-m-d" }}</td>
    </tr>
    <tr>
      <td class="meta-label">Operator</td>
      <td>{% if operator_obj %}{{ operator_obj.name }}{% else %}-{% endif %}</td>
      <td class="meta-label">Remarks</td>
      <td>{{ bulk.remarks|default:"-" }}</td>
    </tr>
    <tr>
      <td class="meta-label">Total Lines</td>
      <td>{{ bulk.line_count }}</td>
      <td class="meta-label">Total Amount</td>
      <td><strong>{{ total_amount }}</strong></td>
    </tr>
  </table>

  <div class="table-responsive mt-3">
    <table class="table table-bordered table-invoice">
      <thead>
        <tr>
          <th style="width:50px;">#</th>
          <th style="width:80px;">Staff ID</th>
          <th>Staff Name</th>
          <th>Department</th>
          <th class="text-right">Prev Balance</th>
          <th class="text-right">Amount</th>
          <th class="text-right">Remaining</th>
          <th>Pay Type</th>
          <th>Bank</th>
          <th>Note</th>
        </tr>
      </thead>
      <tbody>
        {% for ln in lines %}
        <tr>
          <td class="text-center">{{ forloop.counter }}</td>
          <td class="text-center">{{ ln.staff_id }}</td>
          <td>{% if ln.staff_obj %}{{ ln.staff_obj.name }}{% else %}-{% endif %}</td>
          <td>{% if ln.staff_obj %}{{ ln.staff_obj.department|default:"-" }}{% else %}-{% endif %}</td>
          <td class="text-right">{{ ln.previous_balance_snapshot }}</td>
          <td class="text-right"><strong>{{ ln.amount }}</strong></td>
          <td class="text-right">{{ ln.remaining_balance_snapshot }}</td>
          <td class="text-center">
            {% if ln.cash_type == "Bank" %}
              <span class="badge-bank">Bank</span>
            {% else %}
              <span class="badge-cash">Cash</span>
            {% endif %}
          </td>
          <td>{% if ln.bank_obj %}{{ ln.bank_obj.name }}{% else %}-{% endif %}</td>
          <td>{{ ln.note|default:"-" }}</td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="10" class="text-center text-muted">No lines found.</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr>
          <th colspan="5" class="text-right">Total Amount</th>
          <th class="text-right invoice-total">{{ total_amount }}</th>
          <th colspan="4"></th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
{% endblock %}