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

{% block extrahead %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/smoothness/jquery-ui-1.8.10.custom.css" media="screen"/>
<style media="all" type="text/css">@import "{{ MEDIA_URL }}js/jquery-tooltip/jquery.tooltip.css";</style>
<script src="{{ MEDIA_URL }}js/jquery-tooltip/lib/jquery.bgiframe.js" type="text/javascript"></script>
<script src="{{ MEDIA_URL }}js/jquery-tooltip/jquery.tooltip.pack.js" type="text/javascript"></script>
<script src="{{ MEDIA_URL }}js/rows.js" type="text/javascript" charset="utf-8"></script>
<script src="{{ MEDIA_URL }}js/core.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
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)]);

    if (!jQuery("input#id_contact-name").val()) {
        jQuery("input#id_contact-name").autocomplete({
            source: "{% url contact_ajax_search %}",
            create: function(event, ui){
                jQuery('input#id_contact-name').after('<p class="help" id="new-contact-label">({% trans "new contact" %})</p>');
            },
            search: function(event, ui) {
                jQuery('#id_contact-customer_id').val('');
                jQuery('.proposal-field').find("option[value!='']").remove();
                jQuery('#new-contact-label').show();
            },
            select: function(event, ui) {
                jQuery('#new-contact-label').hide();
                jQuery('#id_contact-customer_id').val(ui.item.id)
                jQuery('#id_address-street').val(ui.item.address__street);
                jQuery('#id_address-zipcode').val(ui.item.address__zipcode);
                jQuery('#id_address-city').val(ui.item.address__city);
                jQuery('#id_address-country').val(ui.item.address__country__id);
                jQuery.getJSON('{% url invoice_proposals %}?customer_id=' + ui.item.id, function(data){
                    jQuery(data).each(function(){
                        jQuery('.proposal-field').append('<option value="' + this.value + '">' + this.label + '</option>');
                    });
                });
            }
        });
    }

    jQuery('.invoice-row input:text').labelInside();
    jQuery('.invoice-row textarea').labelInside();
    jQuery('.row-detail.empty-field').hide();
    jQuery('.proposal-field').proposalOverview('{% trans "Proposal" %}', '{% url proposal_detail id=0 %}');
    jQuery('.balance_payments_label').rowHelp();
    jQuery('.balance-payments-field').balanceAll();
    jQuery('.delete-checkbox').children('input').attr('checked', false);

    $('.form-row').delegate('.label-field', 'focusin', function(){
        if($(this).is(':data(autocomplete)')) return;
        $(this).autocomplete({
            source: "{% url catalog_item_search %}",
            select: function(event, ui){
                $(this).val(ui.item.label);
                $(this).nextAll('.category-field').val(ui.item.category);
                $(this).nextAll('.unit-price-field').trigger('focus');
                $(this).nextAll('.unit-price-field').val(ui.item.unit_price);
                $(this).nextAll('.vat-rate-field').val(ui.item.vat_rate);
                $(this).trigger('focus');
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label + " (" + item.section__name + ")</a>" )
                .appendTo( ul );
        };
    });

    jQuery('.form-row').delegate('.show-detail', 'click', function(e){
        e.preventDefault();
        jQuery(e.currentTarget).siblings('.row-detail.empty-field').show();
    });

    jQuery('.form-row').delegate('.proposal-field', 'change', function(){
        $(this).toggleBalanceCheckbox();
    });
    $('.proposal-field').toggleBalanceCheckbox();

    jQuery('#invoice-edit-form').submit(function() {
        jQuery('.invoice-row input.empty-field:text').val('');
        jQuery('.invoice-row textarea.empty-field').val('');
        return true;
    });

    jQuery('.form-row').delegate('.delete-button', 'click', function(e){
        e.preventDefault();
        if (jQuery(e.currentTarget).parent('.inline-formset').children('input[type="hidden"]').first().val()) {
            // bound row
            jQuery(e.currentTarget).parent('.inline-formset').hide();
            jQuery(e.currentTarget).next('.delete-checkbox').children('input').attr('checked', true);
        } else {
            if (jQuery('.invoice-row').length == 1) {
                // last (empty) row
                var row = jQuery(e.currentTarget).parent('.inline-formset');
                jQuery(row).hide();
                jQuery('ul.errorlist', row).remove();
                jQuery('input:text',row).focusin();
                jQuery('input',row).val('');
                jQuery('input:text',row).focusout();
                jQuery('textarea',row).focusin();
                jQuery('textarea',row).val('');
                jQuery('textarea',row).focusout();
                jQuery('input',row).attr('checked', false);
                jQuery('option',row).attr('selected', false);
                jQuery("option[value='']",row).attr('selected', true);
            } else {
                // can be removed, other rows for model
                var row_count = parseInt(jQuery('#id_invoice_rows-TOTAL_FORMS').val(), 10);
                jQuery('#id_invoice_rows-TOTAL_FORMS').val(row_count - 1);
                jQuery(e.currentTarget).parent('.inline-formset').remove();
                var i = 0;
                jQuery('.invoice-row').each(function(){
                    jQuery('input, select',this).each(function(){
                        jQuery(this).attr('name',jQuery(this).attr('name').replace(/(invoice_rows-)[0-9]+/,'$1' + i));
                        jQuery(this).attr('id',jQuery(this).attr('id').replace(/(invoice_rows-)[0-9]+/,'$1' + i));
                    });
                    i = i + 1;
                });
            }
        }
    });

    jQuery('#add-button').click(function(e){
        e.preventDefault();
        if (jQuery('#id_invoice_rows-TOTAL_FORMS').val() == 1
          && jQuery('.invoice-row:hidden').length
          && !jQuery('.invoice-row:hidden').children('input[type="hidden"]').first().val()) {
            jQuery('.invoice-row:hidden').show();
            jQuery('.row-detail.empty-field').hide();
        } else {
            new_row = jQuery(e.currentTarget).parent('.inline-formset').prev('.invoice-row').clone();
            jQuery(e.currentTarget).parent('.inline-formset').before(new_row);
            jQuery('ul.errorlist', new_row).remove();
            jQuery('input',new_row).val('');
            jQuery('textarea',new_row).val('');
            jQuery('input',new_row).attr('checked', false);
            jQuery('option',new_row).attr('selected', false);
            jQuery("option[value='']",new_row).attr('selected', true);
            var row_count = jQuery('#id_invoice_rows-TOTAL_FORMS').val();
            jQuery('input, select',new_row).each(function(){
                jQuery(this).attr('name',jQuery(this).attr('name').replace(/(invoice_rows-)[0-9]+/,'$1' + row_count));
                jQuery(this).attr('id',jQuery(this).attr('id').replace(/(invoice_rows-)[0-9]+/,'$1' + row_count));
            });

            jQuery('input:text', new_row).labelInside();
            jQuery('textarea', new_row).labelInside();
            jQuery('.row-detail.empty-field', new_row).hide();
            jQuery('.proposal-field', new_row).proposalOverview('{% trans "Proposal" %}', '{% url proposal_detail id=0 %}');
            jQuery('.proposal-field', new_row).toggleBalanceCheckbox();
            jQuery('.balance_payments_label', new_row).rowHelp();
            jQuery('.balance-payments-field', new_row).balanceAll();

            jQuery(new_row).show();
            jQuery('#id_invoice_rows-TOTAL_FORMS').val(parseInt(row_count, 10) + 1);
        }
    });

    jQuery('.delete-checkbox').hide()

    {% if from_proposal %}
    jQuery('.proposal-field:first').change();
    {% endif %}
});
</script>
{% endblock %}

{% block content %}
<form action="" method="post" id="invoice-edit-form">
    {% csrf_token %}
    <fieldset class="module aligned">
    <div id="contact-box">
        {% with contactForm as form %}
        {% include "form.html" %}
        {% endwith %}
        {% with addressForm as form %}
        {% include "form.html" %}
        {% endwith %}
    </div>
    {% for hidden in invoiceForm.hidden_fields %}
        {{ hidden }}
    {% endfor %}
    {% with invoiceForm.invoice_id as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with invoiceForm.state as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with invoiceForm.edition_date as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with invoiceForm.payment_date as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with invoiceForm.payment_type as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with invoiceForm.paid_date as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with invoiceForm.execution_begin_date as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with invoiceForm.execution_end_date as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with invoiceForm.penalty_date as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with invoiceForm.penalty_rate as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with invoiceForm.discount_conditions as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with invoiceForm.footer_note as field %}
    {% include "field.html" %}
    {% endwith %}
    <div class="form-row">
    <div><label>{% trans "Detail rows" %} :</label></div>
    {{ invoicerowformset.management_form }}
    {% for form in invoicerowformset.forms %}
        <div class="inline-formset invoice-row">
            {{ form.non_field_errors }}
            {{ form.label.errors|format_errors:form.label.label }}
            {{ form.proposal.errors|format_errors:form.proposal.label }}
            {{ form.category.errors|format_errors:form.category.label }}
            {{ form.quantity.errors|format_errors:form.quantity.label }}
            {{ form.unit_price.errors|format_errors:form.unit_price.label }}
            {{ form.vat_rate.errors|format_errors:form.vat_rate.label }}
            {{ form.detail.errors|format_errors:form.detail.label }}
            {{ form.ownedobject_ptr }}<span class="inline-label">{{ form.label.label }} : </span>{{ form.label }} {{ form.proposal }} <span class="balance_payments_label">{{ form.balance_payments.label }} : </span>{{ form.balance_payments }} <span class="help_text" style="display: none">{{ form.balance_payments.help_text }}</span>{{ form.category }} <span class="inline-label">{{ form.quantity.label }} : </span>{{ form.quantity }} <span class="inline-label">{{ form.unit_price.label }} : </span>{{ form.unit_price }}{% if user.get_profile.vat_number %} {{ form.vat_rate }}{% endif %}<a href="#" class="delete-button"><img src="{{ MEDIA_URL }}img/icon_deletelink.gif" /></a><span class="delete-checkbox">{{ form.DELETE }}</span>
            <a class="show-detail" href="#"><img src="{{ MEDIA_URL }}img/edit.png" alt="{% trans "detail" %}" title="{% trans "detail" %}"/></a>
            <br>
            <span class="inline-label">{{ form.detail.label }} : </span>{{ form.detail }}
        </div>
    {% endfor %}
        <div class="inline-formset">
            <a href="#" id="add-button"><img src="{{ MEDIA_URL }}img/icon_addlink.gif" /> {% trans "Add" %}</a>
        </div>
    </div>
    </fieldset>

    <div class="submit-row">
    <input class="default" type="submit" name="action" value="{% trans "Save" %}" />
    </div>
</form>
<div id="proposal-overview"></div>
{% endblock %}