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

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
        <!-- Client Info Header -->
        <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">Client Information</h3>
                    <p class="mt-1 max-w-2xl text-sm text-gray-500">Personal and account details for {{ client.get_full_name }}</p>
                </div>
                <div class="flex space-x-2">
                    <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">
                        <i class="fas fa-plus mr-2"></i>
                        New Loan
                    </a>
                    <a href="{% url 'users:client_update' 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">
                        <i class="fas fa-edit mr-2"></i>
                        Edit Client
                    </a>
                </div>
            </div>
        </div>

        <!-- Tabs -->
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex" aria-label="Tabs">
                <button class="tab-button w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm border-indigo-500 text-indigo-600" 
                        data-tab="details">Details</button>
                <button class="tab-button w-1/4 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/4 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>
                <button class="tab-button w-1/4 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="reports">Reports</button>
            </nav>
        </div>

        <!-- Details Tab -->
        <div id="details" class="tab-content p-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Personal Information -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h4 class="text-lg font-medium text-gray-900 mb-4">Personal Information</h4>
                    <dl class="space-y-3">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Full Name</dt>
                            <dd class="text-sm text-gray-900">{{ client.get_full_name }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Email</dt>
                            <dd class="text-sm text-gray-900">{{ client.email }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Phone Number</dt>
                            <dd class="text-sm text-gray-900">{{ client.phone_number }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Date of Birth</dt>
                            <dd class="text-sm text-gray-900">{{ client.date_of_birth|date:"F j, Y"|default:"Not provided" }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Gender</dt>
                            <dd class="text-sm text-gray-900">{{ client.get_gender_display|default:"Not provided" }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">ID Number</dt>
                            <dd class="text-sm text-gray-900">{{ client.id_number|default:"Not provided" }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Nationality</dt>
                            <dd class="text-sm text-gray-900">{{ client.nationality|default:"Not provided" }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Marital Status</dt>
                            <dd class="text-sm text-gray-900">{{ client.get_marital_status_display|default:"Not provided" }}</dd>
                        </div>
                    </dl>
                </div>

                <!-- Business Information -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h4 class="text-lg font-medium text-gray-900 mb-4">Business Information</h4>
                    <dl class="space-y-3">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Business Name</dt>
                            <dd class="text-sm text-gray-900">{{ client.business_name|default:"Not provided" }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Business Type</dt>
                            <dd class="text-sm text-gray-900">{{ client.get_business_type_display|default:"Not provided" }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Monthly Income</dt>
                            <dd class="text-sm text-gray-900">KES {{ client.monthly_income|floatformat:2|default:"Not provided" }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Employer</dt>
                            <dd class="text-sm text-gray-900">{{ client.employer|default:"Not provided" }}</dd>
                        </div>
                    </dl>
                </div>

                <!-- Address Information -->
                <div class="bg-gray-50 p-4 rounded-lg md:col-span-2">
                    <h4 class="text-lg font-medium text-gray-900 mb-4">Address Information</h4>
                    <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Address</dt>
                            <dd class="text-sm text-gray-900">{{ client.physical_address|default:"Not provided" }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">City</dt>
                            <dd class="text-sm text-gray-900">{{ client.city|default:"Not provided" }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">County</dt>
                            <dd class="text-sm text-gray-900">{{ client.county|default:"Not provided" }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Postal Code</dt>
                            <dd class="text-sm text-gray-900">{{ client.postal_code|default:"Not provided" }}</dd>
                        </div>
                    </dl>
                </div>

                <!-- Account Status -->
                <div class="bg-gray-50 p-4 rounded-lg md:col-span-2">
                    <h4 class="text-lg font-medium text-gray-900 mb-4">Account Status</h4>
                    <dl class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Status</dt>
                            <dd class="text-sm">
                                <span class="px-2 py-1 text-xs font-medium rounded-full 
                                    {% if client.status == 'active' %}bg-green-100 text-green-800
                                    {% elif client.status == 'suspended' %}bg-yellow-100 text-yellow-800
                                    {% elif client.status == 'blacklisted' %}bg-red-100 text-red-800
                                    {% else %}bg-gray-100 text-gray-800{% endif %}">
                                    {{ client.get_status_display }}
                                </span>
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Credit Score</dt>
                            <dd class="text-sm text-gray-900">
                                {% if credit_score %}
                                    <span class="px-2 py-1 text-xs font-medium rounded-full 
                                        {% if credit_score.score >= 80 %}bg-green-100 text-green-800
                                        {% elif credit_score.score >= 60 %}bg-yellow-100 text-yellow-800
                                        {% else %}bg-red-100 text-red-800{% endif %}">
                                        {{ credit_score.score }}/100
                                    </span>
                                {% else %}
                                    <span class="text-gray-500">Not available</span>
                                {% endif %}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Member Since</dt>
                            <dd class="text-sm text-gray-900">{{ client.date_joined|date:"F j, Y" }}</dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>

        <!-- Loans Tab -->
        <div id="loans" class="tab-content hidden p-4">
            <div class="mb-4 flex justify-between items-center">
                <h3 class="text-lg font-medium text-gray-900">Loan History</h3>
                <div class="flex space-x-2">
                    <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">
                        <i class="fas fa-plus mr-2"></i>
                        New Loan Application
                    </a>
                </div>
            </div>

            <!-- Loan Statistics -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <div class="bg-white rounded-lg shadow p-4">
                    <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:2 }}</p>
                </div>
                <div class="bg-white rounded-lg shadow p-4">
                    <h4 class="text-sm font-medium text-gray-500">Total Repaid</h4>
                    <p class="text-2xl font-bold text-gray-900">KES {{ total_repaid|floatformat:2 }}</p>
                </div>
                <div class="bg-white rounded-lg shadow p-4">
                    <h4 class="text-sm font-medium text-gray-500">Active Loans</h4>
                    <p class="text-2xl font-bold text-gray-900">{{ active_loans }}</p>
                </div>
            </div>

            <!-- Loan Applications -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h4 class="text-lg font-medium text-gray-900 mb-4">Recent Applications</h4>
                    {% 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">Status</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    {% for application in applications|slice:":5" %}
                                    <tr>
                                        <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">
                                            {{ application.loan_product.name }}
                                        </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">
                                            <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 == 'pending' %}bg-yellow-100 text-yellow-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>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-gray-500 text-center py-8">No loan applications found.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Documents Tab -->
        <div id="documents" class="tab-content hidden p-4">
            <div class="mb-4 flex justify-between items-center">
                <h3 class="text-lg font-medium text-gray-900">Client Documents</h3>
                <div class="flex space-x-2">
                    <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-primary hover:bg-opacity-90">
                        <i class="fas fa-folder-open mr-2"></i>
                        View All Documents
                    </a>
                    <button onclick="uploadDocument()" 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">
                        <i class="fas fa-upload mr-2"></i>
                        Upload New
                    </button>
                </div>
            </div>

            <!-- Document Summary -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- ID Document -->
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-4">
                            <h4 class="text-lg font-medium text-gray-900">
                                <i class="fas fa-id-card text-primary mr-2"></i>
                                National ID
                            </h4>
                            <span class="text-sm text-gray-500">{{ id_documents.count }} files</span>
                        </div>
                        <p class="text-sm text-gray-500">Front and back scanned copies</p>
                        <div class="mt-4">
                            <a href="{% url 'users:client_documents' client.id %}#id-documents" class="text-primary hover:text-opacity-80 text-sm font-medium">
                                View Documents <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Selfie -->
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-4">
                            <h4 class="text-lg font-medium text-gray-900">
                                <i class="fas fa-camera text-primary mr-2"></i>
                                Selfie Photo
                            </h4>
                            <span class="text-sm text-gray-500">{{ selfie_documents.count }} files</span>
                        </div>
                        <p class="text-sm text-gray-500">Recent photo for verification</p>
                        <div class="mt-4">
                            <a href="{% url 'users:client_documents' client.id %}#selfie" class="text-primary hover:text-opacity-80 text-sm font-medium">
                                View Documents <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Utility Bill -->
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-4">
                            <h4 class="text-lg font-medium text-gray-900">
                                <i class="fas fa-file-invoice text-primary mr-2"></i>
                                Utility Bill
                            </h4>
                            <span class="text-sm text-gray-500">{{ utility_documents.count }} files</span>
                        </div>
                        <p class="text-sm text-gray-500">Recent utility bill for address verification</p>
                        <div class="mt-4">
                            <a href="{% url 'users:client_documents' client.id %}#utility-bill" class="text-primary hover:text-opacity-80 text-sm font-medium">
                                View Documents <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Bank Statement -->
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-4">
                            <h4 class="text-lg font-medium text-gray-900">
                                <i class="fas fa-university text-primary mr-2"></i>
                                Bank Statement
                            </h4>
                            <span class="text-sm text-gray-500">{{ bank_documents.count }} files</span>
                        </div>
                        <p class="text-sm text-gray-500">Last 6 months bank statement</p>
                        <div class="mt-4">
                            <a href="{% url 'users:client_documents' client.id %}#bank-statement" class="text-primary hover:text-opacity-80 text-sm font-medium">
                                View Documents <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reports Tab -->
        <div id="reports" class="tab-content hidden p-4">
            <div class="mb-4 flex justify-between items-center">
                <h3 class="text-lg font-medium text-gray-900">Client Reports</h3>
                <div class="flex space-x-2">
                    <button onclick="downloadClientReport('pdf')" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
                        <i class="fas fa-file-pdf mr-2"></i>
                        Download PDF
                    </button>
                    <button onclick="downloadClientReport('csv')" 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">
                        <i class="fas fa-file-csv mr-2"></i>
                        Download CSV
                    </button>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Loan History -->
                <div class="bg-white rounded-lg shadow p-4">
                    <h4 class="text-lg font-medium text-gray-900 mb-4">Loan History</h4>
                    <div id="loanHistoryChart" class="h-64 flex items-center justify-center text-gray-500">
                        Chart will be loaded here
                    </div>
                </div>

                <!-- Credit Score -->
                <div class="bg-white rounded-lg shadow p-4">
                    <h4 class="text-lg font-medium text-gray-900 mb-4">Credit Score History</h4>
                    <div id="creditScoreChart" class="h-64 flex items-center justify-center text-gray-500">
                        Chart will be loaded here
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Add client ID for API calls
    const clientId = '{{ client.id }}';

    // 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');

            // Load charts if reports tab is selected
            if (button.dataset.tab === 'reports') {
                loadCharts();
            }
        });
    });

    function downloadClientReport(format) {
        // Create a simple report download
        const reportData = {
            clientName: '{{ client.get_full_name }}',
            email: '{{ client.email }}',
            phone: '{{ client.phone_number }}',
            totalBorrowed: '{{ total_borrowed|floatformat:2 }}',
            totalRepaid: '{{ total_repaid|floatformat:2 }}',
            activeLoans: '{{ active_loans }}',
            creditScore: '{% if credit_score %}{{ credit_score.score }}{% else %}N/A{% endif %}'
        };

        if (format === 'pdf') {
            // For now, just show an alert. In production, this would generate a PDF
            alert('PDF report generation would be implemented here');
        } else {
            // Generate CSV
            const csvContent = `Client Name,Email,Phone,Total Borrowed,Total Repaid,Active Loans,Credit Score\n${reportData.clientName},${reportData.email},${reportData.phone},${reportData.totalBorrowed},${reportData.totalRepaid},${reportData.activeLoans},${reportData.creditScore}`;
            const blob = new Blob([csvContent], { type: 'text/csv' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `client_report_${clientId}.csv`;
            a.click();
            window.URL.revokeObjectURL(url);
        }
    }

    function uploadDocument() {
        // Implement document upload functionality
        alert('Document upload functionality would be implemented here');
    }

    function loadCharts() {
        // Simple chart implementation - in production, you'd load real data
        const loanHistoryChart = document.getElementById('loanHistoryChart');
        const creditScoreChart = document.getElementById('creditScoreChart');
        
        loanHistoryChart.innerHTML = '<div class="text-center"><i class="fas fa-chart-line text-4xl text-gray-300 mb-2"></i><p class="text-sm text-gray-500">Loan history chart would be displayed here</p></div>';
        creditScoreChart.innerHTML = '<div class="text-center"><i class="fas fa-chart-bar text-4xl text-gray-300 mb-2"></i><p class="text-sm text-gray-500">Credit score chart would be displayed here</p></div>';
    }
</script>
{% endblock %}