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

{% 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>Incomes</h2>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <!-- test -->
        <style>
            #kunj-incomes .stat-card {
                position: relative; border-radius: 12px; padding: 16px 16px 14px; margin-bottom: 20px; overflow: hidden;
                color: #fff; min-height: 88px;
                box-shadow: 0 10px 20px rgba(0,0,0,0.35), 0 3px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -8px 14px rgba(0,0,0,0.16);
                background: linear-gradient(135deg,#1f9d63,#0f6e46);
                transition: transform .16s ease, box-shadow .16s ease;
            }
            #kunj-incomes .stat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(0,0,0,0.42), 0 5px 9px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.25); }
            #kunj-incomes .stat-card .stat-value { font-size: 19px; font-weight: 700; margin: 0 0 4px; text-shadow: 0 2px 3px rgba(0,0,0,0.25); }
            #kunj-incomes .stat-card .stat-label { font-size: 11px; opacity: .92; font-weight: 500; }
            #kunj-incomes .summary-card {
                border-radius: 12px; padding: 16px 16px 14px; margin-bottom: 20px; color: #fff; min-height: 88px;
                box-shadow: 0 10px 20px rgba(0,0,0,0.35), 0 3px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -8px 14px rgba(0,0,0,0.16);
            }
            #kunj-incomes .summary-card .stat-value { font-size: 19px; font-weight: 700; margin: 0 0 4px; text-shadow: 0 2px 3px rgba(0,0,0,0.25); }
            #kunj-incomes .summary-card .stat-label { font-size: 11px; opacity: .92; font-weight: 500; }
        </style>
        <div id="kunj-incomes" class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="summary-card" style="background: linear-gradient(135deg,#4f8cff,#2c5fd6);">
                        <div class="stat-value">₹ {{total_received}}</div>
                        <div class="stat-label">Total Received (this view)</div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="summary-card" style="background: linear-gradient(135deg,#f0a730,#c47a10);">
                        <div class="stat-value">₹ {{total_sanctioned}}</div>
                        <div class="stat-label">Total Sanctioned (this view)</div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <h5 style="color:#f1f3f9; margin: 4px 0 10px;">Income by Head</h5>
                </div>
                {% for head in income_by_head %}
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <a href="?income_type={{head.income_type|urlencode}}" class="stat-card">
                            <div class="stat-value">₹ {{head.total}}</div>
                            <div class="stat-label">{{head.income_type|default:"Unknown"}}</div>
                        </a>
                    </div>
                {% empty %}
                    <div class="col-lg-12"><p style="color:#5c6478;">No income records for this selection.</p></div>
                {% endfor %}
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-title px-5 justify-content-between d-flex align-items-center">

                           
                                <form id="income_form" action="/admin/finance-department/incomes" method="GET" enctype="multipart/form-data" style="width:100%;">
                                    <!-- {% csrf_token %} -->
                                     <div class="flex-row justify-content-between w-100 d-flex align-items-end">
                                        <div class="form-group mb-0 d-flex flex-column">
                                            <label>Project</label>
                                            <select data-placeholder="" id="project" data-value="{{project}}" name="project" class="select2 form-control" tabindex="-1">
                                                <option value="All">All</option>
                                                {% for p in projects %}
                                                    <option value="{{p.id}}">{{p.project}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="form-group mb-0 d-flex flex-column">
                                            <label>Financial Year</label>
                                            <select data-placeholder="" id="financial_year" data-value="{{financial_year}}" name="financial_year" class="select2 form-control" tabindex="-1">
                                                <option value="All">All</option>
                                                {% for fy in financial_years %}
                                                    <option value="{{fy}}">{{fy}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="form-group mb-0 d-flex flex-column">
                                            <label>Type of Income</label>
                                            <select data-placeholder="" id="income_type" data-value="{{income_type}}" name="income_type" class="select2 form-control"  tabindex="-1">
                                                <option value="All">All</option>
                                                <option value="Individual Person Donation">Individual Person Donation</option>
                                                <option value="Sub Grant">Sub Grant</option>
                                                <option value="Contract">Contract</option>
                                                <option value="CSR">CSR</option>
                                                <option value="Govt. Funds">Govt. Funds</option>
                                                <option value="Training Fees">Training Fees</option>
                                                <option value="Other">Other</option>
                                            </select>
                                        </div>
                                        <div class="form-group mb-0 d-flex flex-column">
                                            <label>Fund Type *</label>
                                            <select data-placeholder="" id="donation_type" data-value="{{donation_type}}" name="donation_type" class="select2 form-control"  tabindex="-1">
                                                <option value="All">All</option>
                                                <option value="Unrestricted">Unrestricted</option>
                                                <option value="Restricted">Restricted</option>
                                                <option value="Corpus">Corpus</option>
                                                <option value="Anonymous">Anonymous</option>
                                            </select>
                                        </div>
                                        <div class="form-group mb-0 d-flex flex-column">
                                            <label>Program type*</label> 
                                            <select data-placeholder="" id="program_type" data-value="{{program_type}}" name="program_type" class="select2 form-control"  tabindex="-1">
                                                <option value="All">All</option>
                                                {% for program_type in program_types %}
                                                    <option value="{{program_type.id}}">{{program_type.program_type}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <button type="submit" class="btn btn-w-s btn-primary ml-2">Apply</button>
                                        {% if user.user_type.user_permission.finance_department_income_export == 1 %}
                                            <button type="button" class="btn btn-w-s btn-primary ml-2" id="export_table">Export</button>
                                        {% endif %}
                                    </div>
                                </form>   
                                
                            </div>                            
                        </div>

                        <div class="ibox-content">
                            <div class="mb-2">
                                <input type="text" id="filter" class="form-control" style="max-width:280px;" placeholder="Search in table...">
                            </div>
                            <div style="overflow-x: auto;">
                                <table class="footable table-bordered table table-stripped w-100" data-paging-position="right" data-page-size="15" 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;">Type of Income</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Type of Donation</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;">Email Id</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Contact Number</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Sanction Amount</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Received Amount</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Payment Mode</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Payment Date</th>
                                            {% if user.user_type.user_permission.finance_department_income_edit == 1 or user.user_type.user_permission.finance_department_income_delete == 1 %}
                                                <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Action</th>
                                            {% endif %}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for income in incomes %}
                                        <tr>
                                            <td>{{forloop.counter}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{income.income_type}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{income.donation_type}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{income.donor}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{income.email}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{income.mobile}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{income.sanction_amount}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{income.received_amount}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{income.mode_of_payment}}</td>
                                            <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{income.payment_date|ddmmyyyy}}</td>
                                            {% if user.user_type.user_permission.finance_department_income_edit == 1 or user.user_type.user_permission.finance_department_income_delete == 1 %}
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">
                                                    {% if user.user_type.user_permission.finance_department_income_edit == 1 %}
                                                        <a href="/admin/finance-department/edit-income/{{income.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_income_delete == 1 %}
                                                        <button data-id="{{income.id}}" class="btn btn-danger delete_button" type="button"><i class="fa fa-trash"></i> </button>
                                                    {% endif %}
                                                </td>
                                            {% endif %}
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                    <tfoot>
                                        <tr style="font-weight:700;">
                                            <td colspan="6" class="text-right">Total</td>
                                            <td class="text-center">₹ {{total_sanctioned}}</td>
                                            <td class="text-center">₹ {{total_received}}</td>
                                            <td colspan="2"></td>
                                            {% if user.user_type.user_permission.finance_department_income_edit == 1 or user.user_type.user_permission.finance_department_income_delete == 1 %}<td></td>{% endif %}
                                        </tr>
                                    </tfoot>
                                </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 Income</h4>
            </div>
            <form method="GET" id="delete_form" action="/admin/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(filename) {
        $(".footable").table2excel({
            exclude: "", // Class to exclude from export
            name: "incomes", // Name of the worksheet in Excel
            filename: "income_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('income_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');
    });


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

    
    $(document).ready(function(){
        var income_type = $('#income_type').attr('data-value');
        var donation_type = $('#donation_type').attr('data-value');
        var program_type = $('#program_type').attr('data-value');
        var project = $('#project').attr('data-value');
        var financial_year = $('#financial_year').attr('data-value');

        $('#income_type').select2().val(income_type.toString()).trigger('change');
        $('#donation_type').select2().val(donation_type.toString()).trigger('change');
        $('#program_type').select2().val(program_type.toString()).trigger('change');
        $('#project').select2().val(project.toString()).trigger('change');
        $('#financial_year').select2().val(financial_year.toString()).trigger('change');
    })


</script>


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

{% endblock %}