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

{% block content %}
{% include "informant_erp/includes/item_create_modals.html" %}
<form action="" class="form-main" method="post">
    {% csrf_token %}
    {% if form.non_field_errors %}
        <div class="non-field-errors">
         {% for err in form.non_field_errors %}
            <span class='text-danger is-invalid' >{{ err }}</span>
         {% endfor %}
  </div>
{% endif %}
    {% 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 Reclass Reference.</p>
        </div>
        <div class="col-5" id="id_form_block">
            <div class="row">
                <div class="col-5">
                    <label class="font-weight-bolder" for="{{ form.reclass_reference.auto_id }}">{{ form.reclass_reference.label }}:</label>
                </div>
                <div class="col-7">
                    {{ form.reclass_reference|attr:"autofocus:autofocus"|attr:"autocomplete:off"|attr:"tabindex:1" }}
                </div>
            </div>
            <div class="row pt-1" id="id_date_block" style="visibility:hidden">
                <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:"tabindex:2"|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:"tabindex:2"|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:"data-number:whole"|attr:"autocomplete:off" }}
                </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 class="row pt-5">
                <div class="col text-right">
                    <input type="button" name="view" value="View Inventory" class="details-btn btn btn-secondary" id="button-id-view" view-url={% url 'view_inventory_modal' %} tabindex="8">
                </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-4">
                    <label class="font-weight-bolder" for="{{ form.receiver_from.auto_id }}">{{ form.receiver_from.label }}:</label>
                </div>
                <div class="col-6">
                    {{ 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 Reclass:</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-4">
                    <label class="font-weight-bolder" for="{{ form.receiver_to.auto_id }}">{{ form.receiver_to.label }}:</label>
                </div>
                <div class="col-6">
                    {{ form.receiver_to|attr:"tabindex:5"|attr:"autocomplete:off" }}
                </div>
            </div>
            <div id="id_receiver_to_existing_info" style="display: none"></div>
            <div id="id_receiver_to_new_info" style="display: none">
                <div class="row" id="id_to_customer_block">
                    <div class="col-4">
                        <label class="font-weight-bolder" for="id_to_customer">Customer:</label>
                    </div>
                    <div class="col-6">
                        <span id="id_to_customer"></span>
                    </div>
                </div>
                <div class="row" id="id_to_item_block">
                    <div class="col-4">
                        <label class="font-weight-bolder" for="{{ form.to_item.auto_id }}">{{ form.to_item_name.label }}:</label>
                    </div>
                    <div class="col-6">
                        {{ form.to_item_id }}
                        {{ form.to_item }}
                        {{ form.to_item_name|attr:"tabindex:6"|attr:"autocomplete:off"|attr:"readonly:readonly" }}
                    </div>
                </div>
                <div class="row" id="id_to_cust_item_code_block" style="visibility: hidden">
                    <div class="col-4">
                        <label class="font-weight-bolder" for="{{ form.to_cust_item_code.auto_id }}">{{ form.to_cust_item_code.label }}:</label>
                    </div>
                    <div class="col-6">
                        {{ form.to_cust_item_code|attr:"tabindex:6"|attr:"autocomplete:off" }}
                    </div>
                </div>
                <div class="row" id="id_to_description_block">
                    <div class="col-4">
                        <label class="font-weight-bolder" for="id_to_description">Description:</label>
                    </div>
                    <div class="col-6">
                        <span id="id_to_description"></span>
                    </div>
                </div>
                <div class="row" id="id_to_lot_block">
                    <div class="col-4">
                        <label class="font-weight-bolder" for="{{ form.to_lot.auto_id }}">{{ form.to_lot.label }}:</label>
                    </div>
                    <div class="col-6">
                        {{ form.to_lot|attr:"tabindex:6"|attr:"autocomplete:off" }}
                    </div>
                </div>
                <div class="row pt-1" id="id_to_class_block">
                    <div class="col-4">
                        <label class="font-weight-bolder" for="{{ form.to_class.auto_id }}">{{ form.to_class.label }}:</label>
                    </div>
                    <div class="col-6">
                        {{ form.to_class|attr:"tabindex:6"|attr:"autocomplete:off" }}
                    </div>
                </div>
                <div class="row pt-1" id="id_to_group_block">
                    <div class="col-4">
                        <label class="font-weight-bolder" for="{{ form.to_group.auto_id }}">{{ form.to_group.label }}:</label>
                    </div>
                    <div class="col-6">
                        {{ form.to_group|attr:"tabindex:6"|attr:"autocomplete:off" }}
                    </div>
                </div>
                <div class="row pt-1" id="id_to_package_block">
                    <div class="col-4">
                        <label class="font-weight-bolder" for="{{ form.to_package.auto_id }}">{{ form.to_package.label }}:</label>
                    </div>
                    <div class="col-6">
                        {{ form.to_package|attr:"tabindex:6"|attr:"autocomplete:off" }}
                    </div>
                </div>
                <div class="row pt-1" id="id_to_unit_weight_block">
                    <div class="col-4">
                        <label class="font-weight-bolder" for="{{ form.to_unit_weight.auto_id }}">{{ form.to_unit_weight.label }}:</label>
                    </div>
                    <div class="col-6">
                        {{ form.to_unit_weight|attr:"tabindex:6"|attr:"autocomplete:off" }}
                    </div>
                </div>
                <div class="row" id="id_to_qty_before_block">
                    <div class="col-4">
                        <label class="font-weight-bolder" for="id_to_qty_before" style="white-space: nowrap;">Qty Before Reclass:</label>
                    </div>
                    <div class="col-6">
                        <span id="id_to_qty_before">0</span>
                    </div>
                </div>
            </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" style="white-space: nowrap;">Qty After Reclass:</label>
                </div>
                <div class="col-6">
                    <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:7" }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
{% include "informant_reports/view_details_modal.html" %}
{% endblock content %}

{% block body_scripts %}
    {{ block.super }}
    <script>
        var get_reclass_receiver_from_info_url = "{% url 'get_reclass_receiver_from_info' %}";
        var get_reclass_receiver_to_info_url = "{% url 'get_reclass_receiver_to_info' %}";
        var get_receiver_to_info_url = "{% url 'get_receiver_to_info' %}";
        var get_cust_item_code_url = "{% url 'get_cust_item_code' %}";
        var check_receiver_url = "{% url 'get_value_from_model' %}";
        var create_new_reclass_to_url = "{% url 'create_new_reclass_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_reclass.js' %}"></script>
{% endblock body_scripts %}