{% extends "base.html" %}

{% block title %}Edit Line Item - Vera Medical CMS{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-3xl font-bold text-gray-800">Edit Line Item</h1>
    <p class="text-gray-600">Invoice ID: {{ line_item['invoice_id'] }}</p>
</div>

<form method="POST" class="bg-white rounded-lg shadow-md p-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <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'] }}" {% if line_item['service_code'] == code['code'] %}selected{% endif %}>
                    {{ 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" 
                   value="{{ line_item['service_description'] or '' }}"
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg">
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Service Date</label>
            <input type="date" name="service_date" 
                   value="{{ line_item['service_date'] or '' }}"
                   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">Quantity</label>
            <input type="number" name="quantity" step="0.01" min="0"
                   value="{{ "%.2f"|format(line_item['quantity']) if line_item['quantity'] else '' }}"
                   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"
                   value="{{ "%.2f"|format(line_item['unit_price']) if line_item['unit_price'] else '' }}"
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg">
        </div>
    </div>
    <div class="mb-6">
        <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" {% if line_item['expense_type'] == 'service' %}selected{% endif %}>Service</option>
            <option value="travel" {% if line_item['expense_type'] == 'travel' %}selected{% endif %}>Travel</option>
            <option value="flight" {% if line_item['expense_type'] == 'flight' %}selected{% endif %}>Flight</option>
            <option value="accommodation" {% if line_item['expense_type'] == 'accommodation' %}selected{% endif %}>Accommodation</option>
            <option value="transportation" {% if line_item['expense_type'] == 'transportation' %}selected{% endif %}>Transportation</option>
            <option value="interpreter" {% if line_item['expense_type'] == 'interpreter' %}selected{% endif %}>Interpreter</option>
            <option value="videographer" {% if line_item['expense_type'] == 'videographer' %}selected{% endif %}>Videographer</option>
            <option value="nominee" {% if line_item['expense_type'] == 'nominee' %}selected{% endif %}>Nominee</option>
        </select>
    </div>
    <div class="flex justify-end gap-4">
        <a href="{{ url_for('invoice_edit', invoice_id=line_item['invoice_id']) }}" 
           class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-6 py-3 rounded-lg font-semibold transition">
            Cancel
        </a>
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition">
            <i class="fas fa-save mr-2"></i>Update Line Item
        </button>
    </div>
</form>
{% endblock %}