{% extends 'base.html' %}

{% load static %}

{% block body %}
<style>
    #kunj-dashboard { background: #151a24; padding: 24px 8px 8px; border-radius: 6px; }
    #kunj-dashboard .page-heading-dark { border-bottom: 1px solid #262d3d; padding-bottom: 14px; margin-bottom: 18px; }
    #kunj-dashboard .page-heading-dark h2 { color: #f1f3f9; font-weight: 600; margin: 0; }
    #kunj-dashboard .filter-card-dark {
        background: #1b2130; border: 1px solid #262d3d; border-radius: 10px; padding: 18px 20px; margin-bottom: 22px;
        box-shadow: 0 12px 22px rgba(0,0,0,0.35), 0 3px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    #kunj-dashboard .filter-card-dark label { color: #9aa4b8; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
    #kunj-dashboard .filter-card-dark .form-control { background: #10151f; border: 1px solid #2c3446; color: #e7eaf3; }
    #kunj-dashboard .filter-card-dark .form-control:focus { border-color: #4f8cff; box-shadow: none; }
    #kunj-dashboard .select2-container--default .select2-selection--single { background: #10151f; border: 1px solid #2c3446; }
    #kunj-dashboard .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e7eaf3; }

    #kunj-dashboard .stat-card {
        position: relative; border-radius: 12px; padding: 20px 20px 18px; margin-bottom: 20px; overflow: hidden;
        color: #fff; min-height: 118px; cursor: pointer;
        box-shadow: 0 12px 22px rgba(0,0,0,0.4), 0 3px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -10px 16px rgba(0,0,0,0.18);
        transition: transform .16s ease, box-shadow .16s ease;
    }
    #kunj-dashboard .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 30px rgba(0,0,0,0.5), 0 6px 10px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -10px 16px rgba(0,0,0,0.18);
    }
    #kunj-dashboard .stat-card:active { transform: translateY(-2px); }
    #kunj-dashboard .stat-card .stat-icon {
        position: absolute; right: 16px; top: 16px; width: 42px; height: 42px; border-radius: 10px;
        background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-size: 19px;
        box-shadow: inset 0 1px 2px rgba(255,255,255,0.35), inset 0 -3px 6px rgba(0,0,0,0.25), 0 3px 6px rgba(0,0,0,0.25);
    }
    #kunj-dashboard .stat-card .stat-value { font-size: 26px; font-weight: 700; margin: 0 0 6px; line-height: 1.2; word-break: break-word; text-shadow: 0 2px 3px rgba(0,0,0,0.25); }
    #kunj-dashboard .stat-card .stat-label { font-size: 13px; opacity: .92; font-weight: 500; letter-spacing: .02em; }
    #kunj-dashboard .stat-card .stat-hint { font-size: 10px; opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; margin-top: 6px; letter-spacing: .03em; }
    #kunj-dashboard .stat-card:hover .stat-hint { opacity: .85; transform: translateY(0); }

    #kunj-dashboard .stat-card.c-income { background: linear-gradient(135deg,#1f9d63,#0f6e46); }
    #kunj-dashboard .stat-card.c-expense { background: linear-gradient(135deg,#e0524d,#a3312d); }
    #kunj-dashboard .stat-card.c-member { background: linear-gradient(135deg,#4f8cff,#2c5fd6); }
    #kunj-dashboard .stat-card.c-beneficiary { background: linear-gradient(135deg,#9c6bff,#6a3fd1); }
    #kunj-dashboard .stat-card.c-balance { background: linear-gradient(135deg,#17b2a3,#0d7d72); }
    #kunj-dashboard .stat-card.c-pending { background: linear-gradient(135deg,#f0a730,#c47a10); }
    #kunj-dashboard .stat-card.c-liability { background: linear-gradient(135deg,#d6336c,#a61e4d); }
    #kunj-dashboard .stat-card.c-projects { background: linear-gradient(135deg,#0ea5e9,#0369a1); }

    #kunj-dashboard .chart-card-dark {
        background: linear-gradient(180deg, #212739, #1b2130); border: 1px solid #2a3245; border-radius: 12px; margin-bottom: 20px; overflow: hidden;
        box-shadow: 0 14px 26px rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
        transition: box-shadow .16s ease, transform .16s ease;
    }
    #kunj-dashboard .chart-card-dark:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 32px rgba(0,0,0,0.42), 0 6px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.07);
    }
    #kunj-dashboard .chart-card-dark .chart-card-header { padding: 16px 20px; border-bottom: 1px solid #262d3d; display: flex; align-items: center; justify-content: space-between; }
    #kunj-dashboard .chart-card-dark .chart-card-header h5 { color: #f1f3f9; font-weight: 600; margin: 0; font-size: 15px; }
    #kunj-dashboard .chart-card-dark .chart-card-header small { color: #7c8698; font-size: 11px; }
    #kunj-dashboard .chart-card-dark .chart-card-body { padding: 18px 20px; }
    #kunj-dashboard .chart-canvas-wrap { position: relative; width: 100%; }

    #cardDetailModal .modal-content { background: linear-gradient(180deg, #212739, #1b2130); border: 1px solid #2a3245; border-radius: 12px; color: #e7eaf3; box-shadow: 0 24px 48px rgba(0,0,0,0.5); }
    #cardDetailModal .modal-header { border-bottom: 1px solid #262d3d; }
    #cardDetailModal .modal-title { color: #f1f3f9; font-weight: 600; }
    #cardDetailModal .close { color: #e7eaf3; text-shadow: none; opacity: .7; }
    #cardDetailModal .close:hover { opacity: 1; color: #fff; }
    #cardDetailModal .modal-body { max-height: 62vh; overflow-y: auto; }
    #cardDetailModal table { width: 100%; color: #e7eaf3; margin: 0; }
    #cardDetailModal table th { color: #9aa4b8; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #262d3d; padding: 8px 6px; text-align: left; }
    #cardDetailModal table td { padding: 9px 6px; border-bottom: 1px solid #232a3a; font-size: 13px; }
    #cardDetailModal table tr:last-child td { border-bottom: none; }
    #cardDetailModal table tr.total-row td { font-weight: 700; color: #f1f3f9; border-top: 1px solid #2a3245; border-bottom: none; }
    #cardDetailModal .detail-summary { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
    #cardDetailModal .detail-summary .pill { background: #10151f; border: 1px solid #2c3446; border-radius: 8px; padding: 10px 14px; flex: 1; min-width: 120px; }
    #cardDetailModal .detail-summary .pill .pill-value { font-size: 18px; font-weight: 700; color: #f1f3f9; }
    #cardDetailModal .detail-summary .pill .pill-label { font-size: 11px; color: #9aa4b8; text-transform: uppercase; letter-spacing: .03em; }
    #cardDetailModal .text-end { text-align: right; }
</style>
<div id="wrapper">
	{% include 'navbar.html' %}

	<div id="page-wrapper" class="gray-bg">
		{% include 'header.html' %}

        <div id="kunj-dashboard">
            <div class="page-heading-dark">
                <h2>Dashboard</h2>
            </div>

            <div class="filter-card-dark">
                <form type="GET" action="/admin/dashboard">
                    <div class="row">
                        <div class="col-3">
                            <div class="form-group mb-0 d-flex flex-column w-100">
                                <label>Projects</label>
                                <select data-placeholder="" id="project" data-value="{{project}}" name="project" class="select2 form-control w-100"  tabindex="-1">
                                    <option value="All">All</option>
                                    {% for project in projects %}
                                        <option value="{{project.id}}">{{project.project}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group mb-0 d-flex flex-column w-100">
                                <label>Date</label>
                                <input type="date" data-value="{{date}}" id="date" name="date" class="form-control w-100"/>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group mb-0 d-flex flex-column w-100">
                                <label>Financial Year</label>
                                <select data-value="{{financial_year}}" id="financial_year" name="financial_year" class="form-control w-100">
                                    <option value="All">All</option>
                                    {% for fy in financial_years %}
                                        <option value="{{fy}}">{{fy}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-3 justify-content-center d-flex align-items-end">
                            <button type="submit" class="btn btn-w-s btn-primary ml-2">Apply</button>
                        </div>
                    </div>
                </form>
            </div>

            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card c-income" data-card="income">
                        <div class="stat-icon"><i class="fa fa-inr"></i></div>
                        <h2 id="total_income" class="stat-value">₹ {{income_amount}}</h2>
                        <div class="stat-label">Income Received</div>
                        <div class="stat-hint">VIEW DETAILS &rarr;</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card c-pending" data-card="pending">
                        <div class="stat-icon"><i class="fa fa-clock-o"></i></div>
                        <h2 id="pending_amount" class="stat-value">₹ {{pending_amount}}</h2>
                        <div class="stat-label">Income Pending</div>
                        <div class="stat-hint">VIEW DETAILS &rarr;</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card c-expense" data-card="expenditure">
                        <div class="stat-icon"><i class="fa fa-credit-card"></i></div>
                        <h2 id="total_expense" class="stat-value">₹ {{expenditure_amount}}</h2>
                        <div class="stat-label">Expenditure</div>
                        <div class="stat-hint">VIEW DETAILS &rarr;</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card c-liability" data-card="liability">
                        <div class="stat-icon"><i class="fa fa-exclamation-triangle"></i></div>
                        <h2 id="liability" class="stat-value">₹ {{liability}}</h2>
                        <div class="stat-label">Liability</div>
                        <div class="stat-hint">VIEW DETAILS &rarr;</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card c-balance" data-card="balance">
                        <div class="stat-icon"><i class="fa fa-bank"></i></div>
                        <h2 id="available_balance" class="stat-value">₹ {{available_balance}}</h2>
                        <div class="stat-label">Available Balance</div>
                        <div class="stat-hint">VIEW DETAILS &rarr;</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card c-member" data-card="member">
                        <div class="stat-icon"><i class="fa fa-users"></i></div>
                        <h2 id="total_member" class="stat-value">{{team}}</h2>
                        <div class="stat-label">Total Member</div>
                        <div class="stat-hint">VIEW DETAILS &rarr;</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card c-beneficiary" data-card="beneficiary">
                        <div class="stat-icon"><i class="fa fa-child"></i></div>
                        <h2 id="total_beneficiary" class="stat-value">{{beneficiaries}}</h2>
                        <div class="stat-label">Total Beneficiary</div>
                        <div class="stat-hint">VIEW DETAILS &rarr;</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card c-projects" data-card="projects">
                        <div class="stat-icon"><i class="fa fa-folder-open"></i></div>
                        <h2 id="active_projects" class="stat-value">{{active_projects}}</h2>
                        <div class="stat-label">Active Projects</div>
                        <div class="stat-hint">VIEW DETAILS &rarr;</div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="chart-card-dark">
                        <div class="chart-card-header">
                            <h5><i class="fa fa-bar-chart" style="color:#3987e5; margin-right:8px;"></i>Income by Category</h5>
                            <small>Highest first</small>
                        </div>
                        <div class="chart-card-body">
                            <div class="chart-canvas-wrap" id="income_chart_wrap">
                                <canvas id="income_chart_container"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="chart-card-dark">
                        <div class="chart-card-header">
                            <h5><i class="fa fa-bar-chart" style="color:#d95926; margin-right:8px;"></i>Expenditure by Category</h5>
                            <small>Highest first</small>
                        </div>
                        <div class="chart-card-body">
                            <div class="chart-canvas-wrap" id="expenditure_chart_wrap">
                                <canvas id="expenditure_chart_container"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="chart-card-dark">
                        <div class="chart-card-header">
                            <h5><i class="fa fa-line-chart" style="color:#3987e5; margin-right:8px;"></i>Income vs Expenditure (Monthly)</h5>
                            <small id="iec_fy_label"></small>
                        </div>
                        <div class="chart-card-body">
                            <div class="chart-canvas-wrap" style="height:320px;">
                                <canvas id="income_expenditure_chart_container"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="chart-card-dark">
                        <div class="chart-card-header">
                            <h5><i class="fa fa-bar-chart" style="color:#3987e5; margin-right:8px;"></i>Project-wise Income vs Expenditure</h5>
                        </div>
                        <div class="chart-card-body">
                            <div class="chart-canvas-wrap" id="project_income_expenditure_wrap">
                                <canvas id="project_income_expenditure_container"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="chart-card-dark">
                        <div class="chart-card-header">
                            <h5><i class="fa fa-line-chart" style="color:#199e70; margin-right:8px;"></i>Monthly Trend — Income &amp; Balance</h5>
                            <small id="trend_fy_label"></small>
                        </div>
                        <div class="chart-card-body">
                            <div class="chart-canvas-wrap" style="height:280px;">
                                <canvas id="trend_chart_container"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="chart-card-dark">
                        <div class="chart-card-header">
                            <h5><i class="fa fa-bar-chart" style="color:#9085e9; margin-right:8px;"></i>Beneficiaries by State</h5>
                            <small>Highest first</small>
                        </div>
                        <div class="chart-card-body">
                            <div class="chart-canvas-wrap" id="beneficiary_state_wrap">
                                <canvas id="beneficiary_state_container"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="chart-card-dark">
                        <div class="chart-card-header">
                            <h5><i class="fa fa-bar-chart" style="color:#9085e9; margin-right:8px;"></i>Beneficiaries by Project</h5>
                            <small>Highest first</small>
                        </div>
                        <div class="chart-card-body">
                            <div class="chart-canvas-wrap" id="beneficiary_project_wrap">
                                <canvas id="beneficiary_project_container"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</div>
</div>

<div class="modal fade" id="cardDetailModal" tabindex="-1" role="dialog" aria-labelledby="cardDetailTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width:600px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cardDetailTitle">Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="cardDetailBody"></div>
        </div>
    </div>
</div>

<script id="kunj-dashboard-totals" type="application/json">
{"income": {{income_amount}}, "expenditure": {{expenditure_amount}}, "pending": {{pending_amount}}, "liability": {{liability}}, "balance": {{available_balance}}, "team": {{team}}, "beneficiaries": {{beneficiaries}}, "active_projects": {{active_projects}}}
</script>

<script src="{% static 'admin/js/plugins/chartJs4/chart.umd.min.js' %}"></script>
<script>

    var KUNJ_COLOR_INCOME = '#3987e5';
    var KUNJ_COLOR_EXPENSE = '#d95926';
    var KUNJ_TEXT_MUTED = '#9aa4b8';
    var KUNJ_TEXT_SECONDARY = '#c7cedd';
    var KUNJ_GRID = '#262d3d';
    var KUNJ_FONT = "system-ui, -apple-system, 'Segoe UI', sans-serif";

    Chart.defaults.font.family = KUNJ_FONT;

    var KUNJ_COLOR_TREND = '#199e70';
    var KUNJ_COLOR_BENEFICIARY = '#9085e9';

    var incomeBarChart = null;
    var expenditureBarChart = null;
    var incomeExpenditureBarChart = null;
    var projectIncomeExpenditureChart = null;
    var trendLineChart = null;
    var beneficiaryStateChart = null;
    var beneficiaryProjectChart = null;

    function formatRupee(value){
        return '₹' + Number(value || 0).toLocaleString('en-IN');
    }

    function formatRupeeCompact(value){
        var abs = Math.abs(Number(value) || 0);
        if (abs >= 10000000) return '₹' + (value / 10000000).toFixed(1) + 'Cr';
        if (abs >= 100000) return '₹' + (value / 100000).toFixed(1) + 'L';
        if (abs >= 1000) return '₹' + (value / 1000).toFixed(1) + 'K';
        return '₹' + value;
    }

    function formatCount(value){
        return Number(value || 0).toLocaleString('en-IN');
    }

    function escapeHtml(str){
        return String(str == null ? '' : str).replace(/[&<>"']/g, function(c){
            return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
        });
    }

    var DASHBOARD_TOTALS = JSON.parse(document.getElementById('kunj-dashboard-totals').textContent);

    function showChartError(containerId, message){
        var el = document.getElementById(containerId);
        if (!el) return;
        var target = el.parentElement || el;
        target.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;min-height:120px;height:100%;color:#e0524d;font-size:12px;text-align:center;padding:12px;">Chart load error: ' + escapeHtml(message) + '</div>';
        console.error('[' + containerId + ']', message);
    }

    function showChartEmpty(containerId, message){
        var el = document.getElementById(containerId);
        if (!el) return;
        var target = el.parentElement || el;
        target.style.height = '140px';
        target.innerHTML = '<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#5c6478;font-size:12px;text-align:center;padding:12px;gap:6px;">'
            + '<i class="fa fa-inbox" style="font-size:20px; opacity:.6;"></i><span>' + escapeHtml(message || 'No data for this selection') + '</span></div>';
    }

    function hasNonZeroValues(values){
        return values.some(function(v){ return (Number(v) || 0) !== 0; });
    }

    var barEndLabelPlugin = {
        id: 'barEndLabel',
        afterDatasetsDraw: function(chart){
            if (chart.config.type !== 'bar' || chart.options.indexAxis !== 'y') return;
            var opts = (chart.options.plugins && chart.options.plugins.barEndLabel) || {};
            var formatter = opts.formatter || formatRupeeCompact;
            var ctx = chart.ctx;
            var meta = chart.getDatasetMeta(0);
            var values = chart.data.datasets[0].data;
            ctx.save();
            ctx.fillStyle = KUNJ_TEXT_SECONDARY;
            ctx.font = '11px ' + KUNJ_FONT;
            ctx.textBaseline = 'middle';
            ctx.textAlign = 'left';
            meta.data.forEach(function(bar, index){
                ctx.fillText(formatter(values[index]), bar.x + 8, bar.y);
            });
            ctx.restore();
        }
    };

    function getIncomeChart(project, date, financial_year) {
        $.ajax({
            url: '/admin/dashboard/income-chart',
            type: 'GET',
            data: {'project' : project, 'date' : date, 'financial_year' : financial_year},
            success: function(data) {
                try {
                    incomeBarChart = setCategoryBarChart(data.income_result, 'income_chart_container', 'income_chart_wrap', incomeBarChart, KUNJ_COLOR_INCOME);
                } catch (e) {
                    showChartError('income_chart_container', e.message);
                }
            },
            error: function(xhr, status, error) {
                showChartError('income_chart_container', status + ' ' + error);
            }
        });
    }

    function getExpenditureChart(project, date, financial_year) {
        $.ajax({
            url: '/admin/dashboard/expenditure-chart',
            type: 'GET',
            data: {'project' : project, 'date' : date, 'financial_year' : financial_year},
            success: function(data) {
                try {
                    expenditureBarChart = setCategoryBarChart(data.amounts, 'expenditure_chart_container', 'expenditure_chart_wrap', expenditureBarChart, KUNJ_COLOR_EXPENSE);
                } catch (e) {
                    showChartError('expenditure_chart_container', e.message);
                }
            },
            error: function(xhr, status, error) {
                showChartError('expenditure_chart_container', status + ' ' + error);
            }
        });
    }


    function getIncomeExpenditureChart(project, date, financial_year) {
        $.ajax({
            url: '/admin/dashboard/income-expenditure-chart',
            type: 'GET',
            data: {'project' : project, 'date' : date, 'financial_year' : financial_year},
            success: function(data) {
                try {
                    setIncomeExpenditureChartData(data.labels, data.income_result, data.amount_result);
                } catch (e) {
                    showChartError('income_expenditure_chart_container', e.message);
                }
                try {
                    setTrendChart(data.labels, data.income_result, data.amount_result);
                } catch (e) {
                    showChartError('trend_chart_container', e.message);
                }
                if (data.financial_year) {
                    $('#iec_fy_label').text('FY ' + data.financial_year);
                    $('#trend_fy_label').text('FY ' + data.financial_year);
                }
            },
            error: function(xhr, status, error) {
                showChartError('income_expenditure_chart_container', status + ' ' + error);
                showChartError('trend_chart_container', status + ' ' + error);
            }
        });
    }

    function getProjectIncomeExpenditureChart(project, date, financial_year) {
        $.ajax({
            url: '/admin/dashboard/project-income-expenditure-chart',
            type: 'GET',
            data: {'project' : project, 'date' : date, 'financial_year' : financial_year},
            success: function(data) {
                try {
                    projectIncomeExpenditureChart = setProjectIncomeExpenditureChart(data.result, 'project_income_expenditure_container', 'project_income_expenditure_wrap', projectIncomeExpenditureChart);
                } catch (e) {
                    showChartError('project_income_expenditure_container', e.message);
                }
            },
            error: function(xhr, status, error) {
                showChartError('project_income_expenditure_container', status + ' ' + error);
            }
        });
    }

    function getBeneficiaryStateChart(project) {
        $.ajax({
            url: '/admin/dashboard/beneficiary-state-chart',
            type: 'GET',
            data: {'project' : project},
            success: function(data) {
                try {
                    beneficiaryStateChart = setCategoryBarChart(data.result, 'beneficiary_state_container', 'beneficiary_state_wrap', beneficiaryStateChart, KUNJ_COLOR_BENEFICIARY, formatCount, formatCount);
                } catch (e) {
                    showChartError('beneficiary_state_container', e.message);
                }
            },
            error: function(xhr, status, error) {
                showChartError('beneficiary_state_container', status + ' ' + error);
            }
        });
    }

    function getProjectBeneficiaryChart() {
        $.ajax({
            url: '/admin/dashboard/project-beneficiary-chart',
            type: 'GET',
            data: {},
            success: function(data) {
                try {
                    beneficiaryProjectChart = setCategoryBarChart(data.result, 'beneficiary_project_container', 'beneficiary_project_wrap', beneficiaryProjectChart, KUNJ_COLOR_BENEFICIARY, formatCount, formatCount);
                } catch (e) {
                    showChartError('beneficiary_project_container', e.message);
                }
            },
            error: function(xhr, status, error) {
                showChartError('beneficiary_project_container', status + ' ' + error);
            }
        });
    }

    $(document).ready(function(){

        var project = $('#project').attr('data-value');
        var date_value = $('#date').attr('data-value');
        var financial_year_value = $('#financial_year').attr('data-value') || 'All';
        $('#date').val(date_value);
        $('#financial_year').val(financial_year_value);

        $('#project').select2({}).val(project.toString()).trigger('change');

        getIncomeChart(project, date_value, financial_year_value);
        getExpenditureChart(project, date_value, financial_year_value);
        getIncomeExpenditureChart(project, date_value, financial_year_value);
        getProjectIncomeExpenditureChart(project, date_value, financial_year_value);
        getBeneficiaryStateChart(project);
        getProjectBeneficiaryChart();
    });


    function currentProject(){ return $('#project').val() || 'All'; }
    function currentDate(){ return $('#date').val() || ''; }
    function currentFY(){ return $('#financial_year').val() || 'All'; }

    function showCardModal(title, bodyHtml){
        $('#cardDetailTitle').text(title);
        $('#cardDetailBody').html(bodyHtml);
        $('#cardDetailModal').modal('show');
    }

    function summaryPillsHtml(pills){
        var html = '<div class="detail-summary">';
        pills.forEach(function(p){
            html += '<div class="pill"><div class="pill-value">' + escapeHtml(p.value) + '</div><div class="pill-label">' + escapeHtml(p.label) + '</div></div>';
        });
        html += '</div>';
        return html;
    }

    function detailTableHtml(rows, headers, formatter, showTotal){
        showTotal = showTotal !== false;
        var total = rows.reduce(function(sum, r){ return sum + (Number(r.value) || 0); }, 0);
        var html = '<div class="table-responsive"><table><thead><tr><th>' + headers[0] + '</th><th class="text-end">' + headers[1] + '</th></tr></thead><tbody>';
        rows.forEach(function(r){
            html += '<tr><td>' + escapeHtml(r.name) + '</td><td class="text-end">' + formatter(r.value) + '</td></tr>';
        });
        if (showTotal) {
            html += '<tr class="total-row"><td>Total</td><td class="text-end">' + formatter(total) + '</td></tr>';
        }
        html += '</tbody></table></div>';
        return html;
    }

    function openIncomeDetail(){
        $.ajax({
            url: '/admin/dashboard/income-chart',
            type: 'GET',
            data: {'project': currentProject(), 'date': currentDate(), 'financial_year': currentFY()},
            success: function(data){
                var rows = data.income_result.map(function(d){ return {name: d.name, value: d.y}; }).sort(function(a, b){ return b.value - a.value; });
                showCardModal('Income Received — By Head', detailTableHtml(rows, ['Head', 'Amount'], formatRupee));
            }
        });
    }

    function openExpenditureDetail(){
        $.ajax({
            url: '/admin/dashboard/expenditure-chart',
            type: 'GET',
            data: {'project': currentProject(), 'date': currentDate(), 'financial_year': currentFY()},
            success: function(data){
                var rows = data.amounts.map(function(d){ return {name: d.name, value: d.y}; }).sort(function(a, b){ return b.value - a.value; });
                showCardModal('Expenditure — By Head', detailTableHtml(rows, ['Head', 'Amount'], formatRupee));
            }
        });
    }

    function openPendingDetail(){
        var sanctioned = DASHBOARD_TOTALS.income + DASHBOARD_TOTALS.pending;
        var html = summaryPillsHtml([
            {label: 'Sanctioned', value: formatRupee(sanctioned)},
            {label: 'Received', value: formatRupee(DASHBOARD_TOTALS.income)},
            {label: 'Pending', value: formatRupee(DASHBOARD_TOTALS.pending)}
        ]);
        html += '<p style="color:#9aa4b8; font-size:13px; margin-top:4px;">Pending = Sanctioned amount minus amount actually received, for the current filter selection.</p>';
        showCardModal('Income Pending', html);
    }

    function openLiabilityDetail(){
        var html = summaryPillsHtml([
            {label: 'Expenditure', value: formatRupee(DASHBOARD_TOTALS.expenditure)},
            {label: 'Income Received', value: formatRupee(DASHBOARD_TOTALS.income)},
            {label: 'Liability', value: formatRupee(DASHBOARD_TOTALS.liability)}
        ]);
        html += '<p style="color:#9aa4b8; font-size:13px; margin-top:4px;">Liability is the amount spent beyond what has actually been received (Expenditure &minus; Income Received), shown only when expenditure is higher.</p>';
        showCardModal('Liability', html);
    }

    function openBalanceDetail(){
        var html = summaryPillsHtml([
            {label: 'Income Received', value: formatRupee(DASHBOARD_TOTALS.income)},
            {label: 'Expenditure', value: formatRupee(DASHBOARD_TOTALS.expenditure)},
            {label: 'Available Balance', value: formatRupee(DASHBOARD_TOTALS.balance)}
        ]);
        showCardModal('Available Balance', html);
    }

    function openMemberDetail(){
        $.ajax({
            url: '/admin/dashboard/team-breakdown',
            type: 'GET',
            data: {'project': currentProject()},
            success: function(data){
                var html = summaryPillsHtml([
                    {label: 'Total Members', value: formatCount(data.total)},
                    {label: 'Permanent', value: formatCount(data.permanent)},
                    {label: 'Project Based', value: formatCount(data.project_based)}
                ]);
                var rows = data.by_project.map(function(d){ return {name: d.name, value: d.y}; });
                html += detailTableHtml(rows, ['Project', 'Members'], formatCount);
                showCardModal('Team Members — Project-wise', html);
            }
        });
    }

    function openBeneficiaryDetail(){
        $.ajax({
            url: '/admin/dashboard/project-beneficiary-chart',
            type: 'GET',
            data: {},
            success: function(data){
                var rows = data.result.map(function(d){ return {name: d.name, value: d.y}; });
                showCardModal('Beneficiaries — Project-wise', detailTableHtml(rows, ['Project', 'Beneficiaries'], formatCount));
            }
        });
    }

    function openProjectsDetail(){
        var rows = [];
        $('#project option').each(function(){
            if ($(this).val() !== 'All') {
                rows.push('<tr><td>' + escapeHtml($(this).text()) + '</td></tr>');
            }
        });
        var html = '<div class="table-responsive"><table><thead><tr><th>Project Name</th></tr></thead><tbody>' + rows.join('') + '</tbody></table></div>';
        showCardModal('Active Projects (' + rows.length + ')', html);
    }

    $(document).on('click', '.stat-card[data-card]', function(){
        switch ($(this).data('card')) {
            case 'income': openIncomeDetail(); break;
            case 'expenditure': openExpenditureDetail(); break;
            case 'pending': openPendingDetail(); break;
            case 'liability': openLiabilityDetail(); break;
            case 'balance': openBalanceDetail(); break;
            case 'member': openMemberDetail(); break;
            case 'beneficiary': openBeneficiaryDetail(); break;
            case 'projects': openProjectsDetail(); break;
        }
    });


    function setCategoryBarChart(data, canvasId, wrapId, existingChart, hue, labelFormatter, tooltipFormatter){
        labelFormatter = labelFormatter || formatRupeeCompact;
        tooltipFormatter = tooltipFormatter || formatRupee;

        var sorted = data.slice().sort(function(a, b){ return b.y - a.y; });
        var labels = sorted.map(function(d){ return d.name; });
        var values = sorted.map(function(d){ return d.y; });

        if (existingChart) {
            existingChart.destroy();
        }

        if (labels.length === 0 || !hasNonZeroValues(values)) {
            showChartEmpty(canvasId);
            return null;
        }

        var wrap = document.getElementById(wrapId);
        wrap.style.height = Math.max(220, labels.length * 34 + 40) + 'px';

        var ctx = document.getElementById(canvasId).getContext('2d');
        return new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    backgroundColor: hue,
                    borderRadius: 4,
                    maxBarThickness: 22,
                    barPercentage: 0.7,
                    categoryPercentage: 0.85
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                layout: { padding: { right: 56 } },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(ctx){ return ' ' + tooltipFormatter(ctx.parsed.x); }
                        }
                    },
                    barEndLabel: { formatter: labelFormatter }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        ticks: { color: KUNJ_TEXT_MUTED, callback: function(v){ return labelFormatter(v); } },
                        grid: { color: KUNJ_GRID }
                    },
                    y: {
                        ticks: { color: KUNJ_TEXT_MUTED, autoSkip: false },
                        grid: { display: false }
                    }
                }
            },
            plugins: [barEndLabelPlugin]
        });
    }


    function setProjectIncomeExpenditureChart(data, canvasId, wrapId, existingChart){
        var sorted = data.slice().sort(function(a, b){ return (b.income + b.expenditure) - (a.income + a.expenditure); });
        var labels = sorted.map(function(d){ return d.name; });
        var incomeValues = sorted.map(function(d){ return d.income; });
        var expenditureValues = sorted.map(function(d){ return d.expenditure; });

        if (existingChart) {
            existingChart.destroy();
        }

        if (labels.length === 0 || (!hasNonZeroValues(incomeValues) && !hasNonZeroValues(expenditureValues))) {
            showChartEmpty(canvasId);
            return null;
        }

        var wrap = document.getElementById(wrapId);
        wrap.style.height = Math.max(240, labels.length * 52 + 50) + 'px';

        var ctx = document.getElementById(canvasId).getContext('2d');
        return new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Income',
                        data: incomeValues,
                        backgroundColor: KUNJ_COLOR_INCOME,
                        borderRadius: 4,
                        maxBarThickness: 18,
                        barPercentage: 0.75,
                        categoryPercentage: 0.7
                    },
                    {
                        label: 'Expenditure',
                        data: expenditureValues,
                        backgroundColor: KUNJ_COLOR_EXPENSE,
                        borderRadius: 4,
                        maxBarThickness: 18,
                        barPercentage: 0.75,
                        categoryPercentage: 0.7
                    }
                ]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top', align: 'end',
                        labels: { color: KUNJ_TEXT_SECONDARY, boxWidth: 12, usePointStyle: true, pointStyle: 'rectRounded' }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(ctx){ return ' ' + ctx.dataset.label + ': ' + formatRupee(ctx.parsed.x); }
                        }
                    }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        ticks: { color: KUNJ_TEXT_MUTED, callback: function(v){ return formatRupeeCompact(v); } },
                        grid: { color: KUNJ_GRID }
                    },
                    y: {
                        ticks: { color: KUNJ_TEXT_MUTED, autoSkip: false },
                        grid: { display: false }
                    }
                }
            }
        });
    }


    function setTrendChart(labels, income_data, expenditure_data){
        var balance = [];
        var running = 0;
        for (var i = 0; i < income_data.length; i++){
            running += (income_data[i] - expenditure_data[i]);
            balance.push(running);
        }

        if (trendLineChart) {
            trendLineChart.destroy();
        }

        if (!hasNonZeroValues(income_data) && !hasNonZeroValues(expenditure_data)) {
            showChartEmpty('trend_chart_container');
            return;
        }

        var ctx = document.getElementById('trend_chart_container').getContext('2d');
        trendLineChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Income',
                        data: income_data,
                        borderColor: KUNJ_COLOR_INCOME,
                        backgroundColor: KUNJ_COLOR_INCOME + '1A',
                        fill: true,
                        tension: 0.3,
                        borderWidth: 2,
                        pointRadius: 4,
                        pointBackgroundColor: KUNJ_COLOR_INCOME,
                        pointBorderColor: '#1b2130',
                        pointBorderWidth: 2
                    },
                    {
                        label: 'Running Balance',
                        data: balance,
                        borderColor: KUNJ_COLOR_TREND,
                        backgroundColor: KUNJ_COLOR_TREND + '1A',
                        fill: false,
                        tension: 0.3,
                        borderWidth: 2,
                        pointRadius: 4,
                        pointBackgroundColor: KUNJ_COLOR_TREND,
                        pointBorderColor: '#1b2130',
                        pointBorderWidth: 2
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top', align: 'end',
                        labels: { color: KUNJ_TEXT_SECONDARY, boxWidth: 12, usePointStyle: true, pointStyle: 'circle' }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(ctx){ return ' ' + ctx.dataset.label + ': ' + formatRupee(ctx.parsed.y); }
                        }
                    }
                },
                scales: {
                    x: {
                        ticks: { color: KUNJ_TEXT_MUTED },
                        grid: { display: false }
                    },
                    y: {
                        ticks: { color: KUNJ_TEXT_MUTED, callback: function(v){ return formatRupeeCompact(v); } },
                        grid: { color: KUNJ_GRID }
                    }
                }
            }
        });
    }


    function setIncomeExpenditureChartData(labels, income_data, expenditure_data){

        if (incomeExpenditureBarChart) {
            incomeExpenditureBarChart.destroy();
        }

        if (!hasNonZeroValues(income_data) && !hasNonZeroValues(expenditure_data)) {
            showChartEmpty('income_expenditure_chart_container');
            return;
        }

        var ctx = document.getElementById('income_expenditure_chart_container').getContext('2d');
        incomeExpenditureBarChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Income',
                        data: income_data,
                        backgroundColor: KUNJ_COLOR_INCOME,
                        borderRadius: 4,
                        maxBarThickness: 22,
                        barPercentage: 0.75,
                        categoryPercentage: 0.7
                    },
                    {
                        label: 'Expenditure',
                        data: expenditure_data,
                        backgroundColor: KUNJ_COLOR_EXPENSE,
                        borderRadius: 4,
                        maxBarThickness: 22,
                        barPercentage: 0.75,
                        categoryPercentage: 0.7
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                        align: 'end',
                        labels: { color: KUNJ_TEXT_SECONDARY, boxWidth: 12, usePointStyle: true, pointStyle: 'rectRounded' }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(ctx){
                                return ' ' + ctx.dataset.label + ': ' + formatRupee(ctx.parsed.y);
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        ticks: { color: KUNJ_TEXT_MUTED },
                        grid: { display: false }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            color: KUNJ_TEXT_MUTED,
                            callback: function(value){ return formatRupeeCompact(value); }
                        },
                        grid: { color: KUNJ_GRID }
                    }
                }
            }
        });
    }

</script>
	
{% endblock %}