{% extends 'layout_dtpop_forms.html' %}
{% load static %}
{% load widget_tweaks %}
{% load crispy_forms_tags %}

{% block content %}
<form action="" class="form-main" method="post">
    {% csrf_token %}
    {% for field in form.visible_fields %}
          {% if field.errors %}
              {% for error in field.errors %}<span class='text-danger is-invalid' >{{ error }}{% if not forloop.last %}, {% endif %} - field: {{ field.label }}</span>{% endfor %}
          {% endif %}
    {% endfor %}
    <div class="row">
        <div class="col-3">
            <h4>Instructions:</h4>
            <p id="id_instruction_block">Enter the Transaction Date.</p>
        </div>
        <div class="col-5" id="id_form_block">
            <div class="row">
                <div class="col-5">
                    <label class="font-weight-bolder" for="{{ form.transaction_date.auto_id }}">{{ form.transaction_date.label }}:</label>
                </div>
                <div class="col-7">
                    {% if form.transaction_date.errors %}
                    {{ form.transaction_date|add_class:"dateinput is-invalid"|attr:"autocomplete:off"|attr:"autofocus:autofocus"|attr:"tabindex:1"|attr:"data-check-month:1"|attr:"data-min-date:30"|attr:"data-max-date:0"|attr:"data-check-close-date:inv_close" }}
                    {% for error in form.transaction_date.errors %}
                    <span class='invalid-feedback'><strong>{{ error }}</strong></span>
                    {% endfor %}
                    {% else %}
                    {{ form.transaction_date|add_class:"dateinput"|attr:"autocomplete:off"|attr:"autofocus:autofocus"|attr:"tabindex:1"|attr:"data-check-month:1"|attr:"data-min-date:30"|attr:"data-max-date:0"|attr:"data-check-close-date:inv_close"|attr:"data-out-range:show error" }}
                    {% endif %}
                </div>
            </div>
            <div class="row pt-1" id="id_transaction_qty_block" style="visibility:hidden">
                <div class="col-5">
                    <label class="font-weight-bolder" for="{{ form.transfer_qty.auto_id }}">{{ form.transfer_qty.label }}:</label>
                </div>
                <div class="col-7">
                    {{ form.transfer_qty|attr:"tabindex:3"|attr:"autocomplete:off"|attr:"data-number:whole" }}
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="row no-gutters">
                <div class="col-4 pr-1 submit_block" style="visibility:hidden">
                    <input id="id_submit_button" class="btn btn-block btn-primary" type="submit" value="Done" tabindex="7" />
                </div>
                <div class="col-4 submit_block" style="visibility:hidden">
                    <input id="id_submit_continue" class="btn btn-block btn-primary" type="submit" name="submit_and_continue" value="Continue" tabindex="7" />
                </div>
                <div class="col-4 pl-1">
                    <input id="submit-id-cancel" class="btn btn-block btn-danger" tabindex="8" name="cancel" type="submit" value="Cancel" formnovalidate="formnovalidate">
                </div>
            </div>
        </div>
    </div>
    <div class="row pt-2">
        <div class="col" id="id_from_receiver_block" style="visibility: hidden">
            <h1>From:</h1>
            <div class="row">
                <div class="col-2">
                    <label class="font-weight-bolder" for="{{ form.receiver_from.auto_id }}">{{ form.receiver_from.label }}:</label>
                </div>
                <div class="col-7">
                    {{ form.receiver_from|attr:"tabindex:2"|attr:"autocomplete:off" }}
                </div>
            </div>
            <div id="id_receiver_from_info"></div>
            <div class="row" id="id_from_qty_after_block"  style="visibility: hidden">
                <div class="col-4">
                    <label class="font-weight-bolder" for="id_from_qty_after">Qty After Transfer:</label>
                </div>
                <div class="col-8">
                    <span id="id_from_qty_after"></span>
                </div>
            </div>
            <div id="id_from_remarks_block"  style="visibility: hidden">
                <div class="row">
                    <div class="col">
                        <label class="font-weight-bolder" for="{{ form.remarks_from.auto_id }}">{{ form.remarks_from.label }}:</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        {{ form.remarks_from|attr:"tabindex:5" }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col" id="id_to_receiver_block" style="visibility: hidden">
            <h1>To:</h1>
            <div class="row">
                <div class="col-2">
                    <label class="font-weight-bolder" for="{{ form.receiver_to.auto_id }}">{{ form.receiver_to.label }}:</label>
                </div>
                <div class="col-7">
                    {{ form.receiver_to|attr:"tabindex:4"|attr:"autocomplete:off"|attr:"no-autopop:no-autopop"|attr:"can-type:can-type"|attr:"no-clear:no-clear" }}
                </div>
            </div>
            <div id="id_receiver_to_info"></div>
            <div class="row" id="id_to_qty_after_block"  style="visibility: hidden">
                <div class="col-4">
                    <label class="font-weight-bolder" for="id_to_qty_after">Qty After Transfer:</label>
                </div>
                <div class="col-8">
                    <span id="id_to_qty_after"></span>
                </div>
            </div>
            <div id="id_to_remarks_block" style="visibility: hidden">
                <div class="row">
                    <div class="col">
                        <label class="font-weight-bolder" for="{{ form.remarks_to.auto_id }}">{{ form.remarks_to.label }}:</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        {{ form.remarks_to|attr:"tabindex:6" }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
{% endblock content %}

{% block body_scripts %}
    {{ block.super }}
    <script>
        var get_receiver_from_info_url = "{% url 'get_receiver_from_info' %}";
        var get_receiver_to_info_url = "{% url 'get_receiver_to_info' %}";
        var check_receiver_url = "{% url 'get_value_from_model' %}";
        var create_new_to_url = "{% url 'create_new_to' %}";
        var transfer_url = "{% url 'inv_transfer' %}";
        var home_url = "{% url 'home' %}";
        var check_close_date_url = "{% url 'check_close_date' %}";
    </script>
    <script type="text/javascript" src="{% static 'informant_erp/js/support_popupview_common.js' %}"></script>
    <script type="text/javascript" src="{% static 'informant_erp/js/support_inv_transfer.js' %}"></script>
{% endblock body_scripts %}