{% extends "base.html" %}

{% block title %}Invoices - Vera Medical CMS{% endblock %}

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <div>
        <h1 class="text-3xl font-bold text-gray-800 mb-2">Invoices</h1>
        <p class="text-gray-600">Billing and payment management</p>
    </div>
    <a href="{{ url_for('invoice_new') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition shadow-md hover:shadow-lg">
        <i class="fas fa-file-invoice-dollar mr-2"></i>New Invoice
    </a>
</div>

<!-- Phase 4: Alerts for Overdue and Uninvoiced -->
{% if overdue_count > 0 or uninvoiced_count > 0 %}
<div class="mb-6 space-y-3">
    {% if overdue_count > 0 %}
    <div class="bg-red-50 border-l-4 border-red-400 p-4 rounded">
        <div class="flex justify-between items-center">
            <div>
                <h3 class="text-sm font-medium text-red-800">
                    <i class="fas fa-exclamation-triangle mr-2"></i>{{ overdue_count }} Overdue Invoice(s)
                </h3>
                <p class="text-sm text-red-700 mt-1">Some invoices are past their due date and require attention.</p>
            </div>
            <a href="{{ url_for('invoices_list', status='overdue') }}" 
               class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-semibold">
                View Overdue
            </a>
        </div>
    </div>
    {% endif %}
    {% if uninvoiced_count > 0 %}
    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded">
        <div class="flex justify-between items-center">
            <div>
                <h3 class="text-sm font-medium text-yellow-800">
                    <i class="fas fa-clock mr-2"></i>{{ uninvoiced_count }} Uninvoiced Appointment(s) (30+ days)
                </h3>
                <p class="text-sm text-yellow-700 mt-1">Some appointments are 30+ days old and haven't been invoiced yet.</p>
            </div>
            <a href="{{ url_for('uninvoiced_appointments') }}" 
               class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg font-semibold">
                View Uninvoiced
            </a>
        </div>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- Search and Filter -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
    <form method="GET" action="{{ url_for('invoices_list') }}" class="space-y-4">
        <div class="flex gap-4">
            <div class="flex-1">
                <input type="text" 
                       name="search" 
                       value="{{ search }}" 
                       placeholder="Search by invoice #, case, claimant, client, specialist..." 
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-search mr-2"></i>Search
            </button>
        </div>
        <div class="flex gap-4">
            <div class="flex-1">
                <select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option value="">All Statuses</option>
                    <option value="draft" {% if status_filter == 'draft' %}selected{% endif %}>Draft</option>
                    <option value="sent" {% if status_filter == 'sent' %}selected{% endif %}>Sent</option>
                    <option value="paid" {% if status_filter == 'paid' %}selected{% endif %}>Paid</option>
                    <option value="overdue" {% if status_filter == 'overdue' %}selected{% endif %}>Overdue</option>
                    <option value="cancelled" {% if status_filter == 'cancelled' %}selected{% endif %}>Cancelled</option>
                </select>
            </div>
            {% if search or status_filter %}
            <a href="{{ url_for('invoices_list') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-6 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-times mr-2"></i>Clear
            </a>
            {% endif %}
        </div>
    </form>
</div>

<!-- Invoices List -->
{% if invoices %}
<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Invoice #
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Case & Claimant
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Service
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Amount
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Date
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Status
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for invoice in invoices %}
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <i class="fas fa-file-invoice text-blue-600 mr-2"></i>
                            <span class="text-sm font-medium text-gray-900">{{ invoice['invoice_number'] }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm">
                            <div class="font-medium text-gray-900">
                                {% if invoice['file_case_id'] %}
                                    Case #{{ invoice['file_case_id'] }}
                                {% else %}
                                    <span class="text-gray-400">No case</span>
                                {% endif %}
                            </div>
                            <div class="text-gray-500">
                                {% if invoice['claimant_first_name'] %}
                                    {{ invoice['claimant_first_name'] }} {{ invoice['claimant_last_name'] }}
                                {% else %}
                                    <span class="text-gray-400">-</span>
                                {% endif %}
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="text-sm">
                            <div class="text-gray-900">{{ invoice['service_code'] or '-' }}</div>
                            <div class="text-gray-500 text-xs">
                                {{ (invoice['service_description'][:40] + '...') if invoice['service_description'] and invoice['service_description']|length > 40 else (invoice['service_description'] or '-') }}
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm">
                            <div class="font-semibold text-gray-900">${{ "%.2f"|format(invoice['total_amount']) }} CAD</div>
                            <div class="text-gray-500 text-xs">${{ "%.2f"|format(invoice['fee']) }} + tax</div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">{{ invoice['invoice_date'] }}</div>
                        {% if invoice['service_date'] %}
                            <div class="text-xs text-gray-500">Service: {{ invoice['service_date'] }}</div>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if invoice['status'] == 'paid' %}
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                <i class="fas fa-check-circle mr-1"></i> Paid
                            </span>
                        {% elif invoice['status'] == 'sent' %}
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                <i class="fas fa-paper-plane mr-1"></i> Sent
                            </span>
                        {% elif invoice['status'] == 'overdue' %}
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                <i class="fas fa-exclamation-circle mr-1"></i> Overdue
                            </span>
                        {% elif invoice['status'] == 'cancelled' %}
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                <i class="fas fa-ban mr-1"></i> Cancelled
                            </span>
                        {% else %}
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                <i class="fas fa-edit mr-1"></i> Draft
                            </span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="{{ url_for('invoice_view', invoice_id=invoice['id']) }}" class="text-blue-600 hover:text-blue-900 mr-3" title="View">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="{{ url_for('invoice_edit', invoice_id=invoice['id']) }}" class="text-green-600 hover:text-green-900 mr-3" title="Edit">
                            <i class="fas fa-edit"></i>
                        </a>
                        <a href="{{ url_for('invoice_print', invoice_id=invoice['id']) }}" class="text-purple-600 hover:text-purple-900 mr-3" title="Print" target="_blank">
                            <i class="fas fa-print"></i>
                        </a>
                        <form action="{{ url_for('invoice_delete', invoice_id=invoice['id']) }}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to delete this invoice?');">
                            <button type="submit" class="text-red-600 hover:text-red-900" title="Delete">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="bg-gray-50 px-6 py-3 text-sm text-gray-600">
        Showing {{ invoices|length }} invoice(s)
    </div>
</div>
{% else %}
<div class="bg-white rounded-lg shadow-md p-12 text-center">
    <i class="fas fa-file-invoice-dollar text-gray-300 text-6xl mb-4"></i>
    <h3 class="text-xl font-semibold text-gray-700 mb-2">No Invoices Found</h3>
    <p class="text-gray-500 mb-6">
        {% if search or status_filter %}
            No invoices match your search criteria. Try adjusting your filters.
        {% else %}
            Start creating invoices for your appointments.
        {% endif %}
    </p>
    {% if not search and not status_filter %}
    <a href="{{ url_for('invoice_new') }}" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition">
        <i class="fas fa-file-invoice-dollar mr-2"></i>Create First Invoice
    </a>
    {% endif %}
</div>
{% endif %}
{% endblock %}