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

{% block title %}Age & Gender Analytics Report{% endblock %}

{% block extra_css %}
<style>
.metric-card {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.metric-card.success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.metric-card.warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.metric-card.info { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }

.analytics-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

.data-table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    width: 100%;
}

.data-table th {
    background: #f9fafb;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
}

.data-table td {
    padding: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

.data-table tr:hover {
    background: #f9fafb;
}

.action-btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-btn.primary { background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); color: white; }
.action-btn.success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; }

.chart-container {
    position: relative;
    height: 300px;
    margin: 1rem 0;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-gray-800">Age & Gender Analytics Report</h1>
            <p class="text-muted mb-0">Demographic analysis of loan applications and payment patterns</p>
        </div>
        <div class="d-flex gap-2">
            <a href="?export=pdf" class="action-btn primary">
                <i class="fas fa-file-pdf"></i> Export PDF
            </a>
            <a href="?export=excel" class="action-btn success">
                <i class="fas fa-file-excel"></i> Export Excel
            </a>
        </div>
    </div>


    <!-- Overall Summary -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="metric-card">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <p class="mb-1 opacity-75">Total Applications</p>
                        <h2 class="mb-0">{{ total_applications|intcomma }}</h2>
                    </div>
                    <i class="fas fa-file-alt fa-2x opacity-50"></i>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="metric-card success">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <p class="mb-1 opacity-75">Approved Applications</p>
                        <h2 class="mb-0">{{ approved_applications|intcomma }}</h2>
                    </div>
                    <i class="fas fa-check-circle fa-2x opacity-50"></i>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="metric-card info">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <p class="mb-1 opacity-75">Overall Approval Rate</p>
                        <h2 class="mb-0">{{ overall_approval_rate }}%</h2>
                    </div>
                    <i class="fas fa-percentage fa-2x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Age Group Analysis -->
    <div class="analytics-card">
        <h4 class="mb-3">Analysis by Age Group</h4>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Age Group</th>
                        <th>Total Applications</th>
                        <th>Approved</th>
                        <th>Approval Rate</th>
                        <th>Avg Loan Amount</th>
                        <th>On-Time Payments</th>
                        <th>Late Payments</th>
                        <th>On-Time Rate</th>
                    </tr>
                </thead>
                <tbody>
                    {% for group in age_group_order %}
                        {% if age_group_stats|get_item:group %}
                            {% with stats=age_group_stats|get_item:group %}
                            <tr>
                                <td><strong>{{ group }}</strong></td>
                                <td>{{ stats.total_applications|intcomma }}</td>
                                <td>{{ stats.approved_applications|intcomma }}</td>
                                <td>{{ stats.approval_rate }}%</td>
                                <td>KES {{ stats.average_loan_amount|floatformat:2|intcomma }}</td>
                                <td>{{ stats.on_time_payments|intcomma }}</td>
                                <td>{{ stats.late_payments|intcomma }}</td>
                                <td>{{ stats.on_time_rate }}%</td>
                            </tr>
                            {% endwith %}
                        {% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>


    <!-- Gender Analysis -->
    <div class="analytics-card">
        <h4 class="mb-3">Analysis by Gender</h4>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Gender</th>
                        <th>Total Applications</th>
                        <th>Approved</th>
                        <th>Approval Rate</th>
                        <th>Avg Loan Amount</th>
                        <th>On-Time Payments</th>
                        <th>Late Payments</th>
                        <th>On-Time Rate</th>
                    </tr>
                </thead>
                <tbody>
                    {% for category in gender_order %}
                        {% if gender_stats|get_item:category %}
                            {% with stats=gender_stats|get_item:category %}
                            <tr>
                                <td><strong>{{ category }}</strong></td>
                                <td>{{ stats.total_applications|intcomma }}</td>
                                <td>{{ stats.approved_applications|intcomma }}</td>
                                <td>{{ stats.approval_rate }}%</td>
                                <td>KES {{ stats.average_loan_amount|floatformat:2|intcomma }}</td>
                                <td>{{ stats.on_time_payments|intcomma }}</td>
                                <td>{{ stats.late_payments|intcomma }}</td>
                                <td>{{ stats.on_time_rate }}%</td>
                            </tr>
                            {% endwith %}
                        {% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="row">
        <div class="col-md-6">
            <div class="analytics-card">
                <h5 class="mb-3">Applications by Age Group</h5>
                <div class="chart-container">
                    <canvas id="ageGroupChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="analytics-card">
                <h5 class="mb-3">Applications by Gender</h5>
                <div class="chart-container">
                    <canvas id="genderChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}


{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
// Age Group Chart
const ageGroupCtx = document.getElementById('ageGroupChart').getContext('2d');
const ageGroupChart = new Chart(ageGroupCtx, {
    type: 'bar',
    data: {
        labels: {{ age_group_labels|safe }},
        datasets: [{
            label: 'Total Applications',
            data: {{ age_group_applications|safe }},
            backgroundColor: 'rgba(59, 130, 246, 0.7)',
            borderColor: 'rgba(59, 130, 246, 1)',
            borderWidth: 1
        }, {
            label: 'Approved',
            data: {{ age_group_approved|safe }},
            backgroundColor: 'rgba(16, 185, 129, 0.7)',
            borderColor: 'rgba(16, 185, 129, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// Gender Chart
const genderCtx = document.getElementById('genderChart').getContext('2d');
const genderChart = new Chart(genderCtx, {
    type: 'pie',
    data: {
        labels: {{ gender_labels|safe }},
        datasets: [{
            data: {{ gender_applications|safe }},
            backgroundColor: [
                'rgba(59, 130, 246, 0.7)',
                'rgba(236, 72, 153, 0.7)',
                'rgba(245, 158, 11, 0.7)',
                'rgba(156, 163, 175, 0.7)'
            ],
            borderColor: [
                'rgba(59, 130, 246, 1)',
                'rgba(236, 72, 153, 1)',
                'rgba(245, 158, 11, 1)',
                'rgba(156, 163, 175, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});
</script>
{% endblock %}