{% extends "base.html" %}

{% block title %}Uninvoiced Appointments - 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">Uninvoiced Appointments</h1>
        <p class="text-gray-600">Appointments 30+ days old that haven't been invoiced</p>
    </div>
    <a href="{{ url_for('invoices_list') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold transition">
        <i class="fas fa-arrow-left mr-2"></i>Back to Invoices
    </a>
</div>

{% if appointments %}
<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">Appointment Date</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Case & Claimant</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Doctor</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Service Code</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Days Since</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for appointment in appointments %}
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {{ appointment['appointment_date'] }}
                        {% if appointment['appointment_time'] %}
                        <div class="text-xs text-gray-500">{{ appointment['appointment_time'] }}</div>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm">
                            <div class="font-medium text-gray-900">
                                {% if appointment['file_case_id'] %}
                                    Case #{{ appointment['file_case_id'] }}
                                {% else %}
                                    <span class="text-gray-400">No case</span>
                                {% endif %}
                            </div>
                            <div class="text-gray-500">
                                {{ appointment['claimant_first_name'] or '' }} {{ appointment['claimant_last_name'] or '' }}
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {{ appointment['doctor_name'] or '-' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {{ appointment['service_code'] or '-' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% set days_since = appointment['days_since'] if appointment['days_since'] is not none else 0 %}
                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full 
                            {% if days_since > 60 %}bg-red-100 text-red-800
                            {% elif days_since > 45 %}bg-orange-100 text-orange-800
                            {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                            {{ days_since }} days
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="{{ url_for('invoice_new', appointment_id=appointment['id']) }}" 
                           class="text-blue-600 hover:text-blue-900 mr-3">
                            <i class="fas fa-file-invoice-dollar mr-1"></i>Create Invoice
                        </a>
                        <a href="{{ url_for('appointment_view', appointment_id=appointment['id']) }}" 
                           class="text-green-600 hover:text-green-900">
                            <i class="fas fa-eye mr-1"></i>View
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% else %}
<div class="bg-white rounded-lg shadow-md p-12 text-center">
    <i class="fas fa-check-circle text-green-300 text-6xl mb-4"></i>
    <h3 class="text-xl font-semibold text-gray-700 mb-2">All Appointments Invoiced</h3>
    <p class="text-gray-500">All appointments 30+ days old have been invoiced.</p>
</div>
{% endif %}
{% endblock %}