{% 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"/>
<link rel="stylesheet" href="{{ MEDIA_URL }}js/elrte-1.2/css/elrte.min.css" type="text/css" media="screen" charset="utf-8">
<script src="{{ MEDIA_URL }}js/elrte-1.2/js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
<script src="{{ MEDIA_URL }}js/elrte-1.2/js/i18n/elrte.fr.js" type="text/javascript" charset="utf-8"></script>
<script src="{{ MEDIA_URL }}js/wysiwyg_editor.js" type="text/javascript" charset="utf-8"></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)]);

    jQuery('#id_proposal-contract_model').change(function(){
        var proposal_id = jQuery('#id_proposal-contract_model option:selected').val();
        if (proposal_id) {
            jQuery('#contract-loading').show();
            jQuery.getJSON('{% url proposal_get_contract %}', {'id': proposal_id}, function(data){
                jQuery('#id_proposal-contract_content').html(data);
                jQuery('#id_proposal-contract_content').elrte('val', data);
                jQuery('#contract-loading').hide();
            });
        }
    });

    jQuery('.proposal-row input:text').labelInside();
    jQuery('.proposal-row textarea').labelInside();
    jQuery('.row-detail.empty-field').hide();
    jQuery('.delete-checkbox').children('input').attr('checked', false);

    $('.proposal-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('#proposal-edit-form').submit(function() {
        jQuery('.proposal-row input.empty-field:text').val('');
        jQuery('.proposal-row textarea.empty-field').val('');
        return true;
    });

    // create editor
    jQuery('#id_proposal-contract_content').elrte(opts);

    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('.proposal-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_proposal_rows-TOTAL_FORMS').val(), 10);
                jQuery('#id_proposal_rows-TOTAL_FORMS').val(row_count - 1);
                jQuery(e.currentTarget).parent('.inline-formset').remove();
                var i = 0;
                jQuery('.proposal-row').each(function(){
                    jQuery('input, select',this).each(function(){
                        jQuery(this).attr('name',jQuery(this).attr('name').replace(/(proposal_rows-)[0-9]+/,'$1' + i));
                        jQuery(this).attr('id',jQuery(this).attr('id').replace(/(proposal_rows-)[0-9]+/,'$1' + i));
                    });
                    i = i + 1;
                });
            }
        }
    });

    jQuery('#add-button').click(function(e){
        e.preventDefault();
        if (jQuery('#id_proposal_rows-TOTAL_FORMS').val() == 1
          && jQuery('.proposal-row:hidden').length
          && !jQuery('.proposal-row:hidden').children('input[type="hidden"]').first().val()) {
            jQuery('.proposal-row:hidden').show();
            jQuery('.row-detail.empty-field').hide();
        } else {
            new_row = jQuery(e.currentTarget).parent('.inline-formset').prev('.proposal-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_proposal_rows-TOTAL_FORMS').val();
            jQuery('input, select',new_row).each(function(){
                jQuery(this).attr('name',jQuery(this).attr('name').replace(/(proposal_rows-)[0-9]+/,'$1' + row_count));
                jQuery(this).attr('id',jQuery(this).attr('id').replace(/(proposal_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(new_row).show();
            jQuery('#id_proposal_rows-TOTAL_FORMS').val(parseInt(jQuery('#id_proposal_rows-TOTAL_FORMS').val(), 10) + 1);
        }
    });

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

    // manage payment delay
    var compute_payment_date = function(){
        var help_text = "{% trans "If invoice edition date is %(today)s, payment date should be %(payment_date)s." %}";
        var today = new Date();
        var payment_date = new Date(today);
        if (jQuery('#id_proposal-payment_delay option:selected').val() == '1') { // 30 days
            payment_date = new Date(payment_date.setDate(payment_date.getDate() + 30));
        } else if (jQuery('#id_proposal-payment_delay option:selected').val() == '2') { // 60 days
            payment_date = new Date(payment_date.setDate(payment_date.getDate() + 60));
        } else if (jQuery('#id_proposal-payment_delay option:selected').val() == '3') { // 45 days end of month
            payment_date = new Date(payment_date.setDate(payment_date.getDate() + 45));
            var date_plus_one_month = new Date(payment_date.setMonth(payment_date.getMonth() + 1));
            var first_day_of_next_month = new Date(date_plus_one_month.setDate(1));
            payment_date = new Date(payment_date.setDate(first_day_of_next_month.getDate() - 1));
        } else if (jQuery('#id_proposal-payment_delay option:selected').val() == '4') { // end of month + 45 days
            var date_plus_one_month = new Date(payment_date.setMonth(payment_date.getMonth() + 1));
            var first_day_of_next_month = new Date(date_plus_one_month.setDate(1));
            payment_date = new Date(payment_date.setDate(first_day_of_next_month.getDate() - 1));
            payment_date = new Date(payment_date.setDate(payment_date.getDate() + 45));
        } else {
            var days = parseInt(jQuery('#id_proposal-payment_delay_other').val(),10);
            if (days) {
                if (jQuery('#id_proposal-payment_delay_type_other option:selected').val() == '') { // days
                    payment_date = new Date(payment_date.setDate(payment_date.getDate() + days));
                } else if (jQuery('#id_proposal-payment_delay_type_other option:selected').val() == '1') { // days then end of month
                    payment_date = new Date(payment_date.setDate(payment_date.getDate() + days));
                    var date_plus_one_month = new Date(payment_date.setMonth(payment_date.getMonth() + 1));
                    var first_day_of_next_month = new Date(date_plus_one_month.setDate(1));
                    payment_date = new Date(payment_date.setDate(first_day_of_next_month.getDate() - 1));
                } else if (jQuery('#id_proposal-payment_delay_type_other option:selected').val() == '2') { // end of month + days
                    var date_plus_one_month = new Date(payment_date.setMonth(payment_date.getMonth() + 1));
                    var first_day_of_next_month = new Date(date_plus_one_month.setDate(1));
                    payment_date = new Date(payment_date.setDate(first_day_of_next_month.getDate() - 1));
                    payment_date = new Date(payment_date.setDate(payment_date.getDate() + days));
                }
            }
        }
        help_text = help_text.replace('%(today)s', today.getDate() + '/' + parseInt(today.getMonth() + 1,10) + '/' + today.getFullYear());
        help_text = help_text.replace('%(payment_date)s', payment_date.getDate() + '/' + parseInt(payment_date.getMonth() + 1,10) + '/' + payment_date.getFullYear());
        jQuery('#payment-delay-example').text(help_text);
    }

    jQuery('#id_proposal-payment_delay').change(function(){
        if (jQuery('#id_proposal-payment_delay option:selected').val() == '5') {
            jQuery('#payment-type-other').show();
        } else {
            jQuery('#payment-type-other').hide();
            jQuery('#id_proposal-payment_delay_other').val('');
            jQuery('#id_proposal-payment_delay_type_other option:selected').attr('selected','');
            jQuery('#id_proposal-payment_delay_type_other option[value=""]').attr('selected','selected');
            compute_payment_date();
        }
    });

    jQuery('#id_proposal-payment_delay_other').change(compute_payment_date);
    jQuery('#id_proposal-payment_delay_type_other').change(compute_payment_date);

    jQuery('#id_proposal-payment_delay').change();
    jQuery('#id_proposal-payment_delay_other').change();
    jQuery('#id_proposal-payment_delay_type_other').change();

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

{% block content %}
<form action="" method="post" id="proposal-edit-form" enctype="multipart/form-data">
    {% csrf_token %}
    <fieldset class="module aligned">
    {% for hidden in proposalForm.hidden_fields %}
        {{ hidden }}
    {% endfor %}
    {% with proposalForm.reference as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with proposalForm.state as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with proposalForm.begin_date as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with proposalForm.end_date as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with proposalForm.expiration_date as field %}
    {% include "field.html" %}
    {% endwith %}
    {% with proposalForm.payment_delay as field %}
    <div class="form-row">
    {{ field.errors }}
      <div><label for="{{ field.auto_id }}"{% if field.field.required %} class="required"{% endif %}>{{ field.label }}{% if field.field.required %}*{% endif %} :</label> {{ field }}
      <span id="payment-type-other">{{ proposalForm.payment_delay_other }} {% trans "days" %} {{ proposalForm.payment_delay_type_other }}</span>
      {% if field.field.help_text %}
        <p class="help">{{ field.field.help_text|safe }} <span id="payment-delay-example"></span></p>
      {% endif %}
      </div>
    </div>
    {% endwith %}
    {% with proposalForm.footer_note as field %}
    {% include "field.html" %}
    {% endwith %}
    <div class="form-row">
    <div><label>{% trans "Detail rows" %} :</label></div>
    {{ proposalrowformset.management_form }}
    {% for form in proposalrowformset.forms %}
        <div class="inline-formset proposal-row">
            {{ form.non_field_errors }}
            {{ form.label.errors|format_errors:form.label.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.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>
    {% with proposalForm.contract_file as field %}
    <div class="form-row">
    {{ field.errors }}
      <div><label for="{{ field.auto_id }}"{% if field.field.required %} class="required"{% endif %}>{% trans "Upload a contract" %}{% if field.field.required %}*{% endif %} :</label> {{ field }}
      {% if field.field.help_text %}
        <p class="help">{{ field.field.help_text|safe }}</p>
      {% endif %}
      </div>
    </div>
    {% endwith %}
    {% with proposalForm.contract_model as field %}
    <div class="form-row">
    {{ field.errors }}
      <div><label for="{{ field.auto_id }}"{% if field.field.required %} class="required"{% endif %}>{{ field.label }}{% if field.field.required %}*{% endif %} :</label> {{ field }} <img src="{{ MEDIA_URL }}img/ajax-loading.gif" id="contract-loading" style="display:none"/>
      {% if field.field.help_text %}
        <p class="help">{{ field.field.help_text|safe }}</p>
      {% endif %}
      </div>
    </div>
    {% endwith %}
    <div class="big-textarea">
    {% with proposalForm.contract_content as field %}
    <div class="form-row">
    {{ field.errors }}
      <div><label for="{{ field.auto_id }}"{% if field.field.required %} class="required"{% endif %}>{{ field.label }}{% if field.field.required %}*{% endif %} :</label>
      {{ field }}
      {% if field.field.help_text %}
        <p class="help">{{ field.field.help_text|safe }}</p>
      {% endif %}
        <p class="help">{% trans "Keywords you can use" %} : {{ substitution_keys }}</p>
      </div>
    </div>
    {% endwith %}
    </div>
    </fieldset>

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