{% extends "base.html" %}

{% block title %}Line Items - 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">Line Items</h1>
            <p class="text-gray-600">Invoice {{ invoice['invoice_number'] }}</p>
        </div>
        <div>
            <a href="{{ url_for('invoice_edit', invoice_id=invoice['id']) }}" 
               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 Invoice
            </a>
        </div>
    </div>
</div>

<!-- Pull Expenses from Appointment -->
{% if appointment_additional_services %}
<div class="bg-green-50 border-l-4 border-green-400 p-4 mb-6">
    <div class="flex justify-between items-center">
        <div>
            <h3 class="text-sm font-medium text-green-800">Expenses Available from Appointment</h3>
            <p class="text-sm text-green-700 mt-1">Click to add expenses from appointment additional services</p>
        </div>
        <form method="POST" action="{{ url_for('invoice_line_items', invoice_id=invoice['id']) }}" class="inline">
            <input type="hidden" name="pull_expenses" value="1">
            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-semibold">
                <i class="fas fa-download mr-2"></i>Pull All Expenses
            </button>
        </form>
    </div>
    <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
        {% for service in appointment_additional_services %}
        <div class="bg-white p-2 rounded">
            <strong>{{ service['service_type']|title }}:</strong> 
            {% if service['service_type'] == 'travel' %}{{ service['travel_details'] or 'Yes' }}{% endif %}
            {% if service['service_type'] == 'interpreter' %}{{ service['language'] or 'Yes' }}{% endif %}
            {% if service['service_type'] in ['videographer', 'nominee'] %}{{ service['name'] or 'Yes' }}{% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Add Line Item Form -->
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
    <h2 class="text-xl font-bold text-gray-800 mb-4">Add Line Item</h2>
    <form method="POST" class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Service Code</label>
                <select name="service_code" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                    <option value="">Select...</option>
                    {% for code in service_codes %}
                    <option value="{{ code['code'] }}">{{ code['code'] }} - {{ code['description'][:40] }}...</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                <input type="text" name="service_description" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Service Date</label>
                <input type="date" name="service_date" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Quantity</label>
                <input type="number" name="quantity" step="0.01" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Unit Price (CAD $)</label>
                <input type="number" name="unit_price" step="0.01" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Expense Type</label>
                <select name="expense_type" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                    <option value="service">Service</option>
                    <option value="travel">Travel</option>
                    <option value="flight">Flight</option>
                    <option value="accommodation">Accommodation</option>
                    <option value="transportation">Transportation</option>
                    <option value="interpreter">Interpreter</option>
                    <option value="videographer">Videographer</option>
                    <option value="nominee">Nominee</option>
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold">
                    <i class="fas fa-plus mr-2"></i>Add Line Item
                </button>
            </div>
        </div>
    </form>
</div>

<!-- Existing Line Items -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="px-6 py-4 bg-gray-50 border-b">
        <h2 class="text-xl font-bold text-gray-800">Existing Line Items</h2>
    </div>
    {% if line_items %}
    <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">Service Code</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Description</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Quantity</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Unit Price</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Total</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for item in line_items %}
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ item['service_code'] or '-' }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ item['service_description'] or '-' }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ item['service_date'] or '-' }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ "%.2f"|format(item['quantity']) if item['quantity'] else '-' }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${{ "%.2f"|format(item['unit_price']) if item['unit_price'] else '0.00' }} CAD</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">${{ "%.2f"|format(item['line_total']) }} CAD</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ item['expense_type'] or 'service' }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <a href="{{ url_for('invoice_line_item_edit', line_item_id=item['id']) }}" 
                           class="text-blue-600 hover:text-blue-800 mr-3">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <form method="POST" action="{{ url_for('invoice_line_item_delete', line_item_id=item['id']) }}" 
                              class="inline" 
                              onsubmit="return confirm('Are you sure you want to delete this line item?');">
                            <button type="submit" class="text-red-600 hover:text-red-800">
                                <i class="fas fa-trash"></i> Delete
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot class="bg-gray-50">
                <tr>
                    <td colspan="5" class="px-6 py-4 text-right text-sm font-medium text-gray-700">Subtotal:</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">
                        ${{ "%.2f"|format(line_items|sum(attribute='line_total')) }} CAD
                    </td>
                    <td colspan="2"></td>
                </tr>
            </tfoot>
        </table>
    </div>
    {% else %}
    <div class="p-6 text-center text-gray-500">
        <p>No line items added yet. Use the form above to add line items.</p>
    </div>
    {% endif %}
</div>
{% endblock %}