{% extends 'obj_form.html' %}
{% load i18n %}
{% load tj_filters %}
  
    <style>       
        #province,#city{
            padding-left:0px;
            margin-left:0px;
        }       

    </style>

    {% block js %}
        {{ block.super }}       

        $('#label_department').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/department/',
                    dataType: "json",
                    data: {
                        term:   $("#label_department").val() ,//搜索栏里的内容
                        company_id: {{request.user.ancestor_id}} ,//额外参数
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                $("#id_department").val(ui.item.value);                   
                $("#label_department").val(ui.item.label);                
                return false;
            }
        });   
      
        $('#label_department').val('{{form.instance.department.name}}');
        $('#label_staff').val('{{form.instance.staff.name}}');

      
        $('#label_product').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/product/',
                    dataType: "json",
                    data: {
                        term:   $("#label_product").val() ,//搜索栏里的内容
                        company_id: {{request.user.ancestor_id}} ,//额外参数
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                $("#id_product").val(ui.item.value);
                $("#label_product").val(ui.item.label);
                $('#id_entproduct_app-__prefix__ .product_name').text($('#label_product').val());    
                return false;
            }
        });   
       
        $('#label_staff').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/staff/',
                    dataType: "json",
                    data: {
                        term:   $("#label_staff").val() ,//搜索栏里的内容
                        company_id:  {{request.user.ancestor_id}} ,//额外参数
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                $("#id_staff").val(ui.item.value);
                $("#label_staff").val(ui.item.label);
                return false;
            }
        });   


        $('.add-product').click(function(){     
            var prefix='#id_entproduct_app-';  
            $(prefix+'__prefix__-product').val($('#product_name').val());  
            $(prefix+'__prefix__-qty_x').val($('#qty_x').val());
            $(prefix+'__prefix__-qty_p').val($('#qty_p').val()); 
            var count = $('#tb_product tbody tr').length; 
            var tmplMarkup = '<tr class="p">'+$(prefix+'__prefix__').html()+'</tr>';    
            var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);     
            $('#tb_product tbody').append(compiledTmpl);     

            //添加后的设置INPUT值            
            $(prefix+count+'-qty_x').val($('#qty_x').val());  
            $(prefix+count+'-qty_p').val($('#qty_p').val()); 
            $(prefix+count+'-product').val($('#id_product').val()); 
            $(prefix+'TOTAL_FORMS').attr('value', (count+1));   
        });
      


        $('.btn-save').click(function(){
            {% if not can_edit %}
                return;
            {% endif %}       
           


            
            $.SubmitForm('#obj_form form','{{request.path}}');
        });      

        
      
        {% if is_saved %}
            $.RefreshContent('/obj/list/entapplication/');
        {% endif %}


    {% endblock %}


    {% block subtitle-1 %}
        {% trans "领用核销" %}
    {% endblock %}
    {% block subtitle-2 %}
        {% trans "用酒单申请" %}
    {% endblock %}

    <span style="margin-left:10px; color:green; ">
        {% block subtitle-3 %}
            {% if form.instance.id %}
                {% trans "修改" %}
            {% else %}
                {% trans "新建" %}
            {% endif %}
        {% endblock %}

    </span>



{% block form_content %}
    {{ block.super }}     



    <div class="form-group ">
        <label class="col-sm-1 control-label">{% trans '用酒类别' %}</label>
        <div class='col-sm-1'> {{ form.category }}</div>       
    
        <label class="col-sm-1 control-label">{% trans '接待对象' %}</label>
        <div class='col-sm-1'> {{ form.subject }}</div>       
    
        <label class="col-sm-1 control-label">{% trans '接待人数' %}</label>
        <div class='col-sm-1'> {{ form.headcount }}</div>       
    
        <label class="col-sm-1 control-label">{% trans '部门名称' %}</label>
        <div class='col-sm-1'> <input id='label_department' class='form-control' /></div>       
    
        <label class="col-sm-1 control-label">{% trans '经办人' %}</label>
        <div class='col-sm-1'> <input id='label_staff' class='form-control' /></div>       
    </div>
    <div class="form-group ">
        <label class="col-sm-1 control-label">{% trans '接待原因' %}</label>
        <div class='col-sm-11'> {{ form.reason }}</div>       
    </div>
    <div class="form-group ">
        <label class="col-sm-1 control-label">{% trans '接待地点' %}</label>
        <div class='col-sm-11'> {{ form.location }}</div>       
    </div>  
    <div class="form-group ">
        <label class="col-sm-1 control-label">{% trans '备注说明' %}</label>
        <div class='col-sm-11'> {{ form.remark }}</div>       
    </div>


{% endblock %}





{% block fmset %}          
      

        <div class='col-md-3' style='padding-left:0px;' >
            <input type='hidden' id='id_product' />
            <input type="text" id='label_product' class="form-control"    placeholder="{% trans '产品名称' %}" />           
        </div>


        <div class='col-md-1'>
            <input id="qty_x" type="text" class="form-control"  placeholder="{% trans '箱数' %}">
        </div>
        <div class='col-md-1'>
            <input id="qty_p" type="text" class="form-control"  placeholder="{% trans '瓶数' %}">
        </div> 
        

        <span><a type="button" class='btn btn-success add-product'>
                <span class='glyphicon glyphicon-arrow-down' style='padding-right:5px;'></span>{% trans '添加' %}
        </a></span>

        <a class="btn btn-primary btn-save" type="button"
            style="float:right;margin-right:0px;"> {% trans '保存' %}
        </a>


        <table style="display:none;">
            <tr id="id_entproduct_app-__prefix__" >                
                {{formset.empty_form.id}}                           
                <td>{{formset.empty_form.DELETE }}</td>                   
                <td>{{formset.empty_form.product}}<span class='product_name'></span></td> 
                <td>{{formset.empty_form.qty_x}}</td>
                <td>{{formset.empty_form.qty_p}}</td> 
               
            </tr>
        </table>
    
    <div class='table-responsive'>
        <table id='tb_product' class="table table-condensed table-bordered table-hover">
            <thead><tr>
                <th>{% trans '删除' %}</th>
                <th>{% trans '产品名称' %}</th>               
                <th>{% trans '箱数' %}</th>
                <th>{% trans '瓶数' %}</th>   
            </tr></thead>
            <tbody>
                {% for f in formset %}
                <tr  class='p'>
                    {{f.id}}                    
                    <td>{{f.DELETE}}</td>                         
                    <td>{{ f.product }}<span>{{f.instance.product.name}}</span></td>                    
                    <td>{{ f.qty_x}}</td>   
                    <td>{{ f.qty_p}}</td> 
                </tr>
                {% endfor %}
            </tbody>
            {{ formset.management_form }}                
        </table>
    </div>
    
{% endblock %}
