{% if validAccess %}

    <form name="formulier" enctype="multipart/form-data" id="refundForm" class="form" action="" method="POST">

        <ul class="refund p0">
            <li>
                <div class="col-md-2 col-sm-2 p0">
                </div>
                <div class="col-md-3 col-sm-3 hidden-xs p0">
                    <div class="bold">{{ "STR_REFUND_QUESTION1"|translate }}</div>
                </div>
                <div class="col-md-3 col-sm-3 hidden-xs p0">
                    <div class="bold">{{ "STR_REFUND_QUESTION2"|translate }}</div>
                </div>
                <div class="col-md-3 col-sm-3 hidden-xs p0">
                    <div class="bold">{{ "STR_REFUND_QUESTION3"|translate }}</div>
                </div>
            </li>
            <div class="clearfix"></div>
            {% if items is valuableArray %}
                {% for item in items %}
                    <li class="p0">
                        <div class="col-md-2 col-sm-2 col-xs-12 mb10">{{ item.item_name }}</div>
                        <div class="col-md-3 col-sm-3 col-xs-12 mb10">
                            {% if item.user_product %}
                            <input type="hidden" name="{{ item.name }}" value="{{ item.value }}"/>
                            {% endif %}
                            <input type="text" style="width:65px;" onchange="changeTotal()"
                                   class="form-control maskDec" name="{{ item.p_name }}" id="{{ item.id }}"
                                   value="{{ item.value2 }}" />{{ currency|raw }}
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-12 mb10">{{ item.select_pr|raw }}</div>
                        <div class="col-md-3 col-sm-3 col-xs-12 mb10">{{ item.pr_image|raw }}{{ item.image_input|raw }}
                            {{ item.image_label|raw }}
                            {% if item.remove  %}
                            <div style="display: inline-block;padding:7px;">
                                <a href="javascript:wis_obj('formulier','id','{{ item.remove|raw }}','removeRefund','{{ "REFUND_REMOVE"|translate }}?');">
                                    <i style="color:#bc4444;" class="fa fa-fw fa-trash"></i>
                                </a>
                            </div>
                            {% endif %}
                        </div>
                    </li>
                    <div class="clearfix"></div>
                {% endfor %}
            {% endif %}
            <li class="p0">
                <div class="col-md-2 col-sm-2 col-xs-12">{{ "STR_REFUND_TOTAL"|translate }}</div>
                <div class="col-md-3 col-sm-3 col-xs-12"><span class="totalrow"><span class="total">000.00</span>{{ currency|raw }}</span></div>
                <div class="col-md-3 col-sm-3 col-xs-12"><span id="max_amount_error" class="hidden-normal error">{{ "STR_REFUND_ERROR_MAXAMOUNT"|translate }}</span></div>
            </li>
        </ul>

        <input type="hidden" name="id" id="id" value="" />
        <input type="hidden" name="action" id="action" value="saveRefund" />
        <input type="hidden" name="step" value="4" />
        {% if updateButton %}
            <button class="btn btn-primary blue" name="btn_save" id="btn_save" type="submit">
                <i class="fa fa-angle-right"></i>
                {{ "SAVE"|translate }}
            </button>
        {% endif %}
    </form>
    <div class="clearfix"></div>
    <div class="m10">
        <a href="{{ regGet('url') }}refund/{{ itemId }}/refund.htm?pu=1">{{ "UPDATE_PAYMENTDETAILS"|translate }}</a>
    </div>

    {{ footerText|raw }}

{% endif %}

<script>
    function changeTotal(){
        $('#max_amount_error').hide();
        $('.totalrow').removeClass('error');
        var count = 0;
        $('.maskDec').each(function( index ) {
            var amount = parseFloat($(this).val());
            if(!isNaN(amount)){
                count += amount;
            }
        });
        $('.total').html(count.toFixed(2));
        if(count > {{ max_amount }}){
            $('#max_amount_error').fadeIn();
            $('.totalrow').addClass('error');
        }
    }
    function imgInput(t)
    {
        if(t.files.length > 0){
            var file = t.files[0];
            var name = file.name;
            $(t).parent().append(name);
        }
        $(t).next('label').css({'backgroundColor':'#90bd5c'});

        return false;
    }
</script>