{% extends "base.html" %}
{% load i18n %}

{% block extrahead %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/smoothness/jquery-ui-1.8.10.custom.css" media="screen"/>
<script src="{{ MEDIA_URL }}js/core.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
(function($){
    $(this).ajaxError(function() {
      $.display_errors(['{% trans "An error occurred. Did you activate referer in your browser?" %}']);
    });

    cancelEdit = function(el){
        jQuery(el).prev().show()
        jQuery(el).remove();
    };

    $.clear_errors = function(){
        jQuery('.messages').remove();
    };

    $.display_errors = function(errors){
        if(errors.length) {
            jQuery.clear_errors();
            var el = jQuery('<ul class="messages"></ul>');
            jQuery(errors).each(function(){
                jQuery(el).append('<li class="error">' + this + '</li>');
            });
            jQuery(el).appendTo("#title");
        }
    };

    $.fn.editable = function()
    {
        return this.each(function()
        {
            jQuery('.edit-row', this).click(function(e){
                e.preventDefault();
                var valueRow = jQuery(e.target).parents('tr');
                jQuery('.cancel').click();
                var editRow = jQuery('#add-row').clone(false);
                jQuery(editRow).attr('id',jQuery(valueRow).attr('id'));
                jQuery(editRow).removeClass().addClass(jQuery(valueRow).attr('class'));
                jQuery('#id_date', editRow).attr('id', 'id_edit_date');
                jQuery('#id_edit_date', editRow).val(jQuery('.date-col',valueRow).text());
                jQuery('#id_edit_date', editRow).removeClass('hasDatepicker');
                jQuery('#id_reference', editRow).val(jQuery('.reference-col',valueRow).text());
                jQuery('#id_supplier', editRow).val(jQuery('.supplier-col',valueRow).text());
                jQuery('#id_amount', editRow).val(jQuery('.amount-col',valueRow).text());
                jQuery('#id_payment_type option:selected', editRow).attr('selected','');
                var payment_type = jQuery('.payment-type-value',valueRow).text();
                jQuery('#id_payment_type option[value='+payment_type+']', editRow).attr('selected', 'selected');
                jQuery('#id_description', editRow).val(jQuery('.description-col',valueRow).text());
                jQuery('.action-col', editRow).html('<input type="submit" id="ok" value="Ok" /> <img src="{{ MEDIA_URL }}img/ajax-loading.gif" class="expense-edit-loading" style="display:none"/> <a href="#" class="cancel">{% trans "cancel" %}</a>');
                jQuery(editRow).insertAfter(valueRow);
                jQuery('.date', editRow).datepicker(jQuery.datepicker.regional["{{ LANGUAGE_CODE }}".substr(0,2)]);
                jQuery(valueRow).hide();
                jQuery('.cancel').click(function(e){
                    e.preventDefault();
                    cancelEdit(jQuery(e.target).parents('tr'));
                });
                jQuery('#ok').click(function(e){
                    e.preventDefault();
                    jQuery(this).hide();
                    jQuery('.expense-edit-loading').show();
                    var row = jQuery(e.target).parents('tr');
                    var id = jQuery(row).attr('id');
                    var date = jQuery('#id_edit_date',row).val();
                    var reference = jQuery('#id_reference',row).val();
                    var supplier = jQuery('#id_supplier',row).val();
                    var amount = jQuery('#id_amount',row).val();
                    var payment_type = jQuery('#id_payment_type',row).val();
                    var description = jQuery('#id_description',row).val();
                    jQuery.post("{% url expense_edit %}?id="+id,
                                {"date": date,
                                 "reference": reference,
                                 "supplier": supplier,
                                 "amount": amount,
                                 "payment_type": payment_type,
                                 "description": description,
                                 "csrfmiddlewaretoken": '{{ csrf_token }}'},
                                function(data){
                                    if(data.error == 'ok') {
                                        var row = jQuery('#' + data.id);
                                        jQuery('.date-col',row).text(data.date);
                                        jQuery('.reference-col',row).text(data.reference);
                                        jQuery('.supplier-col',row).text(data.supplier);
                                        jQuery('.amount-col',row).text(data.amount);
                                        jQuery('.payment-type-col',row).html('<span class="payment-type-value" style="display:none">' + data.payment_type + '</span>' + data.payment_type_label);
                                        jQuery('.description-col',row).text(data.description);
                                        jQuery(row).show();
                                        jQuery(row).next().remove();
                                        jQuery.clear_errors();
                                    } else {
                                        jQuery.display_errors(data.error_msg);
                                    }
                                    jQuery('.expense-edit-loading').hide();
                                    jQuery('#ok').show();
                                },
                                "json");

                });
            });
        });
    };

    $.fn.deletable = function()
    {
        return this.each(function()
        {
            jQuery('.delete-row', this).click(function(e){
                e.preventDefault();
                if (window.confirm('{% trans "Are you sure to want to delete this row" %}')) {
                    var expense_id = jQuery(e.target).parents('tr').attr('id');
                    jQuery.post("{% url expense_delete %}",
                                {"id": expense_id,
                                 "csrfmiddlewaretoken": '{{ csrf_token }}'},
                                function(data){
                                    if(data.error == 'ok') {
                                        jQuery('tr#'+data.id).remove();
                                        redraw_background();
                                    }
                                },
                                "json");
                }
            });
        });
    };
})(jQuery);

jQuery(document).ready(function(){
    jQuery.include('{{ MEDIA_URL }}js/datepicker_i18n','jquery.ui.datepicker-'+"{{ LANGUAGE_CODE }}".substr(0,2)+'.js');
    jQuery('.date').datepicker(jQuery.datepicker.regional["{{ LANGUAGE_CODE }}".substr(0,2)]);

    redraw_background = function(){
        var rowClass = 'row2';
        jQuery('#add-row').nextAll().each(function(){
            jQuery(this).removeClass();
            jQuery(this).addClass(rowClass);
            jQuery(this).addClass('row');
            if (rowClass == 'row1') {
                rowClass = 'row2';
            } else {
                rowClass = 'row1';
            }
        });
    };

    jQuery('#add').click(function(e){
        e.preventDefault();
        jQuery(this).hide();
        jQuery('#expense-add-loading').show();
        var date = jQuery('#id_date').val();
        var reference = jQuery('#id_reference').val();
        var supplier = jQuery('#id_supplier').val();
        var amount = jQuery('#id_amount').val();
        var payment_type = jQuery('#id_payment_type').val();
        var description = jQuery('#id_description').val();
        jQuery.post("{% url expense_add %}",
                    {"date": date,
                     "reference": reference,
                     "supplier": supplier,
                     "amount": amount,
                     "payment_type": payment_type,
                     "description": description,
                     "csrfmiddlewaretoken": '{{ csrf_token }}'},
                    function(data){
                        if(data.error == 'ok') {
                            var row = jQuery('#add-row').clone();
                            jQuery(row).attr('id',data.id);
                            jQuery('.date-col',row).text(data.date);
                            jQuery('.reference-col',row).text(data.reference);
                            jQuery('.supplier-col',row).text(data.supplier);
                            jQuery('.amount-col',row).text(data.amount);
                            jQuery('.payment-type-col',row).html('<span class="payment-type-value" style="display:none">' + data.payment_type + '</span>' + data.payment_type_label);
                            jQuery('.description-col',row).text(data.description);
                            jQuery('.action-col', row).html('<a href="#" class="edit-row">{% trans "edit" %}</a> <a href="#" class="delete-row">{% trans "delete" %}</a>')
                            jQuery(row).insertAfter('#add-row');
                            jQuery(row).editable().deletable();
                            redraw_background();
                            jQuery.clear_errors();
                            jQuery('#id_reference').val('');
                            jQuery('#id_supplier').val('');
                            jQuery('#id_amount').val('');
                            jQuery('#id_payment_type').val('');
                            jQuery('#id_description').val('');
                        } else {
                            jQuery.display_errors(data.error_msg);
                        }
                        jQuery('#expense-add-loading').hide();
                        jQuery('#add').show();
                    },
                    "json");
    });

    jQuery('.row').editable().deletable();

});
</script>
{% endblock %}

{% block content %}
<div>
    <form action="{% url expense_list_export %}" method="get">
        {% trans "Export purchase book" %} &nbsp;<select name="year">
        {% for year in years %}
            <option value="{{ year }}">{{ year }}</option>
        {% endfor %}
        </select>&nbsp;<input type="submit" value="{% trans "Export" %}" />
    </form>
</div>

<div class="search-list">
    <table>
        <thead>
            <tr>
                <th>{% trans "Date" %}</th>
                <th>{% trans "Reference" %}</th>
                <th>{% trans "Supplier" %}</th>
                <th>{% trans "Amount" %}</th>
                <th>{% trans "Payment type" %}</th>
                <th>{% trans "Description" %}</th>
                <th>{% trans "Action" %}</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row1" id="add-row">
                <td class="date-col">{{ form.date }}</td>
                <td class="reference-col">{{ form.reference }}</td>
                <td class="supplier-col">{{ form.supplier }}</td>
                <td class="amount-col">{{ form.amount }}</td>
                <td class="payment-type-col">{{ form.payment_type }}</td>
                <td class="description-col">{{ form.description }}</td>
                <td class="action-col">
                <input type="submit" id="add" value="{% trans "Add" %}" />
                <img src="{{ MEDIA_URL }}img/ajax-loading.gif" id="expense-add-loading" style="display:none"/>
                </td>
            </tr>
        {% for expense in expenses.object_list %}
           <tr id="{{ expense.id }}" class="{% cycle 'row2' 'row1' %} row">
                <td class="date-col">{{ expense.date }}</td>
                <td class="reference-col">{{ expense.reference }}</td>
                <td class="supplier-col">{{ expense.supplier|default:'' }}</td>
                <td class="amount-col">{{ expense.amount }}</td>
                <td class="payment-type-col"><span style="display:none" class="payment-type-value">{{ expense.payment_type }}</span>{{ expense.get_payment_type_display }}</td>
                <td class="description-col">{{ expense.description }}</td>
                <td class="action-col"><a href="#" class="edit-row">{% trans "edit" %}</a> <a href="#" class="delete-row">{% trans "delete" %}</a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<div class="pagination">
    <span class="step-links">
        {% if expenses.has_previous %}
            <a href="?page={{ expenses.previous_page_number }}">{% trans "previous" %}</a>
        {% endif %}

        <span class="current">
            {% blocktrans with expenses.number as number and expenses.paginator.num_pages as num_pages %}Page {{ number }} of {{ num_pages }}.{% endblocktrans %}
        </span>

        {% if expenses.has_next %}
            <a href="?page={{ expenses.next_page_number }}">{% trans "next" %}</a>
        {% endif %}
    </span>
</div>
{% endblock %}