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

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- Header -->
    <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
        <div class="px-4 py-5 sm:px-6">
            <div class="flex justify-between items-center">
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Complete Client History</h3>
                    <p class="mt-1 max-w-2xl text-sm text-gray-500">Comprehensive overview for {{ client.get_full_name }}</p>
                </div>
                <div class="flex space-x-2">
                    <a href="{% url 'users:client_detail' client.id %}" 
                       class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50">
                        <span>←</span>
                        Back to Client
                    </a>
                    <a href="{% url 'loans:new_application' %}?client_id={{ client.id }}" 
                       class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700">
                        <span>+</span>
                        New Loan
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Overview -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <!-- Applications Stats -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <span>📄</span>
                </div>
                <div class="ml-3">
                    <h4 class="text-sm font-medium text-gray-500">Total Applications</h4>
                    <p class="text-2xl font-bold text-gray-900">{{ total_applications }}</p>
                    <div class="text-xs text-gray-500 mt-1">
                        <span class="text-green-600">{{ approved_applications }} approved</span> • 
                        <span class="text-red-600">{{ rejected_applications }} rejected</span> • 
                        <span class="text-yellow-600">{{ pending_applications }} pending</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Loans Stats -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-handshake text-2xl text-green-500"></i>
                </div>
                <div class="ml-3">
                    <h4 class="text-sm font-medium text-gray-500">Total Loans</h4>
                    <p class="text-2xl font-bold text-gray-900">{{ total_loans }}</p>
                    <div class="text-xs text-gray-500 mt-1">
                        <span class="text-green-600">{{ paid_loans }} paid</span> • 
                        <span class="text-blue-600">{{ active_loans }} active</span> • 
                        <span class="text-red-600">{{ defaulted_loans }} defaulted</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Financial Stats -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <span>💵</span>
                </div>
                <div class="ml-3">
                    <h4 class="text-sm font-medium text-gray-500">Total Borrowed</h4>
                    <p class="text-2xl font-bold text-gray-900">KES {{ total_borrowed|floatformat:0 }}</p>
                    <div class="text-xs text-gray-500 mt-1">
                        <span class="text-green-600">KES {{ total_repaid|floatformat:0 }} repaid</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Outstanding Stats -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <span>⚠️</span>
                </div>
                <div class="ml-3">
                    <h4 class="text-sm font-medium text-gray-500">Outstanding</h4>
                    <p class="text-2xl font-bold {% if total_outstanding > 0 %}text-orange-600{% else %}text-gray-900{% endif %}">KES {{ total_outstanding|floatformat:0 }}</p>
                    <div class="text-xs text-gray-500 mt-1">
                        {% if overdue_count > 0 %}
                        <span class="text-red-600">{{ overdue_count }} overdue</span>
                        {% else %}
                        <span class="text-green-600">All current</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <div class="bg-white shadow rounded-lg">
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex" aria-label="Tabs">
                <button class="tab-button w-1/5 py-4 px-1 text-center border-b-2 font-medium text-sm border-indigo-500 text-indigo-600" 
                        data-tab="timeline">Timeline</button>
                <button class="tab-button w-1/5 py-4 px-1 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
                        data-tab="applications">Applications</button>
                <button class="tab-button w-1/5 py-4 px-1 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
                        data-tab="loans">Loans</button>
                <button class="tab-button w-1/5 py-4 px-1 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
                        data-tab="payments">Payments</button>
                <button class="tab-button w-1/5 py-4 px-1 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
                        data-tab="documents">Documents</button>
            </nav>
        </div>

        <!-- Timeline Tab -->
        <div id="timeline" class="tab-content p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Activity Timeline</h3>
            <div class="flow-root">
                <ul class="-mb-8">
                    {% for activity in timeline_activities %}
                    <li>
                        <div class="relative pb-8">
                            {% if not forloop.last %}
                            <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                            {% endif %}
                            <div class="relative flex space-x-3">
                                <div>
                                    <span class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white
                                        {% if activity.type == 'application' %}
                                            {% if activity.status == 'approved' %}bg-green-500
                                            {% elif activity.status == 'rejected' %}bg-red-500
                                            {% elif activity.status == 'pending' %}bg-yellow-500
                                            {% else %}bg-gray-500{% endif %}
                                        {% elif activity.type == 'loan' %}
                                            {% if activity.status == 'paid' %}bg-green-500
                                            {% elif activity.status == 'active' %}bg-blue-500
                                            {% elif activity.status == 'defaulted' %}bg-red-500
                                            {% else %}bg-gray-500{% endif %}
                                        {% elif activity.type == 'payment' %}bg-green-500
                                        {% else %}bg-gray-500{% endif %}">
                                        {% if activity.type == 'application' %}
                                            <span>📄</span>
                                        {% elif activity.type == 'loan' %}
                                            <i class="fas fa-handshake text-white text-xs"></i>
                                        {% elif activity.type == 'payment' %}
                                            <span>💵</span>
                                        {% else %}
                                            <i class="fas fa-circle text-white text-xs"></i>
                                        {% endif %}
                                    </span>
                                </div>
                                <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                    <div>
                                        <p class="text-sm text-gray-900 font-medium">{{ activity.title }}</p>
                                        <p class="text-sm text-gray-500">{{ activity.description }}</p>
                                    </div>
                                    <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                        <time datetime="{{ activity.date|date:'c' }}">{{ activity.date|date:"M j, Y g:i A" }}</time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {% empty %}
                    <li class="text-center py-8 text-gray-500">No activity found</li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <!-- Applications Tab -->
        <div id="applications" class="tab-content hidden p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">All Loan Applications ({{ total_applications }})</h3>
                <a href="{% url 'loans:new_application' %}?client_id={{ client.id }}" 
                   class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700">
                    <span>+</span>
                    New Application
                </a>
            </div>
            
            {% if applications %}
            <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 tracking-wider">Application</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for application in applications %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{ application.application_number }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <div>
                                    <div class="font-medium">{{ application.loan_product.name }}</div>
                                    <div class="text-xs text-gray-500">{{ application.loan_product.get_product_type_display }}</div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                KES {{ application.requested_amount|floatformat:2 }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ application.requested_duration }} days
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full 
                                    {% if application.status == 'approved' %}bg-green-100 text-green-800
                                    {% elif application.status == 'disbursed' %}bg-blue-100 text-blue-800
                                    {% elif application.status == 'pending' %}bg-yellow-100 text-yellow-800
                                    {% elif application.status == 'under_review' %}bg-purple-100 text-purple-800
                                    {% elif application.status == 'rejected' %}bg-red-100 text-red-800
                                    {% else %}bg-gray-100 text-gray-800{% endif %}">
                                    {{ application.get_status_display }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ application.submitted_at|date:"M j, Y" }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <a href="{% url 'loans:application_detail' application.pk %}" 
                                   class="text-indigo-600 hover:text-indigo-900 mr-3">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{% url 'loans:application_detail' application.id %}" 
                                   class="text-green-600 hover:text-green-900">
                                    <i class="fas fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-8">
                <span>📄</span>
                <p class="text-gray-500">No loan applications found.</p>
            </div>
            {% endif %}
        </div>

        <!-- Loans Tab -->
        <div id="loans" class="tab-content hidden p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">All Loans ({{ total_loans }})</h3>
            </div>
            
            {% if loans %}
            <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 tracking-wider">Loan Number</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Outstanding</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for loan in loans %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{ loan.loan_number }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ loan.application.loan_product.name }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                KES {{ loan.principal_amount|floatformat:2 }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <span class="{% if loan.outstanding_amount > 0 %}text-orange-600 font-medium{% else %}text-green-600{% endif %}">
                                    KES {{ loan.outstanding_amount|floatformat:2 }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium rounded-full 
                                    {% if loan.status == 'paid' %}bg-green-100 text-green-800
                                    {% elif loan.status == 'active' %}bg-blue-100 text-blue-800
                                    {% elif loan.status == 'defaulted' %}bg-red-100 text-red-800
                                    {% elif loan.status == 'rolled_over' %}bg-yellow-100 text-yellow-800
                                    {% else %}bg-gray-100 text-gray-800{% endif %}">
                                    {{ loan.get_status_display }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <div>
                                    {{ loan.due_date|date:"M j, Y" }}
                                    {% if loan.is_overdue %}
                                    <div class="text-xs text-red-500">{{ loan.days_overdue }} days overdue</div>
                                    {% endif %}
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <a href="{% url 'loans:loan_detail' loan.pk %}" 
                                   class="text-indigo-600 hover:text-indigo-900 mr-3">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{% url 'loans:loan_detail' loan.id %}" 
                                   class="text-green-600 hover:text-green-900">
                                    <i class="fas fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-8">
                <i class="fas fa-handshake text-4xl text-gray-300 mb-4"></i>
                <p class="text-gray-500">No loans found.</p>
            </div>
            {% endif %}
        </div>

        <!-- Payments Tab -->
        <div id="payments" class="tab-content hidden p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">All Payments ({{ total_payments }})</h3>
                <a href="{% url 'loans:new_repayment' %}" 
                   class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700">
                    <span>+</span>
                    Add Payment
                </a>
            </div>
            
            {% if repayments %}
            <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 tracking-wider">Receipt</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Loan</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Method</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for payment in repayments %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{ payment.receipt_number }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ payment.loan.loan_number }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <span class="font-medium text-green-600">KES {{ payment.amount|floatformat:2 }}</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <span class="px-2 py-1 text-xs font-medium rounded-full 
                                    {% if payment.payment_method == 'mpesa' %}bg-green-100 text-green-800
                                    {% elif payment.payment_method == 'bank' %}bg-blue-100 text-blue-800
                                    {% elif payment.payment_method == 'cash' %}bg-yellow-100 text-yellow-800
                                    {% else %}bg-gray-100 text-gray-800{% endif %}">
                                    {{ payment.get_payment_method_display }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ payment.payment_date|date:"M j, Y g:i A" }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <a href="{% url 'loans:edit_repayment' payment.id %}" 
                                   class="text-indigo-600 hover:text-indigo-900 mr-3" title="Edit Payment">
                                    <span>✏️</span>
                                </a>
                                <button onclick="deletePayment('{{ payment.id }}', '{{ payment.receipt_number }}')" 
                                        class="text-red-600 hover:text-red-900 mr-3" title="Delete Payment">
                                    <span>🗑️</span>
                                </button>
                                <button onclick="viewReceipt('{{ payment.receipt_number }}')" 
                                        class="text-green-600 hover:text-green-900" title="View Receipt">
                                    <span>🧾</span>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-8">
                <span>🧾</span>
                <p class="text-gray-500">No payments found.</p>
            </div>
            {% endif %}
        </div>

        <!-- Documents Tab -->
        <div id="documents" class="tab-content hidden p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">Client Documents ({{ documents|length }})</h3>
                <a href="{% url 'users:client_documents' client.id %}" 
                   class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
                    <span>📂</span>
                    Manage Documents
                </a>
            </div>
            
            {% if documents %}
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
                {% for document in documents %}
                <div class="group relative">
                    <a href="{{ document.file.url }}" target="_blank" class="block">
                        <div class="aspect-square rounded-lg overflow-hidden bg-gray-100 border-2 border-gray-200 hover:border-blue-500 transition-all shadow-sm hover:shadow-md">
                            {% if document.file.url %}
                                {% if document.file.url|slice:"-4:" == '.pdf' or document.file.url|slice:"-4:" == '.PDF' %}
                                    <!-- PDF Icon -->
                                    <div class="w-full h-full flex flex-col items-center justify-center bg-red-50">
                                        <svg class="w-16 h-16 text-red-600 mb-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M4 18h12V6h-4V2H4v16zm-2 1V0h12l4 4v16H2v-1z"/>
                                            <text x="50%" y="60%" text-anchor="middle" font-size="6" font-weight="bold" fill="currentColor">PDF</text>
                                        </svg>
                                        <span class="text-xs text-red-700 font-medium px-2 text-center">PDF Document</span>
                                    </div>
                                {% else %}
                                    <!-- Image Preview -->
                                    <img src="{{ document.file.url }}" 
                                         alt="Document"
                                         class="w-full h-full object-cover"
                                         onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center bg-gray-200\'><svg class=\'w-12 h-12 text-gray-400\' fill=\'currentColor\' viewBox=\'0 0 20 20\'><path d=\'M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z\'/></svg></div>';">
                                {% endif %}
                            {% else %}
                                <!-- Fallback Icon -->
                                <div class="w-full h-full flex items-center justify-center bg-gray-200">
                                    <svg class="w-12 h-12 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"/>
                                    </svg>
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Document Info Overlay -->
                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all rounded-lg flex items-end opacity-0 group-hover:opacity-100">
                            <div class="p-2 w-full">
                                <p class="text-white text-xs font-semibold truncate">
                                    {% if document.get_document_type_display %}
                                        {{ document.get_document_type_display }}
                                    {% elif document.document_type %}
                                        {{ document.document_type|title }}
                                    {% else %}
                                        Document
                                    {% endif %}
                                </p>
                                <p class="text-white text-xs opacity-90">
                                    {% if document.uploaded_at %}
                                        {{ document.uploaded_at|date:"M j, Y" }}
                                    {% elif document.created_at %}
                                        {{ document.created_at|date:"M j, Y" }}
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                    </a>
                    
                    <!-- Status Badge -->
                    <div class="absolute top-2 right-2">
                        {% if document.status or document.get_status_display %}
                        <span class="inline-block px-2 py-1 text-xs font-bold rounded-full shadow-sm
                            {% if document.status == 'approved' %}bg-green-500 text-white
                            {% elif document.status == 'rejected' %}bg-red-500 text-white
                            {% else %}bg-yellow-500 text-white{% endif %}">
                            {% if document.status == 'approved' %}✓
                            {% elif document.status == 'rejected' %}✕
                            {% else %}⏳{% endif %}
                        </span>
                        {% else %}
                        <span class="inline-block px-2 py-1 text-xs font-bold rounded-full shadow-sm bg-green-500 text-white">
                            ✓
                        </span>
                        {% endif %}
                    </div>
                    
                    <!-- Document Type Label -->
                    <div class="mt-2">
                        <p class="text-xs font-medium text-gray-700 truncate text-center">
                            {% if document.get_document_type_display %}
                                {{ document.get_document_type_display }}
                            {% elif document.document_type %}
                                {{ document.document_type|title }}
                            {% else %}
                                Document
                            {% endif %}
                        </p>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-12">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                <p class="mt-2 text-sm text-gray-500">No documents found for this client.</p>
                <a href="{% url 'users:client_documents' client.id %}" 
                   class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
                    <span>📤</span>
                    Upload Documents
                </a>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Delete Payment Modal -->
<div id="deletePaymentModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75"></div>
    <div class="fixed inset-0 z-10 overflow-y-auto">
        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                <div class="sm:flex sm:items-start">
                    <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                        <span>⚠️</span>
                    </div>
                    <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                        <h3 class="text-base font-semibold leading-6 text-gray-900">Delete Payment</h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-500">
                                Are you sure you want to delete payment <span id="deleteReceiptNumber" class="font-medium"></span>? 
                                This action cannot be undone and will update the loan balance.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                    <button type="button" onclick="confirmDeletePayment()" 
                            class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto">
                        Delete Payment
                    </button>
                    <button type="button" onclick="hideDeletePaymentModal()" 
                            class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Tab switching logic
    document.querySelectorAll('.tab-button').forEach(button => {
        button.addEventListener('click', () => {
            // Remove active class from all buttons and content
            document.querySelectorAll('.tab-button').forEach(b => {
                b.classList.remove('border-indigo-500', 'text-indigo-600');
                b.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
            });
            document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));

            // Add active class to clicked button and show content
            button.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
            button.classList.add('border-indigo-500', 'text-indigo-600');
            document.getElementById(button.dataset.tab).classList.remove('hidden');
        });
    });

    let paymentToDelete = null;

    function deletePayment(paymentId, receiptNumber) {
        paymentToDelete = paymentId;
        document.getElementById('deleteReceiptNumber').textContent = receiptNumber;
        document.getElementById('deletePaymentModal').classList.remove('hidden');
    }

    function hideDeletePaymentModal() {
        document.getElementById('deletePaymentModal').classList.add('hidden');
        paymentToDelete = null;
    }

    function confirmDeletePayment() {
        if (paymentToDelete) {
            // Redirect to custom delete page
            window.location.href = `/loans/repayments/${paymentToDelete}/delete/`;
        }
    }

    function viewReceipt(receiptNumber) {
        // Open receipt in new window/tab
        const receiptUrl = `/utils/receipts/?search=${receiptNumber}`;
        window.open(receiptUrl, '_blank');
    }
</script>
{% endblock %}