<!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')}}">
  <!-- DataTables -->
  <link rel="stylesheet" href="{{asset('lte/bower_components/datatables.net-bs/css/dataTables.bootstrap.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>
<body class="hold-transition skin-blue 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>
        {{$supplier->name}}
        <small> Product Rate Form</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="{{route('rate.entry.list')}}"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="{{route('rate.entry.list')}}">Supplier</a></li>
        <li class="active">lists</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">
                Date: {{date('d-m-Y')}}
              </h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <form action="{{url('sup_prd_rates')}}" method="POST">
              <input type="hidden" id="sup_id" name="sup_id" value="{{$id}}">
              <input type="hidden" name="pdt"  id="pdt" value="">
              <input type="hidden" name="currency" id="currency" value="{{$supplier->supplierCurrency->currency}}">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>Slno</th>
                  <th>Product</th>
                  <th>Grade</th>
                  <th>Current Price({{$supplier->supplierCurrency->currency}})</th>
                  <th>Cash Price({{$supplier->supplierCurrency->currency}})</th>
                  <th>Unit</th>
                  <th>Previous Price({{$supplier->supplierCurrency->currency}})</th>
                  <th>Previous Cash Price({{$supplier->supplierCurrency->currency}})</th>
                  <th></th>
                  <th></th>
                </tr>
                </thead>
                <tbody>
                <?php $c=1; ?>
                @foreach($supplier_products as $product)

                <tr>
                  <td>{{$c++}}</td>
                  <td>{{!is_null($product->product_id)? strtoupper($product->product->name) : ''}}
                     <input type="hidden" name="" id="{{$product->product->id}}" value="{{$product->product->name}}">
                  </td>
                  <td>
                    @if($product->standard_id != 0) {{$product->standard->standard}} @if($product->grade_id != 0) -{{$product->grade->grade}} @endif @endif
                    <input type="hidden" id="std{{$product->product->id}}" class="std" value="{{$product->standard_id}}">
                    <input type="hidden" id="grd{{$product->product->id}}" class="grd" value="{{$product->grade_id}}">
                  </td>
                  <td><input class="form-control dataentry form-element" type="text" value="{{$curr_price[$product->id]}}" name="price{{$product->id}}"> 
                  </td>
                  <td><input class="form-control dataentry form-element" type="text" value="{{$curr_cash[$product->id]}}" name="cash_price{{$product->id}}"></td>
                  <td>
                     <label id="unit_sup{{$product->product->id}}">{{$product->product->unitMaster->unit}}</label> 
                     <input type="hidden" name="unit{{$product->id}}" id="unit{{$product->product->id}}" value="{{$product->product->base_unit_id}}">
                  </td>
                  <td>
                    @if($prev[$product->id] != NULL)
                    {{$prev[$product->id]}}/{{$u_prev[$product->id]}}
                    @else
                    --
                    @endif
                  </td>
                  <td>
                    @if($prev_cash[$product->id] != NULL)
                    {{$prev_cash[$product->id]}}/{{$u_prev[$product->id]}}
                    @else
                    --
                    @endif
                  </td>
                  <td>
                     <button type="button" class="btn btn-default rate_pop" data-toggle="modal"  data-target="#modal-default" id="{{$product->product->id}}"><i class="fa fa-fw fa-plus" style="color: blue;"></i> </button>
                  </td>
                  <td><button type="button" class="remove" id="{{$product->id}}" style="background-color: white; border: none;"><i class="fa fa-trash" style="color: red;"></i></button></td>
                </tr>
                @endforeach
                </tbody>
                <tfoot>
                  <tr>
                    <th colspan="5">
                      <button class="btn btn-success dataentry pull-right" value="1" id="rate_save">Save</button>
                    </th>
                  </tr>
                </tfoot>
              </table>
             </form>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>

    <!-- /.content -->
  </div>
  <!-- model beg -->
   <div class="modal fade" id="modal-default">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"></h4>
                <label id="cc"></label> 
                <b id="name"></b>
              </div>
             
              <div class="modal-body">
               <table class="table table-bordered" id="units_tbl">
                 <thead>
                   <tr>
                   <th></th>
                   <th>Unit</th>
                   <th></th>
                 </tr>
                 </thead>
                 <tbody>
                 </tbody>
               </table>
                
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary add_su_unit" data-dismiss="modal" id="">Add</button>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>
  <!-- /.modal ending -->
  <!-- /.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>
<!-- DataTables -->
<script src="{{asset('lte/bower_components/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('lte/bower_components/datatables.net-bs/js/dataTables.bootstrap.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>

<!-- page script -->
<script>
  $(function () {
    $('#example2').DataTable()
    $('#example1').DataTable({
      'paging'      : false,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : false,
      'info'        : true,
      'autoWidth'   : true
    })
  })
</script>
</body>
<script type="text/javascript">
 $(document).on("click",".rate_pop", function() {
    var id = $(this).attr('id');
    var n = $(this).closest("tr").find("td:nth-child(4) .form-element").val();
    $('#pdt').val(id);
    var unit = $('#unit'+id).val();
    var sup = $('#sup_id').val();
    var pdt = $('#'+id).val();
    var name = $('#unit_sup'+id).text(); 
    var std = $(this).closest("tr").find("td:nth-child(3) .std").val();
    var grd = $(this).closest("tr").find("td:nth-child(3) .grd").val();
    var cr = $('#currency').val();
    $('#cc').replaceWith("<b id='cc'>"+pdt+"</b>");
    $('#name').replaceWith("<b id='name' style='margin-left:28%;'>Base Unit:"+n+" "+cr+"/"+name+"</b>"); 
    $('#units_tbl tbody').empty(); 
    
    $.get("{{url('product_units_fetch')}}", {option: id, unit:unit, supplier:sup,std:std,grd:grd}, function(data){console.log(data);
    var i = 1;  
      $.each(data,function(index, element){   
       $('#units_tbl tbody').append('<tr><td>'+i+'</td><td><b>'+element.unit+'</b></td><td><input type="number" name="sup_unit[]" class="form-control sup_unit" value='+element.unit_val+' ><input type="hidden" class="pdt_std" value='+std+'><input type="hidden" class="pdt_grd" value='+grd+'></td></tr>')
        i++;
      }); 
     
      
    });
 });//

 $(document).on("click",".add_su_unit", function() {
   var check = new Array();
   var id = $(this).attr('id');
     
     $(".sup_unit").filter(function(index) {
      check.push($(this).val());
      console.log($(this).val());
     }); 
     
     var sup = $('#sup_id').val();
     var pdt = $('#pdt').val();
     var unit = $('#unit'+pdt).val();
     var std = $(".pdt_std").val();
     var grd = $(".pdt_grd").val(); 
     
     $.get("{{url('sup_rate_unit')}}", {option: check,supplier:sup,product:pdt,unit:unit,std:std,grd:grd}, function(data){
          
           console.log(data);
     }); 
 });

$(document).on("click",".remove", function() {
  var id = $(this).attr("id");
    if(confirm("Do you want to delete this?")){
      $(this).closest("tr").remove();
      $.get("{{url('rate/entry/delete')}}", {option: id}, function(data){
        
        var i = 1;
        $('#example1 td:first-child').each(function() {
          $(this).text(i); 
          i++;
        });      
        
      }); 
    } 
    
 });
  
</script>

</html>
