{% extends 'base.html' %}

<!-- {% load static %} -->

{% block body %}
<div id="wrapper">
	{% include 'navbar.html' %}

	<div id="page-wrapper" class="gray-bg">
		{% include 'header.html' %}
		<div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>Dashboard</h2>
            </div>    
        </div>

        <div class="wrapper wrapper-content animated fadeInRight mt-2 w-100 card">
            <form type="GET" action="/admin/dashboard">
                <div class="row">
                    <div class="col-4">
                        <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-4">
                        <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-4 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="wrapper wrapper-content animated fadeInRight mt-2 w-100">
            <div class="row">
                <div class="col-lg-3">
                    <div class="widget style2 yellow-bg">
                        <h2 id="total_income" class="font-bold">₹ {{income_amount}}</h2>
                        <div class="py-3">
                            <span> Total Income </span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="widget style2 navy-bg">
                        <h2 id="total_expense" class="font-bold">₹ {{expenditure_amount}}</h2>
                        <div class="py-3">
                            <span> Total Expense </span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="widget style2 lazur-bg">
                        <h2 id="total_member" class="font-bold">{{team}}</h2>
                        <div class="py-3">
                            <span> Total Member </span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="widget style2 yellow-bg">
                        <h2 id="total_member" class="font-bold">{{beneficiaries}}</h2>
                        <div class="py-3">
                            <span> Total Beneficiary </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="wrapper wrapper-content animated fadeInRight mt-2 w-100">
            <div class="row">
                <div class="col-6">
                    <div class="ibox ">
                        <div class="ibox-title" style="background : #2f4050;">
                            <h5 style="color:#FFFFFF;">Income</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="income_chart_container" style="width:100%; height:200px;"></div>
                        </div>
                    </div>
                </div>

                <div class="col-6">
                    <div class="ibox ">
                        <div class="ibox-title" style="background : #2f4050;">
                            <h5 style="color:#FFFFFF;">Expenditure</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="expenditure_chart_container" style="width:100%; height:200px;"></div>
                        </div>
                    </div>
                </div>


                <div class="col-12">
                    <div class="ibox ">
                        <div class="ibox-title" style="background : #2f4050;">
                            <h5 style="color:#FFFFFF;">Income Vs Expenditure</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="income_expenditure_chart_container" style="width:100%; height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
		<!-- test -->
	</div>
</div>

<script>

    function getIncomeChart(project, date) {
        $.ajax({
            url: '/admin/dashboard/income-chart',
            type: 'GET',
            data: {'project' : project, 'date' : date},
            success: function(data) {
                setHighChartData(data.income_result, 'income_chart_container'); 
                return  data.income_result              
            },
            error: function(error) {
                console.error("Error fetching chart data:", error);
                return []
            }
        });
    }

    function getExpenditureChart(project, date) {
        $.ajax({
            url: '/admin/dashboard/expenditure-chart',
            type: 'GET',
            data: {'project' : project, 'date' : date},
            success: function(data) {
                setHighChartData(data.amounts, 'expenditure_chart_container');
            },
            error: function(error) {
                console.error("Error fetching chart data:", error);
            }
        });
    }


    function getIncomeExpenditureChart(project, date) {
        $.ajax({
            url: '/admin/dashboard/income-expenditure-chart',
            type: 'GET',
            data: {'project' : project, 'date' : date},
            success: function(data) {
                setIncomeExpenditureChartData(data.income_result, data.amount_result);       
            },
            error: function(error) {
                console.error("Error fetching chart data:", error);
            }
        });
    }

    $(document).ready(function(){

        var project = $('#project').attr('data-value');
        var date_value = $('#date').attr('data-value');
        $('#date').val(date_value);
        
        $('#project').select2({}).val(project.toString()).trigger('change');

        getIncomeChart(project, date_value);
        getExpenditureChart(project, date_value);
        getIncomeExpenditureChart(project, date_value);
    });


    function setHighChartData(data, container){
        Highcharts.chart(container, {
            chart: {
                type: 'pie',
                height: '200px'
            },
            credits: {
                enabled: false
            },
            title: {
                text: ''
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: ''
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.y}'
                    }
                }
            },
            series: [{
                name: 'Programs',
                colorByPoint: true,
                data: data
            }]
        });
    }




function setIncomeExpenditureChartData(income_data, expence_data){

    Highcharts.chart('income_expenditure_chart_container', {
        chart: {
            type: 'column'
        },
        title: {
            text: ''
        },
        subtitle: {
            text:''
        },
        xAxis: {
            categories: ['Human Resources', 'Equipment & Suplies', 'Travel', 'IEC Material', 'Accomondation Expenses', 'Miscellaneous Expenses'],
            crosshair: true,
            accessibility: {
                description: ''
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {
            valueSuffix: ' (In Rs.)'
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [
            {
                name: 'Income',
                data: [income_data[0], income_data[1], income_data[2], income_data[3], income_data[4], income_data[5]]
            },
            {
                name: 'Expenditure',
                data: [expence_data[0], expence_data[1], expence_data[2], expence_data[3], expence_data[4], expence_data[5]]
            }
        ]
    });
}

</script>
	
{% endblock %}