{% 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: available;"/><col style="width: 30%;"/>
            <col style="width: 10%;"/>
        </colgroup>
        <thead>
            <tr>
                <td class="loud">Requisition Line</td>
                <td class="loud">Amount</td><td></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.requisitionLine) }}{{ form_errors(rows.requisitionLine) }}</td>
                <td>{{ form_widget(rows.amount) }}{{ form_errors(rows.amount) }}</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="1" id="payment_totals" style="font-size: 13px; text-align: right;">Total</th>
                <th colspan="2"><span id="grandtotal" style="font-size: 13px; 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.requisitionLine) }}{{ form_errors(prototype.requisitionLine) }}</td>
    <td>{{ form_widget(prototype.amount) }}{{ form_errors(prototype.amount) }}</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 %}

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

{% block title 'Upload a Receipt' %}

{% block content %}
    
<div class="panel panel-primary" style="margin-top: 3px;">
    <div class="panel-heading">
        <div class="col-lg-7 center center-text">
            <span class="label">Upload a Receipt</span>
        </div>
    </div>
    <div class="panel-body">
        {{ form_start(form) }}
        {{ form_row(form.title) }}
        {{ form_row(form.file) }}
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="col-lg-7 center center-text">
                    <span class="label">
                        To add Requisition Lines, click 
                        <span class="glyphicon glyphicon-plus-sign"></span> Line 
                    </span>
                </div>
            </div>
            <div id="reqnLines" class="col-md-12">
                {{ form_row(form.reqnLines) }}
            </div>
        </div>
        {{ form_end(form) }}
    </div>
</div>
{% endblock %}

{% block javascripts %}
<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 = $('.table tbody tr').length;
        if (lines === 0) {
            $('#add_line').click();
        }
        
        styleElements();
        updateTotals();
        $(document).on('keyup input', "*[data-field='amount']", function(e){
            updateTotals();
        });
    });

    // calculate total
    function updateTotals()
    {
        var total =  0.0;
        
        $('table.reqnLines-collection > tbody  > tr').each(function() {
            var amount = parseFloat(
                $(this).find("*[data-field='amount']").val().replace(/,/g, ''));
            total += (!isNaN(amount)) ? amount : 0;
        });
        $("#grandtotal").text(moneyFormat(total));
    }
    // format number
    function moneyFormat(value)
    {
        return value.toFixed(2)
            .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
    // limit select widths
    function styleElements()
    {
        $('select.form-control').select2();
        $("[id$='requisitionLine']").css('width', '600px');
        {#$("[id$='amount']").css('width', '200px');#}
    }
</script>
{{ form_javascript(form) }}
{% endblock %}