<script type="text/javascript">
  customer_products = jQuery.parseJSON($(".customer_products").val());
  grades = jQuery.parseJSON($(".grades").val());
  units = jQuery.parseJSON($(".units").val());
  
  
  // Initialize Select2 Elements to products
  $('.product').select2({
    data: jQuery.map(customer_products, function(val,i){
    return {id: val['id'], text: val['name']+'-'+ val['code']} ;
    })
  });
  // Initialize Select2 Elements to unit
  $('.unit').select2({
    data: jQuery.map(units, function(val,i){
      if(val['product_id'] == $('.unit').select2().attr('pid')){
        return {id: val['id'], text: val['unit']};
      }
    })
  });
  // Initialize Select2 Elements to grade
  $('.grade').select2({
    data: jQuery.map(grades, function(val,i){
      if(val['product_id'] == $('.grade').select2().attr('pid') && val['unit_id'] == $('.grade').select2().attr('uid')){
        return {id: val['id'], text: val['grade']};
      }
    })
  });

  // add button action
  $(".add_button").click(function(){
    $(".edit_table tr:last").after("<tr><td></td><td><select class='product form-control select2' style='width:100%;'><option value='' selected>---- select -----</option></select></td><td><select class='unit form-control select2' style='width:100%;'><option value='' selected>---- select -----</option></select></td><td><select class='grade form-control select2' style='width:100%;'><option value='' selected>---- select -----</option></select></td><td><input class='qty' type='number' value='' name=''></td><td><button class='btn-danger g_delete' id=''><i class='fa fa-fw fa-trash'></i></button></td></tr>");
      // Initialize Select2 Elements to products
      $('.product').select2({
        data: jQuery.map(customer_products, function(val,i){
        return {id: val['id'], text: val['name']+'-'+ val['code']} ;
        })
      });
  });

  //prodoct on changes
  $(".product").change(function(){
     $(this).closest('td').nextAll("td").find("select").attr("pid",$(this).val());
     $(this).closest('td').nextAll("td").find("select").empty();
     // Initialize Select2 Elements to unit
     $('.unit').select2({
       data: jQuery.map(units, function(val,i){
         if(val['product_id'] == $('.unit').select2().attr('pid')){
           return {id: val['id'], text: val['unit']};
         }
       })
     });
  });

  //unit on changes
  $(".unit").change(function(){
     $(this).closest('td').next("td").find("select").attr("uid",$(this).val());
     $(this).closest('td').next("td").find("select").empty();
     // Initialize Select2 Elements to grade
     $('.grade').select2({
       data: jQuery.map(grades, function(val,i){
         if(val['product_id'] == $('.grade').select2().attr('pid') && val['unit_id'] == $('.grade').select2().attr('uid')){
           return {id: val['id'], text: val['grade']};
         }
       })
     });
  });
  $(document).on('click', "a.tabclick", function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
  });
</script>


<!DOCTYPE html>
<html>
<head>
  @include('title')
  

  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="{{asset('lte/bower_components/bootstrap/dist/css/bootstrap.min.css')}}">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{{asset('lte/bower_components/font-awesome/css/font-awesome.min.css')}}">
  <!-- Ionicons -->
  <link rel="stylesheet" href="{{asset('lte/bower_components/Ionicons/css/ionicons.min.css')}}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{{asset('lte/dist/css/AdminLTE.min.css')}}">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{{asset('lte/dist/css/skins/_all-skins.min.css')}}">
  
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="{{asset('lte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css')}}">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

  <!-- iCheck for checkboxes and radio inputs -->
  <link rel="stylesheet" href="{{asset('lte/plugins/iCheck/all.css')}}">
  
</head>
<body class="hold-transition skin-blue fixed sidebar-mini">
<div class="wrapper">
  
  @include('headertag')
  <!-- Left side column. contains the logo and sidebar -->
  @include('leftside')
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <section class="content-header">

      <h1>
        MR Approval
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">MR</a></li>
        <li class="active">MR Approval List</li>
      </ol>
    </section>

   <!-- Main content -->
    <section class="content">
      <div class="box box-default">
        <div class="box-header with-border">
          <div class="form-group">
               <form name="add_name" id="add_name">  
               @foreach($productList as $list)
               <input type="hidden" name="productList[]"  value="{{ $list}}">
               @endforeach

                  <div class="alert alert-danger print-error-msg" style="display:none">
                  <ul></ul>
                  </div>

                  <div class="alert alert-success print-success-msg" style="display:none">
                  <ul></ul>
                  </div>

                  <div class="table-responsive">  
                      <table class="table table-bordered" id="dynamic_field">  
                        @foreach($products as $prod)
                            <tr>
                              <td>
                                  <select name="item[]" class="form-control item_unit">
                                  <option value="{{$prod->Product->id}}">{{$prod->Product->name}}</option>
                                  </select>
                              </td>  
                               <td>
                                  <select name="item_unit[]" class="form-control item_unit">
                                
                                  </select>
                              </td>
                              <td>
                                  <select name="item_grade[]" class="form-control item_grade">
                                   
                                  </select>
                              </td>
                              <td>
                                  <input type="text" name="qty[]" placeholder="Enter Qty" value="{{$prod->qty}}" class="form-control name_list" />
                              </td> 
                              <td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td>
                             </tr>
                            @endforeach
                      

                          <button type="button" name="add" id="add" class="btn btn-success">Add More</button>
                      </table>  
                      <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
                  </div>

               </form>  
          </div> 
      </div>
    </div>
</section>
 </section>
      <!-- /.content -->
    </div>
  <!-- /.content-wrapper -->
  
  @include('footertag')

  <!-- Control Sidebar -->
  @include('rightside')
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

  <!-- jQuery 3 -->
  <script src="{{asset('lte/bower_components/jquery/dist/jquery.min.js')}}"></script>
  <!-- jQuery UI 1.11.4 -->
  <script src="{{asset('lte/bower_components/jquery-ui/jquery-ui.min.js')}}"></script>
  <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
  <script>
    $.widget.bridge('uibutton', $.ui.button);
  </script>
  <!-- Bootstrap 3.3.7 -->
  <script src="{{asset('lte/bower_components/bootstrap/dist/js/bootstrap.min.js')}}"></script>
  
  <!-- Sparkline -->
  <script src="{{asset('lte/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js')}}"></script>
  
  <!-- Bootstrap WYSIHTML5 -->
  <script src="{{asset('lte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js')}}"></script>
  <!-- Slimscroll -->
  <script src="{{asset('lte/bower_components/jquery-slimscroll/jquery.slimscroll.min.js')}}"></script>
  <!-- FastClick -->
  <script src="{{asset('lte/bower_components/fastclick/lib/fastclick.js')}}"></script>
  <!-- AdminLTE App -->
  <script src="{{asset('lte/dist/js/adminlte.min.js')}}"></script>
  
  <!-- AdminLTE for demo purposes -->
  <script src="{{asset('lte/dist/js/demo.js')}}"></script>

  <!-- iCheck 1.0.1 -->
<script src="{{asset('lte/plugins/iCheck/icheck.min.js')}}"></script>



<script type="text/javascript">
    $(document).ready(function(){      
      var postURL = "<?php echo url('addmore'); ?>";
      var i=1;
      var produt = $productList;
     // var productList = 

      $('#add').click(function(){  
           i++;  

            var n = $("input[name^='productList']").length;


//Populating dropdown
               /* for (var i = 1; i <= n; i++) {
                    $('.input_fields_wrap div .possible_choices').append(' Choice ' + i + ': <input id="choice" class="posCho" type="text" name="choices[]" /><br>'); //the possible choices
                }*/


           $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><select name="item_unit[]" class="form-control item_unit"><option value="">Select Unit</option></select></td><td><select name="item_grade[]" class="form-control item_grade"><option value="">Select Grade</option></select></td><td><input type="text" name="qty[]" placeholder="Enter Qty" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>'); 




      });  

      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  

      $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });

      $('#submit').click(function(){            
           $.ajax({  
                url:postURL,  
                method:"POST",  
                data:$('#add_name').serialize(),
                type:'json',
                success:function(data)  
                {

    /*$("#find_host").click(function(){   
        var ckbCheckAll = $('#ckbCheckAll').val();
        var sortresult = $('#sortresult').val();
        var multiple = $('#multi').serializeArray();
        var dataString = "ckbCheckAll+"&sortresult="+sortresult+"&multiple="+multiple;
        
          if(no_nights.length>0){ // this is just a condition on a bit of data i havnt included
            $.ajax({
                type: "GET",
                url: "includes/file.php",
                data: dataString,
                success: function(server_response){
                $('#host_result').html(server_response).show();
                }
            });
          }return false;*/
/*                  alert("Hii");
                    if(data.error){
                        printErrorMsg(data.error);
                    }else{
                        i=1;
                        $('.dynamic-added').remove();
                        $('#add_name')[0].reset();
                        $(".print-success-msg").find("ul").html('');
                        $(".print-success-msg").css('display','block');
                        $(".print-error-msg").css('display','none');
                        $(".print-success-msg").find("ul").append('<li>Record Inserted Successfully.</li>');
                    }*/
                }  
           });  
      });  



    });  
</script>
</body>
</html>