{% extends "base.html" %}
{% block title %}Invoice - FinansialApp{% endblock %}
{% block page_title %}Daftar Invoice{% endblock %}
{% block content %}

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <div class="d-flex gap-2 flex-wrap">
    <a href="/invoice" class="btn btn-sm {% if not sf %}btn-primary{% else %}btn-outline-secondary{% endif %}">Semua</a>
    <a href="/invoice?status=DRAFT" class="btn btn-sm {% if sf=='DRAFT' %}btn-secondary{% else %}btn-outline-secondary{% endif %}">Draft</a>
    <a href="/invoice?status=SENT" class="btn btn-sm {% if sf=='SENT' %}btn-info{% else %}btn-outline-info{% endif %}">Terkirim</a>
    <a href="/invoice?status=PAID" class="btn btn-sm {% if sf=='PAID' %}btn-success{% else %}btn-outline-success{% endif %}">Lunas</a>
    <form class="d-flex gap-1" method="GET">
      {% if sf %}<input type="hidden" name="status" value="{{ sf }}">{% endif %}
      <input type="text" name="q" value="{{ q }}" class="form-control form-control-sm" placeholder="Cari pelanggan / nomor..." style="width:200px">
      <button class="btn btn-sm btn-outline-secondary"><i class="fas fa-search"></i></button>
    </form>
  </div>
  <div class="d-flex gap-2">
    {% if session.role in ('ADMIN','FINANCE','OPERATOR') %}
    <a href="/invoice/baru" class="btn btn-primary btn-sm"><i class="fas fa-plus me-1"></i>Buat Invoice</a>
    {% endif %}
    {% if session.role == 'ADMIN' %}
    <a href="/invoice/pengaturan" class="btn btn-outline-secondary btn-sm"><i class="fas fa-gear me-1"></i>Template</a>
    {% endif %}
  </div>
</div>

<div class="card">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover table-sm mb-0">
        <thead class="table-light">
          <tr>
            <th class="ps-3">No. Invoice</th>
            <th>Tanggal</th>
            <th>Pelanggan</th>
            <th class="text-end">Total</th>
            <th>Jatuh Tempo</th>
            <th>Status</th>
            <th class="text-end pe-3">Aksi</th>
          </tr>
        </thead>
        <tbody>
          {% for inv in invoices %}
          {% set items_total = namespace(v=0) %}
          <tr>
            <td class="ps-3 fw-semibold" style="font-family:monospace">
              {{ inv.nomor }}
              {% if inv.jurnal_id %}<span class="badge bg-primary ms-1" style="font-family:inherit">Transaksi</span>{% endif %}
            </td>
            <td class="text-muted">{{ inv.tanggal|tgl }}</td>
            <td class="fw-semibold">{{ inv.pelanggan }}</td>
            <td class="text-end text-rp fw-bold">
              {# show total, need subtotal from items, simplified display #}
              <a href="/invoice/{{ inv.id }}" class="text-dark text-decoration-none">Lihat</a>
            </td>
            <td class="{% if inv.jatuh_tempo and inv.jatuh_tempo < today.strftime('%Y-%m-%d') and inv.status != 'PAID' %}text-danger fw-bold{% else %}text-muted{% endif %}">
              {{ inv.jatuh_tempo|tgl if inv.jatuh_tempo else '-' }}
            </td>
            <td>
              {% if inv.status == 'DRAFT' %}
                <span class="badge bg-secondary">Draft</span>
              {% elif inv.status == 'SENT' %}
                <span class="badge bg-info">Terkirim</span>
              {% elif inv.status == 'PAID' %}
                <span class="badge bg-success">Lunas</span>
              {% endif %}
            </td>
            <td class="text-end pe-3">
              <div class="d-flex gap-1 justify-content-end">
                <a href="/invoice/{{ inv.id }}" class="btn btn-xs btn-outline-primary" title="Lihat"><i class="fas fa-eye"></i></a>
                <a href="/invoice/{{ inv.id }}/cetak" class="btn btn-xs btn-outline-secondary" title="Cetak" target="_blank"><i class="fas fa-print"></i></a>
                {% if session.role in ('ADMIN','FINANCE','OPERATOR') %}
                <a href="/invoice/{{ inv.id }}/edit" class="btn btn-xs btn-outline-warning" title="Edit"><i class="fas fa-edit"></i></a>
                {% endif %}
                {% if session.role in ('ADMIN','FINANCE') %}
                <form method="POST" action="/invoice/{{ inv.id }}/hapus" style="display:inline" onsubmit="return confirm('Hapus invoice ini?')">
                  <button class="btn btn-xs btn-outline-danger" title="Hapus"><i class="fas fa-trash"></i></button>
                </form>
                {% endif %}
              </div>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="7" class="text-center text-muted py-4">Belum ada invoice</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}