{% extends "ralph_pricing/base.html" %}
{% load url from future %}
{% load icons %}
{% load formats %}
{% load bob %}

{% block content %}
{% if formset %}
<form method="POST" class="form form-split">
{% csrf_token %}
{{ formset.management_form }}
<table class="table table-striped table-bordered table-condensed">
    <thead>
        <tr>
            <th width="16"></th>
            <th width="*">Venture</th>
            <th width="*">Percent (Total: <span id="total_percent"></span>%)</th>
            <th width="20">Del</th>
        </tr>
    </thead>
    <tbody>
        {% for form in formset %}
        <tr>
            <td style="vertical-align:middle" class="">
                {% icon 'fugue-money-coin' %}
                {% for f in form.hidden_fields %}{{ f }}{% endfor %}
            </td>
            {% for f in form.visible_fields %}
                <td class="control-group {{ f.css_classes }} {% if f.errors %}error{% endif %}" style="vertical-align:middle;text-align:center">
                {{ f }}
                {% for e in f.errors %}
                    <div class="help-block">{{ e }}</div>
                {% endfor %}
                </td>
            {% endfor %}

        </tr>
        {% comment %}
        <!-- {% if forloop.last %}
            <tr>
            <td></td>
            {% for f in form.visible_fields %}
                {% if f.name = 'percent' %}
                    <th style="vertical-align:middle;text-align:center">

                    </th>
                {% else %}
                    <td></td>
                {% endif %}
            {% endfor %}
            </tr>
        {% endif %} -->
        {% endcomment %}
        {% endfor %}

    </tbody>
</table>
<div class="buttons pull-right">
    <a href="#" class="btn btn-success add_row">+</a>
    {% spaceless %}
    <button type="submit" value="Save" class="btn btn-primary"
    >{% icon 'fugue-tick' %}&nbsp;Save</button>
    {% endspaceless %}
</div>
</form>
{% endif %}
{% endblock content %}

{% block scripts %}
{{ block.super }}
<script type="text/javascript">
    function recalculate(){
        var total = 0, cssClass = null;
        $("input[name$='percent']").each(function(i, f){
            total += parseFloat($(f).val() || 0);
        });
        total = +total.toFixed(2);
        cssClass = (total != 100.0) ? 'text-error' : 'text-success';
        $("#total_percent").html(total).removeClass().addClass(cssClass);
    }

    $("input[name$='-percent']").blur(function(){
        recalculate();
    });
    recalculate();
</script>
{% endblock %}
