  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/jquery-datepicker.css">
<div class="breadcrumbs">
            <div class="breadcrumbs-inner">
                <div class="row m-0">
                    <div class="col-sm-4">
                        <div class="page-header float-left">
                            <div class="page-title">
                                <h1>Edit Goods Received Note (GRN)</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
                <style>
.content{position: relative;}
.overlay{position: absolute;left: 0; top: 0; right: 0; bottom: 0;z-index: 2;background-color: rgba(255,255,255,0.8);position: fixed;   overflow-y: scroll;}
.overlay-content {
    position: absolute;
    transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
    top: 50%;
    left: 15%;
    right: 0;
    text-align: center;
    color: #555; 
    position: fixed; 
   overflow-y: scroll;
}

.tableFixHead          { overflow: auto; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
</style>  
                  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">                                                   
    <div class="overlay" style="display:none" id="load"><div class="overlay-content"><img src="<?php echo base_url(); ?>assets/images/loader.gif" alt="Loading..." style="width: 60px;"/></div></div>
                    
      
          <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/lib/chosen/chosen.min.css">
        
        <div class="content">
            <div class="animated fadeIn">
                
                <div class="row">
                    
                    <div class="col-md-12 center-block">
                    
                     <!--button class="btn btn-secondary btn-sm" id="po_grn" onclick="show_po();" name="po_grn"> 
                                                    <i class="ace-icon fa fa-floppy-o bigger-120 blue"></i>
                                                   PO GRN
                                            </button-->
                                           
                                            <button class="btn btn-secondary btn-sm" id="d_grn" onclick="show_dgrn();">
                                                    <i class="ace-icon fa fa-times red2"></i>
                                                   GRN <?php echo $id  ?>
                                            </button>
                </div>
                </div>
                
                 <div class="space" style="padding-bottom: 10px;"></div>
                
               <div id="po" style="display:none">
                   
                    <div class="row">
                    
                                                     
                                               </div>
                                               <div class="space" style="padding-bottom: 10px;"></div>
                       
               
                    <div class="row">
                                   
                                    </div>
                   
               </div>
               
               <div id="direct" style="display:none">
                   
                    <div class="row">
                                                     
                                                         
                                                     
                                               </div>
                                               <div class="space" style="padding-bottom: 10px;"></div>
                                                 <div class="row">
                                    									<div class="col-lg-12" style="padding-bottom: 10px;overflow:scroll;height:280px;width:100%;overflow:auto">
                                    										<table id="simple-table" class="table table-bordered tableFixHead">
                                    											<thead class="thead-dark">
                                    												<tr >
                                    													
                                    													
                                    													<th>Batch Code</th>
                                    													<th>Item Description</th>
                                    													<th style="text-align:left">Buying</th>
                                    													<th style="text-align:left">Selling</th>
                                    													<th style="text-align:left">Retail</th>
                                                                                        <th style="text-align:right; width: 130px;"><span id="cr2_chng" >Quantity</span>  </th>
                                                                                        <th>Mfd Date</th>
                                                                                        <th>Exp Date</th>
                                                                                        <th style="text-align:right; width: 50px;"><span id="cr2_chng">Action</span>  </th>
                                    
                                    													
                                    													
                                    
                                    													
                                    												</tr>
                                    											</thead>
                                            
                                    											<tbody id="show_datad" >
                                    									
                                    								
                                    											</tbody>
                                    										</table>
                                    									</div><!-- /.span -->
                                                                                                            
                                                                                                            
                                    								</div><!-- /.row -->
                                    								
                                    								
                                               
                <div class="row">
                    
                     <div class="col-lg-12" style="padding-bottom: 10px;">
                         
                         <table class="table table-bordered" id="grnitm">
                                
                                <thead class="thead-dark" id="thed"></thead>
                               
                             <tbody id="tb_bdyd">
                           
                        </tbody>
                        </table>
                         
                         </div>
                    
               </div>
               
                    <div class="row">
                                    									<div class="col-lg-12" style="padding-bottom: 10px;">      
                                    
                                                                <div class="row" style="float: right; text-align: right;">
                                                                        
                                        <div class="col-md-12 center-block">
                                            <a href="https://newapp.nance.lk/view_grn"><button class="btn btn-secondary btn-sm"  >Done</button></a> 
                                            
                                                 <!--a href="javascript:history.go(-1);"><button class="btn btn-secondary btn-sm">
                                                    <i class="ace-icon fa fa-floppy-o bigger-120 blue"></i>Done</button>
                                                    
                                                    </a--> 
                                                    
                                                     
                                            
                                        </div>
                                        
                                    </div>
                                     </div>
                                    </div>
               </div>
                
                
            </div>
        </div>
        
        <!--MODAL DELETE-->
         <form id="del_form">
            <div class="modal fade" id="Modal_Delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop='static' data-keyboard='false'>
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Delete Product</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                       <strong>Are you sure to delete this record?</strong>
                  </div>
                  <div class="modal-footer">
                    <input type="hidden" name="product_code_delete" id="product_code_delete" class="form-control">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                    <button type="button" type="submit" id="btn_delete" class="btn btn-primary">Yes</button>
                  </div>
                </div>
              </div>
            </div>
            </form>
        <!--END MODAL DELETE-->
        
        <!--MODAL edit-->
         <form id="update_form">
            <div class="modal fade" id="Modal_Edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop='static' data-keyboard='false'>
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Record</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                       <div class="form-group row">
                                <label class="col-md-4 col-form-label">Batch</label>
                                <div class="col-md-8">
                                 <input type="text" name="prod_code" id="prod_code" class="form-control"  value="">
                               
                                 </div>
                            </div>
                            
                            <div class="form-group row">
                                <label class="col-md-4 col-form-label">Quantity</label>
                                <div class="col-md-8">
                                <input type="hidden" name="temp_auid" id="temp_auid" class="form-control"  value="">
                                <input type="hidden" name="prod_grn" id="prod_grn" class="form-control"  value="">
                                
                                 <input type="text" name="prod_qty" id="prod_qty" class="form-control"  value="">
                                  
                                 </div>
                            </div>
                            
                            <div class="form-group row">
                                <label class="col-md-4 col-form-label">Buying Price</label>
                                <div class="col-md-8">
                                 <input type="text" name="prod_price" id="prod_price" class="form-control"  value="">
                                 </div>
                            </div>
                            
                             <div class="form-group row">
                                <label class="col-md-4 col-form-label">Selling Price</label>
                                <div class="col-md-8">
                                 <input type="text" name="prod_sprice" id="prod_sprice" class="form-control"  value="">
                                 </div>
                            </div>
                            
                            
                             <div class="form-group row">
                                <label class="col-md-4 col-form-label">Retail Price</label>
                                <div class="col-md-8">
                                 <input type="text" name="prod_rprice" id="prod_rprice" class="form-control"  value="">
                                 </div>
                            </div>
                            
                             <div class="form-group row">
                                <label class="col-md-4 col-form-label">Mfd  Date</label>
                                <div class="col-md-8">
                                 <input type="text" name="prod_map" id="prod_map" class="form-control input-sm form-control-sm datepicker"  value="">
                                 </div>
                            </div>
                            
                            <div class="form-group row">
                                <label class="col-md-4 col-form-label">Exp Date</label>
                                <div class="col-md-8">
                                 <input type="text" name="prod_exp" id="prod_exp" class="form-control input-sm form-control-sm datepicker"  value="">
                                 </div>
                            </div>
                            
                  </div>
                  <div class="modal-footer">
                    <input type="hidden" name="product_code_delete" id="product_code_delete" class="form-control">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" type="submit" id="btn_update" class="btn btn-primary">Update</button>
                  </div>
                </div>
              </div>
            </div>
            </form>
        <!--END MODAL edit-->
        
        <div class="clearfix"></div>


<script src="<?php echo base_url(); ?>assets/js/popper.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <script src="<?php echo base_url(); ?>assets/js/jquery-ui.js"></script>
  <script src="<?php echo base_url(); ?>assets/js/lib/chosen/chosen.jquery.min.js"></script>

<script>

 $( function() {
   $( ".datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
    $( ".datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd");
  } );
  
  

  
  
    function show_po(){
        $("#po").css("display", "block");
        $("#direct").css("display", "none");
        document.getElementById('po_grn').disabled = true;
        document.getElementById('d_grn').disabled = false;
    }
    
    function show_dgrn(){
        $("#po").css("display", "none");
        $("#direct").css("display", "block");
        //document.getElementById('po_grn').disabled = false;
        document.getElementById('d_grn').disabled = true;
    }

    $(document).ready(function(){
     // document.getElementById('po_grn').disabled = true;
      show_dgrn();
      show_product();
    });
    
      jQuery(document).ready(function() {
        jQuery(".standardSelect").chosen({
            disable_search_threshold: 5,
            no_results_text: "Oops, nothing found!",
            width: "100%"
        });
    });
    
     
     
        
        function selectitem(){
            document.getElementById("buy_price").focus();
        }
      
      
      $("#buy_price").keyup(function(event) {
            if (event.keyCode === 13) {
                document.getElementById("grn_qty").focus();
            }
        });
        
        $("#grn_qty").keyup(function(event) {
            if (event.keyCode === 13) {
                document.getElementById("grn_exp").focus();
            }
        });
        
        $("#grn_exp").keyup(function(event) {
            if (event.keyCode === 13) {
                document.getElementById("itemadd").focus();
            }
        });

      function selectitem1(){
          
    var code = $( "#dposelect option:selected" ).val();      
    var personName = $( "#dposelect option:selected" ).text();
    const codeonly = personName.split("|", 1);
    const desonly = personName.split("|");
    var newRow = document.createElement("tr");
    
    var id = document.createElement("td");
    var ItemCode = document.createElement("td");
    var ItemDescription = document.createElement("td");
    var buyprice = document.createElement("td");
    var Unit = document.createElement("td");
    var Recived = document.createElement("td");
    var action = document.createElement("td");
    var expdt = document.createElement("td");
    
    ItemDescription.innerHTML = desonly[1];
    ItemCode.innerHTML = codeonly;
    buyprice.innerHTML = '<input type="text" style="text-align: right;" class="col-xs-12 col-sm-12 input-sm form-control-sm form-control" name="dpo_price[]" id="pr'+code+'">';
    Unit.innerHTML = desonly[2] ;
    Recived.innerHTML = '<input type="text" style="text-align: right;" class="col-xs-12 col-sm-12 input-sm form-control-sm form-control" name="dpo_qty[]" id="'+code+'">';
    action.innerHTML = '<a href="javascript:void(0);" class="remCF removeBtn btn btn-outline-danger btn-sm">X</a>'; 
    expdt.innerHTML = '<input type="text" style="text-align: right;" class="col-xs-12 col-sm-12 input-sm form-control-sm form-control datepicker" name="exp_date[]" id="dt'+code+'">';
    
    newRow.append(ItemCode,ItemDescription,buyprice,Unit,Recived,expdt,action);
    document.getElementById("show_datad").appendChild(newRow);
    document.getElementById("dposelect").text = '';
    
    $( ".datepicker" ).datepicker();
    $( ".datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd");
    
   
      }
      
      //function show all product
    function show_product(){
            document.getElementById("load").style.display = "block";
        
            var id = "<?php echo $id; ?>";
   
            $.ajax({
                type  : 'ajax',
                url   : '<?php echo base_url(); ?>getinvgrn',
                async : true,
                method:'POST',
                data  : {id:id},
                dataType : 'json',
                success : function(data){
                  console.log(data);
                    var html = '';
                    var i;
                    var tot = 0;
                    var tot_item = 0;
                    for(i=0; i<data.length; i++){
                        //var tot = tot + parseFloat(data[i][4] * data[i][5]);
                       // var tot_item = tot_item + parseFloat(data[i][5]);
                        html += '<tr>'+
                                '<td>'+data[i][0]+'</td>'+
                                '<td>'+data[i][1]+'</td>'+
                                '<td style="text-align:right">'+data[i][2]+'</td>'+
                                '<td style="text-align:right">'+data[i][3]+'</td>'+
                                '<td style="text-align:right">'+data[i][4]+'</td>'+
                                '<td style="text-align:right">'+data[i][5]+'</td>'+
                                '<td style="text-align:right">'+data[i][6]+'</td>'+
                                '<td style="text-align:right">'+data[i][7]+'</td>'+
                                '<td style="text-align:right;">'+
                                '<div class="hidden-sm hidden-xs btn-group">'+
                                ' <button class="btn btn-outline-danger btn-sm" name="tax" id="'+data[i][8]+'" onclick ="del_data(this.id);">X</button>'+
                                ' <button class="btn btn-outline-danger btn-sm" name="tax" id="'+data[i][8]+'" onclick ="edit_data(this.id);">Edit</button>'+
                                    //'<a href="javascript:void(0);" class="btn btn-xs btn-success item_edit" data-product_code="'+data[i].inv_pro_id+'" data-product_price="'+data[i].product_name+'" data-product_prc="'+data[i].unit_price+'" data-qty="'+data[i].qty+'"><i class="ace-icon fa fa-pencil bigger-120"></i></a>'+' '+
                                   // '<a href="javascript:void(0);" class="btn btn-xs btn-danger item_delete" data-product_code="'+data[i].po_itm_id+'"><i class="ace-icon fa fa-trash-o bigger-120"></i></a>'+
                               '</div>'+
                                '</td>'+
                                '</tr>';
                    }
                    $('#show_datad').html(html);
                   // $('[name="inv_total"]').val(tot.toFixed(2));
                    //$('[name="net"]').val(tot.toFixed(2));
                   // $('[name="inv_tot_item"]').val(tot_item);
                   // cal_total(); cal_dis_pc();
                    document.getElementById("load").style.display = "none";
               
                 
            }
 
            });
        }
      
    function del_data(clickedID){
            var product_code = clickedID;
            // alert(product_code);
            $('#Modal_Delete').modal('show');
            $('[name="product_code_delete"]').val(product_code);
        };
        
        
    $('#btn_delete').on('click',function(){
        document.getElementById("load").style.display = "block";
             var rt = document.getElementById('temp_auid').value;
             
              swal({
                  title: "Are you sure?",
                  text: "Update, Your Edited details will be Updated",
                  icon: "warning",
                  buttons: true,
                  dangerMode: true,
                })
                .then((willDelete) => {
                  if (willDelete) {
                                 $.ajax({
                                    type  : 'ajax',
                                    method : "POST",
                                    url   : "<?php echo site_url('del_grn_record')?>",
                                    async : true,
                                    dataType : 'json',
                                    data: $("#del_form").serialize(),
                                    success : function(data){
                                         swal(data);
                                        show_product();
                                        
                                        $('#Modal_Delete').modal('hide');
                                        document.getElementById("load").style.display = "none";
                                    }
             
                                });
                  } else {
                    swal("No Changes");
                    $('#Modal_Delete').modal('hide');
                    document.getElementById("load").style.display = "none";
                  }
                });
            
        });
        
        
    function edit_data(clickedID){
            var product_code = clickedID;
             document.getElementById("load").style.display = "block";
                     
                     $.ajax({
                type  : 'ajax',
                url   : '<?php echo base_url(); ?>edit_grnitem',
                async : true,
                method:'POST',
                data  : {id:product_code},
                dataType : 'json',
                success : function(data){
                  $('#Modal_Edit').modal('show');
                    $('[name="temp_auid"]').val(data[0][8]);
                    $('[name="product_code_delete"]').val(data[0][8]);
                    $('[name="prod_qty"]').val(data[0][1]);
                   // $('[name="prod_name"]').val(data[0][0]);
                    $('[name="prod_price"]').val(data[0][2]);
                    
                    $('[name="prod_sprice"]').val(data[0][3]);
                    $('[name="prod_rprice"]').val(data[0][4]);
                    $('[name="prod_map"]').val(data[0][5]);
                    $('[name="prod_exp"]').val(data[0][6]);
                    $('[name="prod_grn"]').val(data[0][7]);
                    $('[name="prod_code"]').val(data[0][0]);
                    
                    
                    document.getElementById("load").style.display = "none";
               
                 
            }
 
            });
            
            
        };  
      
      //save edited data
    $('#btn_update').on('click',function(){
        
        var mDate = document.getElementById("prod_map").value;
        var eDate = document.getElementById("prod_exp").value;
        
          if ((Date.parse(eDate) <= Date.parse(mDate))) {
      swal("Exp date should be greater than Mfd date");
      //document.getElementById("ed_endtimedate").value = "";
    }else{
       document.getElementById("load").style.display = "block";
             var rt = document.getElementById('temp_auid').value;
             
              swal({
                  title: "Are you sure?",
                  text: "Update, Your Edited details will be Updated",
                  icon: "warning",
                  buttons: true,
                  dangerMode: true,
                })
                .then((willDelete) => {
                  if (willDelete) {
                                 $.ajax({
                                    type  : 'ajax',
                                    method : "POST",
                                    url   : "<?php echo site_url('updte_grn_record')?>",
                                    async : true,
                                    dataType : 'json',
                                    data: $("#update_form").serialize(),
                                    success : function(data){
                                         swal(data);
                                        show_product();
                                        
                                        $('#Modal_Edit').modal('hide');
                                        document.getElementById("load").style.display = "none";
                                    }
             
                                });
                  } else {
                    swal("No Changes");
                    $('#editmodel').modal('hide');
                    document.getElementById("load").style.display = "none";
                  }
                });  
    }
        
       
            
        });
      
     
    
   $("#po_tbl").on('onkeyup','.txt_val',function(){
       var currentRow=$(this).closest("tr");  
         var col1=currentRow.find("td:eq(0)").html();
         alert(crw);
   })
        
    
</script>