{% extends "::base.html.twig" %}

{% block collection_widget %}
{% spaceless %}
    {% if prototype is defined %}
        {% set attr = attr|merge({'data-prototype': block('collection_item_widget') }) %}
    {% endif %}
    {% set attr = attr|merge({'data-allow-add': allow_add ? 1 : 0}) %}
    {% set attr = attr|merge({'data-allow-remove': allow_delete ? 1 : 0 }) %}
    {% set attr = attr|merge({'data-name-prefix': full_name}) %}
    <table class="table table-condensed table-striped reqnLines-collection" style="margin: 0px;" {{ block('widget_attributes') }}>
        <colgroup>
            <col style="width: 15%;"/><col style="width: 10%;"/>
            <col style="width: 10%;"/><col style="width: 25%;"/>
            <col style="width: 25%;"/><col style="width: 10%;"/>
            <col style="width: available;"/>
        </colgroup>
        <thead>
            <tr>
                <td colspan="2" class="loud" style="text-align: center;">Select/Describe Item</td>
                <td class="loud">Amount</td><td>Taxes</td>
                <td class="loud">Account</td><td>Reference</td><td>Action</td>
            </tr>
        </thead>
        <tbody>
            {% for rows in form %}
            <tr class="item">
                {# Though form_row can be used, its styling needs to be worked on first #}
                <td>{{ form_widget(rows.standardItem) }}{{ form_errors(rows.standardItem) }}</td>
                <td>{{ form_widget(rows.item) }}</td>
                <td>{{ form_widget(rows.amount) }}{{ form_errors(rows.amount) }}</td>
                <td>{{ form_widget(rows.tax) }}</td>
                <td>{{ form_widget(rows.expenseAccount) }}{{ form_errors(rows.expenseAccount) }}</td>
                <td>{{ form_widget(rows.reference) }}</td>
                <td>
                    <a href="#" class="collection-remove btn btn-default btn-xs" title="Delete"><span class="glyphicon glyphicon-trash"></span></a>
                    <a href="#" class="collection-add btn btn-default btn-xs" title="Add"><span class="glyphicon glyphicon-plus-sign"></span></a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <th colspan="2" style="font-size: 14px; text-align: right;">Sub Total</th>
                <th colspan="3"><span id="subtotal" style="font-size: 14px; margin-left: 5px;">0.00</span></th>
            </tr>
            <tr>
                <th colspan="2" style="font-size: 14px; text-align: right;">Tax Added Total</th>
                <th colspan="3"><span id="taxadded" style="font-size: 14px; margin-left: 5px;">0.00</span></th>
            </tr>
            <tr>
                <th colspan="2" style="font-size: 14px; text-align: right;">Tax Deducted Total</th>
                <th colspan="3"><span id="taxdeducted" style="font-size: 14px; margin-left: 5px;">0.00</span></th>
            </tr>
            <tr>
                <th colspan="2" style="font-size: 14px; text-align: right;">Grand Total</th>
                <th colspan="3"><span id="grandtotal" style="font-size: 14px; margin-left: 5px;">0.00</span></th>
            </tr>
        </tfoot>
    </table>
{% endspaceless %}
{% endblock collection_widget %}

{% block collection_item_widget %}
{% spaceless %}
<tr class="item">
    {# Though form_row can be used, its styling needs to be worked on first #}
    <td>{{ form_widget(prototype.standardItem) }}{{ form_errors(prototype.standardItem) }}</td>
    <td>{{ form_widget(prototype.item) }}</td>
    <td>{{ form_widget(prototype.amount) }}{{ form_errors(prototype.amount) }}</td>
    <td>{{ form_widget(prototype.tax) }}</td>
    <td>{{ form_widget(prototype.expenseAccount) }}{{ form_errors(prototype.expenseAccount) }}</td>
    <td>{{ form_widget(prototype.reference) }}</td>
    <td>
        <a href="#" class="collection-remove btn btn-default btn-xs" title="Delete"><span class="glyphicon glyphicon-trash"></span></a>
        <a href="#" class="collection-add btn btn-default btn-xs" title="Add"><span class="glyphicon glyphicon-plus-sign"></span></a>
    </td>
</tr>
{% endspaceless %}
{% endblock collection_item_widget %}

{% block button_widget %}
{% spaceless %}
    {% if label is empty %}
    {% set label = name|humanize %}
    {% endif %}
    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}>{{ label|title|trans({}, translation_domain) }}</button>
    {% if add_cancel_btn %}
    <a class="btn btn-default btn-sm pull-right space-buttons" href="{{ app.request.headers.get('referer') }}">{{ cancel_label|title }}</a>
    {% endif %}
    <button id="add_line" data-collection="reqnLines" class="collection-action collection-add btn btn-success btn-sm pull-right space-buttons add-btn"><span class="glyphicon glyphicon-plus-sign"></span> Line</button>
    {% if add_antispam_button %}
    <button type="submit" {{ block('antispam_button_attributes') }}>
        {{ antispam_label|title }}
    </button>
    {% endif %}
{% endspaceless %}
{% endblock button_widget %}

{% block title 'File Accountability with Expenses Breakdown' %}

{% block content %}
{% form_theme form _self %}
{% form_theme form.children 
    'AlsuiteAssetsBundle:Form:collection-theme.html.twig'
    _self
%}

{{ include('AlsuiteBackendBundle:BreadCrumbs:queues.html.twig') }}

<div class="panel panel-primary" style="margin-top: 3px;">
    <div class="panel-heading">
        <div class="col-lg-7 center center-text">
            <span class="label">File Accountability with Expenses Breakdown</span>
        </div>
    </div>
    <div class="panel-body">
        {{ include(mini_tactic, {'tactic': tactic}, with_context = false) }}
        
        <div class="panel-body">
            {{ form_start(form) }}
            {{ form_row(form.line) }}
            {{ form_row(form.released) }}
            {{ form_row(form.bookedAs) }}
            {{ form_row(form.amountSpent) }}
            {{ form_row(form.accountedFor) }}
            {{ form_row(form.accountedForOn) }}
            <div class="panel panel-default" style="margin-top: 5px;">
                <div class="panel-heading">
                    <div class="col-lg-3 center center-text">
                        To add Lines, click 
                        <span class="glyphicon glyphicon-plus-sign"></span> Line
                    </div>
                </div>
                <div id="reqnLines" class="col-md-12">
                    {{ form_start(form) }}
                    {{ form_row(form.children) }}
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{% set added = constant('\\Alsuite\\FinanceBundle\\Entity\\Tax::TYPE_ADDED') %}
{% set deducted = constant('\\Alsuite\\FinanceBundle\\Entity\\Tax::TYPE_DEDUCTED') %}
<script type="text/javascript">
    $(document).ready(function() {
        $('.reqnLines-collection').collection({
            allow_up: false,
            allow_down: false, 
            elements_selector: 'tr.item',
            elements_parent_selector: '%id% tbody',
            custom_add_location: true,
            after_remove: function(collection, element) { return updateTotals(); }, 
            after_add: function(collection, element) { 
                return styleElements(); 
            }
        });
        
        var lines = $('.reqnLines-collection tbody tr').length;
        if (lines === 0) {
            $('#add_line').click();
        }
        
        styleElements();
        updateTotals();
        $(document).on('keyup input', "*[data-field='amount']", function(e){
            updateTotals();
        });
        $(document).on('change', ".multiple_select", function(e){
            updateTotals();
        });
    });
    
    // calculate totals
    function updateTotals()
    {
        var grandtotal = subtotal = taxAdded = taxDeducted = 0.0;
        
        $('table.reqnLines-collection > tbody  > tr').each(function() {
            var amount = parseFloat(
                $(this).find("*[data-field='amount']").val().replace(/,/g, ''));
            subtotal += (!isNaN(amount)) ? amount : 0;
            
            $(this).find('*.multiple_select option:selected').each(function() {
                var type = parseInt($(this).val().split('-').pop());
                var rate = parseFloat($(this).text().split('-').pop());
                if (type == {{ added }}) {
                    taxAdded += (((!isNaN(amount)) ? amount : 0) * 
                        ((!isNaN(rate)) ? rate : 0))/100;
                } else if (type == {{ deducted }}) {
                    taxDeducted += (((!isNaN(amount)) ? amount : 0) * 
                        ((!isNaN(rate)) ? rate : 0))/100;
                }
            });
        });
        grandtotal += subtotal + taxAdded - taxDeducted;
        $("#subtotal").text(moneyFormat(subtotal));
        $("#taxadded").text(moneyFormat(taxAdded));
        $("#taxdeducted").text(moneyFormat(taxDeducted));
        $("#grandtotal").text(moneyFormat(grandtotal));
    }
    // format number
    function moneyFormat(value)
    {
        return value.toFixed(2)
            .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
    // resize elements
    function styleElements()
    {
        $('select.form-control').select2();
        $('.select_stditem').css('width', '250px');
        $('.select_account').css('width', '370px');
    }
</script>
{{ form_javascript(form) }}
{% endblock %}