{% extends "base.html" %}

{% block title %}Invoice {{ invoice['invoice_number'] }} - Vera Medical CMS{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">Invoice {{ invoice['invoice_number'] }}</h1>
            <p class="text-gray-600">
                {% if invoice['file_case_id'] %}
                    Case #{{ invoice['file_case_id'] }} - {{ invoice['claimant_first_name'] }} {{ invoice['claimant_last_name'] }}
                {% else %}
                    No case linked
                {% endif %}
            </p>
        </div>
        <div class="space-x-2">
            <a href="{{ url_for('invoice_print', invoice_id=invoice['id']) }}" 
               target="_blank"
               class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-print mr-2"></i>Print
            </a>
            <a href="{{ url_for('invoice_edit', invoice_id=invoice['id']) }}" 
               class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-edit mr-2"></i>Edit
            </a>
            <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 List
            </a>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Invoice Information -->
    <div class="lg:col-span-2 space-y-6">
        
        <!-- Invoice Status & Amount -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-dollar-sign mr-2"></i>Financial Summary
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div>
                        <p class="text-sm text-gray-600">Status</p>
                        {% if invoice['status'] == 'paid' %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-green-100 text-green-800">
                                <i class="fas fa-check-circle mr-1"></i> Paid
                            </span>
                        {% elif invoice['status'] == 'sent' %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-blue-100 text-blue-800">
                                <i class="fas fa-paper-plane mr-1"></i> Sent
                            </span>
                        {% elif invoice['status'] == 'overdue' %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-red-100 text-red-800">
                                <i class="fas fa-exclamation-circle mr-1"></i> Overdue
                            </span>
                        {% elif invoice['status'] == 'cancelled' %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-gray-100 text-gray-800">
                                <i class="fas fa-ban mr-1"></i> Cancelled
                            </span>
                        {% else %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-800">
                                <i class="fas fa-edit mr-1"></i> Draft
                            </span>
                        {% endif %}
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Fee</p>
                        <p class="text-lg font-bold text-gray-800">${{ "%.2f"|format(invoice['fee']) }} CAD</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Tax ({{ "%.0f"|format(invoice['tax_rate']) }}%)</p>
                        <p class="text-lg font-bold text-gray-800">${{ "%.2f"|format(invoice['tax_amount']) }} CAD</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Total Amount</p>
                        <p class="text-2xl font-bold text-green-600">${{ "%.2f"|format(invoice['total_amount']) }} CAD</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Invoice Details -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-file-invoice mr-2"></i>Invoice Details
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <p class="text-sm text-gray-600">Invoice Date</p>
                        <p class="font-semibold text-gray-800">{{ invoice['invoice_date'] }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Service Date</p>
                        <p class="font-semibold text-gray-800">{{ invoice['service_date'] or 'Not specified' }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Service Code</p>
                        <p class="font-semibold text-gray-800">{{ invoice['service_code'] or 'N/A' }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Description</p>
                        <p class="font-semibold text-gray-800">{{ invoice['service_description'] or 'N/A' }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Case & Claimant Information -->
        {% if invoice['case_id'] %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-purple-500 to-purple-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-folder-open mr-2"></i>Case & Claimant
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <p class="text-sm text-gray-600">Case Number</p>
                        <p class="font-semibold text-gray-800">
                            <a href="{{ url_for('case_view', case_id=invoice['case_id']) }}" class="text-blue-600 hover:text-blue-800">
                                #{{ invoice['file_case_id'] }}
                            </a>
                        </p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Client File Number</p>
                        <p class="font-semibold text-gray-800">{{ invoice['client_file_number'] or 'N/A' }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Claimant Name</p>
                        <p class="font-semibold text-gray-800">{{ invoice['claimant_first_name'] }} {{ invoice['claimant_last_name'] }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Client Company</p>
                        <p class="font-semibold text-gray-800">{{ invoice['client_company_name'] or 'N/A' }}</p>
                    </div>
                    {% if invoice['client_phone'] %}
                    <div>
                        <p class="text-sm text-gray-600">Client Phone</p>
                        <p class="font-semibold text-gray-800">{{ invoice['client_phone'] }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Appointment Link -->
        {% if invoice['appointment_id'] %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-calendar-check mr-2"></i>Linked Appointment
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <p class="text-sm text-gray-600">Appointment Date</p>
                        <p class="font-semibold text-gray-800">{{ invoice['appointment_date'] }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Time</p>
                        <p class="font-semibold text-gray-800">{{ invoice['appointment_time'] or 'N/A' }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Location</p>
                        <p class="font-semibold text-gray-800">{{ invoice['appointment_location'] or 'N/A' }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Appointment Status</p>
                        <p class="font-semibold text-gray-800">{{ invoice['appointment_status'] or 'N/A' }}</p>
                    </div>
                    <div class="md:col-span-2">
                        <a href="{{ url_for('appointment_view', appointment_id=invoice['appointment_id']) }}" 
                           class="text-blue-600 hover:text-blue-800 font-semibold">
                            <i class="fas fa-external-link-alt mr-1"></i>View Appointment Details
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Specialist/Doctor Information -->
        {% if invoice['specialist_id'] %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-teal-500 to-teal-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-user-md mr-2"></i>Specialist Information
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <p class="text-sm text-gray-600">Specialist Name</p>
                        <p class="font-semibold text-gray-800">{{ invoice['specialist_name'] or 'N/A' }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Specialty</p>
                        <p class="font-semibold text-gray-800">{{ invoice['specialist_specialty'] or 'N/A' }}</p>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Payment Information -->
        {% if invoice['payment_date'] or invoice['payment_method'] %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-credit-card mr-2"></i>Payment Information
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    {% if invoice['payment_date'] %}
                    <div>
                        <p class="text-sm text-gray-600">Payment Date</p>
                        <p class="font-semibold text-gray-800">{{ invoice['payment_date'] }}</p>
                    </div>
                    {% endif %}
                    {% if invoice['payment_method'] %}
                    <div>
                        <p class="text-sm text-gray-600">Payment Method</p>
                        <p class="font-semibold text-gray-800">{{ invoice['payment_method'] }}</p>
                    </div>
                    {% endif %}
                    {% if invoice['payment_reference'] %}
                    <div>
                        <p class="text-sm text-gray-600">Payment Reference</p>
                        <p class="font-semibold text-gray-800">{{ invoice['payment_reference'] }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Notes -->
        {% if invoice['notes'] or invoice['internal_notes'] %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-gray-500 to-gray-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-sticky-note mr-2"></i>Notes
                </h2>
            </div>
            <div class="p-6 space-y-4">
                {% if invoice['notes'] %}
                <div>
                    <p class="text-sm font-semibold text-gray-600 mb-1">Invoice Notes (Visible to Client)</p>
                    <p class="text-gray-800">{{ invoice['notes'] }}</p>
                </div>
                {% endif %}
                {% if invoice['internal_notes'] %}
                <div>
                    <p class="text-sm font-semibold text-gray-600 mb-1">Internal Notes (Private)</p>
                    <p class="text-gray-800 bg-yellow-50 p-3 rounded border-l-4 border-yellow-400">{{ invoice['internal_notes'] }}</p>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}

    </div>

    <!-- Sidebar Actions -->
    <div class="space-y-6">
        
        <!-- Quick Actions -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-800 mb-4">Quick Actions</h3>
            <div class="space-y-2">
                <a href="{{ url_for('invoice_print', invoice_id=invoice['id']) }}" 
                   target="_blank"
                   class="block w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-center transition">
                    <i class="fas fa-print mr-2"></i>Print Invoice
                </a>
                <a href="{{ url_for('invoice_edit', invoice_id=invoice['id']) }}" 
                   class="block w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-center transition">
                    <i class="fas fa-edit mr-2"></i>Edit Invoice
                </a>
                {% if invoice['appointment_id'] %}
                <a href="{{ url_for('appointment_view', appointment_id=invoice['appointment_id']) }}" 
                   class="block w-full bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-center transition">
                    <i class="fas fa-calendar-alt mr-2"></i>View Appointment
                </a>
                {% endif %}
                {% if invoice['case_id'] %}
                <a href="{{ url_for('case_view', case_id=invoice['case_id']) }}" 
                   class="block w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-center transition">
                    <i class="fas fa-folder-open mr-2"></i>View Case
                </a>
                {% endif %}
            </div>
        </div>

        <!-- Invoice Meta Information -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-800 mb-4">Invoice Information</h3>
            <div class="space-y-3 text-sm">
                <div>
                    <p class="text-gray-600">Created At</p>
                    <p class="font-semibold text-gray-800">{{ invoice['created_at'] }}</p>
                </div>
                {% if invoice['updated_at'] %}
                <div>
                    <p class="text-gray-600">Last Updated</p>
                    <p class="font-semibold text-gray-800">{{ invoice['updated_at'] }}</p>
                </div>
                {% endif %}
                {% if invoice['sent_at'] %}
                <div>
                    <p class="text-gray-600">Sent At</p>
                    <p class="font-semibold text-gray-800">{{ invoice['sent_at'] }}</p>
                </div>
                {% endif %}
                {% if invoice['created_by'] %}
                <div>
                    <p class="text-gray-600">Created By</p>
                    <p class="font-semibold text-gray-800">{{ invoice['created_by'] }}</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Danger Zone -->
        <div class="bg-red-50 rounded-lg shadow-md p-6 border border-red-200">
            <h3 class="text-lg font-bold text-red-800 mb-4">Danger Zone</h3>
            <form action="{{ url_for('invoice_delete', invoice_id=invoice['id']) }}" 
                  method="POST" 
                  onsubmit="return confirm('Are you sure you want to delete this invoice? This action cannot be undone.');">
                <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition">
                    <i class="fas fa-trash mr-2"></i>Delete Invoice
                </button>
            </form>
        </div>

    </div>
</div>
{% endblock %}