{% extends 'base.html' %}

{% block title %}{{ title }} - HAVEN GRAZURI ADVANCE{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="mb-6">
        <a href="{% url 'expenses:expenses_list' %}" class="inline-flex items-center text-sm text-gray-500 hover:text-gray-700">
            <span>←</span> Back to Expenses
        </a>
    </div>

    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
        <div class="px-6 py-4 bg-primary border-b border-gray-200">
            <h2 class="text-xl font-semibold text-white">{{ title }}</h2>
        </div>

        <form method="post" enctype="multipart/form-data" class="px-6 py-6">
            {% csrf_token %}
            
            {% if form.non_field_errors %}
            <div class="mb-4 bg-red-50 border-l-4 border-red-400 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <span>⚠️</span>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-red-700">
                            {{ form.non_field_errors }}
                        </p>
                    </div>
                </div>
            </div>
            {% endif %}

            <div class="space-y-6">
                <!-- Basic Information -->
                <div class="border-b border-gray-200 pb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Basic Information</h3>
                    <div class="grid grid-cols-1 gap-6">
                        <div>
                            <label for="{{ form.title.id_for_label }}" class="block text-sm font-medium text-gray-700">
                                Title <span class="text-red-500">*</span>
                            </label>
                            {{ form.title }}
                            {% if form.title.errors %}
                            <p class="mt-1 text-sm text-red-600">{{ form.title.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <div>
                            <label for="{{ form.description.id_for_label }}" class="block text-sm font-medium text-gray-700">
                                Description
                            </label>
                            {{ form.description }}
                            {% if form.description.errors %}
                            <p class="mt-1 text-sm text-red-600">{{ form.description.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                            <div>
                                <label for="{{ form.category.id_for_label }}" class="block text-sm font-medium text-gray-700">
                                    Category <span class="text-red-500">*</span>
                                </label>
                                {{ form.category }}
                                {% if form.category.errors %}
                                <p class="mt-1 text-sm text-red-600">{{ form.category.errors.0 }}</p>
                                {% endif %}
                            </div>

                            <div>
                                <label for="{{ form.expense_date.id_for_label }}" class="block text-sm font-medium text-gray-700">
                                    Expense Date <span class="text-red-500">*</span>
                                </label>
                                {{ form.expense_date }}
                                {% if form.expense_date.errors %}
                                <p class="mt-1 text-sm text-red-600">{{ form.expense_date.errors.0 }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Financial Details -->
                <div class="border-b border-gray-200 pb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Financial Details</h3>
                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <div>
                            <label for="{{ form.amount.id_for_label }}" class="block text-sm font-medium text-gray-700">
                                Amount (KES) <span class="text-red-500">*</span>
                            </label>
                            {{ form.amount }}
                            {% if form.amount.errors %}
                            <p class="mt-1 text-sm text-red-600">{{ form.amount.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <div>
                            <label for="{{ form.payment_method.id_for_label }}" class="block text-sm font-medium text-gray-700">
                                Payment Method <span class="text-red-500">*</span>
                            </label>
                            {{ form.payment_method }}
                            {% if form.payment_method.errors %}
                            <p class="mt-1 text-sm text-red-600">{{ form.payment_method.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <div>
                            <label for="{{ form.paid_to.id_for_label }}" class="block text-sm font-medium text-gray-700">
                                Paid To <span class="text-red-500">*</span>
                            </label>
                            {{ form.paid_to }}
                            {% if form.paid_to.errors %}
                            <p class="mt-1 text-sm text-red-600">{{ form.paid_to.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <div>
                            <label for="{{ form.reference_number.id_for_label }}" class="block text-sm font-medium text-gray-700">
                                Reference Number
                            </label>
                            {{ form.reference_number }}
                            {% if form.reference_number.errors %}
                            <p class="mt-1 text-sm text-red-600">{{ form.reference_number.errors.0 }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Relationships -->
                <div class="border-b border-gray-200 pb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Relationships</h3>
                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <div>
                            <label for="{{ form.branch.id_for_label }}" class="block text-sm font-medium text-gray-700">
                                Branch <span class="text-red-500">*</span>
                            </label>
                            {{ form.branch }}
                            {% if form.branch.errors %}
                            <p class="mt-1 text-sm text-red-600">{{ form.branch.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <div>
                            <label for="{{ form.loan.id_for_label }}" class="block text-sm font-medium text-gray-700">
                                Related Loan (Optional)
                            </label>
                            {{ form.loan }}
                            {% if form.loan.errors %}
                            <p class="mt-1 text-sm text-red-600">{{ form.loan.errors.0 }}</p>
                            {% endif %}
                            <p class="mt-1 text-xs text-gray-500">Select if this expense is related to a specific loan</p>
                        </div>
                    </div>
                </div>

                <!-- Documentation -->
                <div class="border-b border-gray-200 pb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Documentation</h3>
                    <div class="grid grid-cols-1 gap-6">
                        <div>
                            <label for="{{ form.receipt_path.id_for_label }}" class="block text-sm font-medium text-gray-700">
                                Receipt/Supporting Document
                            </label>
                            {{ form.receipt_path }}
                            {% if form.receipt_path.errors %}
                            <p class="mt-1 text-sm text-red-600">{{ form.receipt_path.errors.0 }}</p>
                            {% endif %}
                            <p class="mt-1 text-xs text-gray-500">Upload receipt or supporting document (PDF, Image)</p>
                            {% if expense and expense.receipt_path %}
                            <div class="mt-2">
                                <a href="{{ expense.receipt_path.url }}" target="_blank" class="text-sm text-primary hover:text-primary-dark">
                                    <span>📄</span> View current receipt
                                </a>
                            </div>
                            {% endif %}
                        </div>

                        <div>
                            <label for="{{ form.notes.id_for_label }}" class="block text-sm font-medium text-gray-700">
                                Additional Notes
                            </label>
                            {{ form.notes }}
                            {% if form.notes.errors %}
                            <p class="mt-1 text-sm text-red-600">{{ form.notes.errors.0 }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="mt-6 flex items-center justify-end gap-x-4">
                <a href="{% url 'expenses:expenses_list' %}" class="rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                    Cancel
                </a>
                <button type="submit" class="rounded-md bg-primary px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                    <span>💾</span> Save Expense
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}