{% extends "base.html" %}
{% block page_heading %}Monthly Sales Report{% endblock %}
{% block content %}
<a href="{{ url_for('reports') }}" class="btn btn-outline-secondary btn-sm mb-3"><i class="bi bi-arrow-left"></i> Back</a>
<form method="GET" class="d-flex gap-2 mb-3">
  <input type="month" name="month" class="form-control" style="max-width:200px" value="{{ month }}">
  <button class="btn btn-primary btn-sm">View Report</button>
</form>
<div class="stat-card mb-3" style="max-width:300px">
  <div class="stat-value">{{ total|currency }}</div>
  <div class="stat-label">Total Sales — {{ month }}</div>
</div>
<div class="card-panel">
  <table class="data-table">
    <thead><tr><th>Invoice</th><th>Customer</th><th>Date</th><th>Total</th><th>Paid</th><th>Status</th></tr></thead>
    <tbody>
      {% for s in sales %}
      <tr>
        <td><a href="{{ url_for('view_invoice', sale_id=s.id) }}">{{ s.invoice_number }}</a></td>
        <td>{{ s.customer_name or 'Walk-in' }}</td>
        <td>{{ s.sale_date }}</td>
        <td>{{ s.total_amount|currency }}</td>
        <td>{{ s.paid_amount|currency }}</td>
        <td><span class="badge bg-{{ 'success' if s.payment_status == 'paid' else 'warning' }}">{{ s.payment_status }}</span></td>
      </tr>
      {% else %}
      <tr><td colspan="6" class="text-muted text-center">No sales this month.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}