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

{% block title %}Client Report - {{ client.get_full_name }} - HAVEN GRAZURI ADVANCE{% endblock %}

{% block extra_css %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<style>
    :root {
        --primary-color: #2563eb;
        --primary-dark: #1d4ed8;
        --success-color: #059669;
        --warning-color: #d97706;
        --error-color: #dc2626;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-500: #6b7280;
        --gray-700: #374151;
        --gray-900: #111827;
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    }

    .card {
        background: white;
        border-radius: 12px;
        border: 1px solid var(--gray-200);
        box-shadow: var(--shadow-sm);
        transition: all 0.3s ease;
    }

    .card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .card-header {
        background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
        border-bottom: 1px solid var(--gray-200);
        border-radius: 12px 12px 0 0;
        padding: 1.5rem;
    }

    .stat-card {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        border-radius: 16px;
        padding: 2rem;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        transform: translate(30px, -30px);
    }

    .stat-card:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: var(--shadow-lg);
    }

    .progress-bar {
        background: var(--gray-200);
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        height: 8px;
    }

    .progress-fill {
        height: 100%;
        border-radius: 10px;
        position: relative;
        transition: width 0.8s ease-in-out;
    }

    .progress-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
        0% {
            transform: translateX(-100%);
        }

        100% {
            transform: translateX(100%);
        }
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: all 0.2s ease;
    }

    .status-badge:hover {
        transform: scale(1.05);
    }

    .document-card {
        text-align: center;
        padding: 1.5rem;
        border-radius: 12px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .document-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

    .document-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 1rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        transition: all 0.3s ease;
    }

    .document-uploaded {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: var(--success-color);
        border: 2px solid #6ee7b7;
    }

    .document-missing {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: var(--error-color);
        border: 2px solid #fca5a5;
    }

    .data-table {
        overflow: hidden;
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
    }

    .data-table th {
        background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.75rem;
        padding: 1rem 1.5rem;
        border-bottom: 2px solid var(--gray-200);
    }

    .data-table td {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--gray-200);
        transition: background-color 0.2s ease;
    }

    .data-table tr:hover td {
        background-color: var(--gray-50);
    }

    .print-button {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        box-shadow: var(--shadow-sm);
    }

    .print-button:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .credit-score-circle {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 0 auto;
    }

    .credit-score-high {
        background: conic-gradient(from 0deg, var(--success-color), #10b981, var(--success-color));
    }

    .credit-score-medium {
        background: conic-gradient(from 0deg, var(--warning-color), #f59e0b, var(--warning-color));
    }

    .credit-score-low {
        background: conic-gradient(from 0deg, var(--error-color), #ef4444, var(--error-color));
    }

    .credit-score-inner {
        width: 100px;
        height: 100px;
        background: white;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .fade-in {
        animation: fadeInUp 0.6s ease-out;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .section-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, var(--gray-200) 50%, transparent 100%);
        margin: 3rem 0;
    }

    @media print {
        @page {
            size: A4;
            margin: 0.75in;
        }

        body {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        .print\:hidden {
            display: none !important;
        }

        .card {
            break-inside: avoid;
            box-shadow: none;
            border: 1px solid var(--gray-300);
        }

        .stat-card {
            background: var(--gray-100) !important;
            color: var(--gray-900) !important;
        }
    }

    @media (max-width: 768px) {
        .stat-card {
            padding: 1.5rem;
        }

        .credit-score-circle {
            width: 100px;
            height: 100px;
        }

        .credit-score-inner {
            width: 80px;
            height: 80px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-white">
    <!-- Enhanced Report Header -->
    <div class="bg-white border-b border-gray-200 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center py-6 gap-4">
                <div class="fade-in">
                    <div class="flex items-center gap-3 mb-2">
                        <div
                            class="w-10 h-10 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
                            <span>📈</span>
                        </div>
                        <h1 class="text-3xl font-bold text-gray-900">Client Report</h1>
                    </div>
                    <p class="text-gray-600">
                        <i class="far fa-calendar-alt mr-2"></i>
                        Generated on {{ report_date|date:"F d, Y" }} at {{ report_date|time:"g:i A" }}
                    </p>
                </div>
                <div class="print:hidden flex gap-3">
                    <button onclick="exportToPDF()" class="print-button bg-gradient-to-r from-green-600 to-green-700">
                        <span>📄</span>Export PDF
                    </button>
                    <button onclick="window.print()" class="print-button">
                        <span>🖨️</span>Print Report
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
        <!-- Enhanced Client Summary -->
        <div class="card fade-in">
            <div class="card-header">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                        <span>👤</span>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-900">Client Information</h2>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
                    <!-- Personal Details -->
                    <div class="space-y-4">
                        <h3
                            class="text-sm font-semibold text-gray-500 uppercase tracking-wider flex items-center gap-2">
                            <span>🪪</span>Personal Details
                        </h3>
                        <div class="space-y-3">
                            <div class="flex flex-col">
                                <dt class="text-xs text-gray-500 uppercase tracking-wider">Full Name</dt>
                                <dd class="text-sm font-semibold text-gray-900 mt-1">{{ client.get_full_name }}</dd>
                            </div>
                            <div class="flex flex-col">
                                <dt class="text-xs text-gray-500 uppercase tracking-wider">ID Number</dt>
                                <dd class="text-sm font-semibold text-gray-900 mt-1">{{ client.id_number }}</dd>
                            </div>
                            <div class="flex flex-col">
                                <dt class="text-xs text-gray-500 uppercase tracking-wider">Phone</dt>
                                <dd class="text-sm font-semibold text-gray-900 mt-1">
                                    <span>📞</span>{{ client.phone_number }}
                                </dd>
                            </div>
                            <div class="flex flex-col">
                                <dt class="text-xs text-gray-500 uppercase tracking-wider">Email</dt>
                                <dd class="text-sm font-semibold text-gray-900 mt-1">
                                    <span>✉️</span>{{ client.email }}
                                </dd>
                            </div>
                        </div>
                    </div>

                    <!-- Business Information -->
                    <div class="space-y-4">
                        <h3
                            class="text-sm font-semibold text-gray-500 uppercase tracking-wider flex items-center gap-2">
                            <span>🏢</span>Business Information
                        </h3>
                        <div class="space-y-3">
                            <div class="flex flex-col">
                                <dt class="text-xs text-gray-500 uppercase tracking-wider">Business Name</dt>
                                <dd class="text-sm font-semibold text-gray-900 mt-1">{{ client.business_name }}</dd>
                            </div>
                            <div class="flex flex-col">
                                <dt class="text-xs text-gray-500 uppercase tracking-wider">Business Type</dt>
                                <dd class="text-sm font-semibold text-gray-900 mt-1">{{ client.business_type|title }}
                                </dd>
                            </div>
                            <div class="flex flex-col">
                                <dt class="text-xs text-gray-500 uppercase tracking-wider">Monthly Income</dt>
                                <dd class="text-lg font-bold text-green-600 mt-1">
                                    KES {{ client.monthly_income|floatformat:2|intcomma }}
                                </dd>
                            </div>
                        </div>
                    </div>

                    <!-- Account Status -->
                    <div class="space-y-4">
                        <h3
                            class="text-sm font-semibold text-gray-500 uppercase tracking-wider flex items-center gap-2">
                            <i class="fas fa-shield-alt text-indigo-500"></i>Account Status
                        </h3>
                        <div class="space-y-3">
                            <div class="flex flex-col">
                                <dt class="text-xs text-gray-500 uppercase tracking-wider">Status</dt>
                                <dd class="mt-2">
                                    <span
                                        class="status-badge {% if client.status == 'active' %}bg-green-100 text-green-800 border border-green-200{% elif client.status == 'dormant' %}bg-yellow-100 text-yellow-800 border border-yellow-200{% elif client.status == 'blacklisted' %}bg-red-100 text-red-800 border border-red-200{% else %}bg-gray-100 text-gray-800 border border-gray-200{% endif %}">
                                        <i class="fas fa-circle mr-2 text-xs"></i>
                                        {{ client.get_status_display }}
                                    </span>
                                </dd>
                            </div>
                            <div class="flex flex-col">
                                <dt class="text-xs text-gray-500 uppercase tracking-wider">Member Since</dt>
                                <dd class="text-sm font-semibold text-gray-900 mt-1">
                                    <i class="far fa-calendar text-gray-400 mr-2"></i>
                                    {{ client.date_joined|date:"F d, Y" }}
                                </dd>
                            </div>
                        </div>
                    </div>

                    <!-- Credit Score Visualization -->
                    <div class="space-y-4">
                        <h3
                            class="text-sm font-semibold text-gray-500 uppercase tracking-wider flex items-center gap-2">
                            <span>⭐</span>Credit Score
                        </h3>
                        <div class="text-center">
                            <div
                                class="credit-score-circle {% if credit_score >= 80 %}credit-score-high{% elif credit_score >= 60 %}credit-score-medium{% else %}credit-score-low{% endif %}">
                                <div class="credit-score-inner">
                                    <div
                                        class="text-2xl font-bold {% if credit_score >= 80 %}text-green-600{% elif credit_score >= 60 %}text-yellow-600{% else %}text-red-600{% endif %}">
                                        {{ credit_score }}
                                    </div>
                                    <div class="text-xs text-gray-500 font-semibold">/ 100</div>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2 font-semibold">
                                {% if credit_score >= 80 %}Excellent{% elif credit_score >= 60 %}Good{% else %}Needs
                                Improvement{% endif %}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section-divider"></div>

        <!-- Enhanced Loan Summary -->
        <div class="card fade-in">
            <div class="card-header">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                        <span>🪙</span>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-900">Loan Summary</h2>
                </div>
            </div>
            <div class="p-6">
                <!-- Stat Cards Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="stat-card bg-gradient-to-br from-blue-500 to-blue-600">
                        <div class="relative z-10">
                            <div class="flex items-center justify-between mb-4">
                                <span>1.</span>
                                <span class="text-xs uppercase tracking-wider opacity-80">Total</span>
                            </div>
                            <div class="text-3xl font-bold mb-1">{{ loan_stats.total_loans }}</div>
                            <div class="text-sm opacity-80">Total Loans</div>
                        </div>
                    </div>

                    <div class="stat-card bg-gradient-to-br from-green-500 to-green-600">
                        <div class="relative z-10">
                            <div class="flex items-center justify-between mb-4">
                                <i class="fas fa-play-circle text-2xl opacity-80"></i>
                                <span class="text-xs uppercase tracking-wider opacity-80">Active</span>
                            </div>
                            <div class="text-3xl font-bold mb-1">{{ loan_stats.active_loans }}</div>
                            <div class="text-sm opacity-80">Active Loans</div>
                        </div>
                    </div>

                    <div class="stat-card bg-gradient-to-br from-yellow-500 to-orange-500">
                        <div class="relative z-10">
                            <div class="flex items-center justify-between mb-4">
                                <span>↓</span>
                                <span class="text-xs uppercase tracking-wider opacity-80">Borrowed</span>
                            </div>
                            <div class="text-2xl font-bold mb-1">KES {{ loan_stats.total_borrowed|floatformat:0|intcomma
                                }}</div>
                            <div class="text-sm opacity-80">Total Borrowed</div>
                        </div>
                    </div>

                    <div class="stat-card bg-gradient-to-br from-purple-500 to-purple-600">
                        <div class="relative z-10">
                            <div class="flex items-center justify-between mb-4">
                                <span>↑</span>
                                <span class="text-xs uppercase tracking-wider opacity-80">Repaid</span>
                            </div>
                            <div class="text-2xl font-bold mb-1">KES {{ loan_stats.total_repaid|floatformat:0|intcomma
                                }}</div>
                            <div class="text-sm opacity-80">Total Repaid</div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <!-- Enhanced Repayment Performance -->
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2">
                            <span>📊</span>
                            Repayment Performance
                        </h3>
                        <div class="space-y-6">
                            <div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-700 flex items-center gap-2">
                                        <span>✓</span>On Time
                                    </span>
                                    <span class="text-sm font-bold text-gray-900">{{
                                        loan_stats.on_time_rate|floatformat:1 }}%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill bg-gradient-to-r from-green-500 to-green-600"
                                        style="width: {{ loan_stats.on_time_rate }}%"></div>
                                </div>
                            </div>

                            <div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-700 flex items-center gap-2">
                                        <span>⏰</span>Late
                                    </span>
                                    <span class="text-sm font-bold text-gray-900">{{ loan_stats.late_rate|floatformat:1
                                        }}%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill bg-gradient-to-r from-yellow-500 to-orange-500"
                                        style="width: {{ loan_stats.late_rate }}%"></div>
                                </div>
                            </div>

                            <div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-700 flex items-center gap-2">
                                        <span>⚠️</span>Defaulted
                                    </span>
                                    <span class="text-sm font-bold text-gray-900">{{
                                        loan_stats.default_rate|floatformat:1 }}%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill bg-gradient-to-r from-red-500 to-red-600"
                                        style="width: {{ loan_stats.default_rate }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Enhanced Credit Score Components -->
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2">
                            <i class="fas fa-puzzle-piece text-purple-500"></i>
                            Credit Score Components
                        </h3>
                        <div class="space-y-6">
                            {% for component, score in credit_score_details.items %}
                            <div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-700">{{ component|title|replace:"_":" "
                                        }}</span>
                                    <span class="text-sm font-bold text-gray-900">{{ score|floatformat:1 }}/100</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill bg-gradient-to-r from-blue-500 to-purple-600"
                                        style="width: {{ score }}%"></div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section-divider"></div>

        <!-- Enhanced Loan History -->
        <div class="card fade-in">
            <div class="card-header">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-history text-indigo-600"></i>
                        </div>
                        <h2 class="text-xl font-semibold text-gray-900">Loan History</h2>
                    </div>
                    {% if loans %}
                    <span class="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">
                        {{ loans|length }} record{{ loans|length|pluralize }}
                    </span>
                    {% endif %}
                </div>
            </div>
            <div class="p-6">
                {% if loans %}
                <div class="overflow-x-auto">
                    <table class="min-w-full data-table">
                        <thead>
                            <tr>
                                <th class="text-left">Loan ID</th>
                                <th class="text-left">Amount</th>
                                <th class="text-left">Status</th>
                                <th class="text-left">Disbursed</th>
                                <th class="text-left">Due Date</th>
                                <th class="text-left">Amount Paid</th>
                                <th class="text-left">Progress</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for loan in loans %}
                            <tr class="transition-colors">
                                <td class="font-mono text-sm font-semibold text-gray-900">{{ loan.loan_number }}</td>
                                <td class="font-semibold text-gray-900">KES {{
                                    loan.principal_amount|floatformat:2|intcomma }}</td>
                                <td>
                                    <span
                                        class="status-badge {% if loan.status == 'active' %}bg-green-100 text-green-800 border border-green-200{% elif loan.status == 'paid' %}bg-blue-100 text-blue-800 border border-blue-200{% elif loan.status == 'defaulted' %}bg-red-100 text-red-800 border border-red-200{% else %}bg-gray-100 text-gray-800 border border-gray-200{% endif %}">
                                        <i class="fas fa-circle mr-1 text-xs"></i>
                                        {{ loan.get_status_display }}
                                    </span>
                                </td>
                                <td class="text-gray-700">
                                    <i class="far fa-calendar-plus text-gray-400 mr-2"></i>
                                    {{ loan.disbursement_date|date:"M d, Y" }}
                                </td>
                                <td class="text-gray-700">
                                    <i class="far fa-calendar-times text-gray-400 mr-2"></i>
                                    {{ loan.due_date|date:"M d, Y" }}
                                </td>
                                <td class="font-semibold text-gray-900">KES {{ loan.amount_paid|floatformat:2|intcomma
                                    }}</td>
                                <td>
                                    {% with progress=loan.amount_paid|div:loan.principal_amount|mul:100 %}
                                    <div class="flex items-center gap-2">
                                        <div class="flex-1 progress-bar h-2">
                                            <div class="progress-fill bg-gradient-to-r from-blue-500 to-green-500"
                                                style="width: {% if progress > 100 %}100{% else %}{{ progress|floatformat:0 }}{% endif %}%">
                                            </div>
                                        </div>
                                        <span class="text-xs font-medium text-gray-600 min-w-12">
                                            {% if progress > 100 %}100{% else %}{{ progress|floatformat:0 }}{% endif %}%
                                        </span>
                                    </div>
                                    {% endwith %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-16">
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span>📥</span>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No Loan History</h3>
                    <p class="text-gray-500">This client has no loan history available at the moment.</p>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="section-divider"></div>

        <!-- Enhanced Document Status -->
        <div class="card fade-in">
            <div class="card-header">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center">
                            <span>📂</span>
                        </div>
                        <h2 class="text-xl font-semibold text-gray-900">Document Status</h2>
                    </div>
                    <div class="text-sm text-gray-500">
                        {% with uploaded_docs=documents.values|count_true %}
                        {{ uploaded_docs }} of {{ documents|length }} uploaded
                        {% endwith %}
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
                    {% for doc_type, is_uploaded in documents.items %}
                    <div
                        class="document-card {% if is_uploaded %}bg-white border border-green-200{% else %}bg-white border border-red-200{% endif %}">
                        <div
                            class="document-icon {% if is_uploaded %}document-uploaded{% else %}document-missing{% endif %}">
                            {% if is_uploaded %}
                            <span>✓</span>
                            {% else %}
                            <span>⚠️</span>
                            {% endif %}
                        </div>
                        <h4 class="text-sm font-semibold text-gray-900 mb-1">{{ doc_type|title|replace:"_":" " }}</h4>
                        <p
                            class="text-xs {% if is_uploaded %}text-green-600{% else %}text-red-600{% endif %} font-medium uppercase tracking-wider">
                            {{ is_uploaded|yesno:"Uploaded,Missing" }}
                        </p>
                        {% if not is_uploaded %}
                        <div class="mt-3">
                            <button
                                class="text-xs bg-red-50 text-red-700 px-3 py-1 rounded-full border border-red-200 hover:bg-red-100 transition-colors">
                                Request Upload
                            </button>
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>

                <!-- Document Summary -->
                <div class="mt-8 p-4 bg-gray-50 rounded-lg">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <span>📊</span>
                            <span class="text-sm font-medium text-gray-700">Document Completion</span>
                        </div>
                        {% with uploaded_docs=documents.values|count_true total_docs=documents|length
                        completion_rate=uploaded_docs|div:total_docs|mul:100 %}
                        <div class="flex items-center gap-3">
                            <div class="w-24 progress-bar">
                                <div class="progress-fill {% if completion_rate == 100 %}bg-gradient-to-r from-green-500 to-green-600{% elif completion_rate >= 75 %}bg-gradient-to-r from-yellow-500 to-orange-500{% else %}bg-gradient-to-r from-red-500 to-red-600{% endif %}"
                                    style="width: {{ completion_rate|floatformat:0 }}%"></div>
                            </div>
                            <span
                                class="text-sm font-bold {% if completion_rate == 100 %}text-green-600{% elif completion_rate >= 75 %}text-yellow-600{% else %}text-red-600{% endif %}">
                                {{ completion_rate|floatformat:0 }}%
                            </span>
                        </div>
                        {% endwith %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Risk Assessment Section -->
        <div class="card fade-in">
            <div class="card-header">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-shield-alt text-red-600"></i>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-900">Risk Assessment</h2>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Risk Level -->
                    <div class="text-center">
                        <div
                            class="w-20 h-20 mx-auto mb-4 rounded-full flex items-center justify-center {% if credit_score >= 80 %}bg-green-100 text-green-600{% elif credit_score >= 60 %}bg-yellow-100 text-yellow-600{% else %}bg-red-100 text-red-600{% endif %}">
                            <i
                                class="fas {% if credit_score >= 80 %}fa-shield-check{% elif credit_score >= 60 %}fa-shield-alt{% else %}fa-exclamation-triangle{% endif %} text-2xl"></i>
                        </div>
                        <h3
                            class="text-lg font-semibold {% if credit_score >= 80 %}text-green-600{% elif credit_score >= 60 %}text-yellow-600{% else %}text-red-600{% endif %} mb-2">
                            {% if credit_score >= 80 %}Low Risk{% elif credit_score >= 60 %}Medium Risk{% else %}High
                            Risk{% endif %}
                        </h3>
                        <p class="text-sm text-gray-600">Based on credit score and payment history</p>
                    </div>

                    <!-- Recommendations -->
                    <div class="md:col-span-2">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Recommendations</h3>
                        <div class="space-y-3">
                            {% if credit_score >= 80 %}
                            <div class="flex items-start gap-3 p-3 bg-green-50 rounded-lg border border-green-200">
                                <span>👍</span>
                                <div>
                                    <h4 class="font-medium text-green-900">Excellent Client</h4>
                                    <p class="text-sm text-green-700">Consider offering premium loan products with
                                        better terms.</p>
                                </div>
                            </div>
                            {% elif credit_score >= 60 %}
                            <div class="flex items-start gap-3 p-3 bg-yellow-50 rounded-lg border border-yellow-200">
                                <span>⚠️</span>
                                <div>
                                    <h4 class="font-medium text-yellow-900">Good Client</h4>
                                    <p class="text-sm text-yellow-700">Standard loan terms apply. Monitor payment
                                        behavior closely.</p>
                                </div>
                            </div>
                            {% else %}
                            <div class="flex items-start gap-3 p-3 bg-red-50 rounded-lg border border-red-200">
                                <span>⚠️</span>
                                <div>
                                    <h4 class="font-medium text-red-900">High Risk Client</h4>
                                    <p class="text-sm text-red-700">Require additional collateral or guarantors for
                                        future loans.</p>
                                </div>
                            </div>
                            {% endif %}

                            {% if loan_stats.default_rate > 20 %}
                            <div class="flex items-start gap-3 p-3 bg-orange-50 rounded-lg border border-orange-200">
                                <i class="fas fa-warning text-orange-600 mt-1"></i>
                                <div>
                                    <h4 class="font-medium text-orange-900">High Default Rate</h4>
                                    <p class="text-sm text-orange-700">Consider financial counseling or restructured
                                        payment plans.</p>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Report Footer -->
    <div class="bg-white border-t border-gray-200 mt-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="text-center space-y-4">
                <div class="flex items-center justify-center gap-3 mb-4">
                    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect width='32' height='32' rx='8' fill='%23059669'/><path d='M8 16l6 6 10-10' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"
                        alt="Logo" class="w-8 h-8">
                    <h3 class="text-lg font-semibold text-gray-900">HAVEN GRAZURI ADVANCE</h3>
                </div>
                <p class="text-sm text-gray-600 max-w-2xl mx-auto">
                    This comprehensive client report was automatically generated on {{ report_date|date:"F d, Y" }} at
                    {{ report_date|time:"g:i A" }}.
                    All data is current as of the generation date and reflects the most recent client information
                    available in our systems.
                </p>
                <div
                    class="flex flex-wrap items-center justify-center gap-6 text-xs text-gray-500 pt-4 border-t border-gray-200">
                    <span>Report ID: {{ client.id }}</span>
                    <span>•</span>
                    <span>Generated by: System</span>
                    <span>•</span>
                    <span>Version: 2.0</span>
                    <span>•</span>
                    <span><span>📞</span>Support: +254-XXX-XXXX</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Enhanced interactions and animations
    document.addEventListener('DOMContentLoaded', function () {
        // Animate progress bars on scroll
        const progressBars = document.querySelectorAll('.progress-fill');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const width = entry.target.style.width;
                    entry.target.style.width = '0%';
                    entry.target.offsetHeight; // Trigger reflow
                    entry.target.style.width = width;
                }
            });
        });

        progressBars.forEach(bar => observer.observe(bar));

        // Add click handlers for document cards
        document.querySelectorAll('.document-card').forEach(card => {
            card.addEventListener('click', function () {
                const docType = this.querySelector('h4').textContent;
                const isUploaded = this.querySelector('p').textContent === 'UPLOADED';

                if (!isUploaded) {
                    // Show upload prompt or trigger upload flow
                    alert(`Request upload for ${docType}`);
                } else {
                    // Show document details or preview
                    alert(`View ${docType} document`);
                }
            });
        });

        // Smooth scroll for any internal links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });

        // Add fade-in animation to cards on scroll
        const fadeElements = document.querySelectorAll('.fade-in');
        const fadeObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        });

        fadeElements.forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(20px)';
            el.style.transition = 'all 0.6s ease-out';
            fadeObserver.observe(el);
        });
    });

    // Export to PDF functionality
    function exportToPDF() {
        // Hide print button and other non-printable elements
        const printButtons = document.querySelectorAll('.print\\:hidden');
        printButtons.forEach(btn => btn.style.display = 'none');

        // Trigger print dialog (which can be saved as PDF)
        window.print();

        // Restore buttons after a delay
        setTimeout(() => {
            printButtons.forEach(btn => btn.style.display = '');
        }, 1000);
    }

    // Add keyboard shortcuts
    document.addEventListener('keydown', function (e) {
        // Ctrl/Cmd + P for print
        if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
            e.preventDefault();
            window.print();
        }

        // Ctrl/Cmd + E for export
        if ((e.ctrlKey || e.metaKey) && e.key === 'e') {
            e.preventDefault();
            exportToPDF();
        }
    });

    // Custom template filters helper (if needed)
    if (typeof Django === 'undefined') {
        // Polyfill for template filters if testing outside Django
        window.templateFilters = {
            intcomma: function (value) {
                return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            },
            floatformat: function (value, decimals = 2) {
                return parseFloat(value).toFixed(decimals);
            }
        };
    }
</script>
{% endblock %}