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

{% block title %}Client Reports - Haven Grazuri Investment Limited{% endblock %}

{% block extra_css %}
<style>
    .metrics-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    
    .metric-value {
        font-size: 2rem;
        font-weight: bold;
        color: #2c3e50;
        margin: 10px 0;
    }
    
    .metric-label {
        font-size: 0.9rem;
        color: #7f8c8d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .performance-chart {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    
    .chart-title {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 20px;
        color: #2c3e50;
    }
    
    .performance-bar {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }
    
    .performance-label {
        width: 100px;
        font-weight: 500;
        color: #34495e;
    }
    
    .performance-bar-container {
        flex: 1;
        height: 30px;
        background: #ecf0f1;
        border-radius: 4px;
        overflow: hidden;
        margin: 0 15px;
    }
    
    .performance-bar-fill {
        height: 100%;
        transition: width 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 0.85rem;
    }
    
    .performance-bar-fill.excellent {
        background: linear-gradient(135deg, #27ae60, #2ecc71);
    }
    
    .performance-bar-fill.good {
        background: linear-gradient(135deg, #3498db, #5dade2);
    }
    
    .performance-bar-fill.average {
        background: linear-gradient(135deg, #f39c12, #f1c40f);
    }
    
    .performance-bar-fill.poor {
        background: linear-gradient(135deg, #e74c3c, #ec7063);
    }
    
    .performance-count {
        width: 60px;
        text-align: right;
        font-weight: 600;
        color: #2c3e50;
    }
    
    .top-performers-table {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    
    .table-responsive {
        overflow-x: auto;
    }
    
    .performers-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .performers-table th {
        background: #34495e;
        color: white;
        padding: 12px;
        text-align: left;
        font-weight: 600;
        font-size: 0.9rem;
    }
    
    .performers-table td {
        padding: 12px;
        border-bottom: 1px solid #ecf0f1;
    }
    
    .performers-table tr:hover {
        background: #f8f9fa;
    }
    
    .rank-badge {
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #3498db;
        color: white;
        text-align: center;
        line-height: 30px;
        font-weight: bold;
    }
    
    .rank-badge.gold {
        background: linear-gradient(135deg, #f39c12, #f1c40f);
    }
    
    .rank-badge.silver {
        background: linear-gradient(135deg, #95a5a6, #bdc3c7);
    }
    
    .rank-badge.bronze {
        background: linear-gradient(135deg, #d35400, #e67e22);
    }
    
    .score-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 600;
    }
    
    .score-badge.excellent {
        background: #d5f4e6;
        color: #27ae60;
    }
    
    .score-badge.good {
        background: #d6eaf8;
        color: #3498db;
    }
    
    .score-badge.average {
        background: #fef5e7;
        color: #f39c12;
    }
    
    .score-badge.poor {
        background: #fadbd8;
        color: #e74c3c;
    }
    
    .filters-section {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    
    .filter-group {
        margin-bottom: 15px;
    }
    
    .filter-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
        color: #34495e;
    }
    
    .filter-group select,
    .filter-group input {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 0.95rem;
    }
    
    .filter-actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }
    
    .btn-filter {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .btn-filter.primary {
        background: #3498db;
        color: white;
    }
    
    .btn-filter.primary:hover {
        background: #2980b9;
    }
    
    .btn-filter.secondary {
        background: #95a5a6;
        color: white;
    }
    
    .btn-filter.secondary:hover {
        background: #7f8c8d;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h1 class="page-title">📊 Client Portfolio & Growth</h1>
                    <p class="text-muted">Client acquisition, growth trends, and portfolio analytics</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="?export=excel{% if gender_filter %}&gender={{ gender_filter }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}{% if selected_branch_id %}&branch={{ selected_branch_id }}{% endif %}" class="btn btn-success">
                        <span>📊</span> Export Excel
                    </a>
                    <a href="?export=pdf{% if gender_filter %}&gender={{ gender_filter }}{% endif %}{% if start_date %}&start_date={{ start_date }}{% endif %}{% if end_date %}&end_date={{ end_date }}{% endif %}{% if selected_branch_id %}&branch={{ selected_branch_id }}{% endif %}" class="btn btn-danger">
                        <span>📄</span> Export PDF
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Filters Section -->
    <div class="filters-section">
        <h3 class="chart-title">🔍 Filters</h3>
        <form method="GET" action="{% url 'reports:borrower_reports' %}">
            <div class="row">
                {% if is_admin %}
                <div class="col-md-3">
                    <div class="filter-group">
                        <label for="branch">Branch</label>
                        <select name="branch" id="branch" class="form-control">
                            <option value="">All Branches</option>
                            {% for branch in all_branches %}
                            <option value="{{ branch.id }}" {% if selected_branch_id == branch.id|stringformat:"s" %}selected{% endif %}>
                                {{ branch.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                {% endif %}
                
                <div class="col-md-3">
                    <div class="filter-group">
                        <label for="gender">Gender</label>
                        <select name="gender" id="gender" class="form-control">
                            <option value="">All Genders</option>
                            <option value="M" {% if gender_filter == 'M' %}selected{% endif %}>Male</option>
                            <option value="F" {% if gender_filter == 'F' %}selected{% endif %}>Female</option>
                            <option value="Other" {% if gender_filter == 'Other' %}selected{% endif %}>Other</option>
                        </select>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="filter-group">
                        <label for="start_date">Registration From</label>
                        <input type="date" name="start_date" id="start_date" class="form-control" value="{{ start_date }}">
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="filter-group">
                        <label for="end_date">Registration To</label>
                        <input type="date" name="end_date" id="end_date" class="form-control" value="{{ end_date }}">
                    </div>
                </div>
            </div>
            
            <div class="filter-actions">
                <button type="submit" class="btn-filter primary">Apply Filters</button>
                <a href="{% url 'reports:borrower_reports' %}" class="btn-filter secondary">Clear Filters</a>
            </div>
        </form>
    </div>
    
    <!-- Summary Metrics -->
    <div class="row">
        <div class="col-md-3">
            <div class="metrics-card">
                <div class="metric-label">Total Clients</div>
                <div class="metric-value">{{ client_metrics.total_clients|default:0 }}</div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="metrics-card">
                <div class="metric-label">New This Month</div>
                <div class="metric-value" style="color: #27ae60;">+{{ client_metrics.new_clients_this_month|default:0 }}</div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="metrics-card">
                <div class="metric-label">Growth Rate</div>
                <div class="metric-value" style="{% if client_metrics.growth_rate >= 0 %}color: #27ae60;{% else %}color: #e74c3c;{% endif %}">
                    {{ client_metrics.growth_rate|floatformat:1|default:"0.0" }}%
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="metrics-card">
                <div class="metric-label">Loan Penetration</div>
                <div class="metric-value">{{ client_metrics.loan_penetration_rate|floatformat:1|default:"0.0" }}%</div>
            </div>
        </div>
    </div>
    
    <!-- Additional Metrics Row -->
    <div class="row">
        <div class="col-md-4">
            <div class="metrics-card">
                <div class="metric-label">Clients with Loans</div>
                <div class="metric-value">{{ client_metrics.clients_with_loans|default:0 }}</div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="metrics-card">
                <div class="metric-label">New Last Month</div>
                <div class="metric-value">{{ client_metrics.new_clients_last_month|default:0 }}</div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="metrics-card">
                <div class="metric-label">Total Outstanding</div>
                <div class="metric-value">KES {{ client_metrics.total_outstanding|floatformat:0|default:"0" }}</div>
            </div>
        </div>
    </div>
    
    <!-- Demographic Distribution Charts -->
    <div class="row">
        <div class="col-md-6">
            <div class="performance-chart">
                <h3 class="chart-title">👥 Gender Distribution</h3>
                
                {% with total=client_metrics.total_clients|default:1 %}
                <div class="performance-bar">
                    <div class="performance-label">Male</div>
                    <div class="performance-bar-container">
                        <div class="performance-bar-fill good" 
                             style="width: {% widthratio demographic_distribution.gender.Male total 100 %}%">
                            {% if demographic_distribution.gender.Male > 0 %}
                                {{ demographic_distribution.gender.Male }}
                            {% endif %}
                        </div>
                    </div>
                    <div class="performance-count">{{ demographic_distribution.gender.Male|default:0 }}</div>
                </div>
                
                <div class="performance-bar">
                    <div class="performance-label">Female</div>
                    <div class="performance-bar-container">
                        <div class="performance-bar-fill excellent" 
                             style="width: {% widthratio demographic_distribution.gender.Female total 100 %}%">
                            {% if demographic_distribution.gender.Female > 0 %}
                                {{ demographic_distribution.gender.Female }}
                            {% endif %}
                        </div>
                    </div>
                    <div class="performance-count">{{ demographic_distribution.gender.Female|default:0 }}</div>
                </div>
                
                <div class="performance-bar">
                    <div class="performance-label">Other</div>
                    <div class="performance-bar-container">
                        <div class="performance-bar-fill average" 
                             style="width: {% widthratio demographic_distribution.gender.Other total 100 %}%">
                            {% if demographic_distribution.gender.Other > 0 %}
                                {{ demographic_distribution.gender.Other }}
                            {% endif %}
                        </div>
                    </div>
                    <div class="performance-count">{{ demographic_distribution.gender.Other|default:0 }}</div>
                </div>
                {% endwith %}
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="performance-chart">
                <h3 class="chart-title">💼 Loan Status Distribution</h3>
                
                {% with total=client_metrics.total_clients|default:1 %}
                <div class="performance-bar">
                    <div class="performance-label">With Loans</div>
                    <div class="performance-bar-container">
                        <div class="performance-bar-fill excellent" 
                             style="width: {% widthratio demographic_distribution.loan_status.With\ Active\ Loans total 100 %}%">
                            {% if demographic_distribution.loan_status.With\ Active\ Loans > 0 %}
                                {{ demographic_distribution.loan_status.With\ Active\ Loans }}
                            {% endif %}
                        </div>
                    </div>
                    <div class="performance-count">{{ demographic_distribution.loan_status.With\ Active\ Loans|default:0 }}</div>
                </div>
                
                <div class="performance-bar">
                    <div class="performance-label">Without Loans</div>
                    <div class="performance-bar-container">
                        <div class="performance-bar-fill average" 
                             style="width: {% widthratio demographic_distribution.loan_status.Without\ Loans total 100 %}%">
                            {% if demographic_distribution.loan_status.Without\ Loans > 0 %}
                                {{ demographic_distribution.loan_status.Without\ Loans }}
                            {% endif %}
                        </div>
                    </div>
                    <div class="performance-count">{{ demographic_distribution.loan_status.Without\ Loans|default:0 }}</div>
                </div>
                {% endwith %}
            </div>
        </div>
    </div>
    
    <!-- Growth Trends Chart -->
    <div class="row">
        <div class="col-12">
            <div class="performance-chart">
                <h3 class="chart-title">📈 Client Growth Trends (Last 6 Months)</h3>
                
                {% if growth_trends %}
                <div style="overflow-x: auto;">
                    <table class="performers-table">
                        <thead>
                            <tr>
                                <th>Month</th>
                                <th>New Clients</th>
                                <th>Cumulative Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for trend in growth_trends %}
                            <tr>
                                <td><strong>{{ trend.month }}</strong></td>
                                <td><span style="color: #27ae60; font-weight: 600;">+{{ trend.new_clients }}</span></td>
                                <td>{{ trend.cumulative_total }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div style="text-align: center; padding: 40px; color: #7f8c8d;">
                    <p>No growth data available</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Top Clients by Portfolio Table -->
    <div class="row">
        <div class="col-12">
            <div class="top-performers-table">
                <h3 class="chart-title">💰 Top Clients by Portfolio Size</h3>
                
                {% if top_clients %}
                <div class="table-responsive">
                    <table class="performers-table">
                        <thead>
                            <tr>
                                <th>Rank</th>
                                <th>Client Name</th>
                                <th>Phone Number</th>
                                <th>Active Loans</th>
                                <th>Total Disbursed</th>
                                <th>Outstanding</th>
                                <th>Member Since</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for client in top_clients %}
                            <tr>
                                <td>
                                    <span class="rank-badge {% if forloop.counter == 1 %}gold{% elif forloop.counter == 2 %}silver{% elif forloop.counter == 3 %}bronze{% endif %}">
                                        {{ forloop.counter }}
                                    </span>
                                </td>
                                <td><strong>{{ client.name }}</strong></td>
                                <td>{{ client.phone_number }}</td>
                                <td>{{ client.total_loans }}</td>
                                <td>KES {{ client.total_disbursed|floatformat:0 }}</td>
                                <td><strong>KES {{ client.total_outstanding|floatformat:0 }}</strong></td>
                                <td>{{ client.date_joined }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div style="text-align: center; padding: 40px; color: #7f8c8d;">
                    <p>No client data available</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}