{% load i18n %}

<style>
    #div-product,#div-note label{        
        margin-top:5px;    
    }
    
    #div-product{
        margin-top:20px;
    }
</style>





<script type="text/javascript">    
    $(document).ready(function(){          
        var dn_code,dn_sn,url;
        dn_code='{{dn_code}}';
        dn_id='{{dn_id}}';
        $('#dn-code').val(dn_code);

        //2025-04-09
        $('#nxt_id').val('{{nxt_id}}');


        $('#material_label').hide();
        $('#invtype').change(function(){
            if($(this).val()=='1'){
                $('#material_label').hide();
                $('#product_label').show();
                $('#sel-unit').html("<option value='3'>箱</option><option value='1'>瓶</option>");
            }else{
                $('#material_label').show();
                $('#product_label').hide(); 
                $('#sel-unit').html("<option value=''>----</option>");
            }
        });



        
        
        
        if(dn_id=='0'){
            url='/inventory/deliverynote/edit/'                
        }else{
            url='/inventory/deliverynote/edit/'+dn_id+'/';
            $("#agent_id").val('{{data.agent.id}}');
            $("#agent_label").val('{{data.agent.name}}');
            $("#address").val('{{data.address}}');
            $("#telephone").val('{{data.telephone}}');
            $("#receiver").val('{{data.receiver}}');
            $("#remark").val('{{data.remark}}');
            $("#order_code").val('{{data.salesorder.code}}');
            
            var html='';
            {% for p in data.products %}
                html=html+"<tr invtype='1' obj_id='{{p.id}}' obj_name='{{p.name}}' uid='{{p.unit.id}}' unm='{{p.unit.name}}' qty='{{p.qty}}' >"+
                    "<td>{{p.name}}</td>"+
                    "<td>{{p.qty}}</td>"+
                    "<td>{{p.unit.name}}</td>"+        
                    "<td><a class='btn btn-warning btn-xs btn-primary btn-del'>删除</a></td>"+                    
                    "</tr>";
            {% endfor %}
            {% for p in data.materials %}
                html=html+"<tr invtype='5' obj_id='{{p.id}}' obj_name='{{p.name}}' uid='{{p.unit.id}}' unm='{{p.unit.name}}' qty='{{p.qty}}' >"+
                    "<td>{{p.name}}</td>"+
                    "<td>{{p.qty}}</td>"+
                    "<td>{{p.unit.name}}</td>"+        
                    "<td><a class='btn btn-warning btn-xs btn-primary btn-del'>删除</a></td>"+                    
                    "</tr>";
            {% endfor %}

            $('#tb-product tbody').html(html);            

        };

        $('#agent_label').autocomplete({   
            source: function(request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/agent/',
                    dataType: "json",
                    data: {
                        term:   $("#agent_label").val() ,//搜索栏里的内容
                        company_id:  '{{request.user.company_id}}' ,//额外参数
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },            
            select: function (event, ui) {
                $("#agent_id").val(ui.item.value);
                $("#agent_label").val(ui.item.label);
                return false;
            }
        });
        $('#product_label').autocomplete({   
            source: function(request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/product/',
                    dataType: "json",
                    data: {
                        term:   $("#product_label").val() ,//搜索栏里的内容
                        company_id:  '{{request.user.company_id}}' ,//额外参数
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },            
            select: function (event, ui) {
                $("#product_id").val(ui.item.value);
                $("#product_label").val(ui.item.label);
                return false;
            }
        });

        $('#material_label').autocomplete({   
            source: function(request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/inventory_material/',
                    dataType: "json",
                    data: {
                        term:   $("#material_label").val() ,//搜索栏里的内容
                        company_id:  '{{request.user.company_id}}' ,//额外参数
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },            
            select: function (event, ui) {
                var d=ui.item.value;  
                $("#material_id").val(d.id);
                $("#material_label").val(ui.item.label);
                var html='';
                for(var i = 0; i < d.unit_choices.length; i++) {
                    html=html+"<option value=''>"+d.unit_choices[i]+"</option>"                
                };
                $('#sel-unit').html(html);
                $('#sel-unit option[text="'+d.unit_name+'"]').attr("selected",true);  
                return false;
            }
        });

        $('.add-product').click(function(){
            if($('#invtype').val()=='1'){
                var product_id=$('#product_id').val();
                var product_name=$('#product_label').val();
                var unit_id=$('#sel-unit').val();
                var unit_name=$('#sel-unit').find("option:selected").text();
                var qty=$('#qty').val();
                if($.isEmpty(product_id) || $.isEmpty(qty)){
                    toastr.error(
                        "产品名称和数量不能为空！",
                        "操作错误：",
                        {timeOut: 800, positionClass: "toast-center-center"}
                    );       
                }else{
                    var html="<tr invtype='1' obj_id='"+product_id+"' obj_name='"+product_name+"' uid='"+unit_id+"' unm='"+unit_name+"' qty='"+qty+"'>"+
                        "<td>"+product_name+"</td>"+
                        "<td>"+qty+"</td>"+
                        "<td>"+unit_name+"</td>"+        
                        "<td><a class='btn btn-warning btn-xs btn-primary btn-del'>删除</a></td>"+
                        "</tr>";
                    $('#tb-product tbody').append(html);            
                }
            }else{
                var material_id=$('#material_id').val();
                var material_name=$('#material_label').val();
                var unit_id=$('#sel-unit').val();
                var unit_name=$('#sel-unit').find("option:selected").text();
                var qty=$('#qty').val();
                if($.isEmpty(material_id) || $.isEmpty(qty)){
                    toastr.error(
                        "物料名称和数量不能为空！",
                        "操作错误：",
                        {timeOut: 800, positionClass: "toast-center-center"}
                    );       
                }else{
                    var html="<tr invtype='5' obj_id='"+material_id+"' obj_name='"+material_name+"' uid='"+unit_id+"' unm='"+unit_name+"' qty='"+qty+"'>"+
                        "<td>"+material_name+"</td>"+
                        "<td>"+qty+"</td>"+
                        "<td>"+unit_name+"</td>"+        
                        "<td><a class='btn btn-warning btn-xs btn-primary btn-del'>删除</a></td>"+
                        "</tr>";
                    $('#tb-product tbody').append(html);            
                }              
            
            }
        });

        $('.main_container').on('click','.btn-del', function() {
            $(this).parent().closest('tr').remove();       
        });

    
        //$('.main_container').on('click','.btn-data-save', function() {

        $('.btn-data-save').unbind('click').bind('click', function() {
            var agent_name,agent_id,order_code;
            agent_name=$('#agent_label').val();
            agent_id=$('#agent_id').val();
            order_code=$('#order_code').val();           
            data={         
                //2025-04-09
                'nxt_id':$('#nxt_id').val(),

                'remark':$('#remark').val(),
                'salesorder':{
                    'id':0,
                    'code':order_code
                },                
                'code':dn_code,
                'agent':{
                    'id':agent_id,
                    'name':agent_name
                },                
                'address':$('#address').val(),
                'telephone':$('#telephone').val(),
                'receiver':$('#receiver').val(), 
                'products':[],
                'materials':[]
            };
            $('#tb-product tbody tr').each(function(){ 
                if ($(this).attr('invtype')=='1'){                        
                    data.products.push({
                        'store':{
                            'id':0,
                            'name':''
                        },
                        'id':$(this).attr('obj_id'),
                        'name':$(this).attr('obj_name'),
                        'qty':$(this).attr('qty'),
                        'unit':{
                            'id':$(this).attr('uid'),
                            'name':$(this).attr('unm')
                        }
                    })
                }else{
                    data.materials.push({
                        'store':{
                            'id':0,
                            'name':''
                        },
                        'id':$(this).attr('obj_id'),
                        'name':$(this).attr('obj_name'),
                        'qty':$(this).attr('qty'),
                        'unit':{
                            'id':$(this).attr('uid'),
                            'name':$(this).attr('unm')
                        }
                    })               
                }
            });            
            $.ajax({
                url: url,
                type: 'POST',
                dataType: "json",
                data:JSON.stringify(data),
                //processData: false, //这个必须有，不然会报错
                //contentType: false, //这个必须有，不然会报错
                success:function(d){
                    //关闭dlg
                    $('#bg-modal').modal('hide');
                    //刷新list
                    $.RefreshContent('/inventory/deliverynote/list/');

                },
                error:function(){
                    alert('网络通讯错误');
                    return false;
                }                
            });
            
        })    

    });
</script>

<div id='div-note'>
    <div class="form-group ">
        
        <input type='hidden' id='nxt_id' />



        <label class="col-sm-1 control-label">客户名称</label>        
        <div class='col-sm-8'>            
            <input type="text" class="form-control" id="agent_label" placeholder="客户名称" />
            <input type="hidden" id="agent_id" />
        </div>    
        <div class='col-sm-3'>
            <input class='form-control' id='dn-code' disabled /> 
        </div>  
    </div> 
    <div class="clearfix" style="margin-bottom:5px;"></div>
    <div class="form-group">
        <label class="col-sm-1 control-label">客户地址</label> 
        <div class='col-sm-5'>
            <input class='form-control' id='address' placeholder="地址" /> 
        </div>       
        <div class='col-sm-3'>
            <input class='form-control' id='telephone' placeholder="电话"  /> 
        </div>
        <div class='col-sm-3'>
            <input class='form-control' id='receiver' placeholder="收货人"/> 
        </div>         
    </div>
    <div class="clearfix" style="margin-bottom:5px;"></div>
    <div class="form-group">
        <label class="col-sm-1 control-label">销售订单</label> 
        <div class='col-sm-5'>
            <input class='form-control' id='order_code' placeholder="销售订单编号"/> 
        </div> 
        <label class="col-sm-1 control-label">备注说明</label> 
        <div class='col-sm-5'>
            <input class='form-control' id='remark' placeholder="备注说明"/> 
        </div> 

    </div>


</div>
<div class="clearfix"></div>

<div id='div-product'>
    <div class="form-group ">        
        <div class='col-sm-6'>   
            <div class="input-group" style="width:100%">                
                <select id='invtype' class='form-control' style="width:20%;">
                    <option value='1'>产成品</option>
                    <option value='5'>促销物料</option>
                </select>
                <input type="text" class="form-control" style="width:80%" id="product_label"  placeholder="产品名称"/>       
                <input type="hidden" id="product_id" />

                <input type="text" class="form-control" style="width:80%"  id="material_label"  placeholder="物料名称"/>       
                <input type="hidden" id="material_id" />
            </div>  
        </div>  
       
        <div class='col-sm-2'>            
            <input type="text" class="form-control" id="qty"  placeholder="数量" />                
        </div>        
        
        <div class='col-sm-1'>          
                <select id='sel-unit' class='form-control'>
                    <option value='3'>箱</option>
                    <option value='1'>瓶</option>
                </select>   
        </div>
        <div class='col-sm-1'>        
            <button type="button" class="btn btn-success add-product">
                    <span class='glyphicon glyphicon-arrow-down'></span>添加</button>
        </div>
        <div class='col-sm-2'>
            <button type="button" class="btn btn-primary btn-data-save pull-right">
                    <span class='glyphicon glyphicon-floppy-disk'></span>保存</button>
        </div>
        
    </div>
</div>


<div class="clearfix"></div>

<div style='min-height:100px;margin-top:2px;'>
    <div id="div-list" class="table-responsive" width="100%">    
    <table id="tb-product" class="table table-striped table-bordered dt-responsive" width="100%">
        <thead>
            <th>产品名称</th>
            <th>数量</th>
            <th>单位</th>
            <th>操作</th>
        </thead>        
        <tbody></tbody>    
    </table>   
    </div>
</div>

