<!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.8.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  supplier_products = {};
  var grades = {};
  var units = {};
</script>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
  
  @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($pr_sup_sea->supplier->name)}}<br>
        <small>Purchase Request</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="{{route('supplier.wise.pr.index')}}">Supplier Pr</a></li>
        <li class="active">Edit</li>
      </ol>
    </section>

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

      <form action="{{route('supplier.wise.pr.sea.save')}}" id="supplier_pdt_save" method="POST">
      <input type="hidden" name="supplier_id" id="supplier_id" value="{{$pr_sup_sea->supplier_id}}">
      <input type="hidden" name="pr_supplier_sea_id" id="pr_supplier_id" value="{{$pr_sup_sea->id}}">
    
      <!-- Default box -->
      <div class="box">
        <div class="box-header with-border">
          <h3 class="box-title"></h3>
        </div>
        <div class="box-body">
          <div class="row">
            <div class="col-xs-12">
              <table class="table table-bordered pdt_table">
                    <tr>
                      <th>Sl No.</th>
                      <th width="40%;">Product</th>
                      <th width="10%;">Grade/Packing</th>
                      <th>Unit</th>
                      <th>Qty</th>
                      <th>Weight</th>
                      <th>ETA</th>
                      <th width="100%;">Actual u.p.</th>
                      <th>Unit Price({{$pr_sup_sea->supplier->supplierCurrency->currency}})</th>
                      <th width="100%;">Total Price({{$pr_sup_sea->supplier->supplierCurrency->currency}})</th>
                      <th>Delete</th>
                    </tr>
                 <tbody>
                    <?php $c=1; ?>
                    @foreach($pr_pdts_list as $products)
                    <tr>
                      <td>{{$c++}}</td>
                      <td style="width: 40%;">
                        <select class="form-control select2" style="width: 100%" required="" name="product[]">
                          <option value="{{$products->product_id}}">{{$products->product->name}}</option>
                        </select>
                        <input type="hidden" value="{{$products->id}}" name="pr_sea_schd_ids[]">
                      </td>
                      <td style="width: 10%;">
                        <select class="form-control select2" pid="{{$products->product_id}}" style="width: 100%"  name="grade[]">
                           <option value="{{$products->grade_id or ''}}">{{$products->standard['standard'] or '-'}}/{{$products->grade->grade or ''}}</option>
                         </select>
                      </td>
                      <td style="width: 20%;">
                        <select class="form-control select2" pid="{{$products->product_id}}" style="width: 100%" required="" name="unit[]">
                           <option value="{{$products->unit_id or ''}}">{{$products->unit->unit}}</option>
                         </select>
                      </td>
                      <td style="width: 20%;">
                         <input type="text"  class="qty form-control"  name="qty[]" value="{{$products->apr_qty}}">
                      </td>
                      <td style="width: 8%;">
                         <input type="text" class="form-control"  value="{{$products->weight}}" name="weight[]" > 
                      </td>
                      <td style="width: 5%;"><input type="date" class="form-control" value="{{$products->scheduled_date}}" name="eta_dt[]"></td>
                      <td>
                         <input type="text" style="border: none; width: 100%;"   value="{{$products->actual_unit}}"  readonly>
                      </td>
                      <td style="width: 7%;">
                         <input type="text"  id="price"  class="prc form-control" value="{{$products->unitprice}}" name="unt_prc[]">
                      </td>
                      <td>
                         <input type="text" style="border: none; width: 100%;"  value="{{$products->price}}" id="total" name="total[]" class="total"  readonly>
                      </td>
                     <td>
                         <button type="button" class="btn-danger pdt_delete" id="{{$products->id}}"><i class="fa fa-fw fa-trash"></i></button>
                     </td>
                    </tr>
                    @endforeach
                  </tbody>  
                  </table>
              
            </div>
          </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <div class="box-tools pull-left">
            <input type="vutton" class="btn btn-success save_pdt" name="" title="Save" value="SAVE">
          </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 () {
    
    $.get("{{url('supplier_products/sea')}}",{supplier_id: $("#supplier_id").val()}, function(data){
     console.log(data);
      var supplier_products = jQuery.parseJSON(data[0]);
      grades = jQuery.parseJSON(data[1]);
      units = jQuery.parseJSON(data[2]);

      $(".new_pdts").filter(function(){
        var sp = null;
        sp = this;
        $.each(supplier_products,function(index,elements){
             $(sp).append("<option value='"+elements.id+"'>"+elements.name+"</option>");
        });
      });

      $(".new_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>");
          }
        });
      });

      $(".new_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>");
          }
        });
      });

    //toal calculation
  $(document).on("change",".qty", function() {
      
      var q = this;
      var qty = $(this).val();
      var price = $(q).closest('tr').find('td:nth-child(9) .prc').val();
      var sum = qty * price;
      $(q).closest('tr').find('td:nth-child(10) .total').val(sum);
      
  });  

  $(document).on("change",".prc", function() {

  var q = this;
  var qty = $(q).closest('tr').find('td:nth-child(5) .qty').val();
  var price = $(this).val();
  var sum = qty * price;
  $(q).closest('tr').find('td:nth-child(10) .total').val(sum);

  });

  //delete 

  $(document).on("click",".pdt_delete", function() {
      if(confirm("Do you want to delete this item?") == true){
        if($(this).attr("id")) {
          var id = $(this).attr("id");
          var q = this; 
          var qty = $(q).closest('tr').find('td:nth-child(5) .qty').val();
          $.get("{{url('supplier_sea_pr_product_cancel')}}",{id: id, qty : qty}, function(data){
          $('#'+id).closest("tr").remove();
          var i = 1;
          $('.pdt_table td:first-child').each(function() {
            $(this).text(i); 
            i++;
          });
          });
        }else{
          $(this).closest("tr").remove();
          var i = 1;
          $('.pdt_table td:first-child').each(function() {
            $(this).text(i); 
            i++;
          });
        }
      }
  });


   // add button action
    $(".add_button").click(function(){
     
       var rowCount = $('.pdt_table >tbody >tr').length; 
      $(".pdt_table tr:last").after("<tr><td>"+rowCount+"</td><td><select class='new_pdts wegt form-control select2' name='products[]' style='width:100%;' required='required'><option value='' selected>---- select -----</option></select></td><td><select class='new_grade form-control select2 wegt' name='grades[]' style='width:100%;'><option value='' selected>---- select -----</option></select></td><td><select class='new_unit form-control select2 wegt' name='units[]' style='width:100%;' required='required'><option value='' selected>---- select -----</option></select></td><td><input type='text' class='qty wegt form-control' name='qtys[]' required></td><td><input type='text' name='weights[]' class='form-control weight'></td><td><input type='date' name='eta_date[]' class='form-control'></td><td><input type='text' class='act_prc form-control' name='act_unit[]'></td><td><input type='text' class='prc form-control' name='prices[]'></td><td><input type='text' style='border:none;' class='total' name='totals[]'></td><td><button type='button' class='btn-danger pdt_delete' id=''><i class='fa fa-fw fa-trash'></i></button></td></tr>");

        
        // Initialize Select2 Elements to products
        $('.new_pdts').select2({
          data: jQuery.map(supplier_products, function(val,i){
          return {id: val['id'], text: val['name']} ;
          })
        });

    });

    $(document).on("change",".new_pdts", function()
    {
        
      $(this).removeAttr("selected");
      var chpr = this;
      $(this).closest('td').nextAll("td").find("select").empty();
      var pid = $(this).val();
      $.get("{{url('supplier_sea_pr_units')}}", {product_id: $(this).val(), supplier_id: $("#supplier_id").val()}, function(data){
          units = jQuery.parseJSON(data[1]);
          grades = jQuery.parseJSON(data[0]); 

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

    //cal weight
    $(document).on("change",".wegt", function() { 

       var wt = this;
       var pdt = $(wt).closest('tr').find('td:nth-child(2) .new_pdts').val();
       var unt = $(wt).closest('tr').find('td:nth-child(4) .new_unit').val();
       var grd = $(wt).closest('tr').find('td:nth-child(3) .new_grade').val();
       var qty = $(wt).closest('tr').find('td:nth-child(5) .qty').val();
       var sup = $('#supplier_id').val();
       if(unt > 0){
       $.get("{{url('sea/pdt/get/weight')}}",{pdt: pdt, unt:unt, grd:grd, qty:qty,sup:sup}, function(data){
            $(wt).closest('tr').find('td:nth-child(6) .weight').val(data[0]);
            $(wt).closest('tr').find('td:nth-child(8) .act_prc').val(data[1]);
            $(wt).closest('tr').find('td:nth-child(9) .prc').val(data[1]);
            $(wt).closest('tr').find('td:nth-child(10) .total').val(data[2]);
       }); 
      }
       
    });
    
    $(".save_pdt").click(function(){ 
      var check = new Array();
       $(".new_pdts").filter(function(){
        console.log($(this).val());
        if($(this).val() == '')
        {
          check.push($(this).val());
          $(this).closest("tr").find("td:nth-child(2) .new_pdts").css('border-color','#dd4b39');
          $(this).after("<i class='msger' style='color:red;margin-bottom: 20px;'>Please selectProduct</i>");
        }else{
         $(this).closest("tr").find("td:nth-child(2) .new_pdts").css('border-color','');
          $('.msger').hide(); 
        }
       });

       $(".qty").filter(function(){
        console.log($(this).val());
        if($(this).val() == '')
        {
          check.push($(this).val());
          $(this).closest("tr").find("td:nth-child(5) .qty").css('border-color','#dd4b39');
        }else{
          $(this).closest("tr").find("td:nth-child(5) .qty").css('border-color',''); 
        }
       });

       $(".prc").filter(function(){
        console.log($(this).val());
        if($(this).val() == '')
        {
          check.push($(this).val());
          $(this).closest("tr").find("td:nth-child(9) .prc").css('border-color','#dd4b39');
        }else{
          $(this).closest("tr").find("td:nth-child(9) .prc").css('border-color',''); 
        }
       });
       $(".new_unit").filter(function(){
        console.log($(this).val());
        if($(this).val() == '')
        {
          check.push($(this).val());
          $(this).closest("tr").find("td:nth-child(4) .new_unit").css('border-color','#dd4b39');
        }else{
          $(this).closest("tr").find("td:nth-child(4) .new_unit").css('border-color',''); 
        }
       });
       if(check.length === 0) {
        $('#supplier_pdt_save').submit();
       }
    });

  });

  })

</script>

</body>
</html>
