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


{% block body %}

<style>
    .select2-container {
        width : 100%!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-10">
                <h2>Expenditures</h2>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <!-- test -->
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">

                <div class="col-12">
                    <div class="ibox ">
                        <div class="ibox-title" style="background : #2f4050;">
                            <h5 style="color:#FFFFFF;">Expenditures</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="expenditure_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 id="expenditure_form" action="/demo/finance-department/expenditures" method="GET" enctype="multipart/form-data" style="width:100%;">
                                <div class="row">
                                        <div class="col-4">
                                            <div class="form-group  mb-0 d-flex flex-column">
                                                <label>Sector of Expenses *</label> 
                                                <select data-placeholder="" id="sector_of_expence" data-value="{{sector_of_expence}}" name="sector_of_expence" class="select2 form-control"  tabindex="-1" required>
                                                    <option value="All">All</option>
                                                    <option value="Project Based">Project Based</option>
                                                    <option value="Office Expenses">Office Expenses</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="administrative_container w-100">
                                                <div class="form-group mb-0 d-flex flex-column w-100">
                                                    <label>Adminstrative Expenses</label> 
                                                    <select data-placeholder="" id="administrative_expense" data-value="{{administrative_expense}}" name="administrative_expense" class="select2 form-control w-100"  tabindex="-1">
                                                        <option value="All">All</option>
                                                        <option value="Food Beverage">Food Beverage</option>
                                                        <option value="Rent">Rent</option>
                                                        <option value="Utilities">Utilities</option>
                                                        <option value="Insurance">Insurance</option>
                                                        <option value="Wages Salaries">Wages Salaries</option>
                                                        <option value="Office Fistures Equipment">Office Fistures Equipment</option>
                                                        <option value="Legal Finance Service Fees">Legal Finance Service Fees</option>
                                                        <option value="Office Suplies">Office Suplies</option>
                                                        <option value="Travel">Travel</option>
                                                        <option value="IT Service">IT Service</option>
                                                        <option value="Licence Subscriptions">Licence Subscriptions</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="project_container w-100">
                                                <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>
                                        
                                        <div class="col-4 justify-content-end d-flex align-items-end">
                                            <button type="submit" class="btn btn-w-s btn-primary ml-2">Apply</button>
                                            {% if user.user_type.user_permission.finance_department_expenditure_export %}
                                                <button type="button" class="btn btn-w-s btn-primary ml-2" id="export_table">Export</button>
                                            {% endif %}
                                        </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;">Name</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Date of Expense</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Project Name</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Adminstrative Expenses</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Payment Type</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Total Amount</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Advance</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Net Payment</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Payment Status</th>
                                            {% if user.user_type.user_permission.finance_department_expenditure_edit == 1 or user.user_type.user_permission.finance_department_expenditure_delete == 1 %}
                                                <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Action</th>
                                            {% endif %}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for expenditure in expenditures %}
                                        <tr>
                                            <td>{{forloop.counter}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">
                                                {% if expenditure.member_or_vendor == "0" %}
                                                    {{expenditure.member.name}}
                                                {% else %}
                                                    {{expenditure.vendor.name}}
                                                {% endif %}
                                            </td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{expenditure.expence_date}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">
                                                {% if expenditure.project_id %}
                                                    {{expenditure.project.project}}
                                                {% else %}
                                                    -
                                                {% endif %}
                                            </td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">
                                                {% if expenditure.administrative_expense %}
                                                    {{expenditure.administrative_expense}}
                                                {% else %}
                                                    -
                                                {% endif %}
                                            </td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{expenditure.payment_type}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{expenditure.total_amount|sub:expenditure.total_tds}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">
                                                {% if expenditure.advance %}
                                                    {{expenditure.advance}}
                                                {% else %}
                                                    0
                                                {% endif %}
                                            </td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{expenditure.net_amount}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">
                                                {% if expenditure.payment_status == 1 %}
                                                    <span class="badge badge-success">Completed</span>
                                                {% else %}
                                                    <span class="badge badge-danger">Pending</span>
                                                {% endif %}
                                            </td>
                                            {% if user.user_type.user_permission.finance_department_expenditure_edit == 1 or user.user_type.user_permission.finance_department_expenditure_delete == 1 %}
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">
                                                    <a href="/demo/finance-department/expenditure/view/{{expenditure.id}}"><button class="btn btn-primary" type="button"><i class="fa fa-eye"></i> </button></a>
                                                    {% if user.user_type.user_permission.finance_department_expenditure_edit == 1 %}
                                                        <a href="/demo/finance-department/edit-expenditure/{{expenditure.id}}"><button class="btn btn-info" type="button"><i class="fa fa-edit"></i> </button></a>
                                                    {% endif %}
                                                    {% if user.user_type.user_permission.finance_department_expenditure_delete == 1 %}
                                                        <button data-id="{{expenditure.id}}" class="btn btn-danger delete_button" type="button"><i class="fa fa-trash"></i> </button>
                                                    {% endif %}
                                                </td>
                                            {% endif %}
                                        </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 Expenditure</h4>
            </div>
            <form method="GET" id="delete_form" action="/demo/finance-department/expenditure/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(filename) {
        $(".footable").table2excel({
            exclude: "", // Class to exclude from export
            name: "expenditures", // Name of the worksheet in Excel
            filename: "expenditure_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('expenditure_export.xls');
    });


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

   
    $(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');
    });


    function getChart(sector_of_expence, administrative_expense, project) {
        $.ajax({
            url: '/demo/finance-department/expenditure-chart',
            type: 'GET',
            data : {"sector_of_expence": sector_of_expence, 'administrative_expense' : administrative_expense, 'project' : project},
            success: function(data) {
                setHighChartData(data.amounts, 'expenditure_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: 'Expenditures',
                colorByPoint: true,
                data: data
            }]
        });
    }

    
    $(document).ready(function(){
        var sector_of_expence = $('#sector_of_expence').attr('data-value');
        var administrative_expense = $('#administrative_expense').attr('data-value');
        var project = $('#project').attr('data-value');

        $('#sector_of_expence').select2().val(sector_of_expence.toString()).trigger('change');
        $('#administrative_expense').select2().val(administrative_expense.toString()).trigger('change');
        $('#project').select2().val(project.toString()).trigger('change');

        if(sector_of_expence == 'Project Based'){
            $('.project_container').show();
            $('.administrative_container').hide();
            $('#administrative_expense').val("All").trigger('change');
        }
        else if(sector_of_expence == 'Office Expenses'){
            $('.administrative_container').show();
            $('.project_container').hide();
            $('#project').val("All").trigger('change');
        }
        else{
            $('.project_container').hide();
            $('#project').val("All").trigger('change');
            $('.administrative_container').hide();
            $('#administrative_expense').val("All").trigger('change');
        }
        getChart(sector_of_expence, administrative_expense, project)
    });



    $(document).on('change', '#sector_of_expence', function() {
        var sector_of_expence = $(this).val();
        if(sector_of_expence == 'Project Based'){
            $('.project_container').show();
            $('.administrative_container').hide();
            $('#administrative_expense').val("All").trigger('change');
        }
        else if(sector_of_expence == 'Office Expenses'){
            $('.administrative_container').show();
            $('.project_container').hide();
            $('#project').val("All").trigger('change');
        }
        else{
            $('.project_container').hide();
            $('#project').val("All").trigger('change');
            $('.administrative_container').hide();
            $('#administrative_expense').val("All").trigger('change');
        }
    });
</script>


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

{% endblock %}