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

{% block title %}Invoices - AI ML Operations{% endblock %}

{% block content %}
<div class="section">
    <div class="container">
        <div style="margin-bottom: 2rem;">
            <a href="{% url 'financial_index' %}" class="btn">Back to Dashboard</a>
        </div>
        <h1 class="section-title" style="text-align: left;">Invoices &amp; Subscriptions</h1>

        {% if not stripe_configured %}
        <p style="color: #c0392b; margin-bottom: 1.5rem;">
            Stripe is not configured. Set <code>STRIPE_SECRET_KEY</code> (and webhook secret) in the environment before creating invoices.
        </p>
        {% endif %}

        <div class="card-grid" style="margin-bottom: 2rem;">
            <a href="{% url 'invoice_new' %}" class="card">
                <span class="card-title">New one-off invoice</span>
                <p class="card-text">Create a Stripe invoice and email the customer a pay link.</p>
            </a>
            <a href="{% url 'subscription_new' %}" class="card">
                <span class="card-title">New monthly subscription</span>
                <p class="card-text">Customer pays us on a recurring schedule via Checkout.</p>
            </a>
        </div>

        <h2 class="section-title" style="font-size: 1.5rem; margin-bottom: 1rem;">One-off invoices</h2>
        <div class="table-responsive" style="margin-bottom: 3rem;">
            {% if invoices %}
            <table class="table">
                <thead>
                    <tr>
                        <th>Customer</th>
                        <th>Description</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Created</th>
                    </tr>
                </thead>
                <tbody>
                    {% for inv in invoices %}
                    <tr>
                        <td><a href="{% url 'invoice_detail' inv.pk %}">{{ inv.customer.name }}</a></td>
                        <td>{{ inv.description }}</td>
                        <td>${{ inv.amount_dollars|floatformat:2 }}</td>
                        <td>{{ inv.get_status_display }}</td>
                        <td>{{ inv.created|date:"Y-m-d" }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p style="color: var(--text-muted);">No invoices yet.</p>
            {% endif %}
        </div>

        <h2 class="section-title" style="font-size: 1.5rem; margin-bottom: 1rem;">Recurring subscriptions</h2>
        <div class="table-responsive">
            {% if subscriptions %}
            <table class="table">
                <thead>
                    <tr>
                        <th>Customer</th>
                        <th>Description</th>
                        <th>Amount</th>
                        <th>Interval</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for sub in subscriptions %}
                    <tr>
                        <td><a href="{% url 'subscription_detail' sub.pk %}">{{ sub.customer.name }}</a></td>
                        <td>{{ sub.description }}</td>
                        <td>${{ sub.amount_dollars|floatformat:2 }}</td>
                        <td>{{ sub.get_interval_display }}</td>
                        <td>{{ sub.get_status_display }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p style="color: var(--text-muted);">No subscriptions yet.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}