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

        <div class="wrapper wrapper-content animated fadeInRight">

            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-title px-4 justify-content-between d-flex align-items-center">
                            <form action="/admin/finance-department/ledger" method="GET" style="width:100%;">
                                <div class="flex-row justify-content-between w-100 d-flex align-items-end">
                                    <div class="form-group mb-0 d-flex flex-column" style="min-width:280px;">
                                        <label>Party (Donor / Vendor / Team Member)</label>
                                        <select data-placeholder="Select a party" id="party" data-value="{{party}}" name="party" class="select2 form-control" tabindex="-1">
                                            <option value=""></option>
                                            <optgroup label="Donors">
                                                {% for d in donors %}
                                                    <option value="{{d}}">{{d}}</option>
                                                {% endfor %}
                                            </optgroup>
                                            <optgroup label="Team Members">
                                                {% for m in members %}
                                                    <option value="{{m}}">{{m}}</option>
                                                {% endfor %}
                                            </optgroup>
                                            <optgroup label="Vendors">
                                                {% for v in vendors %}
                                                    <option value="{{v}}">{{v}}</option>
                                                {% endfor %}
                                            </optgroup>
                                        </select>
                                    </div>
                                    <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>
                                    <button type="submit" class="btn btn-w-s btn-primary">View Ledger</button>
                                </div>
                            </form>
                        </div>
                        <div class="ibox-content">
                            {% if party %}
                                <h5>Ledger for: {{party}} &mdash; Closing Balance: ₹ {{closing_balance}}</h5>
                                <div class="table-responsive">
                                    <table class="footable table table-stripped table-bordered" data-page-size="15">
                                        <thead>
                                            <tr><th data-toggle="true">Date</th><th>Voucher No.</th><th>Type</th><th>Category</th><th>Fund Type</th><th>Amount</th><th>Balance</th></tr>
                                        </thead>
                                        <tbody>
                                            {% for row in ledger_rows %}
                                                <tr>
                                                    <td>{{row.date|ddmmyyyy}}</td>
                                                    <td>{{row.voucher_no}}</td>
                                                    <td>{% if row.voucher_type == 'Receipt' %}<span class="label label-success">Receipt</span>{% else %}<span class="label label-danger">Payment</span>{% endif %}</td>
                                                    <td>{{row.category}}</td>
                                                    <td>{{row.fund_type}}</td>
                                                    <td>₹ {{row.amount}}</td>
                                                    <td>₹ {{row.balance}}</td>
                                                </tr>
                                            {% empty %}
                                                <tr><td colspan="7" class="text-center">No transactions for this party.</td></tr>
                                            {% endfor %}
                                        </tbody>
                                        <tfoot>
                                            <tr style="font-weight:700;"><td colspan="5" class="text-right">Closing Balance</td><td>₹ {{closing_balance}}</td></tr>
                                        </tfoot>
                                    </table>
                                </div>
                            {% else %}
                                <div class="text-center" style="color:#5c6478; padding:30px 0;">Pick a party above to view their ledger.</div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

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

    $(document).ready(function(){
        var financial_year = $('#financial_year').attr('data-value');
        var party = $('#party').attr('data-value');
        var project = $('#project').attr('data-value');
        $('#financial_year').select2({}).val(financial_year.toString()).trigger('change');
        $('#party').select2({}).val(party.toString()).trigger('change');
        $('#project').select2({}).val(project.toString()).trigger('change');
    });
</script>

{% endblock %}