{% extends "pos/base.html" %}
{% load static %}

{% block title %}Bulk Credit Invoice #{{ bulk.bulk_no }}{% endblock %}
{% block heading %}Bulk Credit Invoice #{{ 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;
  }
  @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:bulk_credit_list' %}" class="btn btn-sm btn-secondary">
    Back
  </a>
  <button type="button" class="btn btn-sm btn-primary" onclick="window.print()">
    Print
  </button>
</div>

<div class="invoice-wrap">
  <div class="invoice-title">Bulk Customer Credit Invoice</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 Credit</td>
      <td><strong>{{ total_credit }}</strong></td>
    </tr>
  </table>

  <div class="summary-box">
    <div class="summary-line">
      <strong>Areas:</strong>
      {% if unique_area_names %}
        {{ unique_area_names|join:", " }}
      {% else %}
        -
      {% endif %}
    </div>
    <div class="summary-line mb-0">
      <strong>Order Bookers:</strong>
      {% if unique_booker_names %}
        {{ unique_booker_names|join:", " }}
      {% else %}
        -
      {% endif %}
    </div>
  </div>

  <div class="table-responsive">
    <table class="table table-bordered table-invoice">
      <thead>
        <tr>
          <th style="width:50px;">#</th>
          <th style="width:90px;">Cust ID</th>
          <th>Customer</th>
          <th>Address</th>
          <th>Area</th>
          <th>Booker</th>
          <th class="text-right">Previous</th>
          <th class="text-right">Credit</th>
          <th class="text-right">New Balance</th>
          <th>Note</th>
        </tr>
      </thead>
      <tbody>
        {% for ln in lines %}
        <tr>
          <td class="text-center">{{ forloop.counter }}</td>
          <td class="text-center">{{ ln.customer_id }}</td>
          <td>{% if ln.customer_obj %}{{ ln.customer_obj.name }}{% else %}-{% endif %}</td>
          <td>{% if ln.customer_obj %}{{ ln.customer_obj.address|default:"-" }}{% else %}-{% endif %}</td>
          <td>{{ ln.area_name|default:"-" }}</td>
          <td>{{ ln.booker_name|default:"-" }}</td>
          <td class="text-right">{{ ln.previous_balance_snapshot }}</td>
          <td class="text-right">{{ ln.credit_amount }}</td>
          <td class="text-right">{{ ln.new_balance_snapshot }}</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="7" class="text-right">Total Credit</th>
          <th class="text-right invoice-total">{{ total_credit }}</th>
          <th colspan="2"></th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
{% endblock %}