<!DOCTYPE html>
<html>
<head>
  @include('title')
  <!-- 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')}}">
  <!-- Select2 -->
  <link rel="stylesheet" href="{{asset('lte/bower_components/select2/dist/css/select2.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')}}">

  <!-- 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">
</head>
<script type="text/javascript">
  var  customer_products = {};
  var grades = {};
  var units = {};
</script>


<body class="hold-transition skin-blue sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
  <div id="preload" style="opacity:1;background:rgba(0,0,0,0.3);position: fixed;top:0;right:0;bottom:0;left:0;z-index:1050; display: block;">
    <div class="box box-danger">
      <div class="box-header">
        <h3 class="box-title">Page Loading...</h3>
      </div>
      <div class="box-body">
        Please Wait!
      </div>
      <!-- /.box-body -->
      <!-- Loading (remove the following to stop the loading)-->
      <div class="overlay">
        <i class="fa fa-refresh fa-spin"></i>
      </div>
      <!-- end loading -->
    </div>
    <!-- /.box -->
  </div>
  @include('headertag')
  <!-- =============================================== -->

  <!-- Left side column. contains the sidebar -->
  @include('leftside')

  <!-- =============================================== -->

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        {{strtoupper($mr->customer->name)}}
        <br>
        @if($mr->location)
        {{strtoupper($mr->location->location)}}
        @endif
        <small>Material Request</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Material Request</a></li>
        <li class="active">Edit</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

      <form action="{{route('mr.approved',$mr->id)}}" method="POST" id="aprForm">
      <input type="hidden" name="customer_id" id="customer_id" value="{{$mr->customer_id}}">

      <!-- Default box -->
      <div class="box">
        <div class="box-header with-border">
          <h3 class="box-title">PRODUCT LIST</h3>
        </div>
        <div class="box-body">
          <div class="row">
            <div class="col-xs-12">
              <div class="box">
                
                
                <div class="box-body table-responsive no-padding">
                  <table class="table table-hover edit_table">
                    <tr>
                      <th>SlNo</th>
                      <th>Product</th>
                      <th>Unit</th>
                      <th>Packing</th>
                      <th>Approved Qty</th>
                      <th>Req. Qty</th>
                      <th>Delete</th>
                    </tr>
                    @foreach($mr_products as $products)
                    <tr>
                      <td></td>
                      <td>
                      {{$products->product->name}}
                      <input type="hidden" value="{{$products->product_id}}" name="product{{$products->id}}">
                      </td>
                      <td>
                      <select class="unit form-control" pid="{{$products->product_id}}" name="unit{{$products->id}}" style="width: 100%;" required="required">
                      @if($products->unit_id != -1)
                      <option value="{{$products->unit_id}}" selected="selected">{{$products->unit->unit}}</option>
                      @endif
                      </select>
                      </td>
                      <td>
                      
                      @if($products->grade)
                      <select class="grade form-control" pid="{{$products->product_id}}" uid="{{$products->unit_id}}" name="grade{{$products->id}}" style="width: 100%;" >
                      <option value="{{$products->grade_id}}" selected="selected">{{$products->grade->grade}}</option>
                      </select>
                      @else
                      @endif
                      
                      </td>
                      <td><input class="qty" type="number" value="{{$products->qty}}" name="qty{{$products->id}}" required="required"></td>
                      <td>{{$products->qty}}</td>
                      <td><button class="btn-danger g_delete" id="{{$products->id}}"><i class="fa fa-fw fa-trash"></i></button>&nbsp;<button class="btn-warning r_replace" id="{{$products->id}}"><i class="fa fa-fw fa-exchange"></i></button></td>
                    </tr>
                    @endforeach
                  </table>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
          </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <div class="box-tools pull-left">
            <input type="submit" class="btn btn-success" name="" id="approve" title="Save" value="Approve" style="display:none;">
          </div>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-warning add_button"  title="Add">
              ADD <i class="fa fa-plus"></i></button>
          </div>
        </div>
        <!-- /.box-footer-->
      </div>
      <!-- /.box -->
      </form>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  @include('footertag')

  <!-- Control Sidebar -->
  
  <!-- /.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>
<!-- Bootstrap 3.3.7 -->
<script src="{{asset('lte/bower_components/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<!-- Select2 -->
<script src="{{asset('lte/bower_components/select2/dist/js/select2.full.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>
<script>

  $(document).ready(function () {
     $("#preload").show();
     $("input[type=submit]").hide();
    $.get("{{url('customer_products')}}",{customer_id: $("#customer_id").val()}, function(data){

      customer_products = jQuery.parseJSON(data[0]);
      grades = jQuery.parseJSON(data[1]);
      units = jQuery.parseJSON(data[2]);

      
      
      $(".unit").filter(function(){
        var ut = null;
        ut = this;
        var pid = $(this).attr('pid');
        $.each(units,function(index,elements){
          if(elements.product_id == pid){
            $(ut).append("<option value='"+elements.id+"'>"+elements.unit+"</option>");
          }
        });
      });

      $(".grade").filter(function(){
        var grd = null;
        grd = this;
        var pid = $(this).attr('pid');
        $(grd).append("<option value=''>---select---</option>");
        $.each(grades,function(index,elements){
          if(elements.product_id == pid){
            $(grd).append("<option value='"+elements.id+"'>"+elements.grade+"</option>");
          }
        });
      });
      var i = 1;
      $('.edit_table td:first-child').each(function() {
          $(this).text(i); 
          i++;
      });
      $("#preload").hide();
      $("input[type=submit]").show();
    });
    
    $(document).on("change",".product", function()
    {
      $(this).removeAttr("selected");
      var chpr = this;
      $(this).closest('td').nextAll("td").find("select").empty();
      var pid = $(this).val();
      $.get("{{url('customer_units')}}", {product_id: $(this).val()}, function(data){
          units = jQuery.parseJSON(data[1]);
          grades = jQuery.parseJSON(data[0]); 

          $(chpr).closest("tr").find("td:nth-child(3) .unit").attr("pid",pid);
          $(chpr).closest("tr").find("td:nth-child(4) .grade").attr("pid",pid);
          $.each(units, function(index,elements){
            $(chpr).closest("tr").find("td:nth-child(3) .unit").append("<option value='"+elements.id+"'>"+elements.unit+"</option>");
          });
          $(chpr).closest("tr").find("td:nth-child(4) .grade").append("<option value=''>---select---</option>");
          $.each(grades, function(index,elements){
            $(chpr).closest("tr").find("td:nth-child(4) .grade").append("<option value='"+elements.id+"'>"+elements.grade+"</option>");
          });
      });
      
    }); 

    $(document).on("change",".unit", function()
    {
      var unt = this;
      $(this).closest('td').next("td").find("select").empty();
      var uid = $(this).val();
      var pid = $(this).attr("pid");
      $(unt).closest("tr").find("td:nth-child(4) .grade").attr("pid",pid);
      $(unt).closest("tr").find("td:nth-child(4) .grade").attr("uid",uid);

      $.get("{{url('customer_grades')}}",{product_id: pid}, function(data){
        grades = jQuery.parseJSON(data);
        $(unt).closest("tr").find("td:nth-child(4) .grade").append("<option value=''>---select---</option>");
        $.each(grades, function(index,elements){
            $(unt).closest("tr").find("td:nth-child(4) .grade").append("<option value='"+elements.id+"'>"+elements.grade+"</option>");
        });

      });
    });

    // delete g_delete
    $(document).on("click",".g_delete", function() {
      if(confirm("Do you want to delete this item?") == true){
        if($(this).attr("id")) {
          $.post("{{url('mr_product_detele')}}",{mpid: $(this).attr("id")}, function(data){});
        }
        $(this).closest("tr").remove();
        
        var i = 1;
        $('.edit_table td:first-child').each(function() {
            $(this).text(i); 
            i++;
        });
      } else {
        event.preventDefault();
      }  

    });

    //replace r_replace
    $(document).on("click",".r_replace", function() {
      if(confirm("Do you want to replace this item?") == true){
        if($(this).attr("id")) {
          $.post("{{url('mr_product_detele')}}",{mpid: $(this).attr("id")}, function(data){});
        }
        $(this).closest("tr").after("<tr><td></td><td><select class='product form-control select2' name='products[]' style='width:100%;' required='required'><option value='' selected>---- select -----</option></select></td><td><select class='unit form-control' name='units[]' style='width:100%;' required='required'><option value='' selected>---- select -----</option></select></td><td><select class='grade form-control' name='grades[]' style='width:100%;' ><option value='' selected>---- select -----</option></select></td><td><input class='qty' type='number' value='' name='qtys[]' required='required'></td><td></td><td><button class='btn-danger g_delete' id=''><i class='fa fa-fw fa-trash'></i></button>&nbsp;<button class='btn-warning r_replace' id=''><i class='fa fa-fw fa-exchange'></i></button></td></tr>");
        $(this).closest("tr").remove();
        // Initialize Select2 Elements to products
        $('.product').select2({
          data: jQuery.map(customer_products, function(val,i){
          return {id: val['id'], text: val['name']+'-'+ val['code']} ;
          })
        });
        var i = 1;
        $('.edit_table td:first-child').each(function() {
            $(this).text(i); 
            i++;
        });
      } else {
        event.preventDefault();
      }
    });

    // add button action
    $(".add_button").click(function(){
      
      $(".edit_table tr:last").after("<tr><td></td><td><select class='product form-control select2' name='products[]' style='width:100%;' required='required'><option value='' selected>---- select -----</option></select></td><td><select class='unit form-control' name='units[]' style='width:100%;' required='required'><option value='' selected>---- select -----</option></select></td><td><select class='grade form-control' name='grades[]' style='width:100%;' ><option value='' selected>---- select -----</option></select></td><td><input class='qty' type='number' value='' name='qtys[]' required='required'></td><td></td><td><button class='btn-danger g_delete' id=''><i class='fa fa-fw fa-trash'></i></button>&nbsp;<button class='btn-warning r_replace' id=''><i class='fa fa-fw fa-exchange'></i></button></td></tr>");

        var i = 1;
        $('.edit_table td:first-child').each(function() {
            $(this).text(i); 
            i++;
        });
        // Initialize Select2 Elements to products
        $('.product').select2({
          data: jQuery.map(customer_products, function(val,i){
          return {id: val['id'], text: val['name']+'-'+ val['code']} ;
          })
        });

    });

  })

$(document).on("click","#approve", function() {
  $("#approve").attr("disabled","disabled");
  $("#aprForm").submit();
});

</script>

</body>
</html>
