{% extends 'base.html' %}
{% load humanize %}

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

{% block content %}
<div class="max-w-5xl mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <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 class="flex gap-2">
            {% if expense.status == 'pending' %}
                {% if user.role == 'admin' or user.role == 'team_leader' %}
                <a href="{% url 'expenses:approve_expense' expense.pk %}" class="inline-flex items-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-700">
                    <span>✓</span> Approve
                </a>
                <a href="{% url 'expenses:reject_expense' expense.pk %}" class="inline-flex items-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700">
                    <span>✕</span> Reject
                </a>
                {% endif %}
                <a href="{% url 'expenses:edit_expense' expense.pk %}" class="inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">
                    <span>✏️</span> Edit
                </a>
            {% endif %}
            {% if user.role == 'admin' or user.role == 'team_leader' %}
            <a href="{% url 'expenses:delete_expense' expense.pk %}" class="inline-flex items-center rounded-md bg-gray-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700">
                <span>🗑️</span> Delete
            </a>
            {% endif %}
        </div>
    </div>

    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
        <!-- Header -->
        <div class="px-6 py-4 bg-primary border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-semibold text-white">{{ expense.title }}</h2>
                <div>
                    {% if expense.status == 'pending' %}
                    <span class="inline-flex items-center rounded-full bg-yellow-100 px-3 py-1 text-sm font-medium text-yellow-800">
                        <span>⏰</span> Pending
                    </span>
                    {% elif expense.status == 'approved' %}
                    <span class="inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800">
                        <span>✓</span> Approved
                    </span>
                    {% elif expense.status == 'rejected' %}
                    <span class="inline-flex items-center rounded-full bg-red-100 px-3 py-1 text-sm font-medium text-red-800">
                        <span>✕</span> Rejected
                    </span>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="px-6 py-6">
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                <!-- Left Column -->
                <div class="space-y-6">
                    <!-- Basic Information -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Basic Information</h3>
                        <dl class="space-y-3">
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Category</dt>
                                <dd class="text-sm text-gray-900">{{ expense.get_category_display }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Expense Date</dt>
                                <dd class="text-sm text-gray-900">{{ expense.expense_date|date:"d M Y" }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Created</dt>
                                <dd class="text-sm text-gray-900">{{ expense.created_at|date:"d M Y H:i" }}</dd>
                            </div>
                            {% if expense.description %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500 mb-1">Description</dt>
                                <dd class="text-sm text-gray-900">{{ expense.description }}</dd>
                            </div>
                            {% endif %}
                        </dl>
                    </div>

                    <!-- Financial Details -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Financial Details</h3>
                        <dl class="space-y-3">
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Amount</dt>
                                <dd class="text-lg font-bold text-gray-900">KES {{ expense.amount|floatformat:2|intcomma }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Payment Method</dt>
                                <dd class="text-sm text-gray-900">{{ expense.get_payment_method_display }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Paid To</dt>
                                <dd class="text-sm text-gray-900">{{ expense.paid_to }}</dd>
                            </div>
                            {% if expense.reference_number %}
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Reference Number</dt>
                                <dd class="text-sm text-gray-900 font-mono">{{ expense.reference_number }}</dd>
                            </div>
                            {% endif %}
                        </dl>
                    </div>
                </div>

                <!-- Right Column -->
                <div class="space-y-6">
                    <!-- Relationships -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Relationships</h3>
                        <dl class="space-y-3">
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Branch</dt>
                                <dd class="text-sm text-gray-900">{{ expense.branch.name }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Created By</dt>
                                <dd class="text-sm text-gray-900">{{ expense.staff.get_full_name }}</dd>
                            </div>
                            {% if expense.loan %}
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Related Loan</dt>
                                <dd class="text-sm text-gray-900">
                                    <a href="{% url 'loans:loan_detail' expense.loan.pk %}" class="text-primary hover:text-primary-dark">
                                        {{ expense.loan.borrower.get_full_name }} - KES {{ expense.loan.principal_amount|floatformat:2|intcomma }}
                                    </a>
                                </dd>
                            </div>
                            {% endif %}
                        </dl>
                    </div>

                    <!-- Approval Information -->
                    {% if expense.status != 'pending' %}
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Approval Information</h3>
                        <dl class="space-y-3">
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Status</dt>
                                <dd class="text-sm text-gray-900">{{ expense.get_status_display }}</dd>
                            </div>
                            {% if expense.approved_by %}
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Processed By</dt>
                                <dd class="text-sm text-gray-900">{{ expense.approved_by.get_full_name }}</dd>
                            </div>
                            {% endif %}
                            {% if expense.approved_at %}
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500">Processed At</dt>
                                <dd class="text-sm text-gray-900">{{ expense.approved_at|date:"d M Y H:i" }}</dd>
                            </div>
                            {% endif %}
                            {% if expense.rejection_reason %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500 mb-1">Rejection Reason</dt>
                                <dd class="text-sm text-red-600 bg-red-50 p-3 rounded">{{ expense.rejection_reason }}</dd>
                            </div>
                            {% endif %}
                        </dl>
                    </div>
                    {% endif %}

                    <!-- Receipt -->
                    {% if expense.has_receipt %}
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Receipt</h3>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <a href="{{ expense.receipt_path.url }}" target="_blank" class="inline-flex items-center text-primary hover:text-primary-dark">
                                <span>📄</span>
                                <div>
                                    <p class="text-sm font-medium">View Receipt</p>
                                    <p class="text-xs text-gray-500">Click to open in new tab</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    {% endif %}

                    <!-- Notes -->
                    {% if expense.notes %}
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4 border-b pb-2">Additional Notes</h3>
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <p class="text-sm text-gray-700">{{ expense.notes }}</p>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
