{% extends 'invoices/base.html' %}
{% block title %}Dashboard - InvoicePro{% endblock %}
{% block page_title %}Dashboard{% endblock %}
{% block topbar_actions %}
<a href="{% url 'invoices:invoice_create' %}" class="btn btn-primary">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:15px;height:15px"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  New Invoice
</a>
{% endblock %}
{% block content %}
<div class="grid-4" style="margin-bottom:24px;">
  <div class="stat-card">
    <div class="stat-value">{{ total_invoices }}</div>
    <div class="stat-label">Total Invoices</div>
  </div>
  <div class="stat-card">
    <div class="stat-value" style="color:#16a34a;">{{ paid }}</div>
    <div class="stat-label">Paid</div>
  </div>
  <div class="stat-card">
    <div class="stat-value" style="color:#d97706;">{{ sent }}</div>
    <div class="stat-label">Sent</div>
  </div>
  <div class="stat-card">
    <div class="stat-value" style="color:#94a3b8;">{{ draft }}</div>
    <div class="stat-label">Drafts</div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h2 style="font-size:15px;font-weight:700;">All Invoices</h2>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th>Invoice #</th>
        <th>Customer</th>
        <th>Date</th>
        <th>Purpose</th>
        <th>Status</th>
        <th>Grand Total</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for inv in invoices %}
      <tr>
        <td class="font-mono" style="color:var(--accent);font-weight:700;">{{ inv.invoice_number }}</td>
        <td style="font-weight:600;color:var(--text);">{{ inv.customer.name }}</td>
        <td style="color:var(--muted);">{{ inv.date|date:"d M Y" }}</td>
        <td style="color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ inv.purpose }}</td>
        <td><span class="badge badge-{{ inv.status }}">{{ inv.get_status_display }}</span></td>
        <td class="font-mono" style="font-weight:700;color:var(--text);">PKR {{ inv.grand_total|floatformat:2 }}</td>
        <td>
          <div style="display:flex;gap:5px;">
            <a href="{% url 'invoices:invoice_detail' inv.pk %}" class="btn btn-outline btn-sm">View</a>
            <a href="{% url 'invoices:invoice_edit' inv.pk %}" class="btn btn-outline btn-sm">Edit</a>
            <a href="{% url 'invoices:invoice_print' inv.pk %}" class="btn btn-primary btn-sm" target="_blank">Print</a>
          </div>
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="7" style="text-align:center;color:var(--muted);padding:48px;">No invoices yet. <a href="{% url 'invoices:invoice_create' %}" style="color:var(--accent);">Create your first invoice →</a></td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}