{% extends 'base.html' %}

{% block body %}

<style>
    select.form-control {
        height: 2.4rem!important;
    }
</style>

<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-6">
                <h2 class="my-1">Data Collection</h2>
            </div>
            <div class="col-lg-6">
                <div class="flex-row justify-content-end d-flex align-items-end my-1">
                    {% if user.user_type.user_permission.program_department_program_import == 1 %}
                        <form id="import_form" action="/demo/program-department/programs-import" method="POST" enctype="multipart/form-data">
                            {% csrf_token %}
                            <input type="file" id="program_import" name="programs" value="" accept=".csv, .xlsx" style="display: none;">
                            <button type="button" id="import_programs" class="btn btn-w-s btn-primary"> Import </button>
                        </form> 
                    {% endif %}  
                    {% if user.user_type.user_permission.program_department_program_export == 1 %}
                        <button type="button" class="btn btn-w-s btn-primary ml-2" id="export_table">Export</button>
                    {% endif %}
                </div> 
            </div>
        </div>
        <!-- test -->
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">

                <div class="col-6">
                    <div class="ibox ">
                        <div class="ibox-title" style="background : #2f4050;">
                            <h5 style="color:#FFFFFF;">State</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="state_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;">District</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="district_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;">Project</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="project_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;">Team</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="team_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;">Age</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="age_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;">Gender</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="gender_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;">Caste</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="caste_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;">Religion</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="religion_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;">Occupation</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="occupation_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;">Monthly Income</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="income_chart_container" style="width:100%; height:200px;"></div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-title px-5 justify-content-between d-flex align-items-center">
                            <form action="/demo/program-department/programs" method="GET" class="w-100">
                                {% csrf_token %}
                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group mb-0 d-flex flex-column">
                                            <label>Program type*</label> 
                                            <select data-placeholder="" id="program_type" value="{{program_type}}" name="program_type" class="select2 form-control"  tabindex="-1" required>
                                                <option value="All">All</option>
                                                {% for program_type in program_types %}
                                                    <option value="{{program_type.id}}">{{program_type.program_type}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="form-group mb-0 d-flex flex-column">
                                            <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-6">
                                        <div class="justify-content-between d-flex align-items-end flex-row w-100">
                                            <div class="form-group mb-0 d-flex flex-column">
                                                <label>Start Date</label> 
                                                <input type="date" id="start_date" name="start_date" class="form-control w-100" value="{{start_date}}">
                                            </div>
                                            <div class="form-group mb-0 d-flex flex-column">
                                                <label>End Date</label> 
                                                <input type="date" id="end_date" name="end_date" class="form-control w-100" value="{{end_date}}">
                                            </div>
                                            <button type="submit" class="btn btn-w-s btn-primary"> Submit </button>
                                        </div>
                                        
                                    </div>
                                    
                                </div>
                            </form>
                        </div>

                        <div class="ibox-content">
                            <div style="overflow-x: auto;">
                                <table class="footable table-bordered table table-stripped w-100" data-paging-position="right" data-page-size="10" data-filter=#filter>
                                    <thead>
                                        <tr>
                                            <th style="max-width: fit-content; white-space:nowrap;">S No.</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Program Type</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">From Date</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">State</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">District</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Donor Organisation</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Project</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Support Partner</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Team Member</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Mobile</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Beneficiary Name</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Age</th>  
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Gender</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Caste</th> 
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Religion</th> 
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Occupation</th> 
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Family Income</th>  
                                            {% if user.user_type.user_permission.program_department_program_edit == 1 or user.user_type.user_permission.program_department_program_delete == 1 %}
                                                <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Action</th>
                                            {% endif %}
                                            <th data-hide="all">Document Apply</th>
                                            <th data-hide="all">Scheme Apply</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for program in programs %}
                                        <tr>
                                            <td>{{forloop.counter}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.program_type.program_type}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.from_date}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.state.state}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.district.district}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.csr_partner.company_name}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.project.project}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.partner.company_name}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.team.name}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.mobile}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.beneficiary_name}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.age}} Years</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.gender}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.caste}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.religion}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.occupation}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{program.family_income}}</td>
                                            {% if user.user_type.user_permission.program_department_program_edit == 1 or user.user_type.user_permission.program_department_program_delete == 1 %}
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">
                                                    {% if user.user_type.user_permission.program_department_program_edit == 1 %}
                                                        <a href="/demo/program-department/program/{{program.id}}"><button class="btn btn-info" type="button"><i class="fa fa-edit"></i> </button></a>
                                                    {% endif %}
                                                    {% if user.user_type.user_permission.program_department_program_delete == 1 %}
                                                        <button data-id="{{program.id}}" class="btn btn-danger delete_button" type="button"><i class="fa fa-trash"></i> </button>
                                                    {% endif %}
                                                </td>
                                            {% endif %}
                                            <td>{{program.document_apply}}</td>
                                            <td>{{program.scheme_apply}}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                
                                </table>
                            </div>
                            <div class="py-4 px-5 justify-content-end d-flex align-items-end" style="width : 100%;">
                                <ul class="pagination float-center"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="delete_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Delete Project</h4>
            </div>
            <form method="GET" id="delete_form" action="/demo/program-department/program/delete/">
                {% csrf_token %}
                <div class="modal-body">
                    <p><strong>Are you sure you want to delete this ?</strong></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">No</button>
                    <button type="submit" class="btn btn-danger">Yes</button>
                </div>
            </form>
            
        </div>
    </div>
</div>

<script>
    // Export footable data to CSV
    function exportTableToCSV() {
        $(".footable").table2excel({
            exclude: "", // Class to exclude from export
            name: "programs_data", // Name of the worksheet in Excel
            filename: "programs_data.xls", // Name of the exported file (include extension)
            preserveColors: false // Set to true to preserve background and font colors
        });
    }

    $(document).on('click', '#export_table', function() {
        exportTableToCSV();
    });


    $('.footable').footable({
        "paging": {
            "enabled": true
        }
    });

    $(document).ready(function() {
        $('#program_type').val("{{program_type}}");
        var program_type_id = "{{program_type}}"
        
        if(program_type_id != 'All') {
            $.ajax({
                url: getUrl('/program-department/projects/'+program_type_id),
                type: 'GET',
                success: function(data) {
                    $('#project').html(data);
                    $('#project').val("{{project}}");
                },
                error: function(xhr, status, error) {
                    console.error("Error fetching projects:", error);
                }
            });
        }
        
        getChart()


    });

    $(document).on('click', '.delete_button', function() {
        var id = $(this).attr("data-id");
        var action = $('#delete_form').attr('action');
        $('#delete_form').attr('action', action + id);
        $('#delete_modal').modal('show');
    });

    $(document).on('change', '#program_type', function() {
        var program_type_id = $(this).val();
        $.ajax({
            url: getUrl('/program-department/projects/'+program_type_id),
            type: 'GET',
            success: function(data) {
                $('#project').html(data);
            },
            error: function(xhr, status, error) {
                console.error("Error fetching projects:", error);
            }
        });
    });


    function getChart() {

        var program_type = $('#program_type').val();
        var project = $('#project').val();
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();

        $.ajax({
            url: '/demo/program-department/programs-chart',
            type: 'GET',
            data : {'program_type' : program_type, 'project' : project, 'start_date' : start_date, 'end_date' : end_date},
            success: function(data) {
                setHighChartData(data.by_state, 'state_chart_container');
                setHighChartData(data.by_district, 'district_chart_container');
                setHighChartData(data.by_project_type, 'project_chart_container');
                setHighChartData(data.by_team, 'team_chart_container');
                setHighChartData(data.by_age, 'age_chart_container');
                setHighChartData(data.by_gender, 'gender_chart_container');
                setHighChartData(data.by_caste, 'caste_chart_container');
                setHighChartData(data.by_religion, 'religion_chart_container');
                setHighChartData(data.by_occupation, 'occupation_chart_container');
                setHighChartData(data.by_family_income, 'income_chart_container');
                
            },
            error: function(error) {
                console.error("Error fetching chart data:", error);
            }
        });
    }


    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
                    }]
                });
    }


    $(document).on('click', '#import_programs', function() {
        $('#program_import').trigger('click');
    });

    $(document).on('change', '#program_import', function() {
        var fileName = $(this).val().split('\\').pop();
        if (fileName) {
            $('#import_form').submit();
        } else {
            alert("Please select a file to upload.");
        }
    });


</script>

{% for message in messages %}
	<script>
		showNotification('{{message}}', '{{message.tags}}')
	</script>
{% endfor %}

{% endblock %}