<div class="col-lg-10 col-lg-offset-1">
    <form class="form-horizontal" method="post" action="<?php echo base_url();?>unloading_ctrl/insert_unloading_details/<?php if(isset($lul_data['lul_id'])){ echo $lul_data['lul_id'];}?>">
    
    <section class="panel">
        <header class="panel-heading" style="min-height:120px">
            <div class="col-lg-3"> <span>Date : <?php echo date("Y-m-d");?></span> </div>
            <div class="col-lg-6">
                <h4 class="text-center"><i class="fa fa-truck truck_icon"></i><br/> <b>ETC Cargo Limited - Vehicle Entry Form(Unloading)</b></h4></div>
            <div class="col-lg-3"><span>Tocken No : 0<?php echo $lul_count+1;?></span></div>
        </header>
        <div class="clear"></div> 
        <div class="panel-body">
                <div class="col-lg-12">
                    <div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4">Customer Name</label>
                        <div class="col-lg-8">

							<input type="hidden" class="form-control" name="lul_date" value="<?php if(isset($lul_data['lul_date'])){ echo $lul_data['lul_date'];}else{echo date("Y-m-d");}?>" required>

							<input type="hidden" class="form-control" name="lul_token_no" value="<?php if(isset($lul_data['lul_token_no'])){ echo $lul_data['lul_token_no'];}else{$to_val = $lul_count+1 ; echo '0'.$to_val; }?>" required>
							
							<select class="form-control" name="lul_cl_id" required>
                                <option value="">--Select--</option>
								<?php
									foreach($cl_list as $cl_row){
								?>
                                		<option value="<?php echo $cl_row['cl_id']; ?>" <?php if(isset($lul_data['lul_cl_id']) && $lul_data['lul_cl_id']==$cl_row['cl_id']){ echo "selected=selected";}?>><?php echo $cl_row['cl_name']; ?></option>
										
								<?php
									}
								?>
                            </select>

                        </div>
                    </div>			
                    
                    <div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4">DN or BL No</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" name="lul_dn_or_bl_no" value="<?php if(isset($lul_data['lul_no_of_bag'])){ echo $lul_data['lul_no_of_bag'];}?>" required>

                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4">Truck No</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" name="lul_truck_no" value="<?php if(isset($lul_data['lul_truck_no'])){ echo $lul_data['lul_truck_no'];}?>" required>

                        </div>
                    </div>

                    
                    <div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4 ">Trailer No</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" name="lul_trailer_no" value="<?php if(isset($lul_data['lul_trailer_no'])){ echo $lul_data['lul_trailer_no'];}?>"required>

                        </div>
                    </div>

                     <div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4">No of Bags</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" name="lul_no_of_bag" value="<?php if(isset($lul_data['lul_no_of_bag'])){ echo $lul_data['lul_no_of_bag'];}?>" id="total_bag_id" readonly required>

                        </div>
                    </div>


                    <div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4">Transporter</label>
                        <div class="col-lg-8">
							<select class="form-control" name="lul_tl_id" required>
                                <option value="">--Select--</option>
								<?php
									foreach($tl_list as $tl_row){
								?>
                                		<option value="<?php echo $tl_row['tl_id']; ?>" <?php if(isset($lul_data['lul_tl_id']) && $lul_data['lul_tl_id']==$tl_row['tl_id']){ echo "selected=selected";}?>><?php echo $tl_row['tl_name']; ?></option>
										
								<?php
									}
								?>
                            </select>

                        </div>
                    </div>

                    

                    <div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4">Ton</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" name="lul_ton" value="<?php if(isset($lul_data['lul_ton'])){ echo $lul_data['lul_ton'];}?>" id="total_ton_id" readonly required>

                        </div>
                    </div>

                    

                    <div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4">Driver Name</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" name="lul_driver_name" value="<?php if(isset($lul_data['lul_driver_name'])){ echo $lul_data['lul_driver_name'];}?>" required>

                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4 ">Driver Ph</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" name="lul_driver_ph_no" value="<?php if(isset($lul_data['lul_driver_ph_no'])){ echo $lul_data['lul_driver_ph_no'];}?>" required>

                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4 ">Driver Lic</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" name="lul_lic" value="<?php if(isset($lul_data['lul_lic'])){ echo $lul_data['lul_lic'];}?>" required>

                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4 ">Container No </label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" name="lul_container_no" value="<?php if(isset($lul_data['lul_container_no'])){ echo $lul_data['lul_container_no'];}?>" required>

                        </div>
                    </div>
                   

                    <div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4">Time In</label>
                        <div class="col-lg-8">
                            <?php
                                date_default_timezone_set("Africa/Nairobi");
                                $date = date('h:i A', time());
                            ?>
                            <!-- <input type="text"  id='timepicker' class="form-control" name="lul_time_in" value="<?php if(isset($lul_data['lul_time_in'])){ echo $lul_data['lul_time_in'];}?>"required> -->
                            <input type="text"  id='timepicker1' class="form-control" name="lul_time_in" value="<?php if(isset($lul_data['lul_time_in'])){ echo $lul_data['lul_time_in'];}else{echo $date;}?>" readonly required>

                        </div>
                    </div>

                    <div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4">Commodity</label>
                        <div class="col-lg-8">
                            <select class="form-control" name="lul_com_id" id="lul_com_id_input_id" required>
                                <option value="">--Select--</option>
								<?php
									foreach($com_list as $com_row){
								?>
                                		<option value="<?php echo $com_row['com_id']; ?>" <?php if(isset($lul_data['lul_com_id']) && $lul_data['lul_com_id']==$com_row['com_id']){ echo "selected=selected";}?>><?php echo $com_row['com_name']; ?></option>
										
								<?php
									}
								?>
                            </select>

                        </div>
                    </div>
					
					<div class="form-group col-md-6">
                        <label class="col-lg-4 col-sm-4 ">Destination (From)</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" name="lul_destination" value="<?php if(isset($lul_data['lul_destination'])){ echo $lul_data['lul_destination'];}?>" required>

                        </div>
                    </div>

                    

                </div>
                <!---->

           
            </div>
                <header class="panel-heading">
                    <h4 class="text-center"> 
                        <b>Commodity Details</b>
                        <a class="btn btn-sm btn-default pull-right" id="add_more_ml_id">Add more</a>                        
                    </h4>
                </header>

                <div class="panel-body">
                    <section id="unseen">
                        <table class="table table-bordered table-striped table-condensed col-md-12">
                            <thead>
                                <tr>
                                    <th class="col-md-3">Material Name</th>
                                    <th class="numeric col-md-3">UOM</th>
                                    <th class="col-md-3">Total Weight</th>
                                    <th class="col-md-3">No of Bags / Bales</th>
                                    <th class="col-md-3"> &nbsp;</th>

                                </tr>
                            </thead>
                            <tbody id="tbody_id">     

                            </tbody>
                        </table>

                        <div class=" col-lg-offset-5">
                            <div class="col-lg-2">
                                <button type="submit" class="btn btn-success"> <i class="fa fa-thumbs-up"></i>&nbsp; Register</button>
                            </div>

                        </div>

                    </section>
                </div>

        </section>
    </form>    
</div>

<script type='text/javascript'>
    ml_list     = <?php echo json_encode($ml_list);?>;
    unl_list    = <?php echo json_encode($unl_list);?>;
    $(document).ready(function(){
        $('#lul_com_id_input_id').change(function(){
            $('#tbody_id').html('');
            $('#add_more_ml_id').click();            
        });
    });
    $('#add_more_ml_id').click(function(){
        lul_com_id_val = $('#lul_com_id_input_id').val();
        var numcls = $('.tbody_tr_cls').length;
        append1 = '<tr class="tbody_tr_cls" id="tbody_tr_id_'+numcls+'">'+
                    '<td><div class="form-group col-md-12" style="margin-left: -5px; padding: 0;">'+
                    '<select class="form-control ml_details_cls" name="luml_ml_id[]" id="ml_details_id_'+numcls+'" data-common_num="'+numcls+'">'+
                    '<option selected="">--Select--</option>';
        append2 = '';
        $.each(ml_list,function(i,n){
            if(lul_com_id_val==n.ml_com_id){
                append2 += '<option value="'+n.ml_id+'">'+n.ml_name+'</option>';
            }
        });
        append3 = '</select></div></td><td>'+
                    '<div class="form-group col-md-12" style="margin-left: -5px; padding: 0;">'+
                    '<select class="form-control" name="luml_unl_id[]">'+
                    '<option value="">--Select Unit--</option>';
        append4 = '';
        $.each(unl_list,function(i1,n1){
            append4 += '<option value="'+n1.unl_id+'">'+n1.unl_unit+'</option>'
        });
        append5 = '</select></div></td><td>'+
                    '<input type="text" class="form-control enter_total_wit_cls" name="luml_total_weight[]" data-common_num_wit="'+numcls+'">'+
                    '</td><td id="tbody_tr_td_num_bal_bag_id_'+numcls+'">'+
                    '<input type="hidden" class="form-control enter_total_bag_cls" name="luml_no_of_bag[]" id="enter_total_bag_id_'+numcls+'">'+
                    // '<input type="hidden" class="form-control enter_bal_bag_cls" name="bal_bag[]" id="enter_bal_bag_id_'+numcls+'">'+
                    '&nbsp;<p  id="enter_total_wit_id_'+numcls+'" ></p></td>'+
                    '<td class="" >'+
                    '<a class="btn btn-sm btn-danger fa fa-times tr_close_cls" data-common_num_close="'+numcls+'" id="tbody_tr_close_id_'+numcls+'"></a></td></tr>';
        $('#tbody_id').append(''+append1+''+append2+''+append3+''+append4+''+append5+'');
    });

    $('body').on('change','.ml_details_cls',function(){
        this_id                 = $(this).attr('id');
        this_ml_val             = $('#'+this_id+'').val();
        this_common_num_val     = $('#'+this_id+'').data('common_num');        
        $.each(ml_list,function(i,n){
            if(this_ml_val==n.ml_id){
                // $('#enter_total_wit_id_'+this_common_num_val).append(''+n.ml_total_stock+'');
            }
        });
    });

    $('body').on('keyup keydown','.enter_total_wit_cls',function(){
        this_common_num_val     = $(this).data('common_num_wit');
        this_ml_val             = $('#ml_details_id_'+this_common_num_val).val();
        this_val                = $(this).val();
        $('#enter_total_bag_id_'+this_common_num_val).val('');
        $('#enter_total_wit_id_'+this_common_num_val).html('');
        $.each(ml_list,function(i,n){
            if(this_ml_val==n.ml_id){
                bal_c   = this_val/n.ml_unit_kg;
                bal     = n.ml_total_stock-bal_c;
                // $('#enter_total_wit_id_'+this_common_num_val).append(''+n.ml_total_stock+' / '+bal);
                $('#enter_total_wit_id_'+this_common_num_val).append(''+bal_c+'');
                $('#enter_total_bag_id_'+this_common_num_val).val(''+bal_c);
                // $('#enter_bal_bag_id_'+this_common_num_val).val(''+bal);
            }
        });
        check_total_bg_and_ton();
    });

    $('body').on('click','.tr_close_cls',function(){
        this_id                 = $(this).attr('id');
        this_common_num_val     = $('#'+this_id+'').data('common_num_close');  
        $( "#tbody_tr_id_"+this_common_num_val+'').remove();

    });
    

    function check_total_bg_and_ton(){
        total_bag = 0;
        total_wit = 0;
        total_ton = 0;
        $('.enter_total_wit_cls').each(function(i,n){
            this_t_wit = $(this).val();
            iNum = parseFloat(this_t_wit);
            total_wit = total_wit+iNum;
        });
        total_ton = total_wit/1000;
        
        $('#total_ton_id').val(total_ton);



        $('.enter_total_bag_cls').each(function(i,n){
            this_t_bag = $(this).val();
            total_bag = total_bag+parseInt(this_t_bag,10);
        });
        
        $('#total_bag_id').val(total_bag);

    }

</script>

<script type='text/javascript'> 
	$('#timepicker').timepicki(); 
</script>