{% extends "base.html" %}
{% block content %}

<div class="row align-items-center mb-4">
  <div class="col-sm-8">
    <h2 class="fw-bold text-danger mb-0"><i class="bi bi-receipt-cutoff me-2"></i>Accounts & Billing</h2>
    <p class="text-muted mb-0">Financial records, invoice generation, and pending dues.</p>
  </div>
  <div class="col-sm-4 text-sm-end mt-3 mt-sm-0">
    <a href="{{ url_for('generate_invoice') }}" class="btn btn-outline-danger fw-bold rounded-pill px-4 shadow-sm">
      <i class="bi bi-file-earmark-pdf me-1"></i> Generate Invoice
    </a>
  </div>
</div>

<div class="card stat-card shadow-lg border-0 rounded-4">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="bg-danger text-white">
          <tr>
            <th class="py-3 px-4">Patient Profile</th>
            <th class="py-3">Attending Doctor</th>
            <th class="py-3 text-end">Doctor Fee (₹)</th>
            <th class="py-3 text-end">Est. Setup Cost (₹)</th>
            <th class="py-3 px-4 text-end">Total Due Appx.</th>
          </tr>
        </thead>
        <tbody>
          {% for b in bills %}
          <tr>
            <td class="px-4 fw-bold text-dark">
              <i class="bi bi-person-circle text-muted fs-5 me-2 align-middle"></i>{{ b.patient_name }}
            </td>
            <td><span class="badge bg-light text-dark border px-3 py-2 fw-semibold"><i class="bi bi-stethoscope text-info me-1"></i>Dr. {{ b.doctor_name }}</span></td>
            <td class="text-end fw-semibold text-secondary">₹{{ b.doctor_fee }}</td>
            <td class="text-end fw-semibold text-secondary text-opacity-50">+ ₹500.00</td>
            <td class="px-4 text-end fw-bold text-danger fs-5">₹{{ b.total_bill }}</td>
          </tr>
          {% else %}
          <tr>
            <td colspan="5" class="text-center py-5 text-muted">
              <i class="bi bi-wallet2 d-block mx-auto mb-3" style="font-size: 3rem; color: #cbd5e1;"></i>
              <h5 class="fw-semibold">No Pending Bills</h5>
              <p class="mb-0">All accounts are currently settled.</p>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% endblock %}